[Action Bar] Fix warning with menu items

[JelloBagel]

Related to https://github.com/github/github-ui/pull/3638#discussion_r2395195779

Fixed Each child in a list should have a unique "key" prop warning when mapping the menu items

Changelog

Added

• Added a header right to the ActionBar's Comment Box story

Changed

• Update key to use ariaLabel instead of undefined menuItemChildren

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: 4402b7a

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	Patch
@primer/styled-react	Patch

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 fixes a React warning about missing unique "key" props in ActionBar menu items by changing the key from menuItemChildren (which was undefined) to ariaLabel. It also enhances the ActionBar Comment Box story with header right content.

• Fixed React key prop warning by using ariaLabel instead of undefined menuItemChildren for menu item keys
• Added header right section to the Comment Box story with Write/Preview buttons
• Updated e2e test expectations to match the new button count in the story

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/react/src/ActionBar/ActionBar.tsx	Fixed key prop by using ariaLabel and removed unused menuItemChildren destructuring
packages/react/src/ActionBar/ActionBar.examples.stories.tsx	Added header right section with Write/Preview buttons
packages/react/src/ActionBar/ActionBar.examples.stories.module.css	Added CSS styles for the new header right section
e2e/components/drafts/ActionBar.test.ts	Updated test expectations to match new button counts
.changeset/smart-hornets-happen.md	Added changeset for patch release

[Copilot]

Using ariaLabel as the key could cause issues if multiple menu items have the same aria-label or if aria-label is undefined. Consider using index or a combination of index and ariaLabel to ensure uniqueness.

Suggested change

	key={ariaLabel}
	key={`${index}-${ariaLabel ?? 'item'}`}

[pksjce]

Why not make it related to index ? Would index be changing between renders somehow?

[JelloBagel]

The index could change if the window is resized. For example, if the toolbar overflowed at the "Insert Link" button, then it would be the first index in the menu and the key would be "0". When the window is resized smaller to overflow the next button, then the "Insert Code" button would be the first index now with a key of "0". While each key is still unique, this can cause odd issues if the keys match different components when rerendering in React

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3796

[primer-integration]

🔴 ci completed with status failure.