Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(picker): correct disabled state colors #2737

Merged
merged 3 commits into from
Jun 6, 2024

Conversation

jawinn
Copy link
Collaborator

@jawinn jawinn commented May 7, 2024

Description

Picker: The following states were showing a change of colors when they shouldn't:

  • Disabled + hover
  • Disabled + invalid + hover
  • Disabled + open
  • Disabled + open + hover

This was caused by a few different issues. One is that that the .spectrum-Picker:hover styles are being moved farther down in the built dist file, as part of the hover media query from the postcss-hover-media-feature plugin. The hover styles with the same specificity as the disabled styles were then later in the order than intended and overriding the disabled styles. The other is that the .is-open styles had a higher specificity than some of the disabled styles.

This also removes an unused variable flagged by the linter, --spectrum-picker-spacing-top-to-text-side-label-quiet. This was used nowhere in the file or repo.

CSS-754

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

  • Disabled + hover does not show color changes in Storybook
  • Disabled + invalid + hover does not show color changes in Storybook
  • Disabled + open does not show color changes in Storybook
  • Disabled + open + hover does not show color changes in Storybook

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and looked at.
  • Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • I have tested these changes in Windows High Contrast mode.
  • If my change impacts other components, I have tested to make sure they don't break.
  • If my change impacts documentation, I have updated the documentation accordingly.
  • ✨ This pull request is ready to merge. ✨

Copy link

changeset-bot bot commented May 7, 2024

🦋 Changeset detected

Latest commit: 879f00b

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/picker Patch

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

Copy link
Contributor

github-actions bot commented May 7, 2024

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

Copy link
Contributor

github-actions bot commented May 7, 2024

File metrics

Summary

Total size: 4.64 MB*
Total change (Δ): ⬇ 0.68 KB (-0.01%)

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

Package Size Δ
picker 30.38 KB ⬇ 0.27 KB

Details

picker

File Head Base Δ
index-base.css 28.47 KB 28.73 KB ⬇ 0.27 KB (-0.92%)
index-theme.css 2.49 KB 2.49 KB -
index-vars.css 30.38 KB 30.64 KB ⬇ 0.27 KB (-0.86%)
index.css 30.38 KB 30.64 KB ⬇ 0.27 KB (-0.86%)
metadata.json 14.88 KB 14.75 KB ⬆ 0.13 KB (0.87%)
themes/express.css 1.49 KB 1.49 KB -
themes/spectrum.css 1.58 KB 1.58 KB -
* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

@jawinn jawinn force-pushed the jawinn/css-754-picker-hover-specificity branch from cc668b0 to f1b7a65 Compare May 8, 2024 21:33
Copy link
Collaborator

@mdt2 mdt2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

@jawinn jawinn force-pushed the jawinn/css-754-picker-hover-specificity branch from f1b7a65 to a822601 Compare May 16, 2024 19:31
@jawinn jawinn added the run_vrt For use on PRs looking to kick off VRT label May 16, 2024
@pfulton pfulton force-pushed the jawinn/css-754-picker-hover-specificity branch from a822601 to 715258f Compare May 20, 2024 20:23
@jawinn jawinn force-pushed the jawinn/css-754-picker-hover-specificity branch 2 times, most recently from 0c7341f to 1d46acf Compare May 28, 2024 16:33
@jawinn jawinn requested a review from castastrophe May 30, 2024 18:52
@jawinn jawinn mentioned this pull request May 31, 2024
16 tasks
jawinn added 3 commits June 6, 2024 12:35
The following states were showing a change of colors:
- Disabled + hover
- Disabled + invalid + hover
- Disabled + open
- Disabled + open + hover

This was caused by two different issues. One is that the .is-open styles
had a higher specificity than some of the disabled styles. The other is
that the default :hover styles are being moved farther down in the built
dist file, as part of the hover media query from the
postcss-hover-media-feature plugin. The hover styles with the same
specificity as the disabled styles were then in a different order than
intended.
Remove unused custom property picked up by stylelint.
An alernative way to fix the issues caused by the
postcss-hover-media-feature plugin moving hover styles below where they
should be. Moves disabled styles to the very bottom, so they come after
the hover media query added during the build.
@castastrophe castastrophe force-pushed the jawinn/css-754-picker-hover-specificity branch from 1d46acf to 879f00b Compare June 6, 2024 16:35
@@ -32,7 +32,6 @@ governing permissions and limitations under the License.
--spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
--spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100);
--spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet);
--spectrum-picker-spacing-top-to-text-side-label-quiet: var(--spectrum-component-top-to-text-100);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you outline why these variables are okay to be removed in the PR description when you get a chance? I see that it's fine in the baselines but just want to have it documented for the future.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. It was an unused variable called out by the linter. Added to the PR description.

@castastrophe castastrophe merged commit 3278f88 into main Jun 6, 2024
12 of 13 checks passed
@castastrophe castastrophe deleted the jawinn/css-754-picker-hover-specificity branch June 6, 2024 18:45
@github-actions github-actions bot mentioned this pull request Jun 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready-for-review run_vrt For use on PRs looking to kick off VRT
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants