Skip to content

Add active anchors to ActionBar actions - #8320

Draft
mattcosta7 wants to merge 5 commits into
mainfrom
actionbar-active-anchor
Draft

Add active anchors to ActionBar actions#8320
mattcosta7 wants to merge 5 commits into
mainfrom
actionbar-active-anchor

Conversation

@mattcosta7

@mattcosta7 mattcosta7 commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

Closes #

Adds a dedicated active-anchor ref to ActionBar actions so consumers can track the physical button that currently represents an action as it moves between the inline bar and overflow menu. Open overlays now react to anchor replacement for positioning and focus return.

Motivation

github/github-ui#30256 delegates ListView action clipping, overflow rendering, and focus management to Primer React instead of maintaining a separate measurement engine. Some actions render stateful overlays such as SelectPanel; those overlays must remain mounted as the action moves into or out of overflow so filter state is preserved.

During that transition, the physical trigger changes between the inline action button and ActionBar's More items button. The normal forwarded ref must continue to identify the action's own button, while overlay positioning and focus return need the currently visible trigger. activeAnchorRef provides that second contract directly, replacing a consumer-side bridge that otherwise has to coordinate multiple refs and discover the overflow button through DOM selectors.

Changelog

New

  • Add activeAnchorRef to ActionBar.Button and ActionBar.IconButton.
  • Pass a reactive anchor ref as the second argument to AnchoredOverlay's renderAnchor callback.

Changed

  • Keep open overlays positioned against the current anchor when an ActionBar action moves into or out of overflow.
  • Return focus to the current active anchor when an overlay closes.
  • Include ActionBar in React Compiler validation.

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

The new APIs are additive and covered by a minor changeset.

Testing & Reviewing

  • npm test -- ActionBar/ActionBar.test.tsx AnchoredOverlay/AnchoredOverlay.test.tsx hooks/__tests__/useOpenAndCloseFocus.test.tsx
  • npm run type-check --workspace packages/react
  • npm run lint:react-compiler --workspace packages/react
  • npx eslint for changed TypeScript files
  • git diff --check

Review the ActionBar tests for inline/overflow transitions, pointer and keyboard activation, disabled/grouped actions, callback and object refs, focus restoration, and Button/IconButton parity. Review the AnchoredOverlay test for live repositioning when the rendered anchor changes.

@changeset-bot

changeset-bot Bot commented Aug 18, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 38a8780

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 Minor

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 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 Aug 18, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ 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. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Adds a dedicated “active anchor” ref for ActionBar action triggers and updates overlay anchoring/focus behavior so overlays can track and react to the currently visible trigger as actions move between the inline bar and overflow menu.

Changes:

  • Added activeAnchorRef to ActionBar.Button and ActionBar.IconButton, publishing either the inline button element or the overflow (“More items”) button depending on overflow state.
  • Updated AnchoredOverlay’s renderAnchor callback to receive a reactive anchorRef (2nd argument) and re-position while open when the physical anchor element changes.
  • Updated focus-return behavior to focus the current returnFocusRef target at cleanup time, and expanded tests/docs/React Compiler coverage accordingly.
Show a summary per file
File Description
packages/react/src/SelectPanel/SelectPanel.tsx Passes through the new (props, anchorRef) renderAnchor signature so SelectPanel anchors can use reactive refs.
packages/react/src/hooks/useOpenAndCloseFocus.ts Focuses the current returnFocusRef.current on cleanup to support moving targets while open.
packages/react/src/hooks/tests/useOpenAndCloseFocus.test.tsx Adds coverage for return-focus target changes before effect cleanup.
packages/react/src/deprecated/ActionMenu.tsx Updates deprecated ActionMenu wrapper to forward (props, anchorRef) to its renderAnchor.
packages/react/src/AnchoredOverlay/AnchoredOverlay.types.test.tsx Updates type test to use new renderAnchor signature and attach the provided ref.
packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx Introduces reactive anchor element tracking and re-positioning when the anchor DOM node changes.
packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx Adds a test ensuring repositioning when the rendered anchor is replaced while open.
packages/react/src/AnchoredOverlay/AnchoredOverlay.docs.json Documents the updated renderAnchor signature and the reactive ref behavior.
packages/react/src/ActionBar/ActionBar.tsx Implements activeAnchorRef plumbing and makes overflow menu state controlled to coordinate selection/close behavior.
packages/react/src/ActionBar/ActionBar.test.tsx Adds tests covering activeAnchorRef, overflow transitions, and overlay focus/position behavior via SelectPanel.
packages/react/src/ActionBar/ActionBar.docs.json Documents the new activeAnchorRef prop on ActionBar buttons.
packages/react/script/react-compiler.mjs Removes ActionBar from the React Compiler unsupported list.
.changeset/actionbar-active-anchor.md Adds a minor changeset for the new ActionBar/AnchoredOverlay API surface.

Review details

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

  • Files reviewed: 13/13 changed files
  • Comments generated: 1
  • Review effort level: Lite

Comment thread packages/react/src/ActionBar/ActionBar.test.tsx
@mattcosta7
mattcosta7 marked this pull request as ready for review August 18, 2026 13:52
@mattcosta7
mattcosta7 requested a review from a team as a code owner August 18, 2026 13:52
@mattcosta7
mattcosta7 requested a review from joshblack August 18, 2026 13:53
@mattcosta7 mattcosta7 added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Aug 18, 2026
@github-actions
github-actions Bot temporarily deployed to storybook-preview-8320 August 18, 2026 13:54 Inactive
@primer-integration

primer-integration Bot commented Aug 18, 2026

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Failed  CI   Failed
Running  VRT   Running
Waiting  Projects   Waiting

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

@francinelucca
francinelucca self-requested a review August 18, 2026 22:19
@mattcosta7
mattcosta7 marked this pull request as draft August 19, 2026 11:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Canary Release Apply this label when you want CI to create a canary release of the current PR integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants