ActionBar: Add support for groups

[TylerJDev]

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

Adds sub component ActionBar.Group.

• Introduces submenus inside of the overflow menu when ActionBar.Group is used
• Adds items to overflow menu by group instead of individual item

Changelog

New

• Adds ActionBar.Group sub component

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]

🦋 Changeset detected

Latest commit: 8eed237

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Minor
@primer/styled-react	Major

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]

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

[Copilot]

Pull Request Overview

This PR introduces group functionality to the ActionBar component by adding a new ActionBar.Group sub-component. This enhancement allows related actions to be logically grouped together and appear as submenus in the overflow menu when space is limited.

Key changes:

• Adds ActionBar.Group component for organizing related actions
• Introduces submenu functionality within the overflow menu for grouped items
• Updates overflow behavior to handle groups as units rather than individual items

Reviewed Changes

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

Show a summary per file

File	Description
packages/react/src/ActionBar/index.ts	Export new ActionBarGroup component and add it to ActionBar compound component
packages/react/src/ActionBar/ActionBar.tsx	Implement ActionBarGroup component and update overflow logic to support grouped items
packages/react/src/ActionBar/ActionBar.test.tsx	Add tests for group ordering and conditional rendering with groups
packages/react/src/ActionBar/ActionBar.module.css	Add CSS styling for the Group component
packages/react/src/ActionBar/ActionBar.examples.stories.tsx	Add story example demonstrating ActionBar.Group usage
packages/react/src/ActionBar/ActionBar.docs.json	Document ActionBar.Group component props
.changeset/busy-islands-fail.md	Add changeset entry for minor release

[Copilot]

Remove the unnecessary conditional and TODO comment. The groupId ?? undefined expression is redundant since groupId is already string | null and can be passed directly.

Suggested change

	groupId: groupId ?? undefined, // todo: remove conditional
	groupId: groupId,

[Copilot]

[nitpick] The cleanup function can be simplified to return () => unregisterChild(id) since it's just a single function call.

Suggested change

	return () => {
	unregisterChild(id)
	}
	return () => unregisterChild(id)

[dusave]

Introduces submenus inside of the overflow menu when ActionBar.Group is used

@TylerJDev @pksjce I just want to make sure this is captured correctly. The use of ActionBar.Group shouldn't be related to submenus in the overflow.

For Groups, I was pitching that it made sense for groups of items to move into the menu in certain cases (like when you have bold, italics, and underline) because leaving only one or two of the options didn't really make sense.

For sub-menus, this was meant for a continuation of the action menu components in the action bar itself. For instance, the Heading button would have a dropdown with headings 1-6. When that overflows into the menu, that item would then need to have a sub-menu.

Hope that clarifies things 😄