Skip to content

Commit 1a604c4

Browse files
GarthDBGarthDB
authored
fix!: updated type sizes to use consistent syntax, related to #972 (#1031)
BREAKING CHANGE: all typography sizing classes now have --size* instead of --*, see migration guides
1 parent 56cf5d6 commit 1a604c4

File tree

30 files changed

+682
-636
lines changed

30 files changed

+682
-636
lines changed

‎components/card/metadata/card-asset.yml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ sections:
55
description: |
66
### Use Spectrum Heading for title and Spectrum Detail for subtitle
77
To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
8-
* Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
9-
* Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
8+
* Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
9+
* Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
1010
examples:
1111
- id: card-asset
1212
name: Standard
@@ -20,10 +20,10 @@ examples:
2020
</div>
2121
<div class="spectrum-Card-body">
2222
<div class="spectrum-Card-header">
23-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
23+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
2424
</div>
2525
<div class="spectrum-Card-content">
26-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
26+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
2727
</div>
2828
</div>
2929
<div class="spectrum-QuickActions spectrum-Card-quickActions">

‎components/card/metadata/card-gallery.yml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ sections:
88
Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
99
### Use Spectrum Heading for title and Spectrum Detail for subtitle
1010
To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
11-
* Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
12-
* Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
11+
* Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
12+
* Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
1313
examples:
1414
- id: card-gallery
1515
name: Standard
@@ -23,8 +23,8 @@ examples:
2323
</div>
2424
<div class="spectrum-Card-body">
2525
<div class="spectrum-Card-header">
26-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
27-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
26+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
27+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
2828
<div class="spectrum-Card-description">10/15/18</div>
2929
<div class="spectrum-Card-actionButton">
3030
<div style="display: inline-block;">

‎components/card/metadata/card.yml

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ sections:
66
Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
77
### Use Spectrum Heading for title and Spectrum Detail for subtitle
88
To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
9-
* Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
10-
* Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
9+
* Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
10+
* Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
1111
examples:
1212
- id: card
1313
name: Standard
@@ -18,7 +18,7 @@ examples:
1818
<div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
1919
<div class="spectrum-Card-body">
2020
<div class="spectrum-Card-header">
21-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
21+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
2222
<div class="spectrum-Card-actionButton">
2323
<button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
2424
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -28,7 +28,7 @@ examples:
2828
</div>
2929
</div>
3030
<div class="spectrum-Card-content">
31-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
31+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
3232
</div>
3333
</div>
3434
<div class="spectrum-Card-footer">
@@ -59,7 +59,7 @@ examples:
5959
<div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
6060
<div class="spectrum-Card-body">
6161
<div class="spectrum-Card-header">
62-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
62+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
6363
<div class="spectrum-Card-actionButton">
6464
<button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
6565
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -69,7 +69,7 @@ examples:
6969
</div>
7070
</div>
7171
<div class="spectrum-Card-content">
72-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
72+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
7373
</div>
7474
</div>
7575
<div class="spectrum-Card-footer">
@@ -104,7 +104,7 @@ examples:
104104
</div>
105105
<div class="spectrum-Card-body">
106106
<div class="spectrum-Card-header">
107-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
107+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
108108
<div class="spectrum-Card-actionButton">
109109
<div style="display: inline-block;">
110110
<button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
@@ -116,7 +116,7 @@ examples:
116116
</div>
117117
</div>
118118
<div class="spectrum-Card-content">
119-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
119+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
120120
<div class="spectrum-Card-description">10/15/18</div>
121121
</div>
122122
</div>
@@ -151,10 +151,10 @@ examples:
151151
</div>
152152
<div class="spectrum-Card-body">
153153
<div class="spectrum-Card-header">
154-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">FileName</div>
154+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">FileName</div>
155155
</div>
156156
<div class="spectrum-Card-content">
157-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">pdf</div>
157+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">pdf</div>
158158
</div>
159159
</div>
160160
<div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -191,7 +191,7 @@ examples:
191191
<div class="spectrum-Card-title">FolderName</div>
192192
</div>
193193
<div class="spectrum-Card-content">
194-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">folder</div>
194+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">folder</div>
195195
</div>
196196
</div>
197197
<div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -218,10 +218,10 @@ examples:
218218
<div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
219219
<div class="spectrum-Card-body">
220220
<div class="spectrum-Card-header">
221-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
221+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
222222
</div>
223223
<div class="spectrum-Card-content">
224-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
224+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
225225
</div>
226226
</div>
227227
<div class="spectrum-Card-footer">
@@ -255,10 +255,10 @@ examples:
255255
</div>
256256
<div class="spectrum-Card-body">
257257
<div class="spectrum-Card-header">
258-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
258+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
259259
</div>
260260
<div class="spectrum-Card-content">
261-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
261+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
262262
</div>
263263
</div>
264264
</div>
@@ -276,10 +276,10 @@ examples:
276276
</div>
277277
<div class="spectrum-Card-body">
278278
<div class="spectrum-Card-header">
279-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
279+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
280280
</div>
281281
<div class="spectrum-Card-content">
282-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
282+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
283283
</div>
284284
</div>
285285
<div class="spectrum-QuickActions spectrum-Card-actions">
@@ -319,10 +319,10 @@ examples:
319319
</div>
320320
<div class="spectrum-Card-body">
321321
<div class="spectrum-Card-header">
322-
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
322+
<div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
323323
</div>
324324
<div class="spectrum-Card-content">
325-
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
325+
<div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
326326
</div>
327327
</div>
328328
<div class="spectrum-QuickActions spectrum-Card-actions">

