ActionMenu: Add id to ActionMenu.Anchor types

.changeset/late-peaches-suffer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionMenu: Add `id` to `ActionMenu.Anchor` types

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

@@ -260,6 +260,35 @@ export const CustomAnchor = () => (
   </ActionMenu>
 )
 
+export const CustomAnchorId = () => (
+  <ActionMenu>
+    <ActionMenu.Anchor id="custom-anchor-id">
+      <IconButton icon={KebabHorizontalIcon} aria-label="Open menu" />
+    </ActionMenu.Anchor>
+    <ActionMenu.Overlay width="medium">
+      <ActionList>
+        <ActionList.Item onSelect={() => alert('Copy link clicked')}>
+          Copy link
+          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>
+          Quote reply
+          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>
+          Edit comment
+          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
+        </ActionList.Item>
+        <ActionList.Divider />
+        <ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
+          Delete file
+          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
+        </ActionList.Item>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)
+
 export const MixedSelection = () => {
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)
 

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -106,7 +106,7 @@ const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
   )
 }
 
-export type ActionMenuAnchorProps = {children: React.ReactElement}
+export type ActionMenuAnchorProps = {children: React.ReactElement; id?: string}
 const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
   return React.cloneElement(children, {...anchorProps, ref: anchorRef})
 })

packages/react/src/__tests__/ActionMenu.test.tsx

@@ -3,11 +3,12 @@ import userEvent from '@testing-library/user-event'
 import {axe} from 'jest-axe'
 import React from 'react'
 import theme from '../theme'
-import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider, Tooltip, Button} from '..'
+import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider, Tooltip, Button, IconButton} from '..'
 import {Tooltip as TooltipV2} from '../TooltipV2/Tooltip'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories'
 import {MixedSelection} from '../ActionMenu/ActionMenu.examples.stories'
+import {KebabHorizontalIcon} from '@primer/octicons-react'
 
 function Example(): JSX.Element {
   return (
@@ -396,6 +397,39 @@ describe('ActionMenu', () => {
     )
     const button = component.getByRole('button')
 
+    expect(button.id).toBe(buttonId)
+  })
+  it('should pass the "id" prop from ActionMenu.Anchor to anchor child', async () => {
+    const buttonId = 'toggle-menu-custom-id'
+    const component = HTMLRender(
+      <ThemeProvider theme={theme}>
+        <SSRProvider>
+          <BaseStyles>
+            <ActionMenu>
+              <ActionMenu.Anchor id={buttonId}>
+                <IconButton icon={KebabHorizontalIcon} aria-label="Open menu" />
+              </ActionMenu.Anchor>
+              <ActionMenu.Overlay>
+                <ActionList>
+                  <ActionList.Item>New file</ActionList.Item>
+                  <ActionList.Divider />
+                  <ActionList.Item>Copy link</ActionList.Item>
+                  <ActionList.Item>Edit file</ActionList.Item>
+                  <ActionList.Item variant="danger" onSelect={event => event.preventDefault()}>
+                    Delete file
+                  </ActionList.Item>
+                  <ActionList.LinkItem href="//github.com" title="anchor" aria-keyshortcuts="s">
+                    Github
+                  </ActionList.LinkItem>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </BaseStyles>
+        </SSRProvider>
+      </ThemeProvider>,
+    )
+    const button = component.getByRole('button')
+
     expect(button.id).toBe(buttonId)
   })
 })