Skip to content

Commit 4b11b1e

Browse files
castastropherise-erpelding
castastrophe
and
rise-erpelding
authored
feat(assetlist, miller): remove modifiers from the API [SWC-1264] (#4260)
* feat(assetlist,miller): remove modifiers from the API [SWC-1264] --------- Co-authored-by: rise-erpelding <[email protected]>
1 parent d0766e6 commit 4b11b1e

File tree

11 files changed

+219
-226
lines changed

11 files changed

+219
-226
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@
22
"@spectrum-css/alertdialog": major
33
"@spectrum-css/asset": major
44
"@spectrum-css/assetcard": major
5+
"@spectrum-css/assetlist": major
56
"@spectrum-css/avatar": major
7+
"@spectrum-css/miller": major
68
"@spectrum-css/well": major
79
---
810

9-
This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
11+
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.
1012

1113
- Remove all `--mod-*` custom property hooks.
1214
- Keep existing class selectors and variants unchanged.
1315
- Update stories to reflect the removal of the `--mod-*` override layer.
16+
- Remove any component-level custom properties that did not rely on the CSS cascade to define the styles.
17+
- Remove any high contrast mode styles being used where the default styles are sufficient.
1418

1519
Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed.

‎components/assetlist/dist/metadata.json‎

Lines changed: 10 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
".spectrum-AssetList-item.is-selected .spectrum-Checkbox",
1616
".spectrum-AssetList-item.is-selected:focus",
1717
".spectrum-AssetList-item.is-selected:hover",
18-
".spectrum-AssetList-item:before",
1918
".spectrum-AssetList-item:focus .spectrum-Checkbox",
2019
".spectrum-AssetList-item:focus-within:focus-visible",
2120
".spectrum-AssetList-item:focus-within:focus-visible:before",
@@ -26,52 +25,18 @@
2625
".spectrum-AssetList-itemSelector",
2726
".spectrum-AssetList:dir(rtl)"
2827
],
29-
"modifiers": [
30-
"--mod-assetlist-border-color-key-focus",
31-
"--mod-assetlist-child-indicator-animation",
32-
"--mod-assetlist-item-animation",
33-
"--mod-assetlist-item-background-color-down",
34-
"--mod-assetlist-item-background-color-hover",
35-
"--mod-assetlist-item-background-color-selected",
36-
"--mod-assetlist-item-background-color-selected-hover",
37-
"--mod-assetlist-item-border-radius",
38-
"--mod-assetlist-item-font-size",
39-
"--mod-assetlist-item-font-weight",
40-
"--mod-assetlist-item-height",
41-
"--mod-assetlist-item-label-padding-inline-start",
42-
"--mod-assetlist-item-margin-bottom",
43-
"--mod-assetlist-item-padding-inline-end",
44-
"--mod-assetlist-item-padding-inline-start",
45-
"--mod-assetlist-label-color",
46-
"--mod-assetlist-thumbnail-margin-left",
47-
"--mod-assetlist-thumbnail-width",
48-
"--mod-assetlist-thumnail-height",
49-
"--mod-assetlist-width"
50-
],
28+
"modifiers": [],
5129
"component": [
52-
"--spectrum-assetlist-border-color-key-focus",
53-
"--spectrum-assetlist-child-indicator-animation",
54-
"--spectrum-assetlist-item-animation",
55-
"--spectrum-assetlist-item-background-color-down",
56-
"--spectrum-assetlist-item-background-color-hover",
5730
"--spectrum-assetlist-item-background-color-selected",
58-
"--spectrum-assetlist-item-background-color-selected-hover",
59-
"--spectrum-assetlist-item-border-radius",
60-
"--spectrum-assetlist-item-font-size",
61-
"--spectrum-assetlist-item-font-weight",
62-
"--spectrum-assetlist-item-height",
63-
"--spectrum-assetlist-item-label-padding-inline-start",
64-
"--spectrum-assetlist-item-margin-block-end",
65-
"--spectrum-assetlist-item-padding-inline-end",
66-
"--spectrum-assetlist-item-padding-inline-start",
67-
"--spectrum-assetlist-label-color",
68-
"--spectrum-assetlist-thumbnail-height",
69-
"--spectrum-assetlist-thumbnail-margin-inline-start",
70-
"--spectrum-assetlist-thumbnail-width",
71-
"--spectrum-assetlist-width"
31+
"--spectrum-assetlist-item-background-color-selected-hover"
7232
],
7333
"global": [
7434
"--spectrum-animation-duration-100",
35+
"--spectrum-component-height-200",
36+
"--spectrum-corner-radius-100",
37+
"--spectrum-field-default-width-large",
38+
"--spectrum-focus-indicator-color",
39+
"--spectrum-focus-indicator-thickness",
7540
"--spectrum-font-size-100",
7641
"--spectrum-gray-100",
7742
"--spectrum-gray-200",
@@ -80,16 +45,9 @@
8045
"--spectrum-regular-font-weight",
8146
"--spectrum-spacing-100",
8247
"--spectrum-spacing-300",
83-
"--spectrum-spacing-400",
84-
"--spectrum-spacing-600",
85-
"--spectrum-spacing-75"
48+
"--spectrum-spacing-75",
49+
"--spectrum-thumbnail-size-100"
8650
],
8751
"passthroughs": [],
88-
"high-contrast": [
89-
"--highcontrast-assetlist-border-color-key-focus",
90-
"--highcontrast-assetlist-item-background-color-hover",
91-
"--highcontrast-assetlist-item-background-color-selected",
92-
"--highcontrast-assetlist-item-background-color-selected-hover",
93-
"--highcontrast-assetlist-label-color"
94-
]
52+
"high-contrast": []
9553
}

