feat(accordion): spectrum 2 migration

.changeset/chatty-lands-attack.md

@@ -0,0 +1,33 @@
+---
+"@spectrum-css/accordion": major
+---
+
+### Spectrum 2 migration
+
+Accordion now uses Spectrum 2 tokens and specifications.
+
+New sized tokens are used for corner rounding, the spacing around the disclosure icon, and
+the spacing around the content area.
+
+#### New features
+
+- Adds the optional "quiet" style, which does not show dividers between accordion items.
+- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and
+  collapsing the accordion item.
+
+#### Markup changes
+
+The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved
+from outside the the button (`spectrum-Accordion-itemHeader`), to within the button. The extra
+element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has
+been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading
+text.
+
+#### Mod changes
+
+The following `--mod` custom properties have been renamed to better reflect how they are used:
+
+- `--mod-accordion-item-height` has been renamed to `--mod-accordion-item-minimum-height`
+- `--mod-accordion-item-width` has been renamed to `--mod-accordion-item-minimum-width`
+- `--mod-accordion-min-block-size` has been renamed to `--mod-accordion-item-min-block-size`
+- `--mod-accordion-component-edge-to-text` has been renamed to `--mod-accordion-content-padding-inline`

.storybook/types/variants.js

@@ -49,6 +49,16 @@ export const isQuiet = {
 	control: { type: "boolean" },
 };
 
