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

LG-4226: Fix double focus ring #190

Merged
merged 1 commit into from
Feb 25, 2021
Merged

LG-4226: Fix double focus ring #190

merged 1 commit into from
Feb 25, 2021

Conversation

aduth
Copy link
Member

@aduth aduth commented Feb 25, 2021

This pull request seeks to resolve an issue where focused buttons appear with two focus rings. The button styles included in the design system intend to unset the inherited focus styles from USWDS, but are not of high enough specificity to override the styles.

Reference: https://github.com/uswds/uswds/blob/1f9bb1cc/src/stylesheets/global/_focus.scss#L1-L11

Before After
before after

This pull request seeks to resolve an issue where focused buttons appear with two focus rings. The button styles included in the design system intend to unset the inherited focus styles from USWDS, but are not of high enough specificity to override the styles.

Reference: https://github.com/uswds/uswds/blob/1f9bb1cc/src/stylesheets/global/_focus.scss#L1-L11
Copy link
Contributor

@anniehirshman-gsa anniehirshman-gsa left a comment

Choose a reason for hiding this comment

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

Before/After LGTM! 👍 This applies to all the other types of buttons too?

@aduth
Copy link
Member Author

aduth commented Feb 25, 2021

This applies to all the other types of buttons too?

The fix does apply, yeah. There's a couple custom revisions we'll still need to make for focus styles for the unstyled buttons, since that variant isn't really styled by us at all and appears pretty broken in its current state. I'm working on that right now in a separate branch which will "introduce" unstyled as a new option.

Copy link
Contributor

@anniehirshman-gsa anniehirshman-gsa left a comment

Choose a reason for hiding this comment

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

Great thanks!

@aduth aduth merged commit ca8c31c into main Feb 25, 2021
@aduth aduth deleted the lg-4226-double-focus-ring branch February 25, 2021 15:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants