feat(switch): s2 migration

[mdt2]

Description

Migrate Switch component to align with Spectrum 2 design spec. Includes:

• Make medium t-shirt size the default, removing .spectrum-Switch--sizeM class
• Rework of Windows High Contrast Mode to only need custom prop reassignment to work (no more custom CSS for WHCM)
• Refactor states to be within their parent for ease of reading and editing the code in the future
• Update story instances and add Chromatic coverage where possible
• Mod changes. A lot of mods had to be updated for this migration because of the design changes for this component (addition of a track border, handle color change, removal of border on handle, etc). You can find documentation for the affected mods here: https://github.com/adobe/spectrum-css/pull/2651/files#diff-502c3aa8ef2c53072543f6bfaaf332e97df6f71e8bc80f4e402c351a07c8c9bdR9-R56

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

For Default and Emphasized in Storybook, validate these cases: @rise-erpelding

• Unchecked
• Unchecked hover
• Unchecked active
• Unchecked with keyboard focus
• Unchecked disabled (ensure no hover state or transforms occur)
• Checked
• Checked hover
• Checked active
• Checked with keyboard focus
• Checked disabled (ensure no hover state or transforms occur)

Other validation steps:

• Check the new Chromatic coverage by toggling the test preview @rise-erpelding
• Ensure that the states look good at various t-shirt and platform sizes @rise-erpelding
• Peek at WHCM for default and emphasized @rise-erpelding
• Design approval @mdt2 (approved in slack)

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.

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 documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 4.55 MB^*
Total change (Δ): ⬇ 0.60 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	Δ
switch	26.36 KB	⬆ 0.96 KB

Details

switch

File	Head	Base	Δ
index-base.css	26.36 KB	24.08 KB	⬆ 2.28 KB (9.47%)
index-vars.css	26.36 KB	25.43 KB	⬆ 0.96 KB (3.68%)
index.css	26.36 KB	25.43 KB	⬆ 0.96 KB (3.68%)
metadata.json	12.61 KB	12.92 KB	⬇ 0.32 KB (-2.40%)
index-theme.css	-	1.92 KB	🚨 deleted, moved, or renamed
themes/express.css	-	1.26 KB	🚨 deleted, moved, or renamed
themes/spectrum.css	-	1.25 KB	🚨 deleted, moved, or renamed

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

[rise-erpelding]

This is looking really nice! It matches the design spec and the new/updated tokens! My main callouts below are questions because I'm still relatively new here.

I was also wondering about the switch animation, it looks like some things about it may have unintentionally changed, when clicking the switch from off to on, the switch animates the way I'd expect it to (I click, and on mouse up I see the switch handle transform from left to right at the same time that the color transitions). When clicking the switch from on to off, though, the switch handle moves left on mouse down and the color transitions on mouse up, which is a change from the previous version:

switch-animation.mov

[jawinn]

This looks great, including the Storybook Chromatic template and the down state. I only noticed two small things and have one Storybook suggestion.

Checked state corners

I noticed one oddity in the way the corners are appearing when the Switch is in the checked state. The edges look a little squared off as compared to when it is unchecked (Chrome, non-retina monitor).

I experimented in the inspector a little bit and if I set the ::after pseudo element to an opacity of 0, the jaggedness goes away. It looks like this has a border and it's not playing well when it's layered on top of the background in the same spot; is this element needed or only for high contrast mode?

High contrast selected

The circle looks a little hard to read for me with the white (CanvasText?) on top of Highlight. I'm wondering if it's be better to use a contrasting HighlightText here for the circle.

Suggestion: focused in Storybook

Would it be possible to also show the focused state in Storybook, like it was added recently for ActionButton? It'd be good to have that captured in VRTs if possible.

[mdt2]

@jawinn thanks for the feedback! Some answers:

• Checked state corners - Good question. The ::after pseudo element is used for the focus state. So setting ::after to opacity: 0 breaks the focus state. I don't have access to a non-retina monitor, so I'll need you to double check if my solution attempt worked, but what I did was move the border to .spectrum-Switch-switch in hopes that having the border and the background-color in the same place might help.

• High contrast selected - Great suggestion, thank you! I've updated to HighlightText

• Suggestion: focused in Storybook - While it would be nice to have coverage in Chromatic for these states, when we wire that up in Storybook (example in ActionButton), it adds classes like is-hover and is-focus-visible to the markup (image below)... In the past we've made the choice not to add a class in Storybook if the component wouldn't get a class normally (like in the case of .is-keyboardFocused where we have CSS associated with that class). It feels like we need to have a bigger discussion of what our standard should be here

  •