feat(actionbutton): s2 migration (#2669)

* feat(actionbutton): s2 migration

Migrates the action button component to spectrum 2, using updated and
new design token specs. Includes down state transform, removal of
medium class, changes to mod custom properties, and storybook updates.

* docs(actionbutton): remove problematic click and focus events

- The click event was treating all action buttons as toggles, not
  allowing testing of the active/down state on click on the default
  button. It also does not work well when multiple buttons are present.

- The focus events were inaccurately showing the focus indicator on
  click; the styles for this work differently because they are for
  focus-visible. The focused control/arg is for the storybook only class
  used for testing, which applies in a different manner.

* docs(actionbutton): update docs, selected state toggle

Some small documentation improvements, especially around the selected
state. Adds additional notes about the selected state being optional
and for toggles (per SWC docs and guidelines).

* fix(actionbutton): selected + disabled + quiet background color

This combination of states should continue to have the background color
rather than the quiet transparent background. Per design feedback, the
quiet + disabled + selected should display the same as the default
disabled + selected.

* chore(actionbutton): generate new metadata

* chore(actionbutton): add stylelint exception for downstate variables

* feat(actionbutton): add font-style property and token

* fix(actionbutton): static variants do not support emphasized

Update tests to remove static black + emphasized and static white +
emphasized, as these are not on the design spec and not supported.
Updates some Docs page descriptions to make this clear.

* feat(actionbutton): add cjk line-height support

Use design spec defined CJK line-height in action button. Replaces
line-height declaration coming from the extended BaseButton, along with
a mod name appropriate for the component.

* fix(actionbutton): high contrast adjustments

- Fix for high contrast border styles not being solid.
- Quiet variants no longer show a border and blend into background with
  Canvas and CanvasText color pair.
- Focus indicator color changed from ButtonText to CanvasText,
  because this indicator appears outside of the element (it does not
  appear on top of a ButtonFace background).

* docs(actionbutton): disable static color control if emphasized

* docs(actionbutton): add docs link to popover

* fix(actionbutton): static + quiet + disabled + selected background

Fixes the issue where the static black and white, quiet, selected, and
disabled state in the testing grid was showing the static quiet
background color instead of the static disabled background color.

* fix(actionbutton): set default system colors for high contrast

The noted readability backplate issue was present on more than just
the selected state; it was just difficult to see without contrasting
colors. So this has been moved to the default, along with setting
default system color values.

* refactor(actionbutton): simplify high contrast styles

Refactors high contrast styles and custom properties to remove
unnecessary variables, and adds some documentation.

* fix(actionbutton): use full line-height to prevent cut off diacritics

Keep the previous S1 behavior of setting the line-height to the full
component height. This prevents Thai diacritics from being cut off (see
existing Storybook test). Note: this line-height is taller than both
line-height-100 and cjk-line-height-100 listed on the design spec. Using
those had resulted in the diacritics cutting off again.

* chore(actionbutton): update changeset description and rebuild metadata

* feat(actionbutton): refactor using "has" to reduce complexity

Adjust some selectors to use :has in order to remove some overly complex
calc functions, and to use the inline spacing tokens more like they are
defined on the token specs. Now that :has is supported and used in our
library, this simplifies this usage and removes some requirements for
the source order of action button's child elements.

* docs(actionbutton): remove outdated docs and add static docs

Usage notes about using a mod for static colors no longer applies;
the --mod-actionbutton-content-color-default-selected mod and similar
selected state mods work correctly to change the content color for
static.

Adds some basic intro docs for static colors, pulled from the
guidelines.

* docs(actionbutton): add docs story for text overflow behavior

* docs(actionbutton): clarify text overflow docs description

* docs(actionbutton): remove size medium class from appearing in markup

The .spectrum-ActionButton--sizeM class is no longer used but was still
appearing in the examples markup.

* chore(actionbutton): update copyright year

* fix(actionbutton): disable css transitions in high contrast

In Windows High Contrast, the border color briefly was flashing orange
(ButtonBorder) after hover, before it switched back to the correct color
as defined by the styles. This fixes that issue.

This removes CSS transitions in high contrast to avoid some of these
rendering issues and previously noticed sluggishness in the system color
transitions.

* chore(actionbutton): rebuild metadata

* chore: update changeset

* chore(actionbutton): storybook template update

---------

Co-authored-by: Melissa Thompson <[email protected]>
Co-authored-by: Josh Winn <[email protected]>
Co-authored-by: [ Cassondra ] <[email protected]>

Author: 4 people

.changeset/chilled-peaches-enjoy.md

@@ -0,0 +1,27 @@
+---
+"@spectrum-css/actionbutton": major
+---
+
+Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
+
+- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
+- Includes the Spectrum 2 down state transform.
+- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
+- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.
+- Background and content colors were updated.
+- Mod custom properties have been adjusted:
+  - Renamed:
+    - `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`.
+    - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
+    - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
+  - Removed:
+    - `--mod-actionbutton-border-color-default`
+    - `--mod-actionbutton-border-color-disabled`
+    - `--mod-actionbutton-border-color-down`
+    - `--mod-actionbutton-border-color-focus`
+    - `--mod-actionbutton-border-color-hover`
+    - `--mod-actionbutton-border-width`
+    - `--mod-actionbutton-static-content-color`
+  - New:
+    - `--mod-actionbutton-font-weight`
+    - `--mod-actionbutton-font-style`

components/actionbutton/dist/metadata.json

@@ -2,37 +2,29 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-ActionButton",
+    ".spectrum-ActionButton .spectrum-ActionButton-hold",
+    ".spectrum-ActionButton .spectrum-ActionButton-icon",
+    ".spectrum-ActionButton .spectrum-ActionButton-label",
     ".spectrum-ActionButton--sizeL",
     ".spectrum-ActionButton--sizeS",
     ".spectrum-ActionButton--sizeXL",
     ".spectrum-ActionButton--sizeXS",
     ".spectrum-ActionButton-hold",
-    ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon",
     ".spectrum-ActionButton-icon",
-    ".spectrum-ActionButton-icon:only-child",
     ".spectrum-ActionButton-label",
     ".spectrum-ActionButton-label:empty",
     ".spectrum-ActionButton.is-disabled",
     ".spectrum-ActionButton.is-selected",
-    ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon",
-    ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled",
-    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
+    ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite .is-disabled",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
@@ -41,43 +33,58 @@
     ".spectrum-ActionButton:focus",
     ".spectrum-ActionButton:focus-visible",
     ".spectrum-ActionButton:focus-visible:after",
+    ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
     ".spectrum-ActionButton:hover",
+    ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
     "[dir=\"rtl\"] .spectrum-ActionButton",
     "a.spectrum-ActionButton"
   ],
   "modifiers": [
     "--mod-actionbutton-animation-duration",
     "--mod-actionbutton-background-color-default",
+    "--mod-actionbutton-background-color-default-selected",
+    "--mod-actionbutton-background-color-default-selected-emphasized",
     "--mod-actionbutton-background-color-disabled",
     "--mod-actionbutton-background-color-down",
+    "--mod-actionbutton-background-color-down-selected",
+    "--mod-actionbutton-background-color-down-selected-emphasized",
     "--mod-actionbutton-background-color-focus",
+    "--mod-actionbutton-background-color-focus-selected",
+    "--mod-actionbutton-background-color-focus-selected-emphasized",
     "--mod-actionbutton-background-color-hover",
-    "--mod-actionbutton-border-color-default",
-    "--mod-actionbutton-border-color-disabled",
-    "--mod-actionbutton-border-color-down",
-    "--mod-actionbutton-border-color-focus",
-    "--mod-actionbutton-border-color-hover",
+    "--mod-actionbutton-background-color-hover-selected",
+    "--mod-actionbutton-background-color-hover-selected-emphasized",
     "--mod-actionbutton-border-radius",
-    "--mod-actionbutton-border-width",
     "--mod-actionbutton-content-color-default",
+    "--mod-actionbutton-content-color-default-selected",
+    "--mod-actionbutton-content-color-default-selected-emphasized",
     "--mod-actionbutton-content-color-disabled",
     "--mod-actionbutton-content-color-down",
+    "--mod-actionbutton-content-color-down-selected",
+    "--mod-actionbutton-content-color-down-selected-emphasized",
     "--mod-actionbutton-content-color-focus",
+    "--mod-actionbutton-content-color-focus-selected",
+    "--mod-actionbutton-content-color-focus-selected-emphasized",
     "--mod-actionbutton-content-color-hover",
+    "--mod-actionbutton-content-color-hover-selected",
+    "--mod-actionbutton-content-color-hover-selected-emphasized",
     "--mod-actionbutton-edge-to-hold-icon",
     "--mod-actionbutton-edge-to-text",
     "--mod-actionbutton-edge-to-visual",
     "--mod-actionbutton-edge-to-visual-only",
     "--mod-actionbutton-focus-indicator-border-radius",
     "--mod-actionbutton-focus-indicator-color",
     "--mod-actionbutton-focus-indicator-gap",
+    "--mod-actionbutton-focus-indicator-thickness",
+    "--mod-actionbutton-font-size",
+    "--mod-actionbutton-font-style",
+    "--mod-actionbutton-font-weight",
     "--mod-actionbutton-height",
     "--mod-actionbutton-icon-size",
     "--mod-actionbutton-label-color",
+    "--mod-actionbutton-line-height",
     "--mod-actionbutton-min-width",
-    "--mod-actionbutton-text-to-visual",
-    "--mod-disabled-background-color",
-    "--mod-disabled-content-color"
+    "--mod-actionbutton-text-to-visual"
   ],
   "component": [
     "--spectrum-action-button-edge-to-hold-icon-extra-large",
@@ -91,24 +98,15 @@
     "--spectrum-actionbutton-background-color-down",
     "--spectrum-actionbutton-background-color-focus",
     "--spectrum-actionbutton-background-color-hover",
-    "--spectrum-actionbutton-background-color-selected",
-    "--spectrum-actionbutton-background-color-selected-disabled",
-    "--spectrum-actionbutton-background-color-selected-down",
-    "--spectrum-actionbutton-background-color-selected-focus",
-    "--spectrum-actionbutton-background-color-selected-hover",
-    "--spectrum-actionbutton-border-color-default",
-    "--spectrum-actionbutton-border-color-disabled",
-    "--spectrum-actionbutton-border-color-down",
-    "--spectrum-actionbutton-border-color-focus",
-    "--spectrum-actionbutton-border-color-hover",
+    "--spectrum-actionbutton-border-color",
     "--spectrum-actionbutton-border-radius",
     "--spectrum-actionbutton-border-width",
     "--spectrum-actionbutton-content-color-default",
     "--spectrum-actionbutton-content-color-disabled",
     "--spectrum-actionbutton-content-color-down",
     "--spectrum-actionbutton-content-color-focus",
     "--spectrum-actionbutton-content-color-hover",
-    "--spectrum-actionbutton-content-color-selected",
+    "--spectrum-actionbutton-downstate-perspective",
     "--spectrum-actionbutton-edge-to-hold-icon",
     "--spectrum-actionbutton-edge-to-text",
     "--spectrum-actionbutton-edge-to-visual",
@@ -118,8 +116,11 @@
     "--spectrum-actionbutton-focus-indicator-gap",
     "--spectrum-actionbutton-focus-indicator-thickness",
     "--spectrum-actionbutton-font-size",
+    "--spectrum-actionbutton-font-style",
+    "--spectrum-actionbutton-font-weight",
     "--spectrum-actionbutton-height",
     "--spectrum-actionbutton-icon-size",
+    "--spectrum-actionbutton-line-height",
     "--spectrum-actionbutton-min-width",
     "--spectrum-actionbutton-text-to-visual"
   ],
@@ -129,6 +130,7 @@
     "--spectrum-accent-background-color-hover",
     "--spectrum-accent-background-color-key-focus",
     "--spectrum-animation-duration-100",
+    "--spectrum-black",
     "--spectrum-border-width-100",
     "--spectrum-component-edge-to-text-100",
     "--spectrum-component-edge-to-text-200",
@@ -150,14 +152,23 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-50",
     "--spectrum-component-height-75",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-minimum-perspective-down",
+    "--spectrum-component-size-width-ratio-down",
     "--spectrum-corner-radius-medium-size-extra-large",
     "--spectrum-corner-radius-medium-size-extra-small",
     "--spectrum-corner-radius-medium-size-large",
     "--spectrum-corner-radius-medium-size-medium",
     "--spectrum-corner-radius-medium-size-small",
+    "--spectrum-default-font-style",
     "--spectrum-disabled-background-color",
-    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-disabled-static-black-background-color",
+    "--spectrum-disabled-static-black-content-color",
+    "--spectrum-disabled-static-white-background-color",
+    "--spectrum-disabled-static-white-content-color",
+    "--spectrum-downstate-height",
+    "--spectrum-downstate-width",
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
@@ -169,12 +180,9 @@
     "--spectrum-gray-100",
     "--spectrum-gray-200",
     "--spectrum-gray-25",
