chore(ActionMenu): Add fullscreen sample story #6108

francinelucca · 2025-05-21T19:21:17Z

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

This pull request introduces a new "fullscreen" variant for the ActionMenu component, along with a corresponding sample story to demonstrate its usage. The changes include updates to the component's props, default values, and example stories.

Changelog

New

Make AnchoredOverlay'svariant prop available in ActionMenu.Overlay
Add sample story of how to render ActionMenu in fullscreen in small viewports

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 · 2025-05-21T19:21:21Z

🦋 Changeset detected

Latest commit: 51b85aa

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 · 2025-05-21T19:21:43Z

👋 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 · 2025-05-21T19:24:26Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.4 KB (-0.04% 🔽)
packages/react/dist/browser.umd.js	94.47 KB (-0.1% 🔽)

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>

Copilot · 2025-05-22T03:05:38Z

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -242,6 +242,7 @@ const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({
  side,
  onPositionChange,
  'aria-labelledby': ariaLabelledby,
+  variant = {regular: 'anchored', narrow: 'anchored'},


Defining the default variant object inline recreates a new reference on every render, which can cause unnecessary re-renders of AnchoredOverlay. Consider moving the default into a const outside the component to keep the reference stable.

Copilot · 2025-05-22T03:05:38Z

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -229,7 +229,7 @@ const MenuButton = React.forwardRef(({...props}, anchorRef) => {
 }) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>



The newly added variant prop should be documented (e.g., in JSDoc or PropTypes) to clarify the allowed shapes and describe its behavior for maintainers and consumers.

Suggested change

/**

* Props for the `Overlay` component used in the `ActionMenu`.

*

* @property variant - Determines the style of the overlay. It is an object with two optional keys:

* - `regular`: Specifies the variant for regular screens. Default is `'anchored'`.

* - `narrow`: Specifies the variant for narrow screens. Default is `'anchored'`.

* Example: `{regular: 'anchored', narrow: 'floating'}`.

*/

primer-integration · 2025-05-22T03:08:33Z

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

primer-integration · 2025-05-22T14:33:40Z

🟢 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>

…menu-full-screen-story

github-actions · 2025-05-29T04:12:35Z

👋 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!

chore(ActionMenu): Add fullscreen sample story

fe6ed7d

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 21, 2025

Create pink-trees-work.md

2596f3c

github-actions bot requested a deployment to storybook-preview-6108 May 21, 2025 19:25 Abandoned

francinelucca deployed to github-pages May 21, 2025 19:38 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6108 May 21, 2025 19:39 Inactive

francinelucca requested a review from mperrotti May 22, 2025 03:04

francinelucca marked this pull request as ready for review May 22, 2025 03:04

Copilot AI review requested due to automatic review settings May 22, 2025 03:04

francinelucca requested a review from a team as a code owner May 22, 2025 03:04

Copilot AI reviewed May 22, 2025

View reviewed changes

github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 22, 2025

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels May 22, 2025

joshblack approved these changes May 22, 2025

View reviewed changes

mperrotti reviewed May 28, 2025

View reviewed changes

Merge branch 'main' of github.com:primer/react into chore/add-action-…

51b85aa

…menu-full-screen-story

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 29, 2025

francinelucca deployed to github-pages May 29, 2025 04:26 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6108 May 29, 2025 04:26 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(ActionMenu): Add fullscreen sample story #6108

chore(ActionMenu): Add fullscreen sample story #6108

Uh oh!

francinelucca commented May 21, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented May 21, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 21, 2025

Uh oh!

github-actions bot commented May 21, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 22, 2025

Uh oh!

Copilot AI May 22, 2025

Uh oh!

primer-integration bot commented May 22, 2025

Uh oh!

primer-integration bot commented May 22, 2025

Uh oh!

mperrotti left a comment

Uh oh!

github-actions bot commented May 29, 2025

Uh oh!

Uh oh!

		@@ -229,7 +229,7 @@ const MenuButton = React.forwardRef(({...props}, anchorRef) => {
		}) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>

+/**
+ * Props for the `Overlay` component used in the `ActionMenu`.
+ *
+ * @property variant - Determines the style of the overlay. It is an object with two optional keys:
+ *   - `regular`: Specifies the variant for regular screens. Default is `'anchored'`.
+ *   - `narrow`: Specifies the variant for narrow screens. Default is `'anchored'`.
+ *   Example: `{regular: 'anchored', narrow: 'floating'}`.
+ */

chore(ActionMenu): Add fullscreen sample story #6108

Are you sure you want to change the base?

chore(ActionMenu): Add fullscreen sample story #6108

Uh oh!

Conversation

francinelucca commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented May 21, 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 May 21, 2025

Uh oh!

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

Uh oh!

size-limit report 📦

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 22, 2025

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented May 22, 2025

Uh oh!

primer-integration bot commented May 22, 2025

Uh oh!

mperrotti left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 29, 2025

Uh oh!

Uh oh!

francinelucca commented May 21, 2025 •

edited

Loading

changeset-bot bot commented May 21, 2025 •

edited

Loading

github-actions bot commented May 21, 2025 •

edited

Loading