fix(commons): remove renamed mods marked for deprecation (#2580)

* fix(commons): remove renamed mods marked for deprecation

Remove mods that were renamed and previously marked for deprecation,
and regenerate mods lists. This will help in reviewing the accuracy of
other components' mods lists as they are being migrated to s2.

* docs: migration guide notes for mod property deprecations

Add notes to components affected by mod property changes in the commons
basebutton.

* docs(closebutton): updated docs for migration guide and icon size

- Removes the "Icon size" variant options, as noted in the closebutton
  PR. Per Figma changelog "removed icon size as a property".
- Updates migration guide with a more organized history.

* fix(commons): remove another mod referencing global token

Deprecates an additional mod name that was referencing a global token,
and updates migration notes for all affected components.

Author: jawinn

components/actionbutton/metadata/actionbutton.yml

@@ -12,16 +12,24 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/actionbutton/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### Action Button now requires a class on its icon
+      ### x/x/2024 - Version 6.0.0
+      #### Spectrum 2 release
+      Action button now uses Spectrum 2 tokens and specifications. A few notable changes:
+      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+
+      ### Versions prior to 6.0.0
+      #### Action Button now requires a class on its icon
       The `.spectrum-ActionButton-icon` class is now required on the icon.
 
-      ### T-shirt sizing
+      #### T-shirt sizing
       Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class.
 
-      ### Action Button is now a separate component
+      #### Action Button is now a separate component
       Action Button has been moved to the [Action Button](actionbutton.html) component.
 
-      ### Change workflow icon size
+      #### Change workflow icon size
 
       Previously, all Action Buttons used `.spectrum-Icon--sizeS`. This has changed:
 
@@ -33,7 +41,7 @@ sections:
       | `.spectrum-ActionButton--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-ActionButton--sizeXL` | `.spectrum-Icon--sizeXL`          |
 
-      ### Change hold icon classnames
+      #### Change hold icon classnames
 
       Hold icon classnames must be set as follows:
 
@@ -45,10 +53,10 @@ sections:
       | `.spectrum-ActionButton--sizeL`  | `.spectrum-UIIcon-CornerTriangle200` |
       | `.spectrum-ActionButton--sizeXL` | `.spectrum-UIIcon-CornerTriangle300` |
 
-      ### Include markup for hold icon before workflow icon
+      #### Include markup for hold icon before workflow icon
       Because of the way padding is calculated, the hold icon must be placed before the workflow icon.
 
-      ### Remove focus-ring class
+      #### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 examples:
   - id: actionbutton-sizing

components/actionbutton/metadata/mods.md

@@ -49,9 +49,6 @@
 | `--mod-actionbutton-min-width`                                    |
 | `--mod-actionbutton-static-content-color`                         |
 | `--mod-actionbutton-text-to-visual`                               |
-| `--mod-animation-duration-100`                                    |
 | `--mod-button-animation-duration`                                 |
 | `--mod-button-font-family`                                        |
 | `--mod-button-line-height`                                        |
-| `--mod-line-height-100`                                           |
-| `--mod-sans-font-family-stack`                                    |

components/button/metadata/button-accent.yml

@@ -8,20 +8,28 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### Fill or Outline class required
+      ### x/x/2024 - Version 13.0.0
+      #### Spectrum 2 release
+      Button now uses Spectrum 2 tokens and specifications. A few notable changes:
+      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+
+      ### Versions prior to 13.0.0
+      #### Fill or Outline class required
       All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
 
-      ### CTA replaced by Accent with Fill
+      #### CTA replaced by Accent with Fill
       Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`.
 
-      ### Icon Only
+      #### Icon Only
       Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
       Provide an `aria-label` on the button itself when using this variant for accessibility.
 
-      ### T-shirt sizing
+      #### T-shirt sizing
       Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
 
-      ### Change workflow icon size
+      #### Change workflow icon size
 
       Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
 
@@ -32,7 +40,7 @@ sections:
       | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 
-      ### Remove focus-ring class
+      #### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 examples:
   - id: button-accent

components/button/metadata/button-negative.yml

@@ -8,23 +8,31 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### Fill or Outline class required
+      ### x/x/2024 - Version 13.0.0
+      #### Spectrum 2 release
+      Button now uses Spectrum 2 tokens and specifications. A few notable changes:
+      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+
+      ### Versions prior to 13.0.0
+      #### Fill or Outline class required
       All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
 
-      ### Negative replaced by Negative with Outline
+      #### Negative replaced by Negative with Outline
       Replace all `.spectrum-Button--negative` with `.spectrum-Button--negative .spectrum-Button--outline`.
 
-      ### Negative Quiet replaced by Negative with Outline
+      #### Negative Quiet replaced by Negative with Outline
       Replace all `.spectrum-Button--negative .spectrum-Button--quiet` with `.spectrum-Button--negative .spectrum-Button--outline`.
 
-      ### Icon Only
+      #### Icon Only
       Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
       Provide an `aria-label` on the button itself when using this variant for accessibility.
 
-      ### T-shirt sizing
+      #### T-shirt sizing
       Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
 
-      ### Change workflow icon size
+      #### Change workflow icon size
 
       Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
 
@@ -35,7 +43,7 @@ sections:
       | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 
-      ### Remove focus-ring class
+      #### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 examples:
   - id: button-negative

components/button/metadata/button-primary.yml

@@ -8,23 +8,31 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### Fill or Outline class required
+      ### x/x/2024 - Version 13.0.0
+      #### Spectrum 2 release
+      Button now uses Spectrum 2 tokens and specifications. A few notable changes:
+      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+
+      ### Versions prior to 13.0.0
+      #### Fill or Outline class required
       All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
 
-      ### Primary replaced by Primary with Outline
+      #### Primary replaced by Primary with Outline
       Replace all `.spectrum-Button--primary` with `.spectrum-Button--primary .spectrum-Button--outline`.
 
-      ### Primary Quiet replaced by Secondary with Outline
+      #### Primary Quiet replaced by Secondary with Outline
       Replace all `.spectrum-Button--primary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`.
 
-      ### Icon Only
+      #### Icon Only
       Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
       Provide an `aria-label` on the button itself when using this variant for accessibility.
 
-      ### T-shirt sizing
+      #### T-shirt sizing
       Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
 
-      ### Change workflow icon size
+      #### Change workflow icon size
 
       Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
 
@@ -35,7 +43,7 @@ sections:
       | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 
-      ### Remove focus-ring class
+      #### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 examples:
   - id: button-primary

components/button/metadata/button-secondary.yml

@@ -8,23 +8,31 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### Fill or Outline class required
+      ### x/x/2024 - Version 13.0.0
+      #### Spectrum 2 release
+      Button now uses Spectrum 2 tokens and specifications. A few notable changes:
+      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+
+      ### Versions prior to 13.0.0
+      #### Fill or Outline class required
       All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
 
-      ### Secondary replaced by Secondary with Outline
+      #### Secondary replaced by Secondary with Outline
       Replace all `.spectrum-Button--secondary` with `.spectrum-Button--secondary .spectrum-Button--outline`.
 
-      ### Secondary Quiet replaced by Secondary with Outline
+      #### Secondary Quiet replaced by Secondary with Outline
       Replace all `.spectrum-Button--secondary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`.
 
-      ### Icon Only
+      #### Icon Only
       Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
       Provide an `aria-label` on the button itself when using this variant for accessibility.
 
-      ### T-shirt sizing
+      #### T-shirt sizing
       Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
 
-      ### Change workflow icon size
+      #### Change workflow icon size
 
       Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
 
@@ -35,7 +43,7 @@ sections:
       | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 
-      ### Remove focus-ring class
+      #### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 examples:
   - id: button-secondary

components/button/metadata/button-staticcolor.yml

@@ -8,23 +8,31 @@ sections:
       This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>.
   - name: Migration Guide
     description: |
-      ### Fill or Outline class required
+      ### x/x/2024 - Version 13.0.0
+      #### Spectrum 2 release
+      Button now uses Spectrum 2 tokens and specifications. A few notable changes:
+      - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`.
+      - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`.
+      - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+
+      ### Versions prior to 13.0.0
+      #### Fill or Outline class required
       All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class.
 
-      ### Over background replaced by StaticWhite with Outline
+      #### Over background replaced by StaticWhite with Outline
       Replace all `.spectrum-Button--overBackground` with `.spectrum-Button--staticWhite .spectrum-Button--outline`.
 
-      ### Over background Quiet replaced by StaticWhite with Outline
+      #### Over background Quiet replaced by StaticWhite with Outline
       Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`.
 
-      ### Icon Only
+      #### Icon Only
       Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
       Provide an `aria-label` on the button itself when using this variant for accessibility.
 
-      ### T-shirt sizing
+      #### T-shirt sizing
       Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
 
-      ### Change workflow icon size
+      #### Change workflow icon size
 
       Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
 
@@ -35,7 +43,7 @@ sections:
       | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
       | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 
-      ### Remove focus-ring class
+      #### Remove focus-ring class
       We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
 examples:
   - id: button-staticcolor

components/button/metadata/mods.md

@@ -1,6 +1,5 @@
 | Modifiable custom properties               |
 | ------------------------------------------ |
-| `--mod-animation-duration-100`             |
 | `--mod-bold-font-weight`                   |
 | `--mod-button-animation-duration`          |
 | `--mod-button-background-color-default`    |
@@ -45,6 +44,4 @@
 | `--mod-button-top-to-icon`                 |
 | `--mod-button-top-to-text`                 |
 | `--mod-focus-indicator-gap`                |
-| `--mod-line-height-100`                    |
-| `--mod-sans-font-family-stack`             |
 | `--mod-static-black-focus-indicator-color` |