Skip to content

Commit 1617329

Browse files
castastrophecastastrophe
committed
feat(checkbox): remove modifiers from the API [SWC-1264]
1 parent 14740cb commit 1617329

File tree

5 files changed

+279
-415
lines changed

5 files changed

+279
-415
lines changed

‎.changeset/weak-colts-divide.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
"@spectrum-css/assetlist": major
66
"@spectrum-css/avatar": major
77
"@spectrum-css/badge": major
8+
"@spectrum-css/checkbox": major
89
"@spectrum-css/miller": major
9-
"@spectrum-css/well": major
1010
"@spectrum-css/page": major
11+
"@spectrum-css/well": major
1112
---
1213

1314
This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling. In addition, this update cleans up any component-level custom properties that did not rely on the CSS cascade to define the styles; this was done to reduce the number of custom properties that are defined at the component level and trim down the size of the CSS we are shipping to consumers.

‎components/accordion/stories/template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export const Template = ({
156156
hasActionButton: item.hasActionButton || hasActionButtons,
157157
actionButtonIconName: item.actionButtonIconName || actionButtonIconName,
158158
hasSwitch: item.hasSwitch || hasSwitches,
159-
iconSize: `${size}`,
159+
iconSize: size,
160160
isDisabled: item.isDisabled || disableAll,
161161
isOpen: collapseAll === true ? false : item.isOpen,
162162
onclick: function() {

‎components/card/stories/template.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const Template = ({
8181
() =>
8282
Icon(
8383
{
84-
size: "xxl",
84+
size: "xl",
8585
iconName: showAsset === "folder" ? "Folder" : "Document",
8686
setName: "workflow",
8787
},

‎components/checkbox/dist/metadata.json‎

Lines changed: 51 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -2,135 +2,77 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-Checkbox",
5-
".spectrum-Checkbox .spectrum-Checkbox-box",
6-
".spectrum-Checkbox .spectrum-Checkbox-box:after",
7-
".spectrum-Checkbox .spectrum-Checkbox-box:before",
8-
".spectrum-Checkbox .spectrum-Checkbox-checkmark",
9-
".spectrum-Checkbox .spectrum-Checkbox-input",
10-
".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
115
".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
12-
".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before",
13-
".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label",
14-
".spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before",
15-
".spectrum-Checkbox .spectrum-Checkbox-input:disabled",
16-
".spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before",
17-
".spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label",
18-
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after",
19-
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
20-
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label",
21-
".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before",
22-
".spectrum-Checkbox .spectrum-Checkbox-label",
23-
".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark",
24-
".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before",
25-
".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
26-
".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before",
27-
".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
28-
".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
29-
".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
30-
".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box",
31-
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
32-
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
33-
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before",
34-
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
35-
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
36-
".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
37-
".spectrum-Checkbox.is-invalid",
38-
".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before",
39-
".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before",
40-
".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
41-
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before",
42-
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before",
43-
".spectrum-Checkbox.spectrum-Checkbox--emphasized",
44-
".spectrum-Checkbox.spectrum-Checkbox--sizeL",
45-
".spectrum-Checkbox.spectrum-Checkbox--sizeS",
46-
".spectrum-Checkbox.spectrum-Checkbox--sizeXL",
47-
".spectrum-Checkbox:active .spectrum-Checkbox-box:before",
48-
".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
49-
".spectrum-Checkbox:active .spectrum-Checkbox-label",
50-
".spectrum-Checkbox:hover .spectrum-Checkbox-box:before",
51-
".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
52-
".spectrum-Checkbox:hover .spectrum-Checkbox-label",
6+
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box",
7+
".spectrum-Checkbox-box",
8+
".spectrum-Checkbox-box:after",
9+
".spectrum-Checkbox-box:before",
10+
".spectrum-Checkbox-checkmark",
11+
".spectrum-Checkbox-input",
12+
".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
13+
".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
14+
".spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box",
15+
".spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label",
16+
".spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box",
17+
".spectrum-Checkbox-input:disabled",
18+
".spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box",
19+
".spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label",
20+
".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after",
21+
".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
22+
".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label",
23+
".spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box",
24+
".spectrum-Checkbox-label",
25+
".spectrum-Checkbox-partialCheckmark",
26+
".spectrum-Checkbox:active",
27+
".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box",
28+
".spectrum-Checkbox:hover",
29+
".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box",
5330
".spectrum-Checkbox:lang(ja)",
5431
".spectrum-Checkbox:lang(ko)",
5532
".spectrum-Checkbox:lang(zh)",
5633
".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box",
57-
".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box"
58-
],
59-
"modifiers": [
60-
"--mod-checkbox-animation-duration",
61-
"--mod-checkbox-border-width",
62-
"--mod-checkbox-bottom-to-text",
63-
"--mod-checkbox-checkmark-color",
64-
"--mod-checkbox-content-color-default",
65-
"--mod-checkbox-content-color-disabled",
66-
"--mod-checkbox-content-color-down",
67-
"--mod-checkbox-content-color-focus",
68-
"--mod-checkbox-content-color-hover",
69-
"--mod-checkbox-control-color-default",
70-
"--mod-checkbox-control-color-disabled",
71-
"--mod-checkbox-control-color-down",
72-
"--mod-checkbox-control-color-focus",
73-
"--mod-checkbox-control-color-hover",
74-
"--mod-checkbox-control-corner-radius",
75-
"--mod-checkbox-control-selected-color-default",
76-
"--mod-checkbox-control-selected-color-down",
77-
"--mod-checkbox-control-selected-color-hover",
78-
"--mod-checkbox-control-size",
79-
"--mod-checkbox-focus-indicator-color",
80-
"--mod-checkbox-focus-indicator-gap",
81-
"--mod-checkbox-focus-indicator-thickness",
82-
"--mod-checkbox-font-size",
83-
"--mod-checkbox-height",
84-
"--mod-checkbox-line-height",
85-
"--mod-checkbox-line-height-cjk",
86-
"--mod-checkbox-margin-block",
87-
"--mod-checkbox-selected-border-width",
88-
"--mod-checkbox-text-to-control",
89-
"--mod-checkbox-top-to-text",
90-
"--mod-focus-indicator-thickness"
34+
".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box",
35+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
36+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
37+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-box:before",
38+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
39+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
40+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
41+
".spectrum-Checkbox:where(.is-invalid)",
42+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate) .spectrum-Checkbox-box",
43+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate) .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box",
44+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box",
45+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate):hover .spectrum-Checkbox-box",
46+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate):hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box",
47+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized)",
48+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized):where(.is-indeterminate) .spectrum-Checkbox-box",
49+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized):where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box",
50+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized):where(.is-indeterminate):hover .spectrum-Checkbox-box",
51+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized):where(.is-indeterminate):hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box",
52+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized):where(.is-indeterminate):not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box",
53+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized):where(:not(.is-invalid)) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box",
54+
".spectrum-Checkbox:where(.spectrum-Checkbox--sizeL)",
55+
".spectrum-Checkbox:where(.spectrum-Checkbox--sizeS)",
56+
".spectrum-Checkbox:where(.spectrum-Checkbox--sizeXL)"
9157
],
58+
"modifiers": [],
9259
"component": [
93-
"--spectrum-checkbox-animation-duration",
94-
"--spectrum-checkbox-background-color",
95-
"--spectrum-checkbox-border-width",
9660
"--spectrum-checkbox-bottom-to-text",
97-
"--spectrum-checkbox-checkmark-color",
98-
"--spectrum-checkbox-content-color-default",
99-
"--spectrum-checkbox-content-color-down",
100-
"--spectrum-checkbox-content-color-focus",
101-
"--spectrum-checkbox-content-color-hover",
102-
"--spectrum-checkbox-control-color-default",
103-
"--spectrum-checkbox-control-color-disabled",
61+
"--spectrum-checkbox-control-color",
10462
"--spectrum-checkbox-control-color-down",
10563
"--spectrum-checkbox-control-color-focus",
10664
"--spectrum-checkbox-control-color-hover",
10765
"--spectrum-checkbox-control-corner-radius",
108-
"--spectrum-checkbox-control-selected-color-default",
66+
"--spectrum-checkbox-control-selected-color",
10967
"--spectrum-checkbox-control-selected-color-down",
11068
"--spectrum-checkbox-control-selected-color-hover",
11169
"--spectrum-checkbox-control-size",
11270
"--spectrum-checkbox-control-size-extra-large",
11371
"--spectrum-checkbox-control-size-large",
11472
"--spectrum-checkbox-control-size-medium",
11573
"--spectrum-checkbox-control-size-small",
116-
"--spectrum-checkbox-emphasized-color-default",
117-
"--spectrum-checkbox-emphasized-color-down",
118-
"--spectrum-checkbox-emphasized-color-focus",
119-
"--spectrum-checkbox-emphasized-color-hover",
120-
"--spectrum-checkbox-focus-indicator-color",
121-
"--spectrum-checkbox-focus-indicator-gap",
122-
"--spectrum-checkbox-focus-indicator-thickness",
12374
"--spectrum-checkbox-font-size",
12475
"--spectrum-checkbox-height",
125-
"--spectrum-checkbox-invalid-color-default",
126-
"--spectrum-checkbox-invalid-color-down",
127-
"--spectrum-checkbox-invalid-color-focus",
128-
"--spectrum-checkbox-invalid-color-hover",
129-
"--spectrum-checkbox-line-height",
130-
"--spectrum-checkbox-line-height-cjk",
131-
"--spectrum-checkbox-selected-border-width",
132-
"--spectrum-checkbox-text-font-style",
133-
"--spectrum-checkbox-text-font-weight",
13476
"--spectrum-checkbox-text-to-control",
13577
"--spectrum-checkbox-top-to-control",
13678
"--spectrum-checkbox-top-to-control-extra-large",
@@ -189,18 +131,5 @@
189131
"--spectrum-text-to-control-75"
190132
],
191133
"passthroughs": [],
192-
"high-contrast": [
193-
"--highcontrast-checkbox-background-color-default",
194-
"--highcontrast-checkbox-color-default",
195-
"--highcontrast-checkbox-color-focus",
196-
"--highcontrast-checkbox-content-color-default",
197-
"--highcontrast-checkbox-content-color-down",
198-
"--highcontrast-checkbox-content-color-focus",
199-
"--highcontrast-checkbox-content-color-hover",
200-
"--highcontrast-checkbox-disabled-color-default",
201-
"--highcontrast-checkbox-focus-indicator-color",
202-
"--highcontrast-checkbox-highlight-color-default",
203-
"--highcontrast-checkbox-highlight-color-down",
204-
"--highcontrast-checkbox-highlight-color-hover"
205-
]
134+
"high-contrast": []
206135
}

0 commit comments

Comments
 (0)