Skip to content

Commit 7f82b7d

Browse files
castastrophecastastrophe
committed
feat(assetlist): remove modifiers from the API [SWC-1264]
1 parent bdf7074 commit 7f82b7d

File tree

11 files changed

+155
-152
lines changed

11 files changed

+155
-152
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
"@spectrum-css/alertdialog": major
33
"@spectrum-css/asset": major
4+
"@spectrum-css/assetlist": major
5+
"@spectrum-css/miller": major
46
"@spectrum-css/well": major
57
---
68

‎components/assetlist/dist/metadata.json‎

Lines changed: 12 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
".spectrum-AssetList-item.is-navigated:hover",
1313
".spectrum-AssetList-item.is-selectable .spectrum-Checkbox",
1414
".spectrum-AssetList-item.is-selected",
15+
".spectrum-AssetList-item.is-selected .spectrum-AssetList-item:focus",
16+
".spectrum-AssetList-item.is-selected .spectrum-AssetList-item:hover",
1517
".spectrum-AssetList-item.is-selected .spectrum-Checkbox",
1618
".spectrum-AssetList-item.is-selected:focus",
1719
".spectrum-AssetList-item.is-selected:hover",
@@ -26,52 +28,18 @@
2628
".spectrum-AssetList-itemSelector",
2729
".spectrum-AssetList:dir(rtl)"
2830
],
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-
],
31+
"modifiers": [],
5132
"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",
5733
"--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"
34+
"--spectrum-assetlist-item-background-color-selected-hover"
7235
],
7336
"global": [
7437
"--spectrum-animation-duration-100",
38+
"--spectrum-component-height-200",
39+
"--spectrum-corner-radius-100",
40+
"--spectrum-field-width-large",
41+
"--spectrum-focus-indicator-color",
42+
"--spectrum-focus-indicator-thickness",
7543
"--spectrum-font-size-100",
7644
"--spectrum-gray-100",
7745
"--spectrum-gray-200",
@@ -80,16 +48,9 @@
8048
"--spectrum-regular-font-weight",
8149
"--spectrum-spacing-100",
8250
"--spectrum-spacing-300",
83-
"--spectrum-spacing-400",
84-
"--spectrum-spacing-600",
85-
"--spectrum-spacing-75"
51+
"--spectrum-spacing-75",
52+
"--spectrum-thumbnail-size-100"
8653
],
8754
"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-
]
55+
"high-contrast": []
9556
}

‎components/assetlist/index.css‎

Lines changed: 36 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,6 @@
1212
*/
1313

1414
.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-
4015
margin-block-start: 0;
4116
margin-block-end: 0;
4217
padding: 0;
@@ -48,26 +23,26 @@
4823

4924
.spectrum-AssetList-item {
5025
position: relative;
51-
color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color)));
26+
color: var(--spectrum-neutral-content-color-default);
5227

5328
display: flex;
5429
box-sizing: border-box;
5530
align-items: center;
5631

57-
inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width));
58-
block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
32+
inline-size: var(--spectrum-field-width-large);
33+
block-size: var(--spectrum-component-height-200);
5934

6035
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));
36+
padding-inline: var(--spectrum-spacing-300);
37+
margin-block: 0 var(--spectrum-spacing-75);
6338
margin-inline: 0;
6439

65-
border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
40+
border-radius: var(--spectrum-corner-radius-100);
6641

67-
transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out;
42+
transition: background-color var(--spectrum-animation-duration-100) ease-in-out;
6843

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));
44+
font-size: var(--spectrum-font-size-100);
45+
font-weight: var(--spectrum-regular-font-weight);
7146
font-style: normal;
7247

7348
cursor: pointer;
@@ -81,11 +56,11 @@
8156
inset-inline-start: 0;
8257
inset-inline-end: 0;
8358

84-
block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
59+
block-size: 100%;
8560

8661
background-color: transparent;
8762

88-
border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
63+
border-radius: var(--spectrum-corner-radius-100);
8964
}
9065

