fix(switch): active down state specificity

[saashapina]

Description

CSS-1176

RE

This looks like the regression was caused by the postcss plugin that adds @media (hover: hover). In the dist, it moves the hover CSS near the end off the CSS, changing its intended specificity from where it appears in the code; :hover is written to be before :active and I can see that the active state works correctly if postcss-hover-media-feature is temporarily disabled.

• Adds specificity to active down state to maintain active down state styles when active.

Note:We should consider conducting an audit to check for any additional hover specificity regressions introduced by this plugin.

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

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.

2. 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.

Screenshots

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. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 52a70a4

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/switch	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

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 1.41 MB^*

Package	Size	Minified	Gzipped
switch	25.68 KB	24.51 KB	2.75 KB

switch

Filename	Head	Minified	Gzipped	Compared to base
index.css	25.68 KB	24.51 KB	2.75 KB	🔴 ⬆ 1.00 KB
metadata.json	13.54 KB	-	-	🔴 ⬆ 0.86 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

markdownlint-fix

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 287 in a51655a

"--spectrum-menu-item-min-height",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 294 in a51655a

"--spectrum-menu-item-spacing-multiplier",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 296 in a51655a

"--spectrum-menu-item-top-edge-to-text",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 304 in a51655a

"--spectrum-menu-item-value-color-default",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 308 in a51655a

"--spectrum-menu-section-header-color",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 313 in a51655a

"--spectrum-menu-section-header-min-width"

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 319 in a51655a

"--spectrum-blue-800",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 321 in a51655a

"--spectrum-border-width-200",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 335 in a51655a

"--spectrum-component-top-to-text-100",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 339 in a51655a

"--spectrum-corner-radius-100",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 343 in a51655a

"--spectrum-focus-indicator-color",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 344 in a51655a

"--spectrum-focus-indicator-thickness",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 350 in a51655a

"--spectrum-gray-1000-rgb",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 353 in a51655a

"--spectrum-navigational-indicator-top-to-back-icon-extra-large",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 365 in a51655a

"--spectrum-spacing-100",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 374 in a51655a

"--spectrum-text-to-visual-75",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/menu/dist/metadata.json

Line 375 in a51655a

"--spectrum-transparent-black-200-opacity",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Lines 7 to 8 in a51655a

	".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before",
	".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 25 in a51655a

".spectrum-Swatch--sizeM",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 32 in a51655a

".spectrum-Swatch-image",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 33 in a51655a

".spectrum-Swatch-mixedValueIcon",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 37 in a51655a

".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Lines 38 to 41 in a51655a

	".spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon",
	".spectrum-Swatch.is-nothing .spectrum-Swatch-fill",
	".spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after",
	".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle .spectrum-Swatch-fill:after",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 46 in a51655a

".spectrum-Swatch:after",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 48 in a51655a

".spectrum-Swatch:focus-visible:after",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 53 in a51655a

"--mod-animation-duration-100",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 54 in a51655a

"--mod-swatch-border-color",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 55 in a51655a

"--mod-swatch-border-color-light",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 57 in a51655a

"--mod-swatch-border-radius",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 62 in a51655a

"--mod-swatch-focus-indicator-border-radius",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 67 in a51655a

"--mod-swatch-inner-border-color-selected",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 73 in a51655a

"--spectrum-swatch-border-color",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 74 in a51655a

"--spectrum-swatch-border-color-light",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 76 in a51655a

"--spectrum-swatch-border-radius",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 79 in a51655a

"--spectrum-swatch-dash-icon-color",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 82 in a51655a

"--spectrum-swatch-focus-indicator-border-radius",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 87 in a51655a

"--spectrum-swatch-inner-border-color-selected",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 88 in a51655a

"--spectrum-swatch-size",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 101 in a51655a

"--spectrum-animation-duration-100",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 105 in a51655a

"--spectrum-focus-indicator-color",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 108 in a51655a

"--spectrum-gray-25",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Lines 109 to 110 in a51655a

	"--spectrum-gray-800",
	"--spectrum-gray-900",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 112 in a51655a

"--spectrum-red-900",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 114 in a51655a

"--spectrum-workflow-icon-size-100",

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatch/dist/metadata.json

Line 126 in a51655a

"--highcontrast-swatch-focus-indicator-color"

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatchgroup/dist/metadata.json

Line 6 in a51655a

".spectrum-SwatchGroup--spacious"

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatchgroup/dist/metadata.json

Lines 8 to 11 in a51655a

	"modifiers": [
	"--mod-swatchgroup-spacing-compact",
	"--mod-swatchgroup-spacing-regular",
	"--mod-swatchgroup-spacing-spacious"

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatchgroup/dist/metadata.json

Line 13 in a51655a

"component": ["--spectrum-swatchgroup-spacing"],

---

[markdownlint-fix] _{reported by reviewdog 🐶}

spectrum-css/components/swatchgroup/dist/metadata.json

Line 19 in a51655a

"passthroughs": [],

[castastrophe]

I can see why we need the extra specificity but I'm not sure it will translate well when it gets to the web component (.spectrum-Switch.spectrum-Switch converted likely to :host:host). We can merge this in but would you mind adding some details about what selectors it's clashing with and why we added it?

[castastrophe]

Could you expound a little on this in a long format? We use this information to populate our Changelogs so we try to include as much as possible to help customers validate this update on their end.

[castastrophe]

Can you add a comment about the specificity this helps with? This won't likely translate to the web component (:host:host) so we want to document that issue if we can.

[5t3ph]

It looks like what it will convert to - :host(:active):host(:active) - is accepted as a selector, and does bump specificity.

However, there is still a conflict when the switch is both checked and active:

Maybe we need to add a few more states to the testing grid for "Active + Unchecked" and "Active + Checked"