feat(accordion): spectrum 2 migration #3684

jawinn · 2025-04-23T20:37:26Z

Description

Accordion 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 the "no inline padding" variant. This variant will be used within "standard panel".
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

CSS-1018

Note: this does not include the new "direct actions" feature. That will be done in a follow-up PR/task.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Open the storybook for the accordion component:
- Verify the boolean Quiet Style Variant has been added. When applied it should not show dividers between accordion items.
- Verify the No Inline Padding variant has been added . When applied it should remove inline padding from the accordion.
- Verify working CSS transition that animates the rotation of the disclosure indicator when expanding and
  collapsing the accordion item
- Verify all related documentation has been added

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-04-23T20:37:29Z

🦋 Changeset detected

Latest commit: aef4d60

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-04-23T20:43:30Z

File metrics

Summary

Total size: 1.39 MB^*
Total change (Δ): 🟢 ⬇ 5.47 KB (-0.38%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Minified	Gzipped	Δ
accordion	17.92 KB	17.19 KB	2.38 KB	🔴 ⬆ 0.43 KB
badge	12.12 KB	11.55 KB	1.80 KB	🟢 ⬇ 10.85 KB

File change details

accordion

Filename	Head	Minified	Gzipped	Compared to base
index.css	17.92 KB	17.19 KB	2.38 KB	🔴 ⬆ 0.43 KB
metadata.json	9.71 KB	-	-	🔴 ⬆ 0.35 KB

badge

Filename	Head	Minified	Gzipped	Compared to base
index.css	12.12 KB	11.55 KB	1.80 KB	🟢 ⬇ 10.85 KB
metadata.json	7.06 KB	-	-	🟢 ⬇ 8.44 KB

tokens

Filename	Head	Minified	Gzipped	Compared to base
css/dark-vars.css	46.16 KB	-	-	-
css/global-vars.css	77.11 KB	-	-	🟢 ⬇ 1.14 KB
css/index.css	250.32 KB	-	-	🟢 ⬇ 2.73 KB
css/large-vars.css	41.25 KB	-	-	🟢 ⬇ 0.81 KB
css/light-vars.css	46.16 KB	-	-	-
css/medium-vars.css	41.37 KB	-	-	🟢 ⬇ 0.81 KB
json/tokens.json	390.59 KB	-	-	🟢 ⬇ 5.89 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-04-23T20:43:45Z

🚀 Deployed on https://pr-3684--spectrum-css.netlify.app

Move around existing CSS for consistency, clarity, and improved organization: - Moves some properties within existing organization. - Moves high contrast styles to the bottom. - Moves sizing classes above density classes. - Adds a few comments, such as for a complex calc. - Simplifies border declarations using single short-hand property. - Removes unnecessary "calc" keyword used within max() function.

Rename height and width custom properties to include "minimum" in their name, to better reflect what they actually are and how they are used.

Use existing custom property for RTL icon rotation for the default icon state. Apply to icon, like the existing open styles, instead of the icon container.

Better organize open and disabled styles within the same blocks of CSS. Only moves existing CSS.

Uses new tokens from S2 spec. Simplifies layout with some noted markup changes to use flexbox instead of a position absolute for the disclosure icon. Plus some other general refactoring, cleanup, and documentation.

Add CSS transition for the rotation of the disclosure indicator.

Adds the "quiet" option to accordion, which does not have dividers and shows the rounded corners on hover.

Reorganize and add stories to better document accordion's various options. - Adds a disabled state story - Simplifies accordion items displayed on Docs page - Tests accordion states and density sizes in testing preview grid

Variable assigned to itself was showing an undefined variable in the inspector, as this circular reference is treated as invalid.

Use updated CSS syntax called out by the linter.

Work in progress variant class for the accordion not having overall inline padding, per the design spec. This variant was created to be used when accordion is within components that already have padding like the upcoming "standard panel".

Use updated font sizes and component height (minimum height) tokens from specs.

rise-erpelding

Nice work, I did some review on the documentation for a first pass! I will also take a look at the CSS and tokens but decided to put that in a separate review since those usually take a bit to validate and I already have quite a few comments in this review.

rise-erpelding · 2025-05-20T15:20:53Z

components/accordion/stories/accordion.stories.js

+
+/**
+ * The optional no inline padding style for accordion. This sets no overall horizontal padding on either side of the component
+ * (but the body text content always keeps its own padding from the edge). This can be applied by adding the `spectrum-Accordion----noInlinePadding` class alongside the


Suggested change

* (but the body text content always keeps its own padding from the edge). This can be applied by adding the `spectrum-Accordion----noInlinePadding` class alongside the

* (but the body text content always keeps its own padding from the edge). This can be applied by adding the `spectrum-Accordion--noInlinePadding` class alongside the

rise-erpelding · 2025-05-20T15:42:20Z

components/accordion/stories/accordion.stories.js

-						url: "https://www.adobe.com/creativecloud/plans.html",
-						text: "Explore Creative Cloud plans.",
-					}),
+					"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator, InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as adobe experience manager, Campaign, and Target.",


Looks like this got changed when it was moved from up above, but we probably want "adobe experience manager" to be capitalized according to Adobe's capitalization rules. I also see it capitalized on their website.

Suggested change

"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator, InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as adobe experience manager, Campaign, and Target.",

"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator, InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.",

rise-erpelding · 2025-05-20T15:58:25Z

.storybook/types/variants.js

+export const hasNoInlinePadding = {
+	name: "No Inline Padding Styling",
+	type: { name: "boolean" },
+	table: {
+		type: { summary: "boolean" },
+		category: "Component",
+	},
+	control: { type: "boolean" },
+};
+


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.

rise-erpelding · 2025-05-20T16:01:02Z

components/accordion/stories/accordion.stories.js

 	},
 	parameters: {
+		// Prevent an innacurate depiction of width due to "centered" layout's use of flex on the body.


Just a little spelling nit

Suggested change

// Prevent an innacurate depiction of width due to "centered" layout's use of flex on the body.

// Prevent an inaccurate depiction of width due to "centered" layout's use of flex on the body.

rise-erpelding · 2025-05-20T16:05:56Z

components/accordion/stories/accordion.stories.js

+export const NoInlinePadding = Template.bind({});
+NoInlinePadding.tags = ["!dev"];
+NoInlinePadding.args = {
+	items: content,


I noticed that we have a whole lot of things that are named content in this file. How would we feel about renaming this one (that refers to const content that's defined around L79) something else? accordionItems? accordionContent?

rise-erpelding · 2025-05-20T16:26:21Z

components/accordion/stories/accordion.test.js

+ */
+const statesTestContent = new Map([
+	[
+		"hovered",


To me it feels like these states could/should be sentence cased, thoughts?

rise-erpelding · 2025-05-20T16:28:39Z

components/accordion/stories/accordion.test.js

@@ -21,6 +160,8 @@ export const AccordionGroup = Variants({
 		},
 		{
 			testHeading: "Spacious",
+			items: testsContent,
+			Template: (args, context) => { return Sizes({Template: Template, ...args}, context); },


I LOVE that we're showing sizing for compact and spacious. Would it be possible to move the compact and spacious objects down below "Heading text wrapping" so they can be at the end with the default sizing test cases?

rise-erpelding · 2025-05-20T16:31:26Z

components/accordion/stories/accordion.test.js

-			testHeading: "Disabled",
-			disableAll: true,
+			testHeading: "Accordion item states",
+			items: statesTestContent,


This is great!

rise-erpelding · 2025-05-20T16:38:10Z

components/menu/dist/metadata.json

Can we double-check the latest spectrum-two to determine if we still need to commit these metadata files for menu, swatch, and swatch group?

rise-erpelding · 2025-05-20T16:39:28Z

.changeset/chatty-lands-attack.md

+#### 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.


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

5t3ph · 2025-05-20T18:50:07Z

Looks like rounded corners should only be "for keyboard focus and quiet hover" but is currently always applying:

jawinn added the wip This is a work in progress, don't judge. label Apr 23, 2025

jawinn force-pushed the jawinn/css-1018-s2-accordion branch from ad07a57 to 7c4c408 Compare April 23, 2025 20:38

jawinn force-pushed the jawinn/css-1018-s2-accordion branch from 7c4c408 to 17ba3bc Compare April 29, 2025 17:05

castastrophe force-pushed the spectrum-two branch 3 times, most recently from 7e8269c to 4ce8d19 Compare May 5, 2025 21:18

jawinn force-pushed the jawinn/css-1018-s2-accordion branch from bbd7643 to 6a48b9f Compare May 7, 2025 20:20

jawinn added the S2 Spectrum 2 label May 8, 2025

jawinn force-pushed the jawinn/css-1018-s2-accordion branch from cb89f13 to 3eb63f2 Compare May 8, 2025 18:52

saashapina added size-5 L ~30-42hrs; lots of effort or complexity, most of a sprint needed to complete. ready-for-review and removed wip This is a work in progress, don't judge. labels May 15, 2025

saashapina marked this pull request as ready for review May 15, 2025 20:17

jawinn added 14 commits May 15, 2025 16:21

docs(accordion): general docs cleanup

c1f27e4

feat(accordion): rename height and width properties and mods

d2150ff

Rename height and width custom properties to include "minimum" in their name, to better reflect what they actually are and how they are used.

refactor(accordion): use existing rtl custom property

cb25f68

Use existing custom property for RTL icon rotation for the default icon state. Apply to icon, like the existing open styles, instead of the icon container.

refactor(accordion): organize open and disabled styles

b11a3bf

Better organize open and disabled styles within the same blocks of CSS. Only moves existing CSS.

feat(accordion): add new sized corner rounding tokens

5d62446

feat(accordion)!: overall s2 migration with markup changes

25dfd2a

Uses new tokens from S2 spec. Simplifies layout with some noted markup changes to use flexbox instead of a position absolute for the disclosure icon. Plus some other general refactoring, cleanup, and documentation.

refactor(accordion): use custom properties for disabled styles

75f319e

feat(accordion): add chevron rotation animation

1da74de

Add CSS transition for the rotation of the disclosure indicator.

chore(accordion): updated metadata

4b73eca

feat(accordion): add quiet style

64fc1af

Adds the "quiet" option to accordion, which does not have dividers and shows the rounded corners on hover.

docs(accordion): additions to stories and tests

e39fdc7

Reorganize and add stories to better document accordion's various options. - Adds a disabled state story - Simplifies accordion items displayed on Docs page - Tests accordion states and density sizes in testing preview grid

fix(accordion): remove variable assigned to itself

928b583

Variable assigned to itself was showing an undefined variable in the inspector, as this circular reference is treated as invalid.

chore(accordion): changeset formatting adjustment

b5302d6

jawinn and others added 8 commits May 15, 2025 16:22

fix(accordion): use end edge to text token

0a343e9

chore(accordion): use rgb slash syntax instead of rgba

377915a

Use updated CSS syntax called out by the linter.

fix(accordion): update minimum height tokens used

c7ef49c

feat(accordion): wip no inline padding variant

a4928b2

Work in progress variant class for the accordion not having overall inline padding, per the design spec. This variant was created to be used when accordion is within components that already have padding like the upcoming "standard panel".

feat(accordion): reduced font sizes and component heights

815ae41

Use updated font sizes and component height (minimum height) tokens from specs.

chore(accordion): update metadata

f2ef82b

fix(accordion): update wip no inline padding variant variables

69c610f

feat(accordion): add no inline padding variant

b935581

saashapina force-pushed the jawinn/css-1018-s2-accordion branch from 6f53ef1 to b935581 Compare May 15, 2025 20:22

saashapina added ready-for-review and removed ready-for-review labels May 15, 2025

This comment was marked as resolved.

Sign in to view

saashapina force-pushed the jawinn/css-1018-s2-accordion branch from 214cc10 to b935581 Compare May 15, 2025 22:07

chore: update missing metadata

aef4d60

saashapina self-assigned this May 19, 2025

rise-erpelding self-requested a review May 20, 2025 13:56

rise-erpelding requested changes May 20, 2025

View reviewed changes

saashapina marked this pull request as draft May 21, 2025 14:59

saashapina added wip This is a work in progress, don't judge. and removed ready-for-review labels May 21, 2025

	* (but the body text content always keeps its own padding from the edge). This can be applied by adding the `spectrum-Accordion----noInlinePadding` class alongside the
	* (but the body text content always keeps its own padding from the edge). This can be applied by adding the `spectrum-Accordion--noInlinePadding` class alongside the

	"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator, InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as adobe experience manager, Campaign, and Target.",
	"Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator, InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.",

	// Prevent an innacurate depiction of width due to "centered" layout's use of flex on the body.
	// Prevent an inaccurate depiction of width due to "centered" layout's use of flex on the body.

feat(accordion): spectrum 2 migration #3684

Are you sure you want to change the base?

feat(accordion): spectrum 2 migration #3684

Uh oh!

Conversation

jawinn commented Apr 23, 2025 • edited by saashapina Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Accordion Spectrum 2 migration

New features

Markup changes

Mod changes

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

accordion

badge

tokens

Uh oh!

github-actions bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

5t3ph commented May 20, 2025

Uh oh!

Uh oh!

jawinn commented Apr 23, 2025 •

edited by saashapina

Loading

changeset-bot bot commented Apr 23, 2025 •

edited

Loading

github-actions bot commented Apr 23, 2025 •

edited

Loading

github-actions bot commented Apr 23, 2025 •

edited

Loading