[Action Bar] Fix warning with menu items

.changeset/smart-hornets-happen.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fix overflow calculations of more menu button in action bar

e2e/components/drafts/ActionBar.test.ts

@@ -31,15 +31,15 @@ test.describe('ActionBar', () => {
             },
           })
           const toolbarButtonSelector = `button[data-component="IconButton"]`
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(9)
+          await expect(page.locator(toolbarButtonSelector)).toHaveCount(10)
           await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
-          await page.getByLabel('Insert Link').waitFor({
+          await page.getByLabel('Task List').waitFor({
             state: 'hidden',
           })
-          await expect(page.locator(toolbarButtonSelector)).toHaveCount(5)
+          await expect(page.locator(toolbarButtonSelector)).toHaveCount(8)
           const moreButtonSelector = page.getByLabel('More Comment box toolbar items')
           await moreButtonSelector.click()
-          await expect(page.locator('ul[role="menu"] [role="menuitem"]')).toHaveCount(6)
+          await expect(page.locator('ul[role="menu"] [role="menuitem"]')).toHaveCount(3)
         })
       })
     }

packages/react/src/ActionBar/ActionBar.examples.stories.module.css

@@ -20,7 +20,15 @@
 }
 
 .CommentBoxHeaderLeft {
-  width: 50%;
+  width: 100%;
+  min-width: 0;
+}
+
+.CommentBoxHeaderRight {
+  display: flex;
+  gap: var(--base-size-8);
+  justify-content: flex-end;
+  align-items: center;
 }
 
 .DialogContent {

packages/react/src/ActionBar/ActionBar.examples.stories.tsx

@@ -95,6 +95,10 @@ export const CommentBox = (props: CommentBoxProps) => {
             ></ActionBar.IconButton>
           </ActionBar>
         </div>
+        <div className={classes.CommentBoxHeaderRight}>
+          <Button variant="invisible">Write</Button>
+          <Button variant="invisible">Preview</Button>
+        </div>
       </header>
       <Textarea value={value} onChange={e => setValue(e.target.value)} id="markdowninput" aria-label="Markdown value" />
       <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>

packages/react/src/ActionBar/ActionBar.tsx

@@ -238,7 +238,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                       const {onClick, icon: Icon, label, disabled} = menuItem
                       return (
                         <ActionList.Item
-                          key={id}
+                          key={label}
                           // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
                           onClick={(event: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
                             closeOverlay()