Skip to content

Commit b3b3aa5

Browse files
Melissa Thompsonpfulton
Melissa Thompson
authored and
pfulton
committed
feat(switch): s2 migration (#2651)
* feat(switch): s2 migration * chore: remove themes * fix: animation * fix: whcm light mode unchecked handle shows * docs(storybook): align chromatic setup with new standard * fix: checked corners for non-retina display * fix: whcm handle selected color * fix: namespace mods, use semantic tokens instead of global * fix: handle state colors
1 parent 1f462ac commit b3b3aa5

File tree

7 files changed

+490
-415
lines changed

7 files changed

+490
-415
lines changed

‎components/switch/index.css

+232-283
Large diffs are not rendered by default.

‎components/switch/metadata/mods.md

+49-39
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,49 @@
1-
| Modifiable custom properties |
2-
| --------------------------------------------------- |
3-
| `--mod-animation-duration-100` |
4-
| `--mod-animation-duration-200` |
5-
| `--mod-border-width-200` |
6-
| `--mod-focus-indicator-gap` |
7-
| `--mod-focus-indicator-thickness` |
8-
| `--mod-line-height-100` |
9-
| `--mod-switch-background-color` |
10-
| `--mod-switch-background-color-disabled` |
11-
| `--mod-switch-background-color-selected-default` |
12-
| `--mod-switch-background-color-selected-disabled` |
13-
| `--mod-switch-background-color-selected-down` |
14-
| `--mod-switch-background-color-selected-focus` |
15-
| `--mod-switch-background-color-selected-hover` |
16-
| `--mod-switch-control-height` |
17-
| `--mod-switch-control-label-spacing` |
18-
| `--mod-switch-control-width` |
19-
| `--mod-switch-focus-indicator-color` |
20-
| `--mod-switch-focus-indicator-thickness` |
21-
| `--mod-switch-font-size` |
22-
| `--mod-switch-handle-background-color` |
23-
| `--mod-switch-handle-border-color-default` |
24-
| `--mod-switch-handle-border-color-disabled` |
25-
| `--mod-switch-handle-border-color-down` |
26-
| `--mod-switch-handle-border-color-focus` |
27-
| `--mod-switch-handle-border-color-hover` |
28-
| `--mod-switch-handle-border-color-selected-default` |
29-
| `--mod-switch-handle-border-color-selected-down` |
30-
| `--mod-switch-handle-border-color-selected-focus` |
31-
| `--mod-switch-handle-border-color-selected-hover` |
32-
| `--mod-switch-height` |
33-
| `--mod-switch-label-color-default` |
34-
| `--mod-switch-label-color-disabled` |
35-
| `--mod-switch-label-color-down` |
36-
| `--mod-switch-label-color-focus` |
37-
| `--mod-switch-label-color-hover` |
38-
| `--mod-switch-spacing-top-to-control` |
39-
| `--mod-switch-spacing-top-to-label` |
1+
| Modifiable custom properties |
2+
| -------------------------------------------------------- |
3+
| `--mod-switch-animation-duration-100` |
4+
| `--mod-switch-animation-duration-200` |
5+
| `--mod-switch-background-color` |
6+
| `--mod-switch-background-color-disabled` |
7+
| `--mod-switch-background-color-selected-default` |
8+
| `--mod-switch-background-color-selected-disabled` |
9+
| `--mod-switch-background-color-selected-down` |
10+
| `--mod-switch-background-color-selected-focus` |
11+
| `--mod-switch-background-color-selected-hover` |
12+
| `--mod-switch-border-color-default` |
13+
| `--mod-switch-border-color-disabled` |
14+
| `--mod-switch-border-color-down` |
15+
| `--mod-switch-border-color-focus` |
16+
| `--mod-switch-border-color-hover` |
17+
| `--mod-switch-border-color-selected-default` |
18+
| `--mod-switch-border-color-selected-down` |
19+
| `--mod-switch-border-color-selected-focus` |
20+
| `--mod-switch-border-color-selected-hover` |
21+
| `--mod-switch-border-radius` |
22+
| `--mod-switch-border-width` |
23+
| `--mod-switch-cjk-line-height` |
24+
| `--mod-switch-control-height` |
25+
| `--mod-switch-control-label-spacing` |
26+
| `--mod-switch-control-width` |
27+
| `--mod-switch-focus-indicator-color` |
28+
| `--mod-switch-focus-indicator-gap` |
29+
| `--mod-switch-focus-indicator-thickness` |
30+
| `--mod-switch-font-size` |
31+
| `--mod-switch-handle-background-color-default` |
32+
| `--mod-switch-handle-background-color-disabled` |
33+
| `--mod-switch-handle-background-color-down` |
34+
| `--mod-switch-handle-background-color-focus` |
35+
| `--mod-switch-handle-background-color-hover` |
36+
| `--mod-switch-handle-background-color-selected` |
37+
| `--mod-switch-handle-background-color-selected-disabled` |
38+
| `--mod-switch-handle-selected-size` |
39+
| `--mod-switch-handle-size` |
40+
| `--mod-switch-height` |
41+
| `--mod-switch-label-color-default` |
42+
| `--mod-switch-label-color-disabled` |
43+
| `--mod-switch-label-color-down` |
44+
| `--mod-switch-label-color-focus` |
45+
| `--mod-switch-label-color-hover` |
46+
| `--mod-switch-line-height` |
47+
| `--mod-switch-spacing-bottom-to-label` |
48+
| `--mod-switch-spacing-top-to-control` |
49+
| `--mod-switch-spacing-top-to-label` |

‎components/switch/metadata/switch.yml

+47-12
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,55 @@ sections:
66
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/switch/metadata/mods.md">here</a>.
77
- name: Migration Guide
88
description: |
9-
### Component renamed
10-
Toggle is now known as Switch. Replace all `.spectrum-ToggleSwitch*` classnames with `.spectrum-Switch*`.
11-
### T-shirt sizing
12-
Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch--size* class. The default size is "medium".
13-
### Quiet and emphasized
14-
Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default.
15-
If you were using the `quiet` variant, the `.spectrum-Switch--quiet` class is no longer required and can be removed.
16-
If you need a switch to look like it did before this change, add `.spectrum-Switch--emphasized`.
9+
### Version 5.0.0
10+
#### S2 Migration
11+
Switch now uses Spectrum 2 tokens and specifications. The following properties have been adjusted:
1712
18-
### A/B toggle variant removed
19-
It's been deprecated and removed. A similar use case could be served by using Radio buttons.
13+
- Medium is now the default size and `.spectrum-Switch--sizeM` has been removed
14+
- Switch includes the Spectrum 2 down state transform
15+
- Due to design changes (addition of a track border, handle color change, removal of border on handle, etc.), many mods required updates:
16+
- Renamed mods:
17+
- `--mod-animation-duration-100` renamed to `--mod-switch-animation-duration-100`
18+
- `--mod-animation-duration-200` renamed to `--mod-switch-animation-duration-200`
19+
- `--mod-border-width-200` renamed to `--mod-switch-border-width`
20+
- `--mod-cjk-line-height-100` renamed to `--mod-switch-cjk-line-height`
21+
- `--mod-focus-indicator-gap` renamed to `--mod-switch-focus-indicator-gap`
22+
- `--mod-focus-indicator-thickness` renamed to `--mod-switch-focus-indicator-thickness`
23+
- `--mod-line-height-100` renamed to `--mod-switch-line-height`
24+
- `--mod-switch-handle-background-color` renamed to `--mod-switch-handle-background-color-default`
25+
- New mods:
26+
- `--mod-cjk-line-height-100`
27+
- `--mod-switch-border-color-default`
28+
- `--mod-switch-border-color-disabled`
29+
- `--mod-switch-border-color-down`
30+
- `--mod-switch-border-color-focus`
31+
- `--mod-switch-border-color-hover`
32+
- `--mod-switch-border-color-selected-default`
33+
- `--mod-switch-border-color-selected-down`
34+
- `--mod-switch-border-color-selected-focus`
35+
- `--mod-switch-border-color-selected-hover`
36+
- `--mod-switch-border-radius`
37+
- `--mod-switch-handle-background-color-down`
38+
- `--mod-switch-handle-background-color-focus`
39+
- `--mod-switch-handle-background-color-hover`
40+
- `--mod-switch-handle-background-color-disabled`
41+
- `--mod-switch-handle-background-color-selected-disabled`
42+
- `--mod-switch-handle-selected-background-color`
43+
- `--mod-switch-handle-selected-size`
44+
- `--mod-switch-handle-size`
45+
- `--mod-switch-spacing-bottom-to-label`
46+
- Removed mods:
47+
- `--mod-switch-handle-border-color-default`
48+
- `--mod-switch-handle-border-color-disabled`
49+
- `--mod-switch-handle-border-color-down`
50+
- `--mod-switch-handle-border-color-focus`
51+
- `--mod-switch-handle-border-color-hover`
52+
- `--mod-switch-handle-border-color-selected-default`
53+
- `--mod-switch-handle-border-color-selected-down`
54+
- `--mod-switch-handle-border-color-selected-focus`
55+
- `--mod-switch-handle-border-color-selected-hover`
56+
- Rework of forced-colors to only need custom prop reassignment to work (no more custom CSS for Windows High Contrast Mode)
2057
21-
### Remove focus-ring class
22-
We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
2358
examples:
2459
- id: switch
2560
name: Standard

‎components/switch/stories/switch.stories.js

+161-17
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
// Import the component markup template
1+
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
2+
import { html } from "lit";
3+
import { styleMap } from "lit/directives/style-map.js";
24
import { Template } from "./template";
35

46
export default {
@@ -70,24 +72,166 @@ export default {
7072
type: "migrated",
7173
},
7274
},
75+
decorators: [
76+
(Story, context) => html`
77+
<style>
78+
.spectrum-Detail { display: inline-block; }
79+
.spectrum-Typography > div {
80+
border: 1px solid var(--spectrum-gray-200);
81+
border-radius: 4px;
82+
padding: 0 1em 1em;
83+
/* Why seafoam? Because it separates it from the component styles. */
84+
--mod-detail-font-color: var(--spectrum-seafoam-900);
85+
}
86+
</style>
87+
<div
88+
style=${styleMap({
89+
display: "flex",
90+
flexDirection: "column",
91+
alignItems: "flex-start",
92+
gap: "1rem",
93+
"--mod-detail-margin-end": ".3rem",
94+
})}
95+
>
96+
${Story(context)}
97+
</div>
98+
`,
99+
],
73100
};
74101

75-
export const Default = Template.bind({});
76-
Default.args = {};
102+
const States = (args) => html`
103+
${Typography({
104+
semantics: "detail",
105+
size: "s",
106+
content: ["Default"],
107+
})}
108+
${Template(args)}
109+
${Typography({
110+
semantics: "detail",
111+
size: "s",
112+
content: ["Checked"],
113+
})}
114+
${Template({
115+
...args,
116+
isChecked: true,
117+
})}
118+
${Typography({
119+
semantics: "detail",
120+
size: "s",
121+
content: ["Disabled"],
122+
})}
123+
${Template({
124+
...args,
125+
customStyles: {"max-width": "250px"},
126+
isDisabled: true,
127+
label: "Switch unchecked and disabled and so long it wraps to the next line",
128+
})}
129+
${Typography({
130+
semantics: "detail",
131+
size: "s",
132+
content: ["Disabled + checked"],
133+
})}
134+
${Template({
135+
...args,
136+
isChecked: true,
137+
isDisabled: true,
138+
})}`;
77139

78-
export const Emphasized = Template.bind({});
79-
Emphasized.args = {
80-
isEmphasized: true,
81-
label: "Switch label that is so long it wraps to the next line",
82-
customStyles: {"max-width": "250px"}
83-
};
140+
const Sizes = (args) =>
141+
html` ${["s", "m", "l", "xl"].map((size) => {
142+
return html`
143+
${Typography({
144+
semantics: "detail",
145+
size: "s",
146+
content: [
147+
{
148+
s: "Small",
149+
m: "Medium",
150+
l: "Large",
151+
xl: "Extra-large",
152+
}[size],
153+
],
154+
})}
155+
${Template({
156+
...args,
157+
size,
158+
})}
159+
`;
160+
})}`;
84161

85-
export const Checked = Template.bind({});
86-
Checked.args = {
87-
isChecked: true
88-
};
162+
const Variants = (args) =>
163+
html` ${window.isChromatic()
164+
? html` <div class="spectrum-Typography">
165+
${Typography({
166+
semantics: "detail",
167+
size: "l",
168+
content: ["Default"],
169+
})}
170+
<div
171+
style=${styleMap({
172+
display: "flex",
173+
flexDirection: "column",
174+
gap: ".3rem",
175+
})}
176+
>
177+
${States(args)}
178+
</div>
179+
</div>
180+
<div class="spectrum-Typography">
181+
${Typography({
182+
semantics: "detail",
183+
size: "l",
184+
content: ["Emphasized"],
185+
})}
186+
<div
187+
style=${styleMap({
188+
display: "flex",
189+
flexDirection: "column",
190+
gap: ".3rem",
191+
})}
192+
>
193+
${States({
194+
...args,
195+
isEmphasized: true,
196+
})}
197+
</div>
198+
</div>
199+
<div class="spectrum-Typography">
200+
${Typography({
201+
semantics: "detail",
202+
size: "l",
203+
content: ["Sizing - Unchecked"],
204+
})}
205+
<div
206+
style=${styleMap({
207+
display: "flex",
208+
flexDirection: "column",
209+
gap: ".3rem",
210+
})}
211+
>
212+
${Sizes(args)}
213+
</div>
214+
</div>
215+
<div class="spectrum-Typography">
216+
${Typography({
217+
semantics: "detail",
218+
size: "l",
219+
content: ["Sizing - Checked"],
220+
})}
221+
<div
222+
style=${styleMap({
223+
display: "flex",
224+
flexDirection: "column",
225+
gap: ".3rem",
226+
})}
227+
>
228+
${Sizes({
229+
...args,
230+
isChecked: true,
231+
})}
232+
</div>
233+
</div>`
234+
: Template(args)}`;
89235

90-
export const Disabled = Template.bind({});
91-
Disabled.args = {
92-
isDisabled: true
93-
};
236+
export const Default = Variants.bind({});
237+
Default.args = {};

‎components/switch/stories/template.js

+1-12
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,8 @@ export const Template = ({
1414
isEmphasized,
1515
customClasses = [],
1616
customStyles = {},
17-
id,
18-
...globals
17+
id
1918
}) => {
20-
const { express } = globals;
21-
22-
try {
23-
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
24-
else import(/* webpackPrefetch: true */ "../themes/express.css");
25-
}
26-
catch (e) {
27-
console.warn(e);
28-
}
29-
3019
// ID attribute value for the input element.
3120
const inputId = id ? `${id}-input` : "switch-onoff-0";
3221

‎components/switch/themes/express.css

-27
This file was deleted.

0 commit comments

Comments
 (0)