[Page Header] Remove additionalNavigation prop (#10271)

Closes #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
Shopify · Sep 18, 2023 · d963e84 · d963e84
1 parent d42214e
commit d963e84
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 43 deletions.
diff --git a/.changeset/light-gorillas-smell.md 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
@@ -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({
       </div>
     ) : null;
 
-  const additionalNavigationMarkup = additionalNavigation ? (
-    <InlineStack gap="4" align="end">
-      <Box printHidden>{additionalNavigation}</Box>
-    </InlineStack>
-  ) : null;
-
   const pageTitleMarkup = (
     <div className={styles.TitleWrapper}>
       <Title
@@ -167,7 +151,7 @@ export function Header({
   }
 
   const navigationMarkup =
-    breadcrumbMarkup || paginationMarkup || additionalNavigationMarkup ? (
+    breadcrumbMarkup || paginationMarkup ? (
       <Box
         printHidden
         paddingBlockEnd="1"
@@ -177,7 +161,6 @@ export function Header({
       >
         <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
@@ -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'},