Skip to content

Commit 32149e5

Browse files
jenndiazjenndiaz
authored
refactor(assetlist)!: migrate to spectrum tokens (#2211)
BREAKING CHANGE: migrates AssetList to use `@adobe/spectrum-tokens`. Additionally: * chore(assetlist): build changes * chore(assetlist): use new tokens * chore(assetlist): add custom color tokens * chore(assetlist): address empty label a11y * chore(assetlist): show focus outline * chore(assetlist): gen mods * chore(assetlist): a11y label fix * chore(assetlist): whcm wip * chore(assetlist): remove skin from template * chore(assetlist): whcm * chore(assetlist): remove unneeded code * chore(miller): address empty label * chore(assetlist): address empty label in storybook * chore(assetlist): update custom tokens * chore(assetlist): remove unused custom property * chore(assetlist): id for storybook checkbox
1 parent 07187f7 commit 32149e5

File tree

12 files changed

+234
-100
lines changed

12 files changed

+234
-100
lines changed

‎components/assetlist/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/assetlist/index.css

Lines changed: 91 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,29 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
.spectrum-AssetList {
14-
--spectrum-millercolumn-chevron-height: 10px;
15-
--spectrum-millercolumn-chevron-width: 6px;
16-
--spectrum-millercolumn-checkbox-margin: 0;
14+
--spectrum-assetlist-width: 272px;
15+
--spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100);
16+
17+
/* item */
18+
--spectrum-assetlist-item-height: var(--spectrum-spacing-600);
19+
--spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300);
20+
--spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300);
21+
--spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75);
22+
--spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75);
23+
--spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
24+
--spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
25+
--spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
26+
--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300);
27+
--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200);
28+
29+
/* thumbnail */
30+
--spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);
31+
--spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400);
32+
--spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100);
33+
34+
/* label */
35+
--spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
36+
--spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
1737
}
1838

1939
.spectrum-AssetList {
@@ -24,28 +44,27 @@ governing permissions and limitations under the License.
2444

2545
.spectrum-AssetList-item {
2646
position: relative;
47+
color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color)));
2748

2849
display: flex;
2950
box-sizing: border-box;
3051
align-items: center;
3152

32-
inline-size: var(--spectrum-millercolumn-width);
33-
block-size: var(--spectrum-millercolumn-item-height);
53+
inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width));
54+
block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
3455

3556
padding-block: 0;
36-
padding-inline: var(--spectrum-millercolumn-item-padding-left)
37-
var(--spectrum-millercolumn-item-padding-right);
38-
margin-block: 0 var(--spectrum-millercolumn-item-margin-bottom);
57+
padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start))
58+
var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end));
59+
margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end));
3960
margin-inline: 0;
4061

41-
border-radius: var(--spectrum-millercolumn-item-border-radius);
62+
border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
4263

43-
transition: background-color var(--spectrum-global-animation-duration-100)
44-
ease-in-out;
64+
transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out;
4565

46-
/* todo: replace with proper DNA variables */
47-
font-size: var(--spectrum-listitem-m-texticon-text-size);
48-
font-weight: var(--spectrum-listitem-m-texticon-text-font-weight);
66+
font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size));
67+
font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight));
4968
font-style: normal;
5069

5170
cursor: pointer;
@@ -59,11 +78,11 @@ governing permissions and limitations under the License.
5978
inset-inline-start: 0;
6079
inset-inline-end: 0;
6180

62-
block-size: var(--spectrum-millercolumn-item-height);
81+
block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
6382

6483
background-color: transparent;
6584

66-
border-radius: var(--spectrum-millercolumn-item-border-radius);
85+
border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
6786
}
6887

6988
&.is-selectable,
@@ -87,31 +106,80 @@ governing permissions and limitations under the License.
87106
/* Remove the border on images inside links in IE 10-. */
88107
border-style: none;
89108