‎components/assetlist/index.css‎

Lines changed: 58 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,8 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14+
/* Container */
1415
.spectrum-AssetList {
15-
--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200);
16-
--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100);
17-
18-
--spectrum-assetlist-width: 272px;
19-
--spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100);
20-
21-
/* item */
22-
--spectrum-assetlist-item-height: var(--spectrum-spacing-600);
23-
--spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300);
24-
--spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300);
25-
--spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75);
26-
--spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75);
27-
--spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
28-
--spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
29-
--spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
30-
31-
/* thumbnail */
32-
--spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);
33-
--spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400);
34-
--spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100);
35-
36-
/* label */
37-
--spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
38-
--spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
39-
4016
margin-block-start: 0;
4117
margin-block-end: 0;
4218
padding: 0;
@@ -46,48 +22,27 @@
4622
}
4723
}
4824

25+
/* Iterable children */
4926
.spectrum-AssetList-item {
5027
position: relative;
51-
color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color)));
52-
5328
display: flex;
5429
box-sizing: border-box;
5530
align-items: center;
56-
57-
inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width));
58-
block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
59-
31+
inline-size: var(--spectrum-field-default-width-large);
32+
block-size: var(--spectrum-component-height-200);
6033
padding-block: 0;
61-
padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start)) var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end));
62-
margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end));
34+
padding-inline: var(--spectrum-spacing-300);
35+
margin-block: 0 var(--spectrum-spacing-75);
6336
margin-inline: 0;
64-
65-
border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
66-
67-
transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out;
68-
69-
font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size));
70-
font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight));
37+
border-radius: var(--spectrum-corner-radius-100);
38+
transition: background-color var(--spectrum-animation-duration-100) ease-in-out;
39+
color: var(--spectrum-neutral-content-color-default);
40+
font-size: var(--spectrum-font-size-100);
41+
font-weight: var(--spectrum-regular-font-weight);
7142
font-style: normal;
72-
7343
cursor: pointer;
74-
7544
outline: none;
7645

77-
&::before {
78-
content: "";
79-
80-
position: absolute;
81-
inset-inline-start: 0;
82-
inset-inline-end: 0;
83-
84-
block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
85-
86-
background-color: transparent;
87-
88-
border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
89-
}
90-
9146
&.is-selectable,
9247
&.is-selected,
9348
&:hover,
@@ -98,55 +53,81 @@
9853
}
9954
}
10055