9166
&.is-selectable,
@@ -98,55 +73,51 @@
9873
}
9974
}
10075

101-
&.is-branch {
102-
/* show chevron */
103-
.spectrum-AssetList-itemChildIndicator {
104-
display: block;
105-
}
76+
/* show chevron */
77+
&.is-branch .spectrum-AssetList-itemChildIndicator {
78+
display: block;
10679
}
10780

10881
.spectrum-AssetList-itemThumbnail {
10982
/* Remove the border on images inside links in IE 10-. */
11083
border-style: none;
11184

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));
85+
inline-size: var(--spectrum-thumbnail-size-100);
86+
block-size: var(--spectrum-thumbnail-size-100);
87+
margin-inline-start: var(--spectrum-spacing-100);
11588
vertical-align: middle;
11689
}
11790

11891
&: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)));
92+
background-color: var(--spectrum-gray-100);
12093
}
12194

12295
&:focus-within {
12396
&:focus-visible,
12497
&.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)));
98+
background-color: var(--spectrum-gray-100);
12699

127100
&::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;
101+
/* outline clips so we use box-shadow instead */
102+
box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--spectrum-focus-indicator-color) inset;
130103
}
131104
}
132105
}
133106

134107
&.is-navigated {
135-
/* gray background */
136-
background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down));
137-
108+
&,
138109
&:hover,
139110
&:focus {
140-
background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down));
111+
background-color: var(--spectrum-gray-200);
141112
}
142113
}
143114

144115
&.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)));
116+
background-color: var(--spectrum-assetlist-item-background-color-selected);
146117

147118
&:hover,
148119
&: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)));
120+
background-color: var(--spectrum-assetlist-item-background-color-selected-hover);
150121
}
151122
}
152123
}
@@ -157,13 +128,13 @@
157128

158129
.spectrum-AssetList-itemChildIndicator {
159130
display: none;
160-
transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
131+
transition: transform ease var(--spectrum-animation-duration-100);
161132
transform: var(--spectrum-logical-rotation,);
162133
}
163134

164135
.spectrum-AssetList-itemLabel {
165136
flex: 1;
166-
padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start));
137+
padding-inline-start: var(--spectrum-spacing-100);
167138

168139
text-overflow: ellipsis;
169140
overflow: hidden;
@@ -172,18 +143,19 @@
172143

173144
@media (forced-colors: active) {
174145
.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-
146+
color: ButtonText;
181147
forced-color-adjust: none;
182148

149+
&.is-selected {
150+
background-color: SelectedItem;
151+
}
152+
183153
&:hover,
184-
&.is-selected,
154+
&.is-selected &:hover,
155+
&.is-selected &:focus,
185156
&.is-navigated {
186-
--highcontrast-assetlist-label-color: HighlightText;
157+
background-color: Highlight;
158+
color: HighlightText;
187159
}
188160
}
189161
}

‎components/assetlist/stories/assetlist.stories.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,15 @@ export default {
1212
component: "AssetList",
1313
argTypes: {
1414
items: { table: { disable: true } },
15+
isSelectable: {
16+
name: "Selectable",
17+
type: { name: "boolean" },
18+
table: {
19+
type: { summary: "boolean" },
20+
category: "Component",
21+
},
22+
control: "boolean",
23+
},
1524
},
1625
args: {
1726
rootClass: "spectrum-AssetList",
@@ -23,10 +32,10 @@ export default {
2332
packageJson,
2433
metadata,
2534
status: {
26-
type: "unmigrated",
35+
type: "migrated",
2736
},
2837
},
29-
tags: ["unmigrated"],
38+
tags: ["migrated"],
3039
};
3140

3241
export const Default = AssetListGroup.bind({});
@@ -63,7 +72,6 @@ Default.args = {
6372
label: "Downloads",
6473
isSelectable: true,
6574
isBranch: true,
66-
isSelected: false,
6775
isNavigated: true,
6876
ariaLabelledby: "assetitemlabel-4",
6977
checkboxId: "checkbox-4",

0 commit comments

Comments
 (0)