Skip to content

Add ActionBar.Button for text button overflow support#8048

Draft
Copilot wants to merge 2 commits into
mainfrom
copilot/implement-actionbar-button
Draft

Add ActionBar.Button for text button overflow support#8048
Copilot wants to merge 2 commits into
mainfrom
copilot/implement-actionbar-button

Conversation

Copilot AI 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.

<ActionBar aria-label="Toolbar">
  <ActionBar.Button>Save</ActionBar.Button>
  <ActionBar.Button leadingVisual={SearchIcon}>Search</ActionBar.Button>
  <ActionBar.Divider />
  <ActionBar.Button disabled>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 action ChildProps icon 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-bot Bot commented Jun 24, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3f9f4ed

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

Co-authored-by: iansan5653 <2294248+iansan5653@users.noreply.github.com>
Copilot AI changed the title [WIP] Add text button overflow support for ActionBar Add ActionBar.Button for text button overflow support Jun 24, 2026
Copilot AI requested a review from iansan5653 June 24, 2026 17:22
@iansan5653 iansan5653 linked an issue Jun 24, 2026 that may be closed by this pull request
@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 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

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.

Add text button overflow support for ActionBar

3 participants