Fix spinner button active color#6774
Conversation
**Why**: Because the spinner button retains its original shape by setting the text color to transparent, which was being overridden by the new active styles introduced in #6564. changelog: Bug Fixes, Buttons, Fix spinner button active state appearance
| .usa-button:disabled.usa-button--active:not(.usa-button--unstyled, .usa-button--secondary, .usa-button--accent-cool, .usa-button--accent-warm, .usa-button--base, .usa-button--outline, .usa-button--inverse), | ||
| .usa-button--disabled.usa-button--active:not(.usa-button--unstyled, .usa-button--secondary, .usa-button--accent-cool, .usa-button--accent-warm, .usa-button--base, .usa-button--outline, .usa-button--inverse) { |
There was a problem hiding this comment.
I'm not thrilled about this selector, but each of these :not's from the original selector increase specificity, so we must match them in order to override the styles. (We could use !important, but I try to avoid !important at all costs)
The plan is to avoid the :not selectors altogether by providing active, disabled styles for all button states, which may have helped avoid this issue in the first place, or at least will allow us to simplify the selector greatly.
That's tracked at LG-7269.
Specifically, this note in the ticket:
The IdP implementation is limited to the default button, but ideally the design system should include styles for all button variants
zachmargolis
left a comment
There was a problem hiding this comment.
yikes, good catch, glad to see the cleanup for those selectors is tracked
LGTM
Fixes regression introduced in #6564
Why: Because the spinner button retains its original shape by setting the text color to transparent, which was being overridden by the new active styles introduced in #6564.