feat(action-menu): S2 migration [CSS-1160] #4085

castastrophe · 2025-07-29T20:52:10Z

Description

This PR:

Adds a new @spectrum-css/actionmenu component that composes ActionButton, Popover, and Menu to present action lists from a trigger.
Updates @spectrum-css/actionbutton and @spectrum-css/actiongroup to treat selection via .is-selected as well as :where([aria-pressed="true"], [aria-expanded="true"]) to cover more accessibility use-cases while keeping selector specificity low.
Refines @spectrum-css/menu to align with Spectrum 2 specifications and accessibility improvements.

Design references:

Figma S2 token specs: link

Includes a changeset with the following bumps:

@spectrum-css/actionmenu: major (new component)
@spectrum-css/actionbutton: minor (selection semantics with ARIA via :where)
@spectrum-css/menu: patch (S2 refinements, accessibility)
@spectrum-css/actiongroup: patch (selection semantics alignment)

How and where has this been tested?

Storybook locally:
- Verified Action menu stories (default, long-press, placements).
- Verified Menu stories for focus indicators, CJK line-height, external link/drill-in icons, thumbnails, and forced-colors behavior.
- Verified Action button and Action group selected visuals using .is-selected, [aria-pressed="true"], and [aria-expanded="true"].
Forced Colors (Windows High Contrast) visual pass in Storybook.
Chromatic/VRT pending reviewer confirmation.

Validation steps

Open Storybook for Action menu:
- Toggle isOpen and confirm popover/menu spacing and placement reflect updates.
- Enable “Long press” and confirm press vs long-press behavior in docs.
Open Storybook for Action button:
- Toggle .is-selected, set aria-pressed="true", and aria-expanded="true"; confirm identical visuals due to :where(...).
Open Storybook for Action group:
- In compact group, confirm hover/selected/focus ring layering and selection visuals via .is-selected and ARIA attributes.
Open Storybook for Menu:
- Confirm external-link and drill‑in icon sizing; thumbnail sizing/alignment.
- Confirm forced-colors readability.

Screenshots

Add Storybook screenshots for:
- Action menu default and long-press
- Action button selected (class vs ARIA)
- Menu focus and forced-colors states

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.
I have included a well-written changeset if my change needs to be published.

Notes for reviewers

No class name changes; selection semantics expanded via :where([aria-pressed],[aria-expanded]) to avoid specificity issues and broaden accessibility support.
Menu refinements include focus margin reservation, CJK line-height variables, transparent-at-rest backgrounds per S2, and forced-colors improvements.

References

Changesets documentation: https://github.com/changesets/changesets
Figma S2 token specs: https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-Token-specs?node-id=19758-3424

github-actions · 2025-07-29T21:07:32Z

📚 Branch preview

PR #4085 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4085/index.html.

github-actions · 2025-07-29T21:08:40Z

File metrics

Summary

Total size: 1.44 MB^*
Total change (Δ): 🔴 ⬆ 0.83 KB (0.05%)

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	Δ
actionbutton	23.62 KB	22.53 KB	2.99 KB	🟢 ⬇ 0.04 KB
actiongroup	7.73 KB	7.41 KB	1.09 KB	🔴 ⬆ 0.06 KB
actionmenu	0.84 KB	🆕 0.83 KB	🆕 0.48 KB	🆕 0.84 KB
menu	47.47 KB	45.21 KB	5.00 KB	🟢 ⬇ 0.45 KB

File change details

actionbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	23.62 KB	22.53 KB	2.99 KB	🟢 ⬇ 0.04 KB
metadata.json	10.52 KB	-	-	🔴 ⬆ 0.34 KB

actiongroup

Filename	Head	Minified	Gzipped	Compared to base
index.css	7.73 KB	7.41 KB	1.09 KB	🔴 ⬆ 0.06 KB
metadata.json	3.33 KB	-	-	🔴 ⬆ 0.06 KB

actionmenu

Filename	Head	Minified	Gzipped	Compared to base
index.css	0.84 KB	🆕 0.83 KB	🆕 0.48 KB	🆕 0.84 KB
metadata.json	0.31 KB	-	-	🆕 0.31 KB

🦋 Changeset detected

Latest commit: 75c284c

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

This PR includes changesets to release 6 packages

Name	Type
@spectrum-css/actionmenu	Major
@spectrum-css/actionbutton	Minor
@spectrum-css/menu	Patch
@spectrum-css/actiongroup	Patch
@spectrum-css/bundle	Patch
@spectrum-css/preview	Patch

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

components/menu/index.css

components/accordion/index.css

castastrophe · 2025-09-02T16:49:20Z

components/coachmark/stories/template.js

