Skip to content

Add ActionBar.Button for text button overflow support - #8048

Merged
iansan5653 merged 3 commits into
mainfrom
copilot/implement-actionbar-button
Jun 25, 2026
Merged

Add ActionBar.Button for text button overflow support#8048
iansan5653 merged 3 commits into
mainfrom
copilot/implement-actionbar-button

Conversation

CopilotAI commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

ActionBar only supported IconButton children; text buttons (now common in GH design) had no first-class API and no overflow handling. This adds ActionBar.Button, used like ActionBar.IconButton, that collapses into the overflow menu when space runs out.

<ActionBararia-label="Toolbar"><ActionBar.Button>Save</ActionBar.Button><ActionBar.ButtonleadingVisual={SearchIcon}>Search</ActionBar.Button><ActionBar.Divider/><ActionBar.Buttondisabled>Cancel</ActionBar.Button></ActionBar>

Changelog

New

  • ActionBar.Button — a text Button subcomponent (variant="invisible") that registers with the existing overflow mechanism. Uses children as the overflow menu label and forwards a component leadingVisual as the menu item's leading icon.
  • Exported ActionBarButtonProps.
  • Storybook example WithTextButtons; docs metadata; unit tests.

Changed

  • Overflow action items now render a leading visual only when an icon is present (text buttons may have none); item key switched from label to the registry id. Internally, the actionChildPropsicon is now optional and label accepts ReactNode.

Removed

  • N/A

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

Additive, backwards-compatible API.

Testing & Reviewing

Storybook → Experimental/Components/ActionBar/ExamplesWithTextButtons. Resize the container to verify buttons overflow into the menu, the label (and optional leading icon) render in the menu, and disabled is respected. Unit coverage added in ActionBar.test.tsx (render, click, disabled, keyboard).

Merge checklist

@changeset-bot

changeset-botBot commented Jun 24, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2319701

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

This PR includes changesets to release 1 package
NameType
@primer/reactMinor

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

Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>
CopilotAI changed the title [WIP] Add text button overflow support for ActionBarAdd ActionBar.Button for text button overflow supportJun 24, 2026
CopilotAI requested a review from iansan5653June 24, 2026 17:22
@iansan5653iansan5653 linked an issue Jun 24, 2026 that may be closed by this pull request
@github-actionsgithub-actionsBot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jun 24, 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. If this doesn't work, you can also use the original workflow here. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

@iansan5653
iansan5653 marked this pull request as ready for review June 25, 2026 14:10
@iansan5653
iansan5653 requested a review from a team as a code ownerJune 25, 2026 14:10
@iansan5653
iansan5653 requested review from Copilot and francinelucca and removed request for CopilotJune 25, 2026 14:10
@iansan5653iansan5653 added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Jun 25, 2026
@iansan5653
iansan5653 enabled auto-merge June 25, 2026 16:53
@primer-integration

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Failed CI  Failed
Passed VRT  Passed
Passed Projects  Passed

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.

@iansan5653iansan5653 added the integration-tests: skipped manually Changes in this PR do not require an integration test label Jun 25, 2026
@iansan5653

Copy link
Copy Markdown
Contributor

skipping integration because there is a breaking typecheck but it's not related to this PR

CopilotAI review requested due to automatic review settings June 25, 2026 17:48

CopilotAI 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 first-class ActionBar.Button subcomponent (text Button variant) that participates in the existing ActionBar overflow registry, enabling text buttons to collapse into the overflow menu alongside ActionBar.IconButton.

Changes:

  • Introduces ActionBar.Button + exported ActionBarButtonProps, and wires it into ActionBar’s static API.
  • Updates overflow menu rendering for action items to support optional leading visuals and uses registry id for React keys.
  • Adds Storybook example, docs metadata, tests, snapshot update, and a minor-release changeset.
Show a summary per file
FileDescription
packages/react/src/ActionBar/index.tsExposes ActionBar.Button and re-exports ActionBarButtonProps.
packages/react/src/ActionBar/ActionBar.tsxImplements ActionBarButton, updates registry item shape and overflow menu rendering.
packages/react/src/ActionBar/ActionBar.test.tsxAdds unit coverage for ActionBar.Button behavior and attributes.
packages/react/src/ActionBar/ActionBar.examples.stories.tsxAdds WithTextButtons example for overflow behavior.
packages/react/src/ActionBar/ActionBar.docs.jsonDocuments ActionBar.Button props and passthrough.
packages/react/src/tests/snapshots/exports.test.ts.snapUpdates export snapshot to include ActionBarButtonProps.
.changeset/actionbar-text-button.mdDeclares a minor bump for the new exported API.

Copilot's findings

  • Files reviewed: 7/7 changed files
  • Comments generated: 2

Comment on lines +411 to +414
// Only forward the leading visual to the overflow menu when it is a component
// that can be rendered as an icon (e.g. an octicon), matching ActionBar.IconButton.
icon: typeof leadingVisual === 'function' ? (leadingVisual as ActionBarIconButtonProps['icon']) : undefined,
disabled: !!disabled,
expect(onClick).not.toHaveBeenCalled()
})

it('should not trigger disabled button with spacebar or enter', async () => {
@iansan5653
iansan5653 added this pull request to the merge queueJun 25, 2026
@github-actions
github-actionsBottemporarily deployed to storybook-preview-8048 June 25, 2026 18:07 Inactive
Merged via the queue into main with commit 0add561Jun 25, 2026
55 checks passed
@iansan5653
iansan5653 deleted the copilot/implement-actionbar-button branch June 25, 2026 18:10
@primerprimerBot mentioned this pull request Jun 25, 2026
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Canary ReleaseApply this label when you want CI to create a canary release of the current PRintegration-tests: recommendedThis change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpmintegration-tests: skipped manuallyChanges in this PR do not require an integration test

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add text button overflow support for ActionBar

4 participants

@iansan5653@jonrohan