adobe / spectrum-css

The standard CSS implementation of the Spectrum design language.
http://opensource.adobe.com/spectrum-css/
Apache License 2.0
1.2k stars 195 forks source link

fix(button -> negative): corrects interior label background color to align with parent #3078

Closed cdransf closed 1 month ago

cdransf commented 1 month ago

Description

How and where has this been tested?

Verified in Assistiv Labs high contrast mode-enabled Windows VM.

Validation steps

  1. Run Storybook locally (or reference the link for this PR).
  2. Navigate to Assistiv Labs and start a Windows High Contrast Mode VM (if running the branch locally, you'll need to enable the Assistiv Labs tunnel to access Storybook).
  3. Enable Windows High Contrast Mode.
  4. Navigate to the Button component in Storybook.
  5. Select the negative variant.
  6. Zoom in and verify that the there is no background (the button background should be a uniform color).

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  1. If components have been modified, VRTs have been run on this branch:

Screenshots

Screenshot 2024-09-12 at 4 46 58 PM Screenshot 2024-09-12 at 4 46 12 PM

To-do list

changeset-bot[bot] commented 1 month ago

🦋 Changeset detected

Latest commit: 4dc7f9e64234f415061227c02623140b08f84ae8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package | Name | Type | | -------------------- | ----- | | @spectrum-css/button | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions[bot] commented 1 month ago

🚀 Deployed on https://pr-3078--spectrum-css.netlify.app

github-actions[bot] commented 1 month ago

File metrics

Summary

Total size: 4.11 MB* Total change (Δ): ⬆ 2.90 KB (0.07%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package Size Δ
button 83.96 KB ⬆ 0.99 KB

Details #### button | File | Head | Base | Δ | | - | - | - | - | | index-base.css | 54.01 KB | 53.04 KB | ⬆ 0.99 KB (1.82%) | | index-theme.css | 30.56 KB | 30.56 KB | - | | index-vars.css | 83.96 KB | 82.99 KB | ⬆ 0.99 KB (1.16%) | | **index.css** | 83.96 KB | 82.99 KB | ⬆ 0.99 KB (1.16%) | | themes/express.css | 29.37 KB | 29.37 KB | - | | themes/spectrum.css | 29.43 KB | 29.43 KB | - |

cdransf commented 1 month ago

Do we need to ensure that this looks consistent in light mode as well? I'm seeing some introduced issues here that might need to be taken care of if so:

(In AssistivTunnel, with the High Contrast White theme): image

(In Chrome, emulating forced colors and prefers-color-scheme: light): image

Do we need to ensure that this looks consistent in light mode as well? I'm seeing some introduced issues here that might need to be taken care of if so:

(In AssistivTunnel, with the High Contrast White theme): image

(In Chrome, emulating forced colors and prefers-color-scheme: light): image

✨ Huh — it looks like the button-content-color tokens are getting set in the button's index.css file but not defined. Setting them on .spectrum-Button looks good (and they can be updated by subsequent declarations specific to different states):

.spectrum-Button {
  --highcontrast-button-content-color-default: ButtonText;
  --highcontrast-button-content-color-hover: ButtonText;
  --highcontrast-button-content-color-focus: ButtonText;
  --highcontrast-button-content-color-down: ButtonText;
}

The styles aren't terribly distinct, but I imagine the available colors don't allow them to be.

Screenshot 2024-09-12 at 4 46 58 PM Screenshot 2024-09-12 at 4 46 12 PM