-    "--spectrum-gray-400",
-    "--spectrum-gray-50",
-    "--spectrum-gray-500",
-    "--spectrum-gray-600",
     "--spectrum-line-height-100",
     "--spectrum-logical-rotation",
+    "--spectrum-medium-font-weight",
     "--spectrum-neutral-background-color-selected-default",
     "--spectrum-neutral-background-color-selected-down",
     "--spectrum-neutral-background-color-selected-hover",
@@ -193,14 +201,14 @@
     "--spectrum-text-to-visual-75",
     "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-200",
-    "--spectrum-transparent-black-500",
-    "--spectrum-transparent-black-600",
-    "--spectrum-transparent-black-700",
+    "--spectrum-transparent-black-25",
+    "--spectrum-transparent-black-800",
+    "--spectrum-transparent-black-900",
     "--spectrum-transparent-white-100",
     "--spectrum-transparent-white-200",
-    "--spectrum-transparent-white-500",
-    "--spectrum-transparent-white-600",
-    "--spectrum-transparent-white-700",
+    "--spectrum-transparent-white-25",
+    "--spectrum-transparent-white-800",
+    "--spectrum-transparent-white-900",
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
@@ -214,20 +222,12 @@
     "--mod-button-line-height"
   ],
   "high-contrast": [
+    "--highcontrast-actionbutton-animation-duration",
     "--highcontrast-actionbutton-background-color-default",
     "--highcontrast-actionbutton-background-color-disabled",
-    "--highcontrast-actionbutton-background-color-down",
-    "--highcontrast-actionbutton-background-color-focus",
-    "--highcontrast-actionbutton-background-color-hover",
-    "--highcontrast-actionbutton-border-color-default",
-    "--highcontrast-actionbutton-border-color-disabled",
-    "--highcontrast-actionbutton-border-color-down",
-    "--highcontrast-actionbutton-border-color-focus",
-    "--highcontrast-actionbutton-border-color-hover",
+    "--highcontrast-actionbutton-border-color",
     "--highcontrast-actionbutton-content-color-default",
     "--highcontrast-actionbutton-content-color-disabled",
-    "--highcontrast-actionbutton-content-color-down",
-    "--highcontrast-actionbutton-content-color-focus",
-    "--highcontrast-actionbutton-content-color-hover"
+    "--highcontrast-actionbutton-focus-indicator-color"
   ]
 }