Skip to content

Commit f5bd5e5

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

File tree

5 files changed

+172
-277
lines changed

5 files changed

+172
-277
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@spectrum-css/miller": major
99
"@spectrum-css/well": major
1010
"@spectrum-css/page": major
11+
"@spectrum-css/checkbox": 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: 29 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -15,92 +15,51 @@
1515
".spectrum-Checkbox .spectrum-Checkbox-input:disabled",
1616
".spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before",
1717
".spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label",
18+
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box",
1819
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after",
1920
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
2021
".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label",
2122
".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before",
2223
".spectrum-Checkbox .spectrum-Checkbox-label",
24+
".spectrum-Checkbox .spectrum-Checkbox-label:lang(ja)",
25+
".spectrum-Checkbox .spectrum-Checkbox-label:lang(ko)",
26+
".spectrum-Checkbox .spectrum-Checkbox-label:lang(zh)",
2327
".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",
28+
".spectrum-Checkbox--emphasized:where(.is-indeterminate) .spectrum-Checkbox-box:before",
29+
".spectrum-Checkbox--emphasized:where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
30+
".spectrum-Checkbox--emphasized:where(.is-indeterminate):hover .spectrum-Checkbox-box:before",
31+
".spectrum-Checkbox--emphasized:where(.is-indeterminate):hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
32+
".spectrum-Checkbox--emphasized:where(.is-indeterminate):not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
33+
".spectrum-Checkbox--emphasized:where(:not(.is-invalid)) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
4734
".spectrum-Checkbox:active .spectrum-Checkbox-box:before",
4835
".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
4936
".spectrum-Checkbox:active .spectrum-Checkbox-label",
5037
".spectrum-Checkbox:hover .spectrum-Checkbox-box:before",
5138
".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
5239
".spectrum-Checkbox:hover .spectrum-Checkbox-label",
53-
".spectrum-Checkbox:lang(ja)",
54-
".spectrum-Checkbox:lang(ko)",
55-
".spectrum-Checkbox:lang(zh)",
5640
".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"
41+
".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box",
42+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
43+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
44+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-box:before",
45+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark",
46+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark",
47+
".spectrum-Checkbox:where(.is-indeterminate) .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
48+
".spectrum-Checkbox:where(.is-invalid)",
49+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate) .spectrum-Checkbox-box:before",
50+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate) .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before",
51+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
52+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate):hover .spectrum-Checkbox-box:before",
53+
".spectrum-Checkbox:where(.is-invalid.is-indeterminate):hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before",
54+
".spectrum-Checkbox:where(.spectrum-Checkbox--emphasized)",
55+
".spectrum-Checkbox:where(.spectrum-Checkbox--sizeL)",
56+
".spectrum-Checkbox:where(.spectrum-Checkbox--sizeS)",
57+
".spectrum-Checkbox:where(.spectrum-Checkbox--sizeXL)"
9158
],
59+
"modifiers": [],
9260
"component": [
93-
"--spectrum-checkbox-animation-duration",
94-
"--spectrum-checkbox-background-color",
95-
"--spectrum-checkbox-border-width",
9661
"--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",
10262
"--spectrum-checkbox-control-color-default",
103-
"--spectrum-checkbox-control-color-disabled",
10463
"--spectrum-checkbox-control-color-down",
10564
"--spectrum-checkbox-control-color-focus",
10665
"--spectrum-checkbox-control-color-hover",
@@ -113,24 +72,8 @@
11372
"--spectrum-checkbox-control-size-large",
11473
"--spectrum-checkbox-control-size-medium",
11574
"--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",
12375
"--spectrum-checkbox-font-size",
12476
"--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",
13477
"--spectrum-checkbox-text-to-control",
13578
"--spectrum-checkbox-top-to-control",
13679
"--spectrum-checkbox-top-to-control-extra-large",
@@ -189,18 +132,5 @@
189132
"--spectrum-text-to-control-75"
190133
],
191134
"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-
]
135+
"high-contrast": []
206136
}

0 commit comments

Comments
 (0)