fix(switch): down state styles take precedence over hover #5524
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: bca581c The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 packages
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 |
Branch previewReview the following VRT differencesWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
If the changes are expected, update the |
Tachometer resultsChromeswitch permalinktest-basic
Firefoxswitch permalinktest-basic
|
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-1240-switch-down-state-s1
branch
from
36dda22 to
293e961
Compare
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-1240-switch-down-state-s1
branch
2 times, most recently
from
ae3b0ce to
4ba214b
Compare
cdransf
approved these changes
Jun 10, 2025
castastrophe
approved these changes
Jun 11, 2025
castastrophe
force-pushed
the
marissahuysentruyt/css-1240-switch-down-state-s1
branch
2 times, most recently
from
ceaa466 to
95e2b8c
Compare
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-1240-switch-down-state-s1
branch
from
95e2b8c to
a5155e9
Compare
castastrophe
force-pushed
the
marissahuysentruyt/css-1240-switch-down-state-s1
branch
from
a5155e9 to
b89f32f
Compare
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-1240-switch-down-state-s1
branch
from
b89f32f to
856fdb4
Compare
- corrects the active state colors for the handle and background, so it doesn't change if a user hovers or moves their mouse while still activating the switch. - ensure readonly switches don't show active state - add missing highcontrast variables - create changeset
marissahuysentruyt
force-pushed
the
marissahuysentruyt/css-1240-switch-down-state-s1
branch
from
856fdb4 to
bca581c
Compare
marissahuysentruyt
added
ready-for-merge
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This work builds off of the
spectrum-twofix for this in adobe/spectrum-css#3767, but addressing the same bug in the S1 context for SWC components. The switch in either context should now respond appropriately to the active state, with the active styles taking precedence over any hover styles. When a user now activates the active/down state, a visual difference can be noted, and that visual difference is no longer dependent on mouse movement (where it was incorrect before).New behavior
Screen.Recording.2025-06-10.at.9.51.52.AM.mov
Motivation and context
It was brought up in a Slack bug report that the switch may have some specificity issues between the hover and active states. The original message noted how to reproduce what they were seeing:
Production (old behavior)
Screen.Recording.2025-06-10.at.9.48.11.AM.mov
Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
S1
Unchecked switch down state styles
sp-switchand toggle:activeand:hoverstates in your browser tools.#switch::beforeelement renders--spectrum-switch-handle-border-color-down[@cdransf]Checked switch down state styles
sp-switchand toggle:activeand:hoverstates in your browser tools.#switch::beforeelement renders--spectrum-switch-handle-border-color-selected-down. [@cdransf]Additional validation
S2 foundations & Express
Device review