amplify-ui icon indicating copy to clipboard operation
amplify-ui copied to clipboard

fix(docs): Add multiline support for underline animation on cards link

Open ioanabrooks opened this issue 2 years ago • 3 comments

Description of changes

This change add multi-line support for docs card link underline animation.

Before After
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.

ioanabrooks avatar Aug 05 '22 20:08 ioanabrooks

⚠️ 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

changeset-bot[bot] avatar Aug 05 '22 20:08 changeset-bot[bot]

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)?
Screen Shot 2022-08-08 at 1 32 42 PM Screen Shot 2022-08-08 at 1 31 06 PM
  • 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.

ioanabrooks avatar Aug 08 '22 18:08 ioanabrooks

  • 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?

hbuchel avatar Aug 08 '22 18:08 hbuchel