Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a-btn--hide-icon class #2103

Merged
merged 1 commit into from
Nov 12, 2024
Merged

Add a-btn--hide-icon class #2103

merged 1 commit into from
Nov 12, 2024

Conversation

anselmbradford
Copy link
Member

@anselmbradford anselmbradford commented Nov 7, 2024

When a button with an animating "updating" icon is used, the icon would generally be hidden when the action is complete. However, the DS did not have a standard way of hiding the icon and applications set their own CSS to accomplish this (e.g. https://www.consumerfinance.gov/privacy/records-access/). This PR adds a class that hides the icon (and the icon divider!)

Additions

  • Add a-btn--hide-icon class

Testing

  1. Visit the buttons page in the PR preview and edit any button with icon CSS to add a-btn a-btn--hide-icon and see that the icon and divider magically disappear! 🪄

Copy link

netlify bot commented Nov 7, 2024

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

Name Link
🔨 Latest commit d4bf92c
🔍 Latest deploy log https://app.netlify.com/sites/cfpb-design-system/deploys/672cdbe6f1637d0008d8f190
😎 Deploy Preview https://deploy-preview-2103--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.

Copy link
Member

@contolini contolini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Normally I'd advocate for just using the u-hidden utility class but it's the nested SVGs that need targeting so this looks good 👍

@anselmbradford anselmbradford merged commit 3788526 into main Nov 12, 2024
8 checks passed
@anselmbradford anselmbradford deleted the ans_hide_icon branch November 12, 2024 13:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

2 participants