chore(ActionMenu): Add fullscreen capabilities

[francinelucca]

Closes https://github.com/github/primer/issues/5155

This pull request introduces a new fullscreen variant for the ActionMenu component, along with related updates to improve responsiveness and user experience. Key changes include adding a fullscreen sample story, introducing a responsive close button for narrow viewports, and modifying the behavior of the ActionMenu and AnchoredOverlay components to support the fullscreen variant.

Changelog

New

• Make AnchoredOverlay'svariant prop available in ActionMenu.Overlay
• Add sample story of how to render ActionMenu in fullscreen in small viewports
• special CSS for fullscreen variant in ActionMenu
• Render a close button on AnchoredOverlay if fullscreen
• AnchoredOverlay CSS to support close button on fullscreen variant
• Added a displayCloseButton prop to show a close button in fullscreen mode in AnchoredOverlay, along with customizable closeButtonProps.
• SelectPanel: Integrated the new displayCloseButton functionality to handle cancel and close actions in fullscreen mode.
• Improved padding and layout adjustments for single-selection panels.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 8c24cf1

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	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

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.37 KB (+0.1% 🔺)
packages/react/dist/browser.umd.js	92.54 KB (+0.17% 🔺)

[Copilot]

Pull Request Overview

This patch introduces a new fullscreen variant for the ActionMenu component and adds a sample Storybook story demonstrating fullscreen behavior in narrow viewports.

• Exposes the underlying AnchoredOverlay variant prop on ActionMenu.Overlay with a default value
• Defines a FullScreen example story showing how to toggle between anchored and fullscreen variants
• Updates the changelog for a patch release

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/ActionMenu/ActionMenu.tsx	Added variant to MenuOverlayProps, set default variant
packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx	Added FullScreen story showcasing the new fullscreen variant
.changeset/pink-trees-work.md	Bumped patch release and updated changelog entry

Comments suppressed due to low confidence (2)

packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx:111

• Consider adding automated tests (unit, snapshot, or visual regression) for the new fullscreen variant to ensure it renders correctly across viewports and prevent regressions.

export const FullScreen = () => {

packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx:127

• [nitpick] Multiple list items share the label 'Option 2', which may confuse readers. Consider using unique labels (e.g., 'Option 3', 'Option 4') to clearly demonstrate multiple entries.

<ActionList.Item>Option 2</ActionList.Item>

[primer-integration]

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/379309

[primer-integration]

🟢 golden-jobs completed with status success.

[mperrotti]

These changes look good, but we should definitely add a "Close" button.

There are two ways we can do this:

• (preferred) when variant is 'fullscreen', automatically render <IconButton icon={XIcon} onClick={onClose} aria-label="Close" /> at the top right of the <AnchoredOverlay> we use in <ActionMenu.Overlay>
• Update the Storybook example to render <IconButton icon={XIcon} onClick={onClose} aria-label="Close" /> as a child of <ActionMenu.Overlay>

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!