From d6cfb8d98ff848c35161492205c0970a231f2e55 Mon Sep 17 00:00:00 2001 From: Marcel Bensch Date: Wed, 11 Aug 2021 12:02:04 -0500 Subject: [PATCH 1/5] Support selected prop for navigation items without url (#4375) - Support selected prop for navigation items without url - Update UNRELEASED.md --- UNRELEASED.md | 1 + src/components/Navigation/components/Item/Item.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 630c6e38504..96777d0b6b6 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -23,6 +23,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Bring back borders on the `IndexTable` sticky cells ([#4150](https://github.com/Shopify/polaris-react/pull/4150)) - Adjust `IndexTable` sticky z-index to avoid collisions with focused `TextField` ([#4150](https://github.com/Shopify/polaris-react/pull/4150)) - Adjust `IndexTable` rows to have a grey hover state when unselected ([#4359](https://github.com/Shopify/polaris-react/pull/4359)) +- Properly support `selected` prop for `Navigation.Item` when `url` prop is not specified ([#4375](https://github.com/Shopify/polaris-react/pull/4375)) ### Documentation diff --git a/src/components/Navigation/components/Item/Item.tsx b/src/components/Navigation/components/Item/Item.tsx index 5262e30c417..ecd7c16af1f 100644 --- a/src/components/Navigation/components/Item/Item.tsx +++ b/src/components/Navigation/components/Item/Item.tsx @@ -182,6 +182,7 @@ export function Item({ styles.Item, disabled && styles['Item-disabled'], keyFocused && styles.keyFocused, + selectedOverride && styles['Item-selected'], ); return ( From 2d08a6c97c8660b0e800bc534ef428457957ea65 Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Thu, 12 Aug 2021 15:30:22 -0400 Subject: [PATCH 2/5] Allow subnav items to execute provided onClick handlers --- .../Navigation/components/Item/Item.tsx | 14 +++- .../components/Item/tests/Item.test.tsx | 67 +++++++++++++++++++ 2 files changed, 79 insertions(+), 2 deletions(-) diff --git a/src/components/Navigation/components/Item/Item.tsx b/src/components/Navigation/components/Item/Item.tsx index ecd7c16af1f..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 { @@ -268,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..8ea40e02c41 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).toHaveBeenCalled(); + }); + + 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).toHaveBeenCalled(); + }); }); describe('with exactMatch true', () => { From 446d8de5d2cd4c7f43dcb5b4e0dbea0609d9f19a Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Thu, 12 Aug 2021 15:45:44 -0400 Subject: [PATCH 3/5] Update UNRELEASED.md --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 96777d0b6b6..71581a062a6 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)) From 98e755aec029d321e4a1db186205be81a269f3f0 Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Wed, 25 Aug 2021 14:43:35 -0400 Subject: [PATCH 4/5] Update tests to reflect number of called times --- src/components/Navigation/components/Item/tests/Item.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Navigation/components/Item/tests/Item.test.tsx b/src/components/Navigation/components/Item/tests/Item.test.tsx index 8ea40e02c41..3c51d63a6da 100644 --- a/src/components/Navigation/components/Item/tests/Item.test.tsx +++ b/src/components/Navigation/components/Item/tests/Item.test.tsx @@ -310,7 +310,7 @@ describe('', () => { }, }); - expect(spy).toHaveBeenCalled(); + expect(spy).toHaveBeenCalledTimes(1); }); it('invokes onNavDismiss even if a custom onClick is provided', () => { @@ -344,7 +344,7 @@ describe('', () => { }, }); - expect(spy).toHaveBeenCalled(); + expect(spy).toHaveBeenCalledTimes(2); }); }); From 88426f8eaaae9ad81108eee3fb0951762053edff Mon Sep 17 00:00:00 2001 From: Chris Silivestru Date: Wed, 25 Aug 2021 14:49:39 -0400 Subject: [PATCH 5/5] Removed outdated bug fix that is now in main --- UNRELEASED.md | 1 - 1 file changed, 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 71581a062a6..fca1f097dec 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -24,7 +24,6 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Bring back borders on the `IndexTable` sticky cells ([#4150](https://github.com/Shopify/polaris-react/pull/4150)) - Adjust `IndexTable` sticky z-index to avoid collisions with focused `TextField` ([#4150](https://github.com/Shopify/polaris-react/pull/4150)) - Adjust `IndexTable` rows to have a grey hover state when unselected ([#4359](https://github.com/Shopify/polaris-react/pull/4359)) -- Properly support `selected` prop for `Navigation.Item` when `url` prop is not specified ([#4375](https://github.com/Shopify/polaris-react/pull/4375)) ### Documentation