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/metadata.json

@@ -78,10 +78,7 @@
     "--mod-actionbutton-icon-size",
     "--mod-actionbutton-label-color",
     "--mod-actionbutton-min-width",
-    "--mod-actionbutton-text-to-visual",
-    "--mod-animation-duration-100",
-    "--mod-line-height-100",
-    "--mod-sans-font-family-stack"
+    "--mod-actionbutton-text-to-visual"
   ],
   "component": [
     "--spectrum-action-button-edge-to-hold-icon-extra-large",

components/actionbutton/metadata/mods.md

@@ -48,6 +48,3 @@
 | `--mod-actionbutton-label-color`                                  |
 | `--mod-actionbutton-min-width`                                    |
 | `--mod-actionbutton-text-to-visual`                               |
-| `--mod-animation-duration-100`                                    |
-| `--mod-line-height-100`                                           |
-| `--mod-sans-font-family-stack`                                    |

components/button/metadata/metadata.json

@@ -62,7 +62,6 @@
     "a.spectrum-Button"
   ],
   "modifiers": [
-    "--mod-animation-duration-100",
     "--mod-bold-font-weight",
     "--mod-button-animation-duration",
     "--mod-button-background-color-default",
@@ -108,8 +107,6 @@
     "--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"
   ],
   "component": [

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`    |
@@ -46,6 +45,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` |

components/closebutton/metadata/metadata.json

@@ -31,7 +31,6 @@
     "a.spectrum-CloseButton"
   ],
   "modifiers": [
-    "--mod-animation-duration-100",
     "--mod-closebutton-align-self",
     "--mod-closebutton-animation-duraction",
     "--mod-closebutton-animation-duration",
@@ -50,9 +49,7 @@
     "--mod-closebutton-icon-color-hover",
     "--mod-closebutton-margin-inline",
     "--mod-closebutton-margin-top",
-    "--mod-closebutton-size",
-    "--mod-line-height-100",
-    "--mod-sans-font-family-stack"
+    "--mod-closebutton-size"
   ],
   "component": [
     "--spectrum-closebutton-animation-duration",

components/closebutton/metadata/mods.md

@@ -1,6 +1,5 @@
 | Modifiable custom properties                  |
 | --------------------------------------------- |
-| `--mod-animation-duration-100`                |
 | `--mod-closebutton-align-self`                |
 | `--mod-closebutton-animation-duraction`       |
 | `--mod-closebutton-animation-duration`        |
@@ -20,5 +19,3 @@
 | `--mod-closebutton-margin-inline`             |
 | `--mod-closebutton-margin-top`                |
 | `--mod-closebutton-size`                      |
-| `--mod-line-height-100`                       |
-| `--mod-sans-font-family-stack`                |

components/commons/basebutton.css

@@ -29,39 +29,40 @@
 	/* Remove button the margin in Firefox and Safari. */
 	margin: 0;
 
-	/* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
-	font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
+	font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack));
+
+	/* Adjacent buttons should be aligned correctly */
+	vertical-align: top;
 
 	-webkit-font-smoothing: antialiased;
 
 	/* Font smoothing for Firefox */
 	-moz-osx-font-smoothing: grayscale;
 
-	/* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
-	line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
+	line-height: var(--mod-button-line-height, var(--spectrum-line-height-100));
 	text-decoration: none;
 
 	/* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
 	text-transform: none;
 
-	/* Adjacent buttons should be aligned correctly */
-	vertical-align: top;
-
 	/* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
 	-webkit-appearance: button;
 
-	border-style: solid;
-
 	transition:
-		background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-		box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
+		background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+		border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+		color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+		box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out;
 
 	/* Fix Firefox */
 	&::-moz-focus-inner {
-		border-style: none;
+		margin-block-start: -2px;
+		margin-block-end: -2px;
 		padding: 0;
+		border: 0;
+
+		/* Remove the inner border and padding for button in Firefox. */
+		border-style: none;
 	}
 
 	&:focus {
@@ -90,16 +91,15 @@
 		inset-inline-end: 0;
 
 		display: block;
-
-		margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)));
+		margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
 
 		transition:
-			opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out,
-			margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out;
+			opacity var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out,
+			margin var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out;
 	}
 
 	&:focus-visible::after {
-		margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
+		margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
 	}
 }
 

components/logicbutton/metadata/metadata.json

@@ -15,9 +15,6 @@
     ".spectrum-LogicButton:focus-visible:after"
   ],
   "modifiers": [
-    "--mod-animation-duration-100",
-    "--mod-focus-indicator-gap",
-    "--mod-line-height-100",
     "--mod-logic-button-and-background-color",
     "--mod-logic-button-and-background-color-disabled",
     "--mod-logic-button-and-background-color-hover",
@@ -46,8 +43,7 @@
     "--mod-logic-button-or-border-color-hover-disabled",
     "--mod-logic-button-or-text-color",
     "--mod-logic-button-or-text-color-disabled",
-    "--mod-logic-button-padding",
-    "--mod-sans-font-family-stack"
+    "--mod-logic-button-padding"
   ],
   "component": [
     "--spectrum-logic-button-and-background-color",

components/logicbutton/metadata/mods.md

@@ -1,8 +1,5 @@
 | Modifiable custom properties                             |
 | -------------------------------------------------------- |
-| `--mod-animation-duration-100`                           |
-| `--mod-focus-indicator-gap`                              |
-| `--mod-line-height-100`                                  |
 | `--mod-logic-button-and-background-color`                |
 | `--mod-logic-button-and-background-color-disabled`       |
 | `--mod-logic-button-and-background-color-hover`          |
@@ -32,4 +29,3 @@
 | `--mod-logic-button-or-text-color`                       |
 | `--mod-logic-button-or-text-color-disabled`              |
 | `--mod-logic-button-padding`                             |
-| `--mod-sans-font-family-stack`                           |

components/picker/metadata/metadata.json

@@ -77,8 +77,6 @@
     ".spectrum-Picker:hover .spectrum-Picker-menuIcon"
   ],
   "modifiers": [
-    "--mod-animation-duration-100",
-    "--mod-line-height-100",
     "--mod-picker-animation-duration",
     "--mod-picker-background-color-active",
     "--mod-picker-background-color-default",
@@ -141,8 +139,7 @@
     "--mod-picker-spacing-top-to-alert-icon",
     "--mod-picker-spacing-top-to-disclosure-icon",
     "--mod-picker-spacing-top-to-progress-circle",
-    "--mod-picker-spacing-top-to-text",
-    "--mod-sans-font-family-stack"
+    "--mod-picker-spacing-top-to-text"
   ],
   "component": [
     "--spectrum-picker-animation-duration",

components/picker/metadata/mods.md

@@ -1,7 +1,5 @@
 | Modifiable custom properties                           |
 | ------------------------------------------------------ |
-| `--mod-animation-duration-100`                         |
-| `--mod-line-height-100`                                |
 | `--mod-picker-animation-duration`                      |
 | `--mod-picker-background-color-active`                 |
 | `--mod-picker-background-color-default`                |
@@ -65,4 +63,3 @@
 | `--mod-picker-spacing-top-to-disclosure-icon`          |
 | `--mod-picker-spacing-top-to-progress-circle`          |
 | `--mod-picker-spacing-top-to-text`                     |
-| `--mod-sans-font-family-stack`                         |