Skip to content

Commit aab46c3

Browse files
bernhard-adobebernhard-adobe
authored
feat(switch)!: migrating switch to core-tokens (CSS-42, CSS-100) (#1496)
BREAKING CHANGE: migrates Switch to core tokens Also, adds t-shirt sizes
1 parent f73dcd9 commit aab46c3

File tree

10 files changed

+516
-315
lines changed

10 files changed

+516
-315
lines changed

‎components/site/index.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -439,8 +439,18 @@ governing permissions and limitations under the License.
439439
padding: var(--spectrum-cssexample-padding-y) var(--spectrum-cssexample-padding-x);
440440

441441
border-radius: var(--spectrum-cssexample-border-radius) var(--spectrum-cssexample-border-radius) 0 0;
442+
443+
&:has(> .spectrum-CSSExample-example-staticWhite) {
444+
background-color: var(--spectrum-docs-static-white-background-color);
445+
border-color: var(--spectrum-docs-static-white-background-color);
446+
}
447+
&:has(> .spectrum-CSSExample-example-staticBlack) {
448+
background-color: var(--spectrum-docs-static-black-background-color);
449+
border-color: var(--spectrum-docs-static-black-background-color);
450+
}
442451
}
443452

453+
444454
.spectrum-CSSExample-markup {
445455
position: relative;
446456
max-inline-size: 100%;

‎components/switch/gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('@spectrum-css/component-builder');
1+
module.exports = require('@spectrum-css/component-builder-simple');

‎components/switch/index.css

Lines changed: 369 additions & 60 deletions
Large diffs are not rendered by default.

‎components/switch/metadata/switch.yml

Lines changed: 60 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ sections:
55
description: |
66
### Component renamed
77
Toggle is now known as Switch. Replace all `.spectrum-ToggleSwitch*` classnames with `.spectrum-Switch*`.
8-
8+
### T-shirt sizing
9+
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".
910
### Quiet and emphasized
1011
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.
1112
If you were using the `quiet` variant, the `.spectrum-Switch--quiet` class is no longer required and can be removed.
@@ -19,54 +20,104 @@ examples:
1920
status: Verified
2021
description: The on/off variant of the Switch.
2122
markup: |
22-
<div class="spectrum-Switch">
23+
<div class="spectrum-Switch spectrum-Switch--sizeM">
2324
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
2425
<span class="spectrum-Switch-switch"></span>
2526
<label class="spectrum-Switch-label" for="switch-onoff-0">Switch Off</label>
2627
</div>
27-
<div class="spectrum-Switch">
28+
<div class="spectrum-Switch spectrum-Switch--sizeM">
2829
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-1" checked>
2930
<span class="spectrum-Switch-switch"></span>
3031
<label class="spectrum-Switch-label" for="switch-onoff-1">Switch On</label>
3132
</div>
3233
3334
<br>
3435
35-
<div class="spectrum-Switch">
36+
<div class="spectrum-Switch spectrum-Switch--sizeM">
3637
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-disabled-0" disabled>
3738
<span class="spectrum-Switch-switch"></span>
3839
<label class="spectrum-Switch-label" for="switch-onoff-disabled-0">Switch Off</label>
3940
</div>
40-
<div class="spectrum-Switch">
41+
<div class="spectrum-Switch spectrum-Switch--sizeM">
4142
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-disabled-1" checked disabled>
4243
<span class="spectrum-Switch-switch"></span>
4344
<label class="spectrum-Switch-label" for="switch-onoff-disabled-1">Switch On</label>
4445
</div>
46+
- id: switch
47+
name: Sizes
48+
status: Verified
49+
description: The t-shirt sizes of the Switch.
50+
markup: |
51+
52+
<div class="spectrum-Switch spectrum-Switch--sizeS">
53+
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
54+
<span class="spectrum-Switch-switch"></span>
55+
<label class="spectrum-Switch-label" for="switch-onoff-0">Switch Size S</label>
56+
</div>
57+
58+
<br>
59+
60+
<div class="spectrum-Switch spectrum-Switch--sizeM">
61+
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
62+
<span class="spectrum-Switch-switch"></span>
63+
<label class="spectrum-Switch-label" for="switch-onoff-0">Switch Size M</label>
64+
</div>
65+
66+
<br>
67+
68+
<div class="spectrum-Switch spectrum-Switch--sizeL">
69+
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
70+
<span class="spectrum-Switch-switch"></span>
71+
<label class="spectrum-Switch-label" for="switch-onoff-0">Switch Size L</label>
72+
</div>
73+
74+
<br>
75+
76+
<div class="spectrum-Switch spectrum-Switch--sizeXL">
77+
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
78+
<span class="spectrum-Switch-switch"></span>
79+
<label class="spectrum-Switch-label" for="switch-onoff-0">Switch Size XL</label>
80+
</div>
4581
- id: switch
4682
name: Emphasis
4783
status: Verified
4884
description: The emphasized variant of the Switch.
4985
markup: |
50-
<div class="spectrum-Switch spectrum-Switch--">
86+
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized">
5187
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0">
5288
<span class="spectrum-Switch-switch"></span>
5389
<label class="spectrum-Switch-label" for="switch-onoff-0">Switch Off</label>
5490
</div>
55-
<div class="spectrum-Switch spectrum-Switch--emphasized">
91+
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized">
5692
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-1" checked>
5793
<span class="spectrum-Switch-switch"></span>
5894
<label class="spectrum-Switch-label" for="switch-onoff-1">Switch On</label>
5995
</div>
6096
6197
<br>
6298
63-
<div class="spectrum-Switch spectrum-Switch--emphasized">
99+
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized">
64100
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-disabled-0" disabled>
65101
<span class="spectrum-Switch-switch"></span>
66102
<label class="spectrum-Switch-label" for="switch-onoff-disabled-0">Switch Off</label>
67103
</div>
68-
<div class="spectrum-Switch spectrum-Switch--emphasized">
104+
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--emphasized">
69105
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-disabled-1" checked disabled>
70106
<span class="spectrum-Switch-switch"></span>
71107
<label class="spectrum-Switch-label" for="switch-onoff-disabled-1">Switch On</label>
72108
</div>
109+
- id: switch
110+
name: Disabled
111+
status: Verified
112+
description: The disabled variant of the Switch.
113+
markup: |
114+
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--disabled">
115+
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-0" disabled>
116+
<span class="spectrum-Switch-switch"></span>
117+
<label class="spectrum-Switch-label" for="switch-onoff-0">Switch Disabled Off</label>
118+
</div>
119+
<div class="spectrum-Switch spectrum-Switch--sizeM spectrum-Switch--disabled">
120+
<input type="checkbox" class="spectrum-Switch-input" id="switch-onoff-1" disabled checked>
121+
<span class="spectrum-Switch-switch"></span>
122+
<label class="spectrum-Switch-label" for="switch-onoff-1">Switch Disabled On</label>
123+
</div>

‎components/switch/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/switch",
3-
"version": "1.0.23",
3+
"version": "2.0.0-beta.0",
44
"description": "The Spectrum CSS switch component",
55
"license": "Apache-2.0",
66
"main": "dist/index-vars.css",
@@ -16,15 +16,15 @@
1616
"build": "gulp"
1717
},
1818
"peerDependencies": {
19-
"@spectrum-css/vars": "^8.0.0"
19+
"@spectrum-css/tokens": "^1.0.7"
2020
},
2121
"devDependencies": {
22-
"@spectrum-css/component-builder": "^3.2.0",
23-
"@spectrum-css/vars": "^8.0.0",
22+
"@spectrum-css/component-builder-simple": "^1.0.0-beta.0",
23+
"@spectrum-css/tokens": "^1.0.7",
2424
"gulp": "^4.0.0"
2525
},
2626
"publishConfig": {
2727
"access": "public"
2828
},
2929
"homepage": "https://opensource.adobe.com/spectrum-css/"
30-
}
30+
}

0 commit comments

Comments
 (0)