‎components/checkbox/metadata/checkbox.yml

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ examples:
1111
markup: |
1212
<div class="spectrum-Examples">
1313
<div class="spectrum-Examples-item">
14-
<h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
14+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
1515
1616
<label class="spectrum-Checkbox">
1717
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -58,7 +58,7 @@ examples:
5858
</div>
5959
6060
<div class="spectrum-Examples-item">
61-
<h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
61+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
6262
<label class="spectrum-Checkbox is-invalid">
6363
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
6464
<span class="spectrum-Checkbox-box">
@@ -104,7 +104,7 @@ examples:
104104
</div>
105105
106106
<div class="spectrum-Examples-item">
107-
<h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
107+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
108108
109109
<label class="spectrum-Checkbox is-disabled">
110110
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
@@ -156,7 +156,7 @@ examples:
156156
markup: |
157157
<div class="spectrum-Examples">
158158
<div class="spectrum-Examples-item">
159-
<h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
159+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
160160
161161
<label class="spectrum-Checkbox spectrum-Checkbox--quiet">
162162
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -203,7 +203,7 @@ examples:
203203
</div>
204204
205205
<div class="spectrum-Examples-item">
206-
<h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
206+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
207207
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
208208
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
209209
<span class="spectrum-Checkbox-box">
@@ -249,7 +249,7 @@ examples:
249249
</div>
250250
251251
<div class="spectrum-Examples-item">
252-
<h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
252+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
253253
254254
<label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled">
255255
<input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>

‎components/divider/metadata/divider.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,19 @@ examples:
1313
- id: divider-large
1414
name: 'Large'
1515
markup: |
16-
<h2 class="spectrum-Heading spectrum-Heading--M">Large</h2>
16+
<h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
1717
<hr class="spectrum-Divider spectrum-Divider--large">
1818
<p class="spectrum-Body">Page or Section Titles.</p>
1919
- id: divider-medium
2020
name: 'Medium'
2121
markup: |
22-
<h2 class="spectrum-Heading spectrum-Heading--S">Medium</h2>
22+
<h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
2323
<hr class="spectrum-Divider spectrum-Divider--medium">
2424
<p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>
2525
- id: divider-small
2626
name: 'Small'
2727
markup: |
28-
<h2 class="spectrum-Heading spectrum-Heading--XS">Small</h2>
28+
<h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
2929
<hr class="spectrum-Divider spectrum-Divider--small">
3030
<p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
3131
- id: divider-vertical-small

‎components/dropzone/metadata/dropzone.yml

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ examples:
77
<div class="spectrum-Dropzone" role="region" tabindex="0" style="width: 300px;">
88
<div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
99
<svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
10-
<h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
11-
<p class="spectrum-Body spectrum-Body--S spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
10+
<h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
11+
<p class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
1212
</div>
1313
</div>
1414
- id: dropzone
@@ -17,7 +17,7 @@ examples:
1717
<div class="spectrum-Dropzone is-dragged" role="region" tabindex="0" style="width: 300px;">
1818
<div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
1919
<svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
20-
<h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
21-
<p class="spectrum-Body spectrum-Body--S spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
20+
<h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
21+
<p class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
2222
</div>
2323
</div>

0 commit comments

Comments
 (0)