cfpb / design-system

CFPB's work-in-progress design system
https://cfpb.github.io/design-system
Creative Commons Zero v1.0 Universal
41 stars 13 forks source link

Remove `a-link--icon-before-text` and `a-link--icon-after-text` #1987

Closed anselmbradford closed 5 months ago

anselmbradford commented 5 months ago

Jump links required both the a-link--jump and a-link--icon-after-text (or a-link--icon-before-text) modifiers to correctly layout with an icon. However, using flexbox we can have these links correctly layout whether or not they have an icon and whether or not it's on the left or right-hand side.

Removals

Changes

Testing

  1. Visit https://deploy-preview-1987--cfpb-design-system.netlify.app/design-system/components/links and check out the jump links across screen sizes.

Screenshots

Screenshot 2024-05-29 at 6 01 40 PM Screenshot 2024-05-29 at 6 01 47 PM
netlify[bot] commented 5 months ago

Thanks for the improvements! Browse a preview of your changes using the link below.

Name Link
Latest commit c557ed904ca48b267a1fc8fcc3d1ba03638f841b
Latest deploy log https://app.netlify.com/sites/cfpb-design-system/deploys/6657a517d312050008f35e6d
Deploy Preview https://deploy-preview-1987--cfpb-design-system.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

anselmbradford commented 5 months ago

I realized this won't work out if we have a jump link that has an external icon, but I'll merge this and then open a follow up PR that handles that case and does some other cleanup.