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

[castastrophe]

Description

This branch migrates the action menu component by introducing a new set of custom styles for it when previously none existed. The migration includes updates to its nested components to align with the latest design standards.

The action menu is a composite component that combines an action button with a popover and a menu.

This migration introduces several key improvements:

Action menu

• Limited positioning: To align with design guidance, the action menu offers a subset of the popover positioning and so the available Storybook knobs were reduced and documentation added.
• S2 token integration: Migrated to use the new S2 token --spectrum-actionmenu-button-to-menu-gap.
• Component architecture: To align with standard class naming conventions, the following new classes were added: .spectrum-ActionMenu, .spectrum-ActionMenu-trigger, .spectrum-ActionMenu-popover, .spectrum-ActionMenu-menu.
• Documentation: Added detailed stories showcasing positioning variants, icon customization, and menu state management per design guidelines.

Action button

• Improved accessibility: Added hasLongPress parameter for better control over icon display and to ensure correct aria attributes were in place.

Icon system

• Enhanced styling support: Improved icon template with better styling support, custom style handling, and proper color inheritance. Added customStyles parameter and better integration between fill property and custom styles.

Menu component

• Better sizing: Updated inline-size from auto to max-content for improved layout consistency when menus are rendered inside popover (or other containers).

Popover component

• Modernized positioning: Replaced deprecated TipPlacementVariants with new ArgGrid system for better positioning options and cleaned up/simplified some of the popover positioning logic to ensure more accurate results.

Storybook infrastructure

• Enhanced argument handling: Added resetArgs functionality for better story state management.
• Minor linting fixes: Applied a few linting fixes to the stylesheets used by Storybook.

The component now follows modern S2 patterns while maintaining backward compatibility and significantly improving the overall user experience and developer experience.

Motivation and context

The action menu component now has its own stylesheet with S2 design tokens and component architecture. This migration ensures consistency with other migrated components and provides improved accessibility, better positioning options, and enhanced visual design.

Related issue(s)

• fixes CSS-1160

Screenshots (coming soon)

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Action menu positioning and alignment

  1. Go to the action menu component stories
  2. Test different position options (bottom-start, bottom-end, start-top, end-top)
  3. Expect proper alignment and no visual regressions

• Icon and label customization

  1. Go to the action menu component stories
  2. Test different icon names and labels
  3. Expect proper icon rendering and label display

• Menu state management

  1. Go to the action menu component stories
  2. Toggle between open and closed states
  3. Expect proper visual feedback and accessibility attributes

• S2 token integration

  1. Inspect the component's CSS custom properties
  2. Verify proper usage of --spectrum-actionmenu-button-to-menu-gap and spacing tokens
  3. Expect consistent spacing and alignment with S2 design system

• Component structure validation

  1. Check the generated HTML structure
  2. Verify proper class naming (ActionMenu, ActionMenu-trigger, ActionMenu-popover, ActionMenu-menu)
  3. Expect clean, semantic markup structure

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?**

[github-actions]

📚 Branch preview

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

[github-actions]

File metrics

Summary

Total size: 1.43 MB^*
Total change (Δ): 🔴 ⬆ 0.87 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	24.03 KB	22.95 KB	3.03 KB	🔴 ⬆ 0.21 KB
actiongroup	7.69 KB	7.38 KB	1.08 KB	🔴 ⬆ 0.01 KB
actionmenu	0.88 KB	🆕 0.87 KB	🆕 0.49 KB	🆕 0.88 KB
menu	48.02 KB	45.76 KB	5.05 KB	🔴 ⬆ 0.11 KB

File change details

actionbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	24.03 KB	22.95 KB	3.03 KB	🔴 ⬆ 0.21 KB
metadata.json	10.35 KB	-	-	🔴 ⬆ 0.10 KB

actiongroup

Filename	Head	Minified	Gzipped	Compared to base
index.css	7.69 KB	7.38 KB	1.08 KB	🔴 ⬆ 0.01 KB
metadata.json	3.29 KB	-	-	🔴 ⬆ 0.02 KB

actionmenu

Filename	Head	Minified	Gzipped	Compared to base
index.css	0.88 KB	🆕 0.87 KB	🆕 0.49 KB	🆕 0.88 KB
metadata.json	0.34 KB	-	-	🆕 0.34 KB

menu

Filename	Head	Minified	Gzipped	Compared to base
index.css	48.02 KB	45.76 KB	5.05 KB	🔴 ⬆ 0.11 KB
metadata.json	24.03 KB	-	-	🔴 ⬆ 0.10 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.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1dc8ac5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[castastrophe]

@5t3ph I know you just worked on the S2 menu and I wanted to get your thoughts on this change. At auto, the popover containing the menu is really tight but the max-content option seems to provide a much roomier result that looks closer to the design docs. Are there issues with this change that you forsee?