diff --git a/.changeset/poor-melons-share.md b/.changeset/poor-melons-share.md new file mode 100644 index 00000000000..cf419b7a19c --- /dev/null +++ b/.changeset/poor-melons-share.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Making onClick of ActionList.LinkItem functional diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx index daea8a98ddc..d4decbe2292 100644 --- a/src/ActionList/LinkItem.tsx +++ b/src/ActionList/LinkItem.tsx @@ -39,11 +39,24 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr ( - - {children} - - )} + _PrivateItemWrapper={({children, onClick, ...rest}) => { + const clickHandler = (event: React.MouseEvent) => { + onClick && onClick(event) + props.onClick && props.onClick(event as React.MouseEvent) + } + return ( + + {children} + + ) + }} > {props.children} diff --git a/src/ActionList/shared.ts b/src/ActionList/shared.ts index 013d1b2d2f3..6e281c46b9e 100644 --- a/src/ActionList/shared.ts +++ b/src/ActionList/shared.ts @@ -42,9 +42,19 @@ export type ActionListItemProps = { /** * Private API for use internally only. Used by LinkItem to wrap contents in an anchor */ - _PrivateItemWrapper?: React.FC> + _PrivateItemWrapper?: React.FC> } & SxProp +type MenuItemProps = { + onClick?: (event: React.MouseEvent) => void + onKeyPress?: (event: React.KeyboardEvent) => void + 'aria-disabled'?: boolean + tabIndex?: number + 'aria-labelledby'?: string + 'aria-describedby'?: string + role?: string +} + export type ItemContext = Pick & { inlineDescriptionId: string blockDescriptionId: string diff --git a/src/__tests__/ActionList.test.tsx b/src/__tests__/ActionList.test.tsx index 1de5efb63bf..02adf1cb11c 100644 --- a/src/__tests__/ActionList.test.tsx +++ b/src/__tests__/ActionList.test.tsx @@ -155,6 +155,20 @@ describe('ActionList', () => { expect(option).toBeInTheDocument() }) + it('should call onClick for a link item', async () => { + const onClick = jest.fn() + const component = HTMLRender( + + + Primer React + + , + ) + const link = await waitFor(() => component.getByRole('link')) + fireEvent.click(link) + expect(onClick).toHaveBeenCalled() + }) + checkStoriesForAxeViolations('', '../ActionList/ActionList.features') checkStoriesForAxeViolations('', '../ActionList/ActionList.examples') })