From 390ec4506fb5329daa0452401bc35e0ef59e91fe Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Fri, 8 Mar 2024 13:45:59 -0500
Subject: [PATCH] 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.
---
.../actionbutton/metadata/actionbutton.yml | 22 +++--
components/actionbutton/metadata/mods.md | 3 -
components/button/metadata/button-accent.yml | 20 ++--
.../button/metadata/button-negative.yml | 22 +++--
components/button/metadata/button-primary.yml | 22 +++--
.../button/metadata/button-secondary.yml | 22 +++--
.../button/metadata/button-staticcolor.yml | 22 +++--
components/button/metadata/mods.md | 3 -
.../closebutton/metadata/closebutton.yml | 95 +++++--------------
components/closebutton/metadata/mods.md | 3 -
components/commons/basebutton.css | 29 ++----
.../logicbutton/metadata/logicbutton.yml | 11 ++-
components/logicbutton/metadata/mods.md | 4 -
components/picker/metadata/mods.md | 3 -
components/picker/metadata/picker.yml | 22 +++--
15 files changed, 148 insertions(+), 155 deletions(-)
diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml
index acc03b5be7c..e2cdbb7badf 100644
--- a/components/actionbutton/metadata/actionbutton.yml
+++ b/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 here.
- 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
diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md
index 1ee43dbeda1..fd40645cf65 100644
--- a/components/actionbutton/metadata/mods.md
+++ b/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` |
diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml
index 8d3be60b926..9870c50f9ec 100644
--- a/components/button/metadata/button-accent.yml
+++ b/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 here.
- 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
diff --git a/components/button/metadata/button-negative.yml b/components/button/metadata/button-negative.yml
index 9acb42c7e1f..633599be170 100644
--- a/components/button/metadata/button-negative.yml
+++ b/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 here.
- 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
diff --git a/components/button/metadata/button-primary.yml b/components/button/metadata/button-primary.yml
index e7bb7f449ec..707495aec11 100644
--- a/components/button/metadata/button-primary.yml
+++ b/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 here.
- 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
diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml
index 7b86a380ffc..989879ab204 100644
--- a/components/button/metadata/button-secondary.yml
+++ b/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 here.
- 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
diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml
index ae8792424af..9c588cf0298 100644
--- a/components/button/metadata/button-staticcolor.yml
+++ b/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 here.
- 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
diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md
index c8fa31d2674..4460826b8ac 100644
--- a/components/button/metadata/mods.md
+++ b/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` |
diff --git a/components/closebutton/metadata/closebutton.yml b/components/closebutton/metadata/closebutton.yml
index 84263edc628..42da1f98b6e 100644
--- a/components/closebutton/metadata/closebutton.yml
+++ b/components/closebutton/metadata/closebutton.yml
@@ -11,15 +11,14 @@ sections:
### x/x/2024 - Version 5.0.0
#### Spectrum 2 release
Close button now uses Spectrum 2 tokens and specifications. A few notable changes and additions:
- * Removes all static-specific `--mod` custom properties since they are no longer needed:
+ * Removes all static-specific `--mod` custom properties since they are no longer needed. The existing background-color mods can be used instead:
| Removed |
|-----------------------------------------------------|
| `--mod-closebutton-static-background-color-default` |
| `--mod-closebutton-static-background-color-down` |
| `--mod-closebutton-static-background-color-focus` |
| `--mod-closebutton-static-background-color-hover` |
-
- Consumers can use these existing background-color mods instead:
+
| Use these existing mods instead |
|----------------------------------------------|
| `--mod-closebutton-background-color-default` |
@@ -27,11 +26,19 @@ sections:
| `--mod-closebutton-background-color-focus` |
| `--mod-closebutton-background-color-hover` |
- * Also removes --mod-closebutton-size since we'll be setting rounded border-radius with a single rounding token, to be formally implemented as part of [S2 Corner Rounding](https://github.com/adobe/spectrum-css/pull/2559/files#diff-d6e9caa794bd8e1c659425d223e23ab53a93a254f00fb11a626e1b7563bd0c61R39-R41).
-
+ * The mod custom property `--mod-closebutton-size` has been removed. It was only used for rounded corners, that are now set with a single rounding token.
+ * 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`.
+ * The regular and large "Icon size" variants have been removed.
+
+ ### 8/16/2023 - Version 4.0.0
+ #### 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.
- ### Sizing
- Close button supports different sized icons. By default, you should use the following icons:
+ ### 8/3/2022 - Version 2.0.0
+ #### Sizing and Spectrum tokens migration
+ Close button was migrated to use Spectrum tokens. Close button now supports different sizes. By default, the following icons should be used for each size:
| Close button classname | UI icon classname |
| ------------------------------- | --------------------------- |
@@ -39,72 +46,18 @@ sections:
| `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross100` |
| `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross200` |
| `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross300` |
-
- ### 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: close
- name: Icon Size - Regular
- markup: |
-
-
-
S
-
-
-
-
-
-
-
M (default)
-
-
-
-
-
-
-
-
L
-
-
-
-
-
-
-
-
XL
-
-
-
-
-
-
- - id: closebutton-largeicon
- name: Icon Size - Large
+ - id: closebutton
+ name: Sizing
description: |
- Close button supports different sized icons. For cases where you need large icons, you should use the following icons:
-
- | Close button classname | UI icon classname |
- | ------------------------------- | --------------------------- |
- | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross200` |
- | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross300` |
- | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross400` |
- | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross500` |
+ At each size, Close button uses a specific UI icon size:
+
+ | Close button size | UI icon |
+ | ------------------ | ---------- |
+ | Small | `Cross200` |
+ | Medium | `Cross300` |
+ | Large | `Cross400` |
+ | Extra large | `Cross500` |
markup: |
diff --git a/components/closebutton/metadata/mods.md b/components/closebutton/metadata/mods.md
index dbf39678f36..aef46b690ae 100644
--- a/components/closebutton/metadata/mods.md
+++ b/components/closebutton/metadata/mods.md
@@ -1,6 +1,5 @@
| Modifiable custom properties |
| --------------------------------------------- |
-| `--mod-animation-duration-100` |
| `--mod-button-animation-duration` |
| `--mod-button-font-family` |
| `--mod-button-line-height` |
@@ -24,5 +23,3 @@
| `--mod-closebutton-margin-inline` |
| `--mod-closebutton-margin-top` |
| `--mod-closebutton-width` |
-| `--mod-line-height-100` |
-| `--mod-sans-font-family-stack` |
diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css
index 00ca18e6808..38936c53b99 100644
--- a/components/commons/basebutton.css
+++ b/components/commons/basebutton.css
@@ -31,14 +31,10 @@ governing permissions and limitations under the License.
/* 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)));
-
- /* @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)));
+ font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack));
+ 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;
@@ -49,10 +45,10 @@ governing permissions and limitations under the License.
-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;
+ transition: 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;
-webkit-font-smoothing: antialiased;
@@ -61,11 +57,9 @@ governing permissions and limitations under the License.
/* Fix Firefox */
&::-moz-focus-inner {
- /* Use uppercase PX so values don't get converted to rem */
margin-block-start: -2px;
margin-block-end: -2px;
padding: 0;
-
border: 0;
/* Remove the inner border and padding for button in Firefox. */
@@ -98,17 +92,14 @@ governing permissions and limitations under the License.
inset-inline-end: 0;
display: block;
+ margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1);
- /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
- margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1);
-
- /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
- transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
- margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out;
+ transition: 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);
}
}
diff --git a/components/logicbutton/metadata/logicbutton.yml b/components/logicbutton/metadata/logicbutton.yml
index f8dba482fc8..f7ee38eb9d9 100644
--- a/components/logicbutton/metadata/logicbutton.yml
+++ b/components/logicbutton/metadata/logicbutton.yml
@@ -4,7 +4,16 @@ description: A LogicButton displays an operator within a boolean logic sequence.
sections:
- name: Migration Guide
description: |
- ### Remove focus-ring class
+ ### x/x/2024 - Version 4.0.0
+ #### Spectrum 2 release
+ Logic 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-focus-indicator-gap` has been renamed to `--mod-button-focus-indicator-gap`.
+ - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`.
+
+ ### 8/16/2023 - Version 2.0.0
+ #### 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: logicbutton-and
diff --git a/components/logicbutton/metadata/mods.md b/components/logicbutton/metadata/mods.md
index a3187f962e5..c9ee009b8ea 100644
--- a/components/logicbutton/metadata/mods.md
+++ b/components/logicbutton/metadata/mods.md
@@ -1,12 +1,9 @@
| Modifiable custom properties |
| -------------------------------------------------------- |
-| `--mod-animation-duration-100` |
| `--mod-button-animation-duration` |
| `--mod-button-focus-indicator-gap` |
| `--mod-button-font-family` |
| `--mod-button-line-height` |
-| `--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` |
@@ -36,4 +33,3 @@
| `--mod-logic-button-or-text-color` |
| `--mod-logic-button-or-text-color-disabled` |
| `--mod-logic-button-padding` |
-| `--mod-sans-font-family-stack` |
diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md
index 920a7cc1215..4b302baa35d 100644
--- a/components/picker/metadata/mods.md
+++ b/components/picker/metadata/mods.md
@@ -1,10 +1,8 @@
| Modifiable custom properties |
| ------------------------------------------------------ |
-| `--mod-animation-duration-100` |
| `--mod-button-animation-duration` |
| `--mod-button-font-family` |
| `--mod-button-line-height` |
-| `--mod-line-height-100` |
| `--mod-picker-animation-duration` |
| `--mod-picker-background-color-active` |
| `--mod-picker-background-color-default` |
@@ -67,4 +65,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` |
diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml
index 5339feeca39..783f9fd1a49 100644
--- a/components/picker/metadata/picker.yml
+++ b/components/picker/metadata/picker.yml
@@ -7,17 +7,25 @@ sections:
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found here.
- name: Migration Guide
description: |
- ### Component renamed
+ ### x/x/2024 - Version 8.0.0
+ #### Spectrum 2 release
+ Picker 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 8.0
+ #### Component renamed
Dropdown is now known as Picker. Replace all `.spectrum-Dropdown*` classnames with `.spectrum-Picker*`.
- ### Markup change
+ #### Markup change
The outer `
` is now gone and `.spectrum-FieldButton` is no longer used. Instead, the outer tag is now `