Fix disabled state in MGov's child button styles
Describe the bug
Some aspects of disabled state in the MGov Primary Alt Button, among others, is overridden by other CSS
To Reproduce
Steps to reproduce the behavior:
- Go to the Button page on MGov docs
- In devtools/inspector, find, e.g., the Primary Alt Button,
:disabledstate - Again in devtools, toggle
:hoverand:activestates - See the button state change incorrectly (
background-colorandcolor) - I can't entirely reproduce here, but in MCT's repo, with the CSS shown below, if I remove the nested
:focusselector, toggling:focusalso incorrectly changes the button'sbackground-colorandcolor(only a focus ring should show up)
Expected behavior
See the buttons in the CMSDS docs, and the MGov Default button. The :disabled state's background-color, color and behavior (e.g. pionter-events: none) all override declarations for other states, such as :hover, :active, and :focus
Screenshots
If applicable, add screenshots to help explain your problem.
See :disabled button with :active state has changed color, compared to the one above (not :active)
Desktop (please complete the following information):
- OS: Mac OSX 10.15.7
- Browser: Chrome, both desktop and responsive mode (same results in other desktop browsers)
- Version: 97.0.4692.99
Smartphone (please complete the following information):
Did not test
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context
In the MCT repo, I've added the following workaround for Button Primary Alt, and I'm not sure what the minimum necessary is to achieve the desired results. The fix should also take into account the use of the class ds-c-button--disabled, and not just the :disabled selector.
.ds-c-button--primary-alt:disabled {
&:active,
&:hover,
&:focus {
background-color: $color-gray-lighter !important;
color: $color-gray-dark !important;
@extend .ds-c-button--disabled;
}
}
Sorry this took so long to be picked up, @Josh68. This is now being tracked in Jira: https://jira.cms.gov/browse/WNMGDS-1669
Should be fixed in https://github.com/CMSgov/design-system/pull/2334