amplify-ui
amplify-ui copied to clipboard
fix(docs): Add multiline support for underline animation on cards link
Description of changes
This change add multi-line support for docs card link underline animation.
Before | After |
---|---|
![]() |
![]() |
Issue #, if available
Description of how you validated changes
Checklist
- [x] PR description included
- [x]
yarn test
passes - [ ] Tests are updated
- [x] No side effects or
sideEffects
field updated - [ ] Relevant documentation is changed or added (and PR referenced)
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
⚠️ No Changeset found
Latest commit: dd8621a60e2f00711c3f69e2d620fcdb0c9426e6
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
Nice! Just some general comments/questions:
- Is there anything we can do about descenders? I wonder if the text had a solid text shadow (or something)?
![]()
![]()
- Should we speed up the animation? It feels a little sluggish for a hover affect to me, but what do you think?
And just a note that there is another variation used on the docs pages (like /react/theming/default-theme and /react/connected-components/authenticator#next-steps) if you need to check that variation also.
- I opted to have the underline completely clear of descenders for readability [before I added the animation it was just a text decoration underline].
- The screen capture is capped at 25 frames so may look more sluggish, pls check the ui.docs site, the animation is live atm, just without multi-line support, duration matches the card slide effect.
- I opted to have the underline completely clear of descenders for readability [before I added the animation it was just a text decoration underline].
That's fair. I was thinking of how browsers (or at least chrome?) deals with it by having some spacing around (to the left and right) of the descender so it doesn't get swallowed up by the underline (especially for letters like g). Not a blocker
- The screen capture is capped at 25 frames so may look more sluggish, pls check the ui.docs site, the animation is live atm, just without multi-line support, duration matches the card slide effect.
Yeah that is what I was referencing is from running the local version. For some reason it seems slower than what is on live?