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

components/card/metadata/card-asset.yml

@@ -5,8 +5,8 @@ sections:
  description: |
  ### Use Spectrum Heading for title and Spectrum Detail for subtitle
  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:
- * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
- * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+ * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+ * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
  - id: card-asset
  name: Standard
@@ -20,10 +20,10 @@ examples:
  </div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  </div>
  </div>
  <div class="spectrum-QuickActions spectrum-Card-quickActions">

components/card/metadata/card-gallery.yml

@@ -8,8 +8,8 @@ sections:
  Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
  ### Use Spectrum Heading for title and Spectrum Detail for subtitle
  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:
- * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
- * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+ * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+ * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
  - id: card-gallery
  name: Standard
@@ -23,8 +23,8 @@ examples:
  </div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  <div class="spectrum-Card-description">10/15/18</div>
  <div class="spectrum-Card-actionButton">
  <div style="display: inline-block;">

components/card/metadata/card.yml

@@ -6,8 +6,8 @@ sections:
  Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
  ### Use Spectrum Heading for title and Spectrum Detail for subtitle
  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:
- * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
- * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+ * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+ * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
  - id: card
  name: Standard
@@ -18,7 +18,7 @@ examples:
  <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
  <div class="spectrum-Card-actionButton">
  <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -28,7 +28,7 @@ examples:
  </div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  </div>
  </div>
  <div class="spectrum-Card-footer">
@@ -59,7 +59,7 @@ examples:
  <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
  <div class="spectrum-Card-actionButton">
  <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
  <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -69,7 +69,7 @@ examples:
  </div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  </div>
  </div>
  <div class="spectrum-Card-footer">
@@ -104,7 +104,7 @@ examples:
  </div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
  <div class="spectrum-Card-actionButton">
  <div style="display: inline-block;">
  <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
@@ -116,7 +116,7 @@ examples:
  </div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  <div class="spectrum-Card-description">10/15/18</div>
  </div>
  </div>
@@ -151,10 +151,10 @@ examples:
  </div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">FileName</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">FileName</div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">pdf</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">pdf</div>
  </div>
  </div>
  <div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -191,7 +191,7 @@ examples:
  <div class="spectrum-Card-title">FolderName</div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">folder</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">folder</div>
  </div>
  </div>
  <div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -218,10 +218,10 @@ examples:
  <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  </div>
  </div>
  <div class="spectrum-Card-footer">
@@ -255,10 +255,10 @@ examples:
  </div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  </div>
  </div>
  </div>
@@ -276,10 +276,10 @@ examples:
  </div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  </div>
  </div>
  <div class="spectrum-QuickActions spectrum-Card-actions">
@@ -319,10 +319,10 @@ examples:
  </div>
  <div class="spectrum-Card-body">
  <div class="spectrum-Card-header">
- <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+ <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
  </div>
  <div class="spectrum-Card-content">
- <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+ <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
  </div>
  </div>
  <div class="spectrum-QuickActions spectrum-Card-actions">

components/checkbox/metadata/checkbox.yml

@@ -11,7 +11,7 @@ examples:
  markup: |
  <div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
- <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
  <label class="spectrum-Checkbox">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -58,7 +58,7 @@ examples:
  </div>
 
  <div class="spectrum-Examples-item">
- <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
  <label class="spectrum-Checkbox is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
@@ -104,7 +104,7 @@ examples:
  </div>
 
  <div class="spectrum-Examples-item">
- <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
  <label class="spectrum-Checkbox is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
@@ -156,7 +156,7 @@ examples:
  markup: |
  <div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
- <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
  <label class="spectrum-Checkbox spectrum-Checkbox--quiet">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -203,7 +203,7 @@ examples:
  </div>
 
  <div class="spectrum-Examples-item">
- <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
  <label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
  <span class="spectrum-Checkbox-box">
@@ -249,7 +249,7 @@ examples:
  </div>
 
  <div class="spectrum-Examples-item">
- <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
  <label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled">
  <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>

components/divider/metadata/divider.yml

@@ -13,19 +13,19 @@ examples:
  - id: divider-large
  name: 'Large'
  markup: |
- <h2 class="spectrum-Heading spectrum-Heading--M">Large</h2>
+ <h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
  <hr class="spectrum-Divider spectrum-Divider--large">
  <p class="spectrum-Body">Page or Section Titles.</p>
  - id: divider-medium
  name: 'Medium'
  markup: |
- <h2 class="spectrum-Heading spectrum-Heading--S">Medium</h2>
+ <h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
  <hr class="spectrum-Divider spectrum-Divider--medium">
  <p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>
  - id: divider-small
  name: 'Small'
  markup: |
- <h2 class="spectrum-Heading spectrum-Heading--XS">Small</h2>
+ <h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
  <hr class="spectrum-Divider spectrum-Divider--small">
  <p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
  - id: divider-vertical-small

components/dropzone/metadata/dropzone.yml

@@ -7,8 +7,8 @@ examples:
  <div class="spectrum-Dropzone" role="region" tabindex="0" style="width: 300px;">
  <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
  <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>
- <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
- <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>
+ <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+ <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>
  </div>
  </div>
  - id: dropzone
@@ -17,7 +17,7 @@ examples:
  <div class="spectrum-Dropzone is-dragged" role="region" tabindex="0" style="width: 300px;">
  <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
  <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>
- <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
- <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>
+ <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+ <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>
  </div>
  </div>