From d963e8496e3c51503a31d030a0e1beba369d1de0 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Wed, 30 Aug 2023 11:13:08 -0400 Subject: [PATCH] [Page Header] Remove additionalNavigation prop (#10271) Closes https://github.com/Shopify/polaris/issues/10247 Low hanging fruit, not used in web, not mentioned in coverage site either https://coverage.polaris.shopify.io/usage/component?repo=shopify%2Fweb&type=components&element=%3CPage%3E --- .changeset/light-gorillas-smell.md | 5 +++ .../Page/components/Header/Header.tsx | 35 +++---------------- .../components/Header/tests/Header.test.tsx | 12 ------- 3 files changed, 9 insertions(+), 43 deletions(-) create mode 100644 .changeset/light-gorillas-smell.md diff --git a/.changeset/light-gorillas-smell.md b/.changeset/light-gorillas-smell.md new file mode 100644 index 00000000000..247096b15f9 --- /dev/null +++ b/.changeset/light-gorillas-smell.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': major +--- + +Removed deprecated additionalNavigation prop on Page Header diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx index d93646a720e..3576b03419a 100644 --- a/polaris-react/src/components/Page/components/Header/Header.tsx +++ b/polaris-react/src/components/Page/components/Header/Header.tsx @@ -61,8 +61,6 @@ export interface HeaderProps extends TitleProps { secondaryActions?: MenuActionDescriptor[] | React.ReactNode; /** Collection of page-level groups of secondary actions */ actionGroups?: MenuGroupDescriptor[]; - /** @deprecated Additional navigation markup */ - additionalNavigation?: React.ReactNode; // Additional meta data additionalMetadata?: React.ReactNode | string; /** Callback that returns true when secondary actions are rolled up into action groups, and false when not */ @@ -82,7 +80,6 @@ export function Header({ primaryAction, pagination, filterActions, - additionalNavigation, backAction, secondaryActions = [], actionGroups = [], @@ -92,13 +89,6 @@ export function Header({ const i18n = useI18n(); const {isNavigationCollapsed} = useMediaQuery(); - if (additionalNavigation && process.env.NODE_ENV === 'development') { - // eslint-disable-next-line no-console - console.warn( - 'Deprecation: The `additionalNavigation` on Page is deprecated and will be removed in the next major version.', - ); - } - const isSingleRow = !primaryAction && !pagination && @@ -123,12 +113,6 @@ export function Header({ ) : null; - const additionalNavigationMarkup = additionalNavigation ? ( - - {additionalNavigation} - - ) : null; - const pageTitleMarkup = (
<InlineStack gap="4" align="space-between" blockAlign="center"> {breadcrumbMarkup} - {additionalNavigationMarkup} {paginationMarkup} </InlineStack> </Box> @@ -201,10 +184,9 @@ export function Header({ title && title.length > LONG_TITLE && styles.longTitle, ); - const {slot1, slot2, slot3, slot4, slot5, slot6} = determineLayout({ + const {slot1, slot2, slot3, slot4, slot5} = determineLayout({ actionMenuMarkup, additionalMetadataMarkup, - additionalNavigationMarkup, breadcrumbMarkup, isNavigationCollapsed, pageTitleMarkup, @@ -245,12 +227,9 @@ export function Header({ </ConditionalRender> </div> </ConditionalRender> - <ConditionalRender condition={[slot5, slot6].some(notNull)}> + <ConditionalRender condition={[slot5].some(notNull)}> <div className={styles.Row}> <InlineStack gap="4">{slot5}</InlineStack> - <ConditionalRender condition={slot6 != null}> - <div className={styles.RightAlign}>{slot6}</div> - </ConditionalRender> </div> </ConditionalRender> </FilterActionsProvider> @@ -322,7 +301,6 @@ function notNull(value: any) { function determineLayout({ actionMenuMarkup, additionalMetadataMarkup, - additionalNavigationMarkup, breadcrumbMarkup, isNavigationCollapsed, pageTitleMarkup, @@ -332,7 +310,6 @@ function determineLayout({ }: { actionMenuMarkup: MaybeJSX; additionalMetadataMarkup: MaybeJSX; - additionalNavigationMarkup: MaybeJSX; breadcrumbMarkup: MaybeJSX; isNavigationCollapsed: boolean; pageTitleMarkup: JSX.Element; @@ -344,7 +321,7 @@ function determineLayout({ // |----------------------------------------------------| // | slot1 | slot2 | | slot3 | slot4 | // |----------------------------------------------------| - // | slot5 | | slot6 | + // | slot5 | | // |----------------------------------------------------| // const layouts = { @@ -355,7 +332,6 @@ function determineLayout({ slot3: actionMenuMarkup, slot4: primaryActionMarkup, slot5: additionalMetadataMarkup, - slot6: additionalNavigationMarkup, }, condition: isNavigationCollapsed && @@ -370,7 +346,6 @@ function determineLayout({ slot3: actionMenuMarkup, slot4: primaryActionMarkup, slot5: additionalMetadataMarkup, - slot6: additionalNavigationMarkup, }, condition: isNavigationCollapsed, }, @@ -381,7 +356,6 @@ function determineLayout({ slot3: actionMenuMarkup, slot4: primaryActionMarkup, slot5: additionalMetadataMarkup, - slot6: additionalNavigationMarkup, }, condition: !isNavigationCollapsed && @@ -402,7 +376,6 @@ function determineLayout({ ), slot4: paginationMarkup, slot5: additionalMetadataMarkup, - slot6: additionalNavigationMarkup, }, condition: !isNavigationCollapsed, }, diff --git a/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx b/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx index a54b0209837..50e1caf137a 100644 --- a/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx +++ b/polaris-react/src/components/Page/components/Header/tests/Header.test.tsx @@ -181,18 +181,6 @@ describe('<Header />', () => { }); }); - describe('additionalNavigation', () => { - it('renders element if passed', () => { - const TestComponent = () => <div />; - - const header = mountWithApp( - <Header {...mockProps} additionalNavigation={<TestComponent />} />, - ); - - expect(header).toContainReactComponent(TestComponent); - }); - }); - describe('action menu', () => { const mockSecondaryActions: HeaderProps['secondaryActions'] = [ {content: 'mock content 1'},