Add ActionMenu.IconButton and ActionMenu.Anchor child validation by Copilot · Pull Request #7640 · primer/react

Copilot · 2026-03-09T10:53:37Z

ActionMenu.Anchor accepts arbitrary children, making it easy to wrap non-interactive elements (e.g., <div>) and produce inaccessible markup. The most common use case for ActionMenu.Anchor is wrapping IconButton, which should have a blessed shortcut.

This PR adds two things:

ActionMenu.IconButton — syntactic sugar (like ActionMenu.Button) that correctly wires an IconButton as the menu anchor
ActionMenu.Anchor child validation — dev-only warning when the anchor child is not an interactive element, following the same pattern used in Tooltip

// Before: manual wiring required
<ActionMenu>
  <ActionMenu.Anchor>
    <IconButton icon={KebabHorizontalIcon} aria-label="More actions" />
  </ActionMenu.Anchor>
  <ActionMenu.Overlay>...</ActionMenu.Overlay>
</ActionMenu>

// After: blessed shortcut
<ActionMenu>
  <ActionMenu.IconButton icon={KebabHorizontalIcon} aria-label="More actions" />
  <ActionMenu.Overlay>...</ActionMenu.Overlay>
</ActionMenu>

The validation warns on non-interactive anchors but skips submenu contexts where ActionList.Item is the expected anchor.

Changelog

New

ActionMenu.IconButton — shortcut for using IconButton as menu trigger, equivalent to wrapping it in ActionMenu.Anchor
ActionMenuIconButtonProps type export
Dev-only console.warn when ActionMenu.Anchor receives a non-interactive child element

Changed

ActionMenu.Anchor now uses useMergedRefs to combine an internal ref (for child validation) with the forwarded ref

Removed

None

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

New tests cover ActionMenu.IconButton (open/close, event handlers, id forwarding)
New tests verify the warning fires for non-interactive anchors (<div>) and does not fire for Button or IconButton
Submenu tests confirm no false-positive warnings for ActionList.Item anchors
Type tests validate ActionMenu.IconButton prop types

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-ui (Learn more about how to run integration tests)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

changeset-bot · 2026-03-09T10:53:42Z

⚠️ No Changeset found

Latest commit: d6d9c33

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

- Add ActionMenu.IconButton as a shortcut companion to ActionMenu.Button that wraps IconButton and wires it correctly as an ActionMenu anchor - Add validation in ActionMenu.Anchor to warn when the child is a non-interactive element (skips validation for submenu anchors) - Add tests for both features - Add type tests for ActionMenu.IconButton - Update exports in index.ts Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>

github-actions · 2026-03-09T11:45:48Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot

Pull request overview

Adds a first-class ActionMenu.IconButton trigger and introduces dev-time validation for ActionMenu.Anchor children to reduce accidentally inaccessible menu triggers in @primer/react.

Changes:

Add ActionMenu.IconButton subcomponent (and ActionMenuIconButtonProps export) as a shortcut for using IconButton as the menu trigger.
Add dev-time ActionMenu.Anchor child validation that warns when the anchor element is not interactive (skipping submenu contexts).
Update docs/exports and add unit + type tests covering the new API and warning behavior.

Reviewed changes

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

Show a summary per file

File	Description
packages/react/src/index.ts	Exports the new `ActionMenuIconButtonProps` type from the package entrypoint.
packages/react/src/tests/snapshots/exports.test.ts.snap	Updates the public-exports snapshot to include `ActionMenuIconButtonProps`.
packages/react/src/ActionMenu/ActionMenu.types.test.tsx	Adds type-level coverage for `ActionMenu.IconButton` props (valid/invalid).
packages/react/src/ActionMenu/ActionMenu.tsx	Implements `ActionMenu.IconButton` and adds `ActionMenu.Anchor` interactive-child validation + merged refs.
packages/react/src/ActionMenu/ActionMenu.test.tsx	Adds unit tests for `ActionMenu.IconButton` behavior and `ActionMenu.Anchor` warning behavior.
packages/react/src/ActionMenu/ActionMenu.docs.json	Documents `ActionMenu.IconButton` as a passthrough to `IconButton`.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

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

