diff --git a/.changeset/late-peaches-suffer.md b/.changeset/late-peaches-suffer.md
new file mode 100644
index 00000000000..d01a892df40
--- /dev/null
+++ b/.changeset/late-peaches-suffer.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionMenu: Add `id` to `ActionMenu.Anchor` types
diff --git a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx
index d636102cd86..fa40b703ac7 100644
--- a/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -260,6 +260,35 @@ export const CustomAnchor = () => (
)
+export const CustomAnchorId = () => (
+
+
+
+
+
+
+ alert('Copy link clicked')}>
+ Copy link
+ ⌘C
+
+ alert('Quote reply clicked')}>
+ Quote reply
+ ⌘Q
+
+ alert('Edit comment clicked')}>
+ Edit comment
+ ⌘E
+
+
+ alert('Delete file clicked')}>
+ Delete file
+ ⌘D
+
+
+
+
+)
+
export const MixedSelection = () => {
const [selectedIndex, setSelectedIndex] = React.useState(1)
diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx
index 24b53b7025c..b549e1b23e0 100644
--- a/packages/react/src/ActionMenu/ActionMenu.tsx
+++ b/packages/react/src/ActionMenu/ActionMenu.tsx
@@ -106,7 +106,7 @@ const Menu: React.FC> = ({
)
}
-export type ActionMenuAnchorProps = {children: React.ReactElement}
+export type ActionMenuAnchorProps = {children: React.ReactElement; id?: string}
const Anchor = React.forwardRef(({children, ...anchorProps}, anchorRef) => {
return React.cloneElement(children, {...anchorProps, ref: anchorRef})
})
diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx
index e2c871c931f..cb5f52e915d 100644
--- a/packages/react/src/__tests__/ActionMenu.test.tsx
+++ b/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(
+
+
+
+
+
+
+
+
+
+ New file
+
+ Copy link
+ Edit file
+ event.preventDefault()}>
+ Delete file
+
+
+ Github
+
+
+
+
+
+
+ ,
+ )
+ const button = component.getByRole('button')
+
expect(button.id).toBe(buttonId)
})
})