From 6f416ed2c3c193abcc7cef27daba6d320a764cee Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 13 Mar 2024 13:11:26 +1000
Subject: [PATCH 1/3] Add id to the type for ActionMenu.Anchor

---
 packages/react/src/ActionMenu/ActionMenu.tsx  |  2 +-
 .../react/src/__tests__/ActionMenu.test.tsx   | 36 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

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<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})
 })
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(
+      <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)
   })
 })

From 00a793b7151565be00c15609cb439baa47bad1d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan?= <broccolinisoup@github.com>
Date: Wed, 13 Mar 2024 13:12:54 +1000
Subject: [PATCH 2/3] Create late-peaches-suffer.md

---
 .changeset/late-peaches-suffer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/late-peaches-suffer.md

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

From fb36b67c4806b7712d9b2ff6d7334d9fcf10775e Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Wed, 13 Mar 2024 14:59:49 +1000
Subject: [PATCH 3/3] add an example

---
 .../ActionMenu.examples.stories.tsx           | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

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 = () => (
   </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)