@@ -23,6 +23,7 @@ export const CoachContainer = (
 		currentStep = 2,
 		totalStepCount = 8,
 		isOpen = false,
+		alt = "",


Fixing an a11y feedback note from Chromatic.

components/coachmark/stories/template.js

components/combobox/stories/combobox.stories.js

castastrophe · 2025-09-02T16:55:00Z

components/icon/stories/template.js

@@ -39,6 +39,7 @@ export const Template = ({
 	fill,
 	id = getRandomId("icon"),
 	customClasses = [],
+	customStyles = {},


I saw a regression in the icon VRTs where the fill was inheriting to all icons due to the custom property's inheritance.

castastrophe · 2025-09-02T16:55:47Z

components/menu/stories/menu.stories.js

@@ -78,15 +78,12 @@ export default {
 		labelledby: { table: { disable: true } },
 		items: { table: { disable: true } },
 		role: { table: { disable: true } },
-		subrole: { table: { disable: true } },


Subrole ended up being easier to intuit from the role instead of passing it through from the parent.

castastrophe · 2025-09-02T16:58:15Z

components/menu/stories/menu.test.js

-			)}
-		</ul>
-	`,
+	Template: ({


Letting the template handle this logic because it's a bit duplicative to redefine it here and could lead to mismatches.

castastrophe · 2025-09-02T16:58:36Z

components/menu/stories/menu.test.js

@@ -133,14 +127,14 @@ export const MenuItemGroup = Variants({
 		{
 			testHeading: "No selection, with thumbnails",
 			description: undefined,
-			thumbnailUrl: "thumbnail.png"
+			hasThumbnail: true,


Since thumbnail.png is the default, just the hasThumbnail is sufficient.

castastrophe · 2025-09-02T16:59:21Z

components/menu/stories/template.js

@@ -37,27 +41,38 @@ const Label = ({
 	isCollapsible = false,
 	label,
 	rootClass,
+	role,


Labels can have roles too! 🥳

castastrophe · 2025-09-02T16:59:48Z

components/menu/stories/template.js

+		return html`
+			<span
+				role=${ifDefined(role)}
+				id=${ifDefined(id)}


Need the id and role for switch labels.

castastrophe · 2025-09-02T17:01:11Z

components/menu/stories/template.js

@@ -258,6 +274,7 @@ export const MenuItem = (
 		hasExternalLink = false,
 		hasActions = false,
 		id = getRandomId("menuitem"),
+		labelId = getRandomId("menuitem-label"),


label id lets us connect the switch input field with the already present label for the menu item

castastrophe · 2025-09-10T14:20:00Z

components/actionbutton/dist/metadata.json

    ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
    "a.spectrum-ActionButton"
  ],
  "modifiers": [
-    "--mod-actionbutton-animation-duration",


Since this is for S2 and we've agreed to remove modifiers, I removed the mods on any lines I needed to update for this change anyway.

castastrophe · 2025-09-19T17:16:43Z

components/actionbutton/index.css

 	color: inherit;
 	transform: var(--spectrum-logical-rotation);
 }

-/* Focus indicator */
-.spectrum-ActionButton {


Just me tidying up a bit by combining these styles in with the initial definition for .spectrum-ActionButton

castastrophe · 2025-09-19T17:18:36Z

components/menu/index.css

-		.spectrum-Menu-itemCheckbox {
-			grid-area: checkmarkArea;
-		}
+	&.is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox {


Added this not to prevent clash with the is-selectable placement.

castastrophe changed the title ~~feat(action-menu): S2 migration~~ feat(action-menu): S2 migration [CSS-1160] Jul 29, 2025

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch from 2729f84 to 779e411 Compare July 30, 2025 20:23

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 3 times, most recently from 635f709 to 242929c Compare August 1, 2025 20:06

castastrophe marked this pull request as ready for review August 1, 2025 20:06

castastrophe self-assigned this Aug 1, 2025

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 2 times, most recently from 4baa099 to eb8cde2 Compare August 4, 2025 15:23

castastrophe commented Aug 4, 2025

View reviewed changes

components/menu/index.css Outdated Show resolved Hide resolved

castastrophe added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. wip This is a work in progress, don't judge. run_vrt For use on PRs looking to kick off VRT S2 Spectrum 2 labels Aug 4, 2025

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 4 times, most recently from 313ee43 to 3babcfa Compare August 6, 2025 23:43

rise-erpelding reviewed Aug 7, 2025

View reviewed changes

components/accordion/index.css Outdated Show resolved Hide resolved

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 2 times, most recently from 4d618da to f3fa4d4 Compare August 7, 2025 16:14

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 3 times, most recently from f2ef53c to 409436c Compare August 18, 2025 16:08

adobe deleted a comment from github-actions bot Aug 18, 2025

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 2 times, most recently from dbd613f to 00038a9 Compare August 18, 2025 17:12

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 10 times, most recently from 96a7093 to d1e6569 Compare September 2, 2025 16:33

castastrophe added ready-for-review and removed wip This is a work in progress, don't judge. labels Sep 2, 2025

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch from d1e6569 to 1ddcb45 Compare September 2, 2025 17:03

castastrophe commented Sep 2, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch from 1ddcb45 to 4a2cfe1 Compare September 2, 2025 17:25

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 3 times, most recently from 748e3cb to 76988b3 Compare September 10, 2025 14:15

castastrophe commented Sep 10, 2025

View reviewed changes

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 7 times, most recently from e4bf910 to 46a8a1b Compare September 19, 2025 17:14

castastrophe commented Sep 19, 2025

View reviewed changes

feat(actionmenu): migrate to s2 tokens and styling

75c284c

castastrophe force-pushed the castastrophe/feat-action-menu-migration branch from 46a8a1b to 75c284c Compare September 19, 2025 17:28

feat(action-menu): S2 migration [CSS-1160] #4085

Are you sure you want to change the base?

feat(action-menu): S2 migration [CSS-1160] #4085

Conversation

castastrophe commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

Screenshots

To-do list

Notes for reviewers

References

Uh oh!

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

Uh oh!

📚 Branch preview

Uh oh!

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

Uh oh!

File metrics

Summary

actionbutton

actiongroup

actionmenu

menu

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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!

Uh oh!

castastrophe commented Jul 29, 2025 •

edited

Loading

github-actions bot commented Jul 29, 2025 •

edited

Loading

github-actions bot commented Jul 29, 2025 •

edited

Loading

changeset-bot bot commented Jul 30, 2025 •

edited

Loading