Button: Include explicit state classes in unstyled hover, active overrides

[aduth]

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' explicit usa-button--hover and usa-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 adding usa-button--hover class to the "Unstyled button" example in the Buttons component page.

Before	After

---

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

[aduth]

I just noticed this also happens with disabled unstyled buttons, regardless if disabling is applied by browser-native disabled attribute or using the .usa-button--disabled modifier class.

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,

[aduth]

Another thing I'm noticing is that we rely on the typeset-link mixin to apply text color for states, but that only applies those styles using :hover, :active, and :focus.

[aduth]

Another thing I'm noticing is that we rely on the typeset-link mixin to apply text color for states, but that only applies those styles using :hover, :active, and :focus.

Extended for hover and active states in 9cb66ff . usa-focus works well as-is.

[aduth]

Today I encountered another conflict where a button can be both :active and :disabled, which also conflicts with styles between the unstyled button and default disabled button styles in _button-disabled.scss:

uswds/src/stylesheets/core/mixins/_button-disabled.scss

Lines 7 to 16 in 0f1f4d0

	&:hover,
	&.usa-button--hover,
	&:active,
	&.usa-button--active,
	&:focus,
	&.usa-focus {
	background-color: color("disabled");
	border: 0;
	box-shadow: none;
	}

uswds/src/stylesheets/elements/_buttons.scss

Lines 49 to 51 in 0f1f4d0

	&:disabled {
	@include button-disabled;
	}

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 transparent:

  &.usa-button:disabled:hover,
  &.usa-button:disabled.usa-button--hover,
  &.usa-button:disabled:active,
  &.usa-button:disabled.usa-button--active,
  &.usa-button:disabled:focus,
  &.usa-button:disabled.usa-focus

Context: 18F/identity-idp#4881

[mejiaj]

The only outstanding thing is this comment about disabled states in uswds/src/stylesheets/elements/_buttons.scss.

[aduth]

The only outstanding thing is this comment about disabled states in uswds/src/stylesheets/elements/_buttons.scss.

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 .usa-button:disabled and .usa-button--disabled.