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