Skip to content

feat(accordion): spectrum 2 migration #3684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 23 commits into
base: spectrum-two
Choose a base branch
from
Draft

feat(accordion): spectrum 2 migration #3684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
c1f27e4
docs(accordion): general docs cleanup
jawinn Apr 9, 2025
ffd5a15
refactor(accordion): move around and organize existing css
jawinn Apr 10, 2025
d2150ff
feat(accordion): rename height and width properties and mods
jawinn Apr 15, 2025
cb25f68
refactor(accordion): use existing rtl custom property
jawinn Apr 15, 2025
b11a3bf
refactor(accordion): organize open and disabled styles
jawinn Apr 15, 2025
5d62446
feat(accordion): add new sized corner rounding tokens
jawinn Apr 15, 2025
25dfd2a
feat(accordion)!: overall s2 migration with markup changes
jawinn Apr 18, 2025
75f319e
refactor(accordion): use custom properties for disabled styles
jawinn Apr 18, 2025
1da74de
feat(accordion): add chevron rotation animation
jawinn Apr 18, 2025
4b73eca
chore(accordion): updated metadata
jawinn Apr 21, 2025
64fc1af
feat(accordion): add quiet style
jawinn Apr 21, 2025
e39fdc7
docs(accordion): additions to stories and tests
jawinn Apr 23, 2025
928b583
fix(accordion): remove variable assigned to itself
jawinn Apr 23, 2025
b5302d6
chore(accordion): changeset formatting adjustment
jawinn Apr 23, 2025
0a343e9
fix(accordion): use end edge to text token
jawinn Apr 25, 2025
377915a
chore(accordion): use rgb slash syntax instead of rgba
jawinn Apr 25, 2025
c7ef49c
fix(accordion): update minimum height tokens used
jawinn May 7, 2025
a4928b2
feat(accordion): wip no inline padding variant
jawinn May 7, 2025
815ae41
feat(accordion): reduced font sizes and component heights
jawinn May 7, 2025
f2ef82b
chore(accordion): update metadata
jawinn May 8, 2025
69c610f
fix(accordion): update wip no inline padding variant variables
jawinn May 8, 2025
b935581
feat(accordion): add no inline padding variant
saashapina May 15, 2025
aef4d60
chore: update missing metadata
marissahuysentruyt May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions .changeset/chatty-lands-attack.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Comment on lines +12 to +16
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think something about the no inline padding variant would also go here.


#### 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`
10 changes: 10 additions & 0 deletions .storybook/types/variants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
};

Comment on lines +52 to +61
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We usually keep this variants file for global types, I would say that hasNoInlinePadding is pretty specific to Accordion and its config settings can stay in accordion.stories.js (similar to how disableAll, collapseAll, and density are) if we don't anticipate needing to reuse it in a few components.

export const staticColor = {
name: "Static color",
description:
Expand Down
84 changes: 48 additions & 36 deletions components/accordion/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
Loading
Loading