From dc7028973165db5fde48a36d6ea6c47d4de36174 Mon Sep 17 00:00:00 2001 From: Joshua Rush Date: Tue, 10 Jan 2023 04:23:05 +0000 Subject: [PATCH 1/5] Fixing the onClick of ActionList.LinkItem --- src/ActionList/ActionList.stories.tsx | 8 +++++++- src/ActionList/LinkItem.tsx | 25 +++++++++++++++++++------ src/ActionList/shared.ts | 12 +++++++++++- src/__tests__/ActionList.test.tsx | 15 +++++++++++++++ 4 files changed, 52 insertions(+), 8 deletions(-) diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx index de6f66ae6f5..ededc3b6785 100644 --- a/src/ActionList/ActionList.stories.tsx +++ b/src/ActionList/ActionList.stories.tsx @@ -197,7 +197,13 @@ export const LinkItemPlayground = args => { return ( - + { + // eslint-disable-next-line no-console + console.log('link clicked') + }} + > {leadingVisual && {leadingVisual}} Action list item {trailingVisual && {trailingVisual}} diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx index daea8a98ddc..8c95d775e89 100644 --- a/src/ActionList/LinkItem.tsx +++ b/src/ActionList/LinkItem.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {ReducerAction} from 'react' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import Link from '../Link' import {SxProp, merge} from '../sx' @@ -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..69b8ab83566 100644 --- a/src/__tests__/ActionList.test.tsx +++ b/src/__tests__/ActionList.test.tsx @@ -155,6 +155,21 @@ 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')) + expect(link).toBeInTheDocument() + + fireEvent.click(link) + + expect(onClick).toHaveBeenCalled() + }) + checkStoriesForAxeViolations('', '../ActionList/ActionList.features') checkStoriesForAxeViolations('', '../ActionList/ActionList.examples') }) From 5a881a1c7d98a0c788097873e7338dd07e2e535c Mon Sep 17 00:00:00 2001 From: Joshua Rush Date: Tue, 10 Jan 2023 04:23:58 +0000 Subject: [PATCH 2/5] Adding changeset --- .changeset/poor-melons-share.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/poor-melons-share.md 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 From 297a0e6f874adfa118704b04ee8a0c2c7a443338 Mon Sep 17 00:00:00 2001 From: Joshua Rush Date: Tue, 10 Jan 2023 04:28:37 +0000 Subject: [PATCH 3/5] removing console statement --- src/ActionList/ActionList.stories.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx index ededc3b6785..de6f66ae6f5 100644 --- a/src/ActionList/ActionList.stories.tsx +++ b/src/ActionList/ActionList.stories.tsx @@ -197,13 +197,7 @@ export const LinkItemPlayground = args => { return ( - { - // eslint-disable-next-line no-console - console.log('link clicked') - }} - > + {leadingVisual && {leadingVisual}} Action list item {trailingVisual && {trailingVisual}} From b90abce71447c3f7527bd65a7e1a4126281ac2b9 Mon Sep 17 00:00:00 2001 From: Joshua Rush Date: Tue, 10 Jan 2023 04:33:33 +0000 Subject: [PATCH 4/5] removing unused import --- src/ActionList/LinkItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx index 8c95d775e89..d4decbe2292 100644 --- a/src/ActionList/LinkItem.tsx +++ b/src/ActionList/LinkItem.tsx @@ -1,4 +1,4 @@ -import React, {ReducerAction} from 'react' +import React from 'react' import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' import Link from '../Link' import {SxProp, merge} from '../sx' From dda6230e2828aa160eb24aad3f839f3cef80fcb0 Mon Sep 17 00:00:00 2001 From: Joshua Rush Date: Tue, 10 Jan 2023 16:13:05 +0000 Subject: [PATCH 5/5] Fixing test --- src/__tests__/ActionList.test.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/__tests__/ActionList.test.tsx b/src/__tests__/ActionList.test.tsx index 69b8ab83566..02adf1cb11c 100644 --- a/src/__tests__/ActionList.test.tsx +++ b/src/__tests__/ActionList.test.tsx @@ -156,17 +156,16 @@ describe('ActionList', () => { }) it('should call onClick for a link item', async () => { - const onClick = jest.fn + const onClick = jest.fn() const component = HTMLRender( - Primer React + + Primer React + , ) const link = await waitFor(() => component.getByRole('link')) - expect(link).toBeInTheDocument() - fireEvent.click(link) - expect(onClick).toHaveBeenCalled() })