-
Notifications
You must be signed in to change notification settings - Fork 931
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
Button: Include explicit state classes in unstyled hover, active overrides #4077
Button: Include explicit state classes in unstyled hover, active overrides #4077
Conversation
…ides The unstyled button mixin customizes the hover and active appearance of a button, but only applies this with the browser-native `:hover` and `:active` modifiers, and not with USWDS' explicit `usa-button--hover` and `usa-button--active` modifier classes.
I just noticed this also happens with disabled unstyled buttons, regardless if disabling is applied by browser-native Screenshot: I could include a fix for that here as well, which I expect would amount to expanding the existing selector to also include... &:disabled,
&.usa-button--disabled, |
Another thing I'm noticing is that we rely on the |
Co-authored-by: Dan O. Williams <11464021+thisisdano@users.noreply.github.com>
Extended for hover and active states in 9cb66ff . |
Today I encountered another conflict where a button can be both uswds/src/stylesheets/core/mixins/_button-disabled.scss Lines 7 to 16 in 0f1f4d0
uswds/src/stylesheets/elements/_buttons.scss Lines 49 to 51 in 0f1f4d0
The selector being revised here could be expanded to include those additional combination of states, to ensure that the background color is being reset correctly to
Context: 18F/identity-idp#4881 |
The only outstanding thing is this comment about disabled states in |
Oops, I'd meant to revisit this sooner, though I'm glad I'd at least left a comment about the finding 😅 I pushed a change for this in 8a4a326. Overall I wish it wouldn't be necessary to have such a large grouping of selectors, though there's a lot of different states to account for. This should now account for the disabled hover, active, and focus styles for the mixin's usage in both |
* Remove upstream-patched disabled button styling See: uswds/uswds#4077 * Limit active disabled button styles to default button **Why**: Because the styling was only implemented with the expectation of use with the default button, and conflicts with other button states (e.g. unstyled buttons used as the submit buttons on some forms). Previously: #6564 changelog: Improvements, Forms, Use pressed state appearance for buttons disabled on form submission
Description
The unstyled button mixin customizes the hover and active appearance of a button, but only applies this with the browser-native
:hover
and:active
modifiers, and not with USWDS' explicitusa-button--hover
andusa-button--active
modifier classes.Additional information
Before these changes, if one would apply
usa-button--hover
to an unstyled button, the overrides in these styles would not be applied, most notably the background color. You can test this by addingusa-button--hover
class to the "Unstyled button" example in the Buttons component page.Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm test
and make sure the tests for the files you have changed have passed.