Skip to content

Commit 347b74e

Browse files
jianliaoJian Liao
jianliao
and
Jian Liao
authored
Spectrum tokens 17 tabs (#921)
* fix: workflow icon size change to medium * fix: add migration guide Co-authored-by: Jian Liao <jianliao@adobe.com>
1 parent 7a62de4 commit 347b74e

File tree

1 file changed

+37
-32
lines changed

1 file changed

+37
-32
lines changed

‎components/tabs/metadata/tabs.yml

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
name: Tabs
22
SpectrumSiteSlug: https://spectrum.adobe.com/page/tabs/
3+
sections:
4+
- name: Migration Guide
5+
description: |
6+
### Change workflow icon size to medium
7+
If you use workflow icon with tab item, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
38
examples:
49
- id: tabs
510
name: Basic tabs
@@ -26,25 +31,25 @@ examples:
2631
markup: |
2732
<div class="spectrum-Tabs spectrum-Tabs--horizontal">
2833
<div class="spectrum-Tabs-item is-selected" tabindex="0">
29-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
34+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
3035
<use xlink:href="#spectrum-icon-18-Folder" />
3136
</svg>
3237
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
3338
</div>
3439
<div class="spectrum-Tabs-item" tabindex="0">
35-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
40+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
3641
<use xlink:href="#spectrum-icon-18-Image" />
3742
</svg>
3843
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
3944
</div>
4045
<div class="spectrum-Tabs-item" tabindex="0">
41-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
46+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
4247
<use xlink:href="#spectrum-icon-18-Filter" />
4348
</svg>
4449
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
4550
</div>
4651
<div class="spectrum-Tabs-item" tabindex="0">
47-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
52+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
4853
<use xlink:href="#spectrum-icon-18-Comment" />
4954
</svg>
5055
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
@@ -76,25 +81,25 @@ examples:
7681
markup: |
7782
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--quiet">
7883
<div class="spectrum-Tabs-item is-selected" tabindex="0">
79-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
84+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
8085
<use xlink:href="#spectrum-icon-18-Folder" />
8186
</svg>
8287
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
8388
</div>
8489
<div class="spectrum-Tabs-item" tabindex="0">
85-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
90+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
8691
<use xlink:href="#spectrum-icon-18-Image" />
8792
</svg>
8893
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
8994
</div>
9095
<div class="spectrum-Tabs-item" tabindex="0">
91-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
96+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
9297
<use xlink:href="#spectrum-icon-18-Filter" />
9398
</svg>
9499
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
95100
</div>
96101
<div class="spectrum-Tabs-item" tabindex="0">
97-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
102+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
98103
<use xlink:href="#spectrum-icon-18-Comment" />
99104
</svg>
100105
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
@@ -125,25 +130,25 @@ examples:
125130
markup: |
126131
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
127132
<div class="spectrum-Tabs-item is-selected" tabindex="0">
128-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
133+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
129134
<use xlink:href="#spectrum-icon-18-Folder" />
130135
</svg>
131136
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
132137
</div>
133138
<div class="spectrum-Tabs-item" tabindex="0">
134-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
139+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
135140
<use xlink:href="#spectrum-icon-18-Image" />
136141
</svg>
137142
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
138143
</div>
139144
<div class="spectrum-Tabs-item" tabindex="0">
140-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
145+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
141146
<use xlink:href="#spectrum-icon-18-Filter" />
142147
</svg>
143148
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
144149
</div>
145150
<div class="spectrum-Tabs-item" tabindex="0">
146-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
151+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
147152
<use xlink:href="#spectrum-icon-18-Comment" />
148153
</svg>
149154
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
@@ -155,22 +160,22 @@ examples:
155160
markup: |
156161
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact">
157162
<div class="spectrum-Tabs-item is-selected" tabindex="0">
158-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
163+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
159164
<use xlink:href="#spectrum-icon-18-Folder" />
160165
</svg>
161166
</div>
162167
<div class="spectrum-Tabs-item" tabindex="0">
163-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
168+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
164169
<use xlink:href="#spectrum-icon-18-Image" />
165170
</svg>
166171
</div>
167172
<div class="spectrum-Tabs-item" tabindex="0">
168-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
173+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
169174
<use xlink:href="#spectrum-icon-18-Filter" />
170175
</svg>
171176
</div>
172177
<div class="spectrum-Tabs-item" tabindex="0">
173-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
178+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
174179
<use xlink:href="#spectrum-icon-18-Comment" />
175180
</svg>
176181
</div>
@@ -200,25 +205,25 @@ examples:
200205
markup: |
201206
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
202207
<div class="spectrum-Tabs-item is-selected" tabindex="0">
203-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
208+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
204209
<use xlink:href="#spectrum-icon-18-Folder" />
205210
</svg>
206211
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
207212
</div>
208213
<div class="spectrum-Tabs-item" tabindex="0">
209-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
214+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
210215
<use xlink:href="#spectrum-icon-18-Image" />
211216
</svg>
212217
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
213218
</div>
214219
<div class="spectrum-Tabs-item" tabindex="0">
215-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
220+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
216221
<use xlink:href="#spectrum-icon-18-Filter" />
217222
</svg>
218223
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
219224
</div>
220225
<div class="spectrum-Tabs-item" tabindex="0">
221-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
226+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
222227
<use xlink:href="#spectrum-icon-18-Comment" />
223228
</svg>
224229
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
@@ -230,22 +235,22 @@ examples:
230235
markup: |
231236
<div class="spectrum-Tabs spectrum-Tabs--horizontal spectrum-Tabs--compact spectrum-Tabs--quiet">
232237
<div class="spectrum-Tabs-item is-selected" tabindex="0">
233-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
238+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
234239
<use xlink:href="#spectrum-icon-18-Folder" />
235240
</svg>
236241
</div>
237242
<div class="spectrum-Tabs-item" tabindex="0">
238-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
243+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
239244
<use xlink:href="#spectrum-icon-18-Image" />
240245
</svg>
241246
</div>
242247
<div class="spectrum-Tabs-item" tabindex="0">
243-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
248+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
244249
<use xlink:href="#spectrum-icon-18-Filter" />
245250
</svg>
246251
</div>
247252
<div class="spectrum-Tabs-item" tabindex="0">
248-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
253+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
249254
<use xlink:href="#spectrum-icon-18-Comment" />
250255
</svg>
251256
</div>
@@ -274,25 +279,25 @@ examples:
274279
markup: |
275280
<div class="spectrum-Tabs spectrum-Tabs--vertical">
276281
<div class="spectrum-Tabs-item is-selected" tabindex="0">
277-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
282+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
278283
<use xlink:href="#spectrum-icon-18-Folder" />
279284
</svg>
280285
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
281286
</div>
282287
<div class="spectrum-Tabs-item" tabindex="0">
283-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
288+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
284289
<use xlink:href="#spectrum-icon-18-Image" />
285290
</svg>
286291
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
287292
</div>
288293
<div class="spectrum-Tabs-item" tabindex="0">
289-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
294+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
290295
<use xlink:href="#spectrum-icon-18-Filter" />
291296
</svg>
292297
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
293298
</div>
294299
<div class="spectrum-Tabs-item" tabindex="0">
295-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
300+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
296301
<use xlink:href="#spectrum-icon-18-Comment" />
297302
</svg>
298303
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
@@ -322,25 +327,25 @@ examples:
322327
markup: |
323328
<div class="spectrum-Tabs spectrum-Tabs--vertical spectrum-Tabs--compact">
324329
<div class="spectrum-Tabs-item is-selected" tabindex="0">
325-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
330+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
326331
<use xlink:href="#spectrum-icon-18-Folder" />
327332
</svg>
328333
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
329334
</div>
330335
<div class="spectrum-Tabs-item" tabindex="0">
331-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
336+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
332337
<use xlink:href="#spectrum-icon-18-Image" />
333338
</svg>
334339
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
335340
</div>
336341
<div class="spectrum-Tabs-item" tabindex="0">
337-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Filter">
342+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Filter">
338343
<use xlink:href="#spectrum-icon-18-Filter" />
339344
</svg>
340345
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
341346
</div>
342347
<div class="spectrum-Tabs-item" tabindex="0">
343-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Comment">
348+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Comment">
344349
<use xlink:href="#spectrum-icon-18-Comment" />
345350
</svg>
346351
<span class="spectrum-Tabs-itemLabel">Tab 4</span>

0 commit comments

Comments
 (0)