design-system icon indicating copy to clipboard operation
design-system copied to clipboard

Fix disabled state in MGov's child button styles

Open Josh68 opened this issue 3 years ago • 1 comments

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:

  1. Go to the Button page on MGov docs
  2. In devtools/inspector, find, e.g., the Primary Alt Button, :disabled state
  3. Again in devtools, toggle :hover and :active states
  4. See the button state change incorrectly (background-color and color)
  5. I can't entirely reproduce here, but in MCT's repo, with the CSS shown below, if I remove the nested :focus selector, toggling :focus also incorrectly changes the button's background-color and color (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;
  }
}

Josh68 avatar Jan 26 '22 00:01 Josh68

Sorry this took so long to be picked up, @Josh68. This is now being tracked in Jira: https://jira.cms.gov/browse/WNMGDS-1669

pwolfert avatar May 11 '22 23:05 pwolfert

Should be fixed in https://github.com/CMSgov/design-system/pull/2334

pwolfert avatar Mar 02 '23 19:03 pwolfert