Skip to content

Conversation

castastrophe
Copy link
Collaborator

@castastrophe castastrophe commented Jul 29, 2025

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

  1. 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.
  2. Open Storybook for Action button:
    • Toggle .is-selected, set aria-pressed="true", and aria-expanded="true"; confirm identical visuals due to :where(...).
  3. Open Storybook for Action group:
    • In compact group, confirm hover/selected/focus ring layering and selection visuals via .is-selected and ARIA attributes.
  4. 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

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

github-actions bot commented Jul 29, 2025

📚 Branch preview

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

Copy link
Contributor

github-actions bot commented Jul 29, 2025

File metrics

Summary

Total size: 1.43 MB*
Total change (Δ): 🔴 ⬆ 0.83 KB (0.06%)

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.60 KB 22.52 KB 2.99 KB 🟢 ⬇ 0.06 KB
actiongroup 4.85 KB 4.60 KB 0.95 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
popover 16.55 KB 15.95 KB 2.03 KB 🔴 ⬆ 0.13 KB

File change details

actionbutton

Filename Head Minified Gzipped Compared to base
index.css 23.60 KB 22.52 KB 2.99 KB 🟢 ⬇ 0.06 KB
metadata.json 10.41 KB - - 🔴 ⬆ 0.22 KB

actiongroup

Filename Head Minified Gzipped Compared to base
index.css 4.85 KB 4.60 KB 0.95 KB 🔴 ⬆ 0.06 KB
metadata.json 2.45 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

menu

Filename Head Minified Gzipped Compared to base
index.css 47.47 KB 45.21 KB 5.00 KB 🟢 ⬇ 0.45 KB
metadata.json 23.43 KB - - 🟢 ⬇ 0.52 KB

popover

Filename Head Minified Gzipped Compared to base
index.css 16.55 KB 15.95 KB 2.03 KB 🔴 ⬆ 0.13 KB
metadata.json 7.30 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.

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

changeset-bot bot commented Jul 30, 2025

🦋 Changeset detected

Latest commit: 1f94719

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

@castastrophe 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 castastrophe marked this pull request as ready for review August 1, 2025 20:06
@castastrophe castastrophe self-assigned this Aug 1, 2025
@castastrophe 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 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 castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 4 times, most recently from 313ee43 to 3babcfa Compare August 6, 2025 23:43
@castastrophe 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 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 adobe deleted a comment from github-actions bot Aug 18, 2025
@castastrophe 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 castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 3 times, most recently from 3f6dad6 to 94e9252 Compare October 13, 2025 18:08
@rise-erpelding rise-erpelding dismissed their stale review October 13, 2025 21:20

Dismissing stale review after latest changes

Copy link
Collaborator

@rise-erpelding rise-erpelding left a comment

Choose a reason for hiding this comment

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

I looked at this quickly and noted that the popover issues from before are resolved! 🎉 Really, really nice work!

I did check out Coachmark after I checked out Action menu and Popover, and I'm seeing a similar issue there, but only after switching on "has action menu":
image

It's also visible from the docs page.

@castastrophe castastrophe force-pushed the castastrophe/feat-action-menu-migration branch from 94e9252 to d8fc6e3 Compare October 15, 2025 14:20
@castastrophe castastrophe added run_vrt For use on PRs looking to kick off VRT and removed skip_vrt Add to a PR to skip running VRT (but still pass the action) labels Oct 15, 2025
@castastrophe castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 5 times, most recently from b6ed5e8 to 14ad6aa Compare October 16, 2025 17:30
@castastrophe castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 2 times, most recently from faeccb5 to d1c459a Compare October 16, 2025 17:41
@castastrophe castastrophe enabled auto-merge (squash) October 16, 2025 17:48
Copy link
Member

@cdransf cdransf left a comment

Choose a reason for hiding this comment

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

This looks awesome! Just have a few minor questions. ✨

Copy link
Member

Choose a reason for hiding this comment

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

I'm seeing this as well — do we need to increase the height for that Coachmark example? ✨

Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

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

I wanted to leave the comments I had so far! I need to go through the menu and popover changes a little more thoroughly tomorrow!

},
menuArgs: {
customStyles: {
"--mod-menu-inline-size": "max-content",
Copy link
Collaborator

Choose a reason for hiding this comment

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

You may have already left a comment somewhere about this, but instead of using the mod here, is it possible to use a --spectrum custom property? If we're going to remove mods, would it make sense to not introduce another place where one is being used?

There's a couple more menu mods in the PlaceholderIcons args as well.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I think removing the mods in some of these more complex components are going to be a bigger project and I didn't want to expand the scope of action menu by addressing that quite yet.

@castastrophe castastrophe force-pushed the castastrophe/feat-action-menu-migration branch 2 times, most recently from 5e7ce3d to 367d76f Compare October 17, 2025 16:40
@castastrophe castastrophe force-pushed the castastrophe/feat-action-menu-migration branch from 367d76f to 1f94719 Compare October 17, 2025 16:50
@castastrophe castastrophe merged commit 082862e into spectrum-two Oct 17, 2025
25 of 26 checks passed
@castastrophe castastrophe deleted the castastrophe/feat-action-menu-migration branch October 17, 2025 17:36
Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

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

I was too slow reviewing, but didn't want my comments to be lost!

${Template({
...args,
hasPopup: "true",
hasLongPress: true,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do we need an isOpen arg in any of the tests? Not sure if it's valuable, especially if other args are already covering the style changes.

},
items: { table: { disable: true } },
menuArgs: { table: { disable: true } },
triggerArgs: { table: { disable: true } },
Copy link
Collaborator

Choose a reason for hiding this comment

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

I go back and forth on the removal of the iconName control from the table. We have a story that demonstrates that users have the ability to change the icon, but then removed the control so users can't experiment, so I'm split.

Anyways, I don't think it's blocking this PR from merging, but I did want to share some thoughts.

Comment on lines +174 to +176
triggerArgs: {
iconName: "More",
},
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't think this is necessary since we use this exact More icon in the default args.

@@ -1,4 +1,4 @@
import { Template as ActionMenu } from "@spectrum-css/actionmenu/stories/template.js";
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
Copy link
Collaborator

Choose a reason for hiding this comment

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

Does changing this from action menu to just an action button imply anything for SWC? I only ask because the Figma specs for coachmark do specify coachmark being composed with a menu. I don't think it does, but this markup change will be noted in the component analysis, so we'll just have to be sure that we review those docs and clarify that the SWC component as is should still use an action menu.

Screenshot 2025-10-17 at 1 24 52 PM

I also could be thinking too hard about it all.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yeah, I just removed the full implementation here for demonstration purposes but it doesn't change the end-result for SWC.

@github-actions github-actions bot mentioned this pull request Oct 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design-approved ready-for-review run_vrt For use on PRs looking to kick off VRT S2 Spectrum 2 size-3 M ~18-30hrs; moderate effort or complexity, several work days needed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants