Skip to content

Commit aa163d2

Browse files
jenndiazpfulton
jenndiaz
and
pfulton
authored
feat(millercolumns)!: migrate to spectrum-tokens (#2191)
BREAKING CHANGE: migrates MillerColumns to use `@adobe/spectrum-tokens` Additionally: * chore(miller): update build * chore(miller): use new tokens * chore(miller): remove extra space * fix(miller): storybook only files selectable * chore(millercolumns): rename custom properties * docs(miller): generate mods --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent 0811386 commit aa163d2

File tree

8 files changed

+84
-35
lines changed

8 files changed

+84
-35
lines changed

‎components/assetlist/stories/template.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ export const AssetListItem = ({
3434
@click=${onclick}
3535
tabindex="0"
3636
>
37-
${Checkbox({
37+
${when(isSelectable, () =>
38+
Checkbox({
3839
...globals,
3940
size: "m",
4041
isChecked: isSelected,
4142
customClasses: [`${rootClass}Selector`],
42-
})}
43+
}))}
4344
${when(
4445
image,
4546
() =>
@@ -53,6 +54,13 @@ export const AssetListItem = ({
5354
})
5455
)}
5556
${when(label, () => html`<span class="${rootClass}Label">${label}</span>`)}
57+
${when(!isSelectable && !isBranch, () =>
58+
Checkbox({
59+
...globals,
60+
size: "m",
61+
isChecked: isSelected,
62+
customClasses: [`${rootClass}Selector`],
63+
}))}
5664
${when(isBranch, () =>
5765
Icon({
5866
iconName: "ChevronRight100",

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

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

1313
.spectrum-MillerColumns {
14-
--spectrum-millercolumn-margin: 8px;
14+
--spectrum-millercolumns-inline-size: 272px;
15+
--spectrum-millercolumns-padding: var(--spectrum-spacing-100);
16+
--spectrum-millercolumns-margin-inline-start: var(--spectrum-spacing-100);
17+
--spectrum-millercolumns-margin-inline-end: var(--spectrum-spacing-100);
1518
}
1619

1720
.spectrum-MillerColumns {
1821
overflow-x: auto;
1922
white-space: nowrap;
2023
user-select: none;
21-
padding: var(--spectrum-millercolumn-margin) 0;
24+
padding: var(--mod-millercolumns-padding, var(--spectrum-millercolumns-padding)) 0;
2225
}
2326

2427
.spectrum-MillerColumns-item {
2528
display: inline-block;
26-
inline-size: var(--spectrum-millercolumn-width);
29+
inline-size: var(--mod-millercolumns-inline-size, var(--spectrum-millercolumns-inline-size));
2730
vertical-align: top;
2831
outline: none;
2932
margin: 0;
3033
padding: 0;
31-
margin-inline-end: var(--spectrum-millercolumn-margin);
34+
margin-inline-end: var(--mod-millercolumns-margin-inline-end, var(--spectrum-millercolumns-margin-inline-end));
3235
overflow: auto;
3336
block-size: 100%;
3437

3538
&:first-child {
36-
margin-inline-start: var(--spectrum-millercolumn-margin);
39+
margin-inline-start: var(--mod-millercolumns-margin-inline-start, var(--spectrum-millercolumns-margin-inline-start));
3740
}
3841
}

‎components/miller/metadata/miller.yml

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,42 @@ examples:
1212
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
1313
<span class="spectrum-Checkbox-box">
1414
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
15-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
15+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
1616
</svg>
1717
</span>
1818
</label>
1919
<span class="spectrum-AssetList-itemLabel">File 1</span>
2020
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
21-
<use xlink:href="#spectrum-css-icon-Chevron100" />
21+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
2222
</svg>
2323
</li>
2424
<li class="spectrum-AssetList-item is-branch is-selectable is-selected" tabindex="0">
2525
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
2626
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
2727
<span class="spectrum-Checkbox-box">
2828
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
29-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
29+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
3030
</svg>
3131
</span>
3232
</label>
3333
<span class="spectrum-AssetList-itemLabel">File 2</span>
3434
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
35-
<use xlink:href="#spectrum-css-icon-Chevron100" />
35+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
3636
</svg>
3737
</li>
3838
<li class="spectrum-AssetList-item is-branch is-selectable" tabindex="0">
3939
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
4040
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2">
4141
<span class="spectrum-Checkbox-box">
4242
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
43-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
43+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
4444
</svg>
4545
</span>
4646
</label>
47-
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
47+
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
4848
<span class="spectrum-AssetList-itemLabel">File 3</span>
4949
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
50-
<use xlink:href="#spectrum-css-icon-Chevron100" />
50+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
5151
</svg>
5252
</li>
5353
</ul>
@@ -59,42 +59,42 @@ examples:
5959
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
6060
<span class="spectrum-Checkbox-box">
6161
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
62-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
62+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
6363
</svg>
6464
</span>
6565
</label>
6666
<span class="spectrum-AssetList-itemLabel">File 1</span>
6767
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
68-
<use xlink:href="#spectrum-css-icon-Chevron100" />
68+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
6969
</svg>
7070
</li>
7171
<li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
7272
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
7373
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1" checked>
7474
<span class="spectrum-Checkbox-box">
7575
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
76-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
76+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
7777
</svg>
7878
</span>
7979
</label>
8080
<span class="spectrum-AssetList-itemLabel">File 2</span>
8181
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
82-
<use xlink:href="#spectrum-css-icon-Chevron100" />
82+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
8383
</svg>
8484
</li>
8585
<li class="spectrum-AssetList-item is-selectable is-selected" tabindex="0">
8686
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
8787
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
8888
<span class="spectrum-Checkbox-box">
8989
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
90-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
90+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
9191
</svg>
9292
</span>
9393
</label>
94-
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
94+
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
9595
<span class="spectrum-AssetList-itemLabel">File 3</span>
9696
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
97-
<use xlink:href="#spectrum-css-icon-Chevron100" />
97+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
9898
</svg>
9999
</li>
100100
</ul>
@@ -110,7 +110,7 @@ examples:
110110
<li class="spectrum-AssetList-item is-branch" tabindex="0">
111111
<span class="spectrum-AssetList-itemLabel">File 1</span>
112112
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
113-
<use xlink:href="#spectrum-css-icon-Chevron100" />
113+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
114114
</svg>
115115
</li>
116116
<li class="spectrum-AssetList-item" tabindex="0">
@@ -119,20 +119,20 @@ examples:
119119
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
120120
<span class="spectrum-Checkbox-box">
121121
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
122-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
122+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
123123
</svg>
124124
</span>
125125
</label>
126126
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
127-
<use xlink:href="#spectrum-css-icon-Chevron100" />
127+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
128128
</svg>
129129
</li>
130130
<li class="spectrum-AssetList-item is-navigated is-branch" tabindex="0">
131-
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
131+
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
132132
<span class="spectrum-AssetList-itemLabel">File 3</span></span>
133133
134134
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
135-
<use xlink:href="#spectrum-css-icon-Chevron100" />
135+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
136136
</svg>
137137
</li>
138138
</ul>
@@ -143,7 +143,7 @@ examples:
143143
<li class="spectrum-AssetList-item is-branch" tabindex="0">
144144
<span class="spectrum-AssetList-itemLabel">File 1</span>
145145
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
146-
<use xlink:href="#spectrum-css-icon-Chevron100" />
146+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
147147
</svg>
148148
</li>
149149
<li class="spectrum-AssetList-item" tabindex="0">
@@ -152,27 +152,27 @@ examples:
152152
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-1">
153153
<span class="spectrum-Checkbox-box">
154154
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
155-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
155+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
156156
</svg>
157157
</span>
158158
</label>
159159
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
160-
<use xlink:href="#spectrum-css-icon-Chevron100" />
160+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
161161
</svg>
162162
</li>
163163
<li class="spectrum-AssetList-item is-selected" tabindex="0">
164-
<img src="img/example-ava.jpg" class="spectrum-AssetList-itemThumbnail">
164+
<img src="img/example-ava.jpg" alt="asset item thumbnail" class="spectrum-AssetList-itemThumbnail">
165165
<span class="spectrum-AssetList-itemLabel">File 3</span>
166166
<label class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-AssetList-itemSelector">
167167
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-2" checked>
168168
<span class="spectrum-Checkbox-box">
169169
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
170-
<use xlink:href="#spectrum-css-icon-Checkmark100" />
170+
<use xlink:href="#spectrum-css-icon-Checkmark100"/>
171171
</svg>
172172
</span>
173173
</label>
174174
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-AssetList-itemChildIndicator" focusable="false" aria-hidden="true">
175-
<use xlink:href="#spectrum-css-icon-Chevron100" />
175+
<use xlink:href="#spectrum-css-icon-Chevron100"/>
176176
</svg>
177177
</li>
178178
</ul>

‎components/miller/metadata/mods.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
| Modifiable Custom Properties |
2+
| ----------------------------------------- |
3+
| `--mod-millercolumns-inline-size` |
4+
| `--mod-millercolumns-margin-inline-end` |
5+
| `--mod-millercolumns-margin-inline-start` |
6+
| `--mod-millercolumns-padding` |

‎components/miller/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
"devDependencies": {
2727
"@spectrum-css/assetlist": "^3.0.85",
2828
"@spectrum-css/checkbox": "^7.0.15",
29-
"@spectrum-css/component-builder": "^4.0.14",
29+
"@spectrum-css/component-builder-simple": "^2.0.17",
3030
"@spectrum-css/icon": "^4.0.3",
31-
"@spectrum-css/vars": "^9.0.8",
31+
"@spectrum-css/tokens": "^11.3.7",
3232
"gulp": "^4.0.0"
3333
},
3434
"publishConfig": {

‎components/miller/themes/express.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
@container (--system: express) {
14+
.spectrum-MillerColumns {
15+
}
16+
}

‎components/miller/themes/spectrum.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/*!
2+
Copyright 2023 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
@container (--system: spectrum) {
14+
.spectrum-MillerColumns {
15+
}
16+
}

0 commit comments

Comments
 (0)