101-
&.is-branch {
102-
/* show chevron */
103-
.spectrum-AssetList-itemChildIndicator {
104-
display: block;
105-
}
56+
/* show chevron */
57+
&.is-branch .spectrum-AssetList-itemChildIndicator {
58+
display: block;
10659
}
10760

10861
.spectrum-AssetList-itemThumbnail {
10962
/* Remove the border on images inside links in IE 10-. */
11063
border-style: none;
111-
112-
inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width));
113-
block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height));
114-
margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start));
64+
inline-size: var(--spectrum-thumbnail-size-100);
65+
block-size: var(--spectrum-thumbnail-size-100);
66+
margin-inline-start: var(--spectrum-spacing-100);
11567
vertical-align: middle;
11668
}
11769

11870
&:hover {
119-
background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)));
71+
background-color: var(--spectrum-gray-100);
72+
73+
@media (forced-colors: active) {
74+
forced-color-adjust: none;
75+
background-color: Highlight;
76+
color: HighlightText;
77+
}
12078
}
12179

12280
&:focus-within {
12381
&:focus-visible,
12482
&.is-focused {
125-
background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)));
83+
background-color: var(--spectrum-gray-100);
84+
85+
@media (forced-colors: active) {
86+
forced-color-adjust: none;
87+
background-color: Highlight;
88+
color: HighlightText;
89+
}
12690

12791
&::before {
128-
/* we cannot achieve rounded corners with outline so we use box-shadow instead */
129-
box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset;
92+
content: "";
93+
position: absolute;
94+
inset-inline-start: 0;
95+
inset-inline-end: 0;
96+
block-size: 100%;
97+
border-radius: var(--spectrum-corner-radius-100);
98+
99+
/* outline clips so we use box-shadow instead */
100+
box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--spectrum-focus-indicator-color) inset;
130101
}
131102
}
132103
}
133104

134105
&.is-navigated {
135-
/* gray background */
136-
background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down));
137-
106+
&,
138107
&:hover,
139108
&:focus {
140-
background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down));
109+
background-color: var(--spectrum-gray-200);
141110
}
142111
}
143112

144113
&.is-selected {
145-
background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected)));
114+
background-color: var(--spectrum-assetlist-item-background-color-selected);
115+
116+
@media (forced-colors: active) {
117+
forced-color-adjust: none;
118+
background-color: SelectedItem;
119+
color: SelectedItemText;
120+
}
146121

147122
&:hover,
148123
&:focus {
149-
background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover)));
124+
background-color: var(--spectrum-assetlist-item-background-color-selected-hover);
125+
126+
@media (forced-colors: active) {
127+
forced-color-adjust: none;
128+
background-color: SelectedItem;
129+
color: SelectedItemText;
130+
}
150131
}
151132
}
152133
}
@@ -157,33 +138,14 @@
157138

158139
.spectrum-AssetList-itemChildIndicator {
159140
display: none;
160-
transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
141+
transition: transform ease var(--spectrum-animation-duration-100);
161142
transform: var(--spectrum-logical-rotation,);
162143
}
163144

164145
.spectrum-AssetList-itemLabel {
165146
flex: 1;
166-
padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start));
167-
147+
padding-inline-start: var(--spectrum-spacing-100);
168148
text-overflow: ellipsis;
169149
overflow: hidden;
170150
white-space: nowrap;
171151
}
172-
173-
@media (forced-colors: active) {
174-
.spectrum-AssetList-item {
175-
--highcontrast-assetlist-border-color-key-focus: Highlight;
176-
--highcontrast-assetlist-item-background-color-hover: Highlight;
177-
--highcontrast-assetlist-item-background-color-selected-hover: Highlight;
178-
--highcontrast-assetlist-label-color: ButtonText;
179-
--highcontrast-assetlist-item-background-color-selected: SelectedItem;
180-
181-
forced-color-adjust: none;
182-
183-
&:hover,
184-
&.is-selected,
185-
&.is-navigated {
186-
--highcontrast-assetlist-label-color: HighlightText;
187-
}
188-
}
189-
}

0 commit comments

Comments
 (0)