Copilot · 2026-03-09T12:02:31Z

+        ref: (node: HTMLElement | null) => {
+          internalRef.current = node
+          if (typeof anchorRef === 'function') {
+            anchorRef(node)
+          } else if (anchorRef) {
+            ;(anchorRef as React.MutableRefObject<HTMLElement | null>).current = node
+          }


The anchor ref wiring is manually re-implementing ref merging and requires unsafe casts. Consider using the existing useMergedRefs helper (packages/react/src/internal/hooks/useMergedRefs.ts) to combine anchorRef and internalRef instead of an inline callback + casts; this also lets you drop the react-hooks/refs eslint disable.

@copilot apply changes based on this feedback

Replaced manual ref merging with useMergedRefs(internalRef, anchorRef) in d6d9c33. This removes the inline callback, the unsafe MutableRefObject cast, and the eslint-disable comment.

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>

github-actions · 2026-05-08T12:34:58Z

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.

Initial plan

c732051

Copilot AI assigned Copilot and siddharthkp Mar 9, 2026

Copilot AI linked an issue Mar 9, 2026 that may be closed by this pull request

ActionMenu.Anchor should only accept button #5477

Open

Copilot started work on behalf of siddharthkp March 9, 2026 10:53 View session

Copilot AI and others added 2 commits March 9, 2026 11:09

Update exports snapshot and docs.json for ActionMenu.IconButton

7d28e38

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix ActionMenu.Anchor to only accept button elements~~ Add ActionMenu.IconButton and ActionMenu.Anchor child validation Mar 9, 2026

Copilot finished work on behalf of siddharthkp March 9, 2026 11:20

siddharthkp requested a review from Copilot March 9, 2026 11:45

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 Mar 9, 2026

Copilot started reviewing on behalf of siddharthkp March 9, 2026 11:45 View session

Copilot AI reviewed Mar 9, 2026

View reviewed changes

Comment thread packages/react/src/ActionMenu/ActionMenu.tsx

Comment thread packages/react/src/ActionMenu/ActionMenu.tsx Outdated

Comment thread packages/react/src/ActionMenu/ActionMenu.tsx

Copilot AI deployed to github-pages March 9, 2026 11:55 View deployment

github-actions Bot temporarily deployed to storybook-preview-7640 March 9, 2026 11:55 Inactive

siddharthkp and others added 2 commits March 9, 2026 12:57

only direct children allowed

7593a5f

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

only in dev mode

414aa66

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

siddharthkp requested a review from Copilot March 9, 2026 11:57

Copilot started reviewing on behalf of siddharthkp March 9, 2026 11:58 View session

github-actions Bot requested a deployment to storybook-preview-7640 March 9, 2026 12:01 Abandoned

Copilot AI reviewed Mar 9, 2026

View reviewed changes

Copilot started work on behalf of siddharthkp March 9, 2026 12:07 View session

Use useMergedRefs instead of manual ref merging in ActionMenu.Anchor

d6d9c33

Co-authored-by: siddharthkp <1863771+siddharthkp@users.noreply.github.com>

github-actions Bot deployed to storybook-preview-7640 March 9, 2026 12:14 View deployment

Copilot finished work on behalf of siddharthkp March 9, 2026 12:14

github-actions Bot added the Stale label May 8, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ActionMenu.IconButton and ActionMenu.Anchor child validation#7640

Add ActionMenu.IconButton and ActionMenu.Anchor child validation#7640
Copilot wants to merge 6 commits intomainfrom
copilot/fix-actionmenu-anchor-validation

Copilot AI commented Mar 9, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Mar 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

siddharthkp Mar 9, 2026

Uh oh!

Copilot AI Mar 9, 2026

Uh oh!

Uh oh!

github-actions Bot commented May 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented Mar 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Mar 9, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 9, 2026 •

edited

Loading

changeset-bot Bot commented Mar 9, 2026 •

edited

Loading