90-
inline-size: var(--spectrum-millercolumn-thumbnail-width);
91-
block-size: var(--spectrum-millercolumn-thumbnail-height);
92-
margin-inline-start: var(--spectrum-millercolumn-thumbnail-margin-left);
109+
inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width));
110+
block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height));
111+
margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start));
93112
vertical-align: middle;
94113
}
114+
115+
&:hover {
116+
background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)));
117+
}
118+
119+
&:focus-within {
120+
&:focus-visible,
121+
&.is-focused {
122+
background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)));
123+
&::before {
124+
/* we cannot achieve rounded corners with outline so we use box-shadow instead */
125+
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;
126+
}
127+
}
128+
}
129+
130+
&.is-navigated {
131+
/* gray background */
132+
background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down));
133+
&:hover,
134+
&:focus {
135+
background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down))
136+
}
137+
}
138+
139+
&.is-selected {
140+
background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected)));
141+
&:hover,
142+
&:focus {
143+
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)));
144+
}
145+
}
95146
}
96147

97148
.spectrum-AssetList-itemSelector {
98149
display: none;
99-
/* hack: this needs to be specified as margin-right to override Checkbox's margin for LTR */
100-
margin-inline-end: var(--spectrum-millercolumn-checkbox-margin);
101150
}
102151

103152
.spectrum-AssetList-itemChildIndicator {
104153
display: none;
105-
transition: transform ease var(--spectrum-global-animation-duration-100);
154+
transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
106155

107156
transform: logical rotate(0deg);
108157
}
109158

110159
.spectrum-AssetList-itemLabel {
111160
flex: 1;
112-
padding-inline-start: var(--spectrum-millercolumn-item-label-padding-left);
161+
padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start));
162+
113163

114164
text-overflow: ellipsis;
115165
overflow: hidden;
116166
white-space: nowrap;
117167
}
168+
169+
@media (forced-colors: active) {
170+
.spectrum-AssetList-item {
171+
forced-color-adjust: none;
172+
--highcontrast-assetlist-border-color-key-focus: Highlight;
173+
--highcontrast-assetlist-item-background-color-hover: Highlight;
174+
--highcontrast-assetlist-item-background-color-selected-hover: Highlight;
175+
--highcontrast-assetlist-label-color: ButtonText;
176+
--highcontrast-assetlist-item-background-color-selected: SelectedItem;
177+
178+
&:hover,
179+
&.is-selected,
180+
&.is-navigated {
181+
--highcontrast-assetlist-label-color: SelectedItemText;
182+
}
183+
}
184+
}
185+

‎components/assetlist/metadata/assetlist.yml

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,31 @@
1-
id: miller-column
1+
id: asset-list
22
name: Asset list
33
description: "A selectable list of Assets, often used inside of Miller Columns."
44
examples:
5-
- id: miller-column
5+
- id: asset-list
66
name: Standard
77
markup: |
88
<ul class="spectrum-AssetList">
9+
910
<li class="spectrum-AssetList-item is-selectable" tabindex="0">
1011
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
11-
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0" tabindex="-1">
12+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" aria-labelledby="assetitemlabel-1">
1213
<span class="spectrum-Checkbox-box">
1314
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
1415
<use xlink:href="#spectrum-css-icon-Checkmark100" />
1516
</svg>
1617
</span>
1718
</label>
18-
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
19-
<span class="spectrum-AssetList-itemLabel">Shantanu.jpg</span>
19+
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
20+
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-1">Shantanu.jpg</span>
2021
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
2122
<use xlink:href="#spectrum-css-icon-Chevron100" />
2223
</svg>
2324
</li>
25+
2426
<li class="spectrum-AssetList-item is-selectable" tabindex="0">
2527
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
26-
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1">
28+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" tabindex="-1" aria-labelledby="assetitemlabel-2">
2729
<span class="spectrum-Checkbox-box">
2830
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
2931
<use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -33,14 +35,15 @@ examples:
3335
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="FileCSV">
3436
<use xlink:href="#spectrum-icon-18-Document"></use>
3537
</svg>
36-
<span class="spectrum-AssetList-itemLabel">Resource Allocation.csv</span>
38+
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-2">Resource Allocation.csv</span>
3739
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
3840
<use xlink:href="#spectrum-css-icon-Chevron100" />
3941
</svg>
4042
</li>
43+
4144
<li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
4245
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
43-
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" tabindex="-1" checked>
46+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" tabindex="-1" aria-labelledby="assetitemlabel-3" checked>
4447
<span class="spectrum-Checkbox-box">
4548
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
4649
<use xlink:href="#spectrum-css-icon-Checkmark100" />
@@ -50,9 +53,29 @@ examples:
5053
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="Folder">
5154
<use xlink:href="#spectrum-icon-24-Folder"></use>
5255
</svg>
53-
<span class="spectrum-AssetList-itemLabel">Frontend Projects</span>
56+
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-3">Frontend Projects</span>
5457
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
5558
<use xlink:href="#spectrum-css-icon-Chevron100" />
5659
</svg>
5760
</li>
61+
62+
63+
<li class="spectrum-AssetList-item is-branch is-selectable is-navigated" tabindex="0">
64+
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
65+
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-4" tabindex="-1" aria-labelledby="assetitemlabel-4">
66+
<span class="spectrum-Checkbox-box">
67+
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
68+
<use xlink:href="#spectrum-css-icon-Checkmark100" />
69+
</svg>
70+
</span>
71+
</label>
72+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-AssetList-itemThumbnail" focusable="false" aria-hidden="true" aria-label="Folder">
73+
<use xlink:href="#spectrum-icon-24-Folder"></use>
74+
</svg>
75+
<span class="spectrum-AssetList-itemLabel" id="assetitemlabel-4">Downloads</span>
76+
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
77+
<use xlink:href="#spectrum-css-icon-Chevron100" />
78+
</svg>
79+
</li>
80+
5881
</ul>

‎components/assetlist/metadata/mods.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
| Modifiable Custom Properties |
2+
| ------------------------------------------------------ |
3+
| `--mod-assetlist-border-color-key-focus` |
4+
| `--mod-assetlist-child-indicator-animation` |
5+
| `--mod-assetlist-item-animation` |
6+
| `--mod-assetlist-item-background-color-down` |
7+
| `--mod-assetlist-item-background-color-hover` |
8+
| `--mod-assetlist-item-background-color-selected` |
9+
| `--mod-assetlist-item-background-color-selected-hover` |
10+
| `--mod-assetlist-item-border-radius` |
11+
| `--mod-assetlist-item-font-size` |
12+
| `--mod-assetlist-item-font-weight` |
13+
| `--mod-assetlist-item-height` |
14+
| `--mod-assetlist-item-label-padding-inline-start` |
15+
| `--mod-assetlist-item-margin-bottom` |
16+
| `--mod-assetlist-item-padding-inline-end` |
17+
| `--mod-assetlist-item-padding-inline-start` |
18+
| `--mod-assetlist-label-color` |
19+
| `--mod-assetlist-thumbnail-margin-left` |
20+
| `--mod-assetlist-thumbnail-width` |
21+
| `--mod-assetlist-thumnail-height` |
22+
| `--mod-assetlist-width` |

‎components/assetlist/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@
2424
},
2525
"devDependencies": {
2626
"@spectrum-css/checkbox": "^7.0.16",
27-
"@spectrum-css/component-builder": "^4.0.14",
27+
"@spectrum-css/component-builder-simple": "^2.0.17",
2828
"@spectrum-css/icon": "^4.0.3",
29-
"@spectrum-css/vars": "^9.0.8",
29+
"@spectrum-css/tokens": "^11.3.7",
3030
"gulp": "^4.0.0"
3131
},
3232
"publishConfig": {

‎components/assetlist/skin.css

Lines changed: 0 additions & 45 deletions
This file was deleted.

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,24 @@ Default.args = {
3333
image: "example-ava.png",
3434
label: "Shantanu.jpg",
3535
isSelectable: true,
36+
ariaLabelledBy: "assetitemlabel-1",
37+
checkboxId: "checkbox-1"
3638
},
3739
{
3840
iconName: "Document",
3941
label: "Resource Allocation.csv",
4042
isSelectable: true,
43+
ariaLabelledby: "assetitemlabel-2",
44+
checkboxId: "checkbox-2",
4145
},
4246
{
4347
iconName: "Folder",
4448
label: "Frontend Projects",
4549
isSelectable: true,
4650
isBranch: true,
4751
isSelected: true,
52+
ariaLabelledby: "assetitemlabel-3",
53+
checkboxId: "checkbox-3",
4854
},
4955
{
5056
iconName: "Folder",
@@ -53,6 +59,8 @@ Default.args = {
5359
isBranch: true,
5460
isSelected: false,
5561
isNavigated: true,
62+
ariaLabelledby: "assetitemlabel-4",
63+
checkboxId: "checkbox-4",
5664
},
5765
],
5866
};

0 commit comments

Comments
 (0)