+export const hasNoInlinePadding = {
+	name: "No Inline Padding Styling",
+	type: { name: "boolean" },
+	table: {
+		type: { summary: "boolean" },
+		category: "Component",
+	},
+	control: { type: "boolean" },
+};
+
 export const staticColor = {
 	name: "Static color",
 	description:

components/accordion/dist/metadata.json

@@ -6,6 +6,8 @@
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeL",
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
+    ".spectrum-Accordion--quiet",
+    ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader",
     ".spectrum-Accordion--sizeL",
     ".spectrum-Accordion--sizeS",
     ".spectrum-Accordion--sizeXL",
@@ -14,46 +16,38 @@
     ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS",
     ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL",
     ".spectrum-Accordion-item",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible",
-    ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover",
-    ".spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover",
+    ".spectrum-Accordion-item.is-disabled",
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent",
-    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
-    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
     ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-itemContent",
     ".spectrum-Accordion-itemHeader",
     ".spectrum-Accordion-itemHeader:active",
-    ".spectrum-Accordion-itemHeader:after",
-    ".spectrum-Accordion-itemHeader:focus",
     ".spectrum-Accordion-itemHeader:focus-visible",
-    ".spectrum-Accordion-itemHeader:focus:after",
     ".spectrum-Accordion-itemHeader:hover",
-    ".spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer",
     ".spectrum-Accordion-itemHeading",
-    ".spectrum-Accordion-itemIconContainer",
-    ".spectrum-Accordion-itemIconContainer:dir(rtl)",
+    ".spectrum-Accordion-itemIndicator",
+    ".spectrum-Accordion-itemTitle",
+    ".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
     ".spectrum-Accordion:dir(rtl)",
     ".spectrum-Accordion:lang(ja)",
     ".spectrum-Accordion:lang(ko)",
     ".spectrum-Accordion:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Accordion",
-    "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer"
+    "[dir=\"rtl\"] .spectrum-Accordion"
   ],
   "modifiers": [
+    "--mod-accordion-animation-duration",
     "--mod-accordion-background-color-default",
     "--mod-accordion-background-color-down",
     "--mod-accordion-background-color-hover",
     "--mod-accordion-background-color-key-focus",
-    "--mod-accordion-component-edge-to-text",
+    "--mod-accordion-content-padding-inline",
     "--mod-accordion-corner-radius",
     "--mod-accordion-disclosure-indicator-height",
     "--mod-accordion-disclosure-indicator-to-text-space",
     "--mod-accordion-divider-color",
     "--mod-accordion-divider-thickness",
+    "--mod-accordion-edge-to-content-area",
     "--mod-accordion-edge-to-disclosure-indicator-space",
     "--mod-accordion-edge-to-text-space",
     "--mod-accordion-focus-indicator-color",
@@ -80,11 +74,13 @@
     "--mod-accordion-item-header-font-weight",
     "--mod-accordion-item-header-line-height",
     "--mod-accordion-item-header-top-to-text-space",
-    "--mod-accordion-item-height",
-    "--mod-accordion-item-width",
-    "--mod-accordion-min-block-size"
+    "--mod-accordion-item-min-block-size",
+    "--mod-accordion-item-minimum-height",
+    "--mod-accordion-item-minimum-width",
+    "--mod-accordion-top-to-disclosure-indicator"
   ],
   "component": [
+    "--spectrum-accordion-animation-duration",
     "--spectrum-accordion-background-color-default",
     "--spectrum-accordion-background-color-down",
     "--spectrum-accordion-background-color-hover",
@@ -101,15 +97,23 @@
     "--spectrum-accordion-bottom-to-text-spacious-large",
     "--spectrum-accordion-bottom-to-text-spacious-medium",
     "--spectrum-accordion-bottom-to-text-spacious-small",
-    "--spectrum-accordion-component-edge-to-text",
     "--spectrum-accordion-content-area-bottom-to-content",
+    "--spectrum-accordion-content-area-edge-to-content-extra-large",
+    "--spectrum-accordion-content-area-edge-to-content-large",
+    "--spectrum-accordion-content-area-edge-to-content-medium",
+    "--spectrum-accordion-content-area-edge-to-content-small",
     "--spectrum-accordion-content-area-top-to-content",
+    "--spectrum-accordion-content-padding-inline",
     "--spectrum-accordion-corner-radius",
     "--spectrum-accordion-disclosure-indicator-height",
-    "--spectrum-accordion-disclosure-indicator-to-text",
+    "--spectrum-accordion-disclosure-indicator-to-text-extra-large",
+    "--spectrum-accordion-disclosure-indicator-to-text-large",
+    "--spectrum-accordion-disclosure-indicator-to-text-medium",
+    "--spectrum-accordion-disclosure-indicator-to-text-small",
     "--spectrum-accordion-disclosure-indicator-to-text-space",
     "--spectrum-accordion-divider-color",
-    "--spectrum-accordion-edge-to-disclosure-indicator",
+    "--spectrum-accordion-divider-thickness",
+    "--spectrum-accordion-edge-to-content-area",
     "--spectrum-accordion-edge-to-disclosure-indicator-space",
     "--spectrum-accordion-edge-to-text",
     "--spectrum-accordion-edge-to-text-space",
@@ -119,7 +123,6 @@
     "--spectrum-accordion-item-content-area-bottom-to-content",
     "--spectrum-accordion-item-content-area-top-to-content",
     "--spectrum-accordion-item-content-color",
-    "--spectrum-accordion-item-content-disabled-color",
     "--spectrum-accordion-item-content-font",
     "--spectrum-accordion-item-content-font-size",
     "--spectrum-accordion-item-content-font-style",
@@ -130,18 +133,19 @@
     "--spectrum-accordion-item-header-color-down",
     "--spectrum-accordion-item-header-color-hover",
     "--spectrum-accordion-item-header-color-key-focus",
-    "--spectrum-accordion-item-header-disabled-color",
+    "--spectrum-accordion-item-header-cursor",
     "--spectrum-accordion-item-header-font",
     "--spectrum-accordion-item-header-font-size",
     "--spectrum-accordion-item-header-font-style",
     "--spectrum-accordion-item-header-font-weight",
     "--spectrum-accordion-item-header-line-height",
     "--spectrum-accordion-item-header-top-to-text-space",
-    "--spectrum-accordion-item-height",
-    "--spectrum-accordion-item-width",
-    "--spectrum-accordion-min-block-size",
+    "--spectrum-accordion-item-min-block-size",
+    "--spectrum-accordion-item-minimum-height",
+    "--spectrum-accordion-item-minimum-width",
     "--spectrum-accordion-minimum-width",
     "--spectrum-accordion-small-top-to-text-spacious",
+    "--spectrum-accordion-top-to-disclosure-indicator",
     "--spectrum-accordion-top-to-text-compact-extra-large",
     "--spectrum-accordion-top-to-text-compact-large",
     "--spectrum-accordion-top-to-text-compact-medium",
@@ -155,6 +159,7 @@
     "--spectrum-accordion-top-to-text-spacious-medium"
   ],
   "global": [
+    "--spectrum-animation-duration-100",
     "--spectrum-background-opacity-default",
     "--spectrum-background-opacity-down",
     "--spectrum-background-opacity-hover",
@@ -167,27 +172,34 @@
     "--spectrum-body-size-s",
     "--spectrum-body-size-xs",
     "--spectrum-bold-font-weight",
+    "--spectrum-chevron-icon-size-100",
+    "--spectrum-chevron-icon-size-200",
+    "--spectrum-chevron-icon-size-300",
+    "--spectrum-chevron-icon-size-75",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-component-edge-to-text-100",
-    "--spectrum-component-edge-to-text-200",
-    "--spectrum-component-edge-to-text-50",
-    "--spectrum-component-edge-to-text-75",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-400",
+    "--spectrum-component-height-50",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-medium-size-extra-large",
+    "--spectrum-corner-radius-medium-size-large",
+    "--spectrum-corner-radius-medium-size-medium",
+    "--spectrum-corner-radius-medium-size-small",
     "--spectrum-default-font-style",
     "--spectrum-disabled-content-color",
     "--spectrum-divider-thickness-small",
+    "--spectrum-field-edge-to-disclosure-icon-100",
+    "--spectrum-field-edge-to-disclosure-icon-200",
+    "--spectrum-field-edge-to-disclosure-icon-300",
+    "--spectrum-field-edge-to-disclosure-icon-75",
     "--spectrum-focus-indicator-color",
-    "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
+    "--spectrum-font-size-100",
     "--spectrum-font-size-200",
     "--spectrum-font-size-300",
-    "--spectrum-font-size-500",
-    "--spectrum-font-size-700",
+    "--spectrum-font-size-400",
     "--spectrum-gray-200",
     "--spectrum-gray-900-rgb",
     "--spectrum-line-height-100",