Skip to content

Commit a925bba

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 251e4dd commit a925bba

File tree

6 files changed

+489
-402
lines changed

6 files changed

+489
-402
lines changed

‎components/switch/index.css

Lines changed: 232 additions & 283 deletions
Large diffs are not rendered by default.

‎components/switch/metadata/mods.md

Lines changed: 49 additions & 39 deletions
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

Lines changed: 47 additions & 12 deletions
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

Lines changed: 161 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
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";
14
import { Template } from "./template";
25

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

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

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-
};
141+
const Sizes = (args) =>
142+
html` ${["s", "m", "l", "xl"].map((size) => {
143+
return html`
144+
${Typography({
145+
semantics: "detail",
146+
size: "s",
147+
content: [
148+
{
149+
s: "Small",
150+
m: "Medium",
151+
l: "Large",
152+
xl: "Extra-large",
153+
}[size],
154+
],
155+
})}
156+
${Template({
157+
...args,
158+
size,
159+
})}
160+
`;
161+
})}`;
84162

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

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

‎components/switch/themes/express.css

Lines changed: 0 additions & 27 deletions
This file was deleted.

0 commit comments

Comments
 (0)