diff --git a/UNRELEASED.md b/UNRELEASED.md index 630c6e38504..fca1f097dec 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -6,6 +6,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Enhancements +- Enables optional `onClick` property for `subNavigationItem` on `Nav/Item` component to execute, if provided ([#4394](https://github.com/Shopify/polaris-react/pull/4394)) - Added optional `onClick` key to `secondaryAction` on `Nav/Item` component ([#4374](https://github.com/Shopify/polaris-react/pull/4374)) - Added `id` prop to `Layout` and `Heading` for hash linking ([#4307](https://github.com/Shopify/polaris-react/pull/4307)) - Added `external` prop to `Navigation.Item` component ([#4310](https://github.com/Shopify/polaris-react/pull/4310)) diff --git a/src/components/Navigation/components/Item/Item.tsx b/src/components/Navigation/components/Item/Item.tsx index 5262e30c417..5e01056d3f8 100644 --- a/src/components/Navigation/components/Item/Item.tsx +++ b/src/components/Navigation/components/Item/Item.tsx @@ -36,7 +36,7 @@ export interface SubNavigationItem extends ItemURLDetails { label: string; disabled?: boolean; new?: boolean; - onClick?(event: MouseEvent): void; + onClick?(): void; } interface SecondaryAction { @@ -182,6 +182,7 @@ export function Item({ styles.Item, disabled && styles['Item-disabled'], keyFocused && styles.keyFocused, + selectedOverride && styles['Item-selected'], ); return ( @@ -267,13 +268,23 @@ export function Item({ {subNavigationItems.map((item) => { const {label, ...rest} = item; + const onClick = () => { + if (onNavigationDismiss) { + onNavigationDismiss(); + } + + if (item.onClick && item.onClick !== onNavigationDismiss) { + item.onClick(); + } + }; + return ( ); })} diff --git a/src/components/Navigation/components/Item/tests/Item.test.tsx b/src/components/Navigation/components/Item/tests/Item.test.tsx index 97f18762107..3c51d63a6da 100644 --- a/src/components/Navigation/components/Item/tests/Item.test.tsx +++ b/src/components/Navigation/components/Item/tests/Item.test.tsx @@ -279,6 +279,73 @@ describe('', () => { 'aria-expanded': true, }); }); + + it('invokes the provided onClick handler', () => { + const spy = jest.fn(); + const item = mountWithNavigationProvider( + , + { + location: '/admin/orders', + }, + ); + + item! + .find(Secondary)! + .find('a')! + .trigger('onClick', { + preventDefault: jest.fn(), + currentTarget: { + getAttribute: () => '/admin/draft_orders', + }, + }); + + expect(spy).toHaveBeenCalledTimes(1); + }); + + it('invokes onNavDismiss even if a custom onClick is provided', () => { + const spy = jest.fn(); + const item = mountWithNavigationProvider( + , + { + location: '/admin/orders', + onNavigationDismiss: spy, + }, + ); + + item! + .find(Secondary)! + .find('a')! + .trigger('onClick', { + preventDefault: jest.fn(), + currentTarget: { + getAttribute: () => '/admin/draft_orders', + }, + }); + + expect(spy).toHaveBeenCalledTimes(2); + }); }); describe('with exactMatch true', () => {