[Navigation] Design language animation

src/components/Navigation/Navigation.scss

@@ -282,7 +282,6 @@ $disabled-fade: 0.6;
 $secondary-item-font-size: rem(15px);
 .SecondaryNavigation {
   flex-basis: 100%;
-  margin-bottom: spacing(tight);
   margin-left: nav(icon-size) + spacing(loose);
   overflow-x: var(--p-override-visible, hidden);
 
@@ -296,6 +295,11 @@ $secondary-item-font-size: rem(15px);
 
   .List {
     @include unstyled-list;
+    margin-bottom: spacing(tight);
+    // stylelint-disable-next-line selector-max-combinators, selector-max-class
+    .Navigation-newDesignLanguage & {
+      margin-bottom: 0;
+    }
   }
 
   .Item {

src/components/Navigation/components/Item/Item.tsx

@@ -214,7 +214,7 @@ export function Item({
 
   let secondaryNavigationMarkup: ReactNode = null;
 
-  if (subNavigationItems.length > 0 && showExpanded) {
+  if (subNavigationItems.length > 0) {
     const longestMatch = matchingSubNavigationItems.sort(
       ({url: firstUrl}, {url: secondUrl}) => secondUrl.length - firstUrl.length,
     )[0];

src/components/Navigation/components/Item/components/Secondary/Secondary.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import {useUniqueId} from '../../../../../../utilities/unique-id';
 import {Collapsible} from '../../../../../Collapsible';
-
 import styles from '../../../../Navigation.scss';
+import {useFeatures} from '../../../../../../utilities/features';
+import {Tokens} from '../../../../../../utilities/theme';
 
 interface SecondaryProps {
   expanded: boolean;
@@ -12,8 +13,15 @@ interface SecondaryProps {
 
 export function Secondary({children, expanded}: SecondaryProps) {
   const id = useUniqueId('SecondaryNavigation');
+  const {newDesignLanguage = false} = useFeatures();
+
+  const transitionProperties = {
+    duration: newDesignLanguage ? Tokens.duration150 : '0ms',
+    timingFunction: newDesignLanguage ? Tokens.ease : 'none',
+  };
+
   return (
-    <Collapsible id={id} open={expanded}>
+    <Collapsible id={id} open={expanded} transition={transitionProperties}>
       <ul className={styles.List}>{children}</ul>
     </Collapsible>
   );

src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
+import {Tokens} from '../../../../../../../utilities/theme';
+import {Collapsible} from '../../../../../../Collapsible';
 
 import {Secondary} from '../Secondary';
 
@@ -9,4 +12,26 @@ describe('Secondary()', () => {
     const secondary = mountWithAppProvider(<Secondary expanded />);
     expect(secondary.exists()).toBe(true);
   });
+
+  describe('newDesignLanguage', () => {
+    it('passes null transition properties to collapsible when newDesignLanguage is false', () => {
+      const secondary = mountWithApp(<Secondary expanded />, {
+        features: {newDesignLanguage: false},
+      });
+
+      expect(secondary.find(Collapsible)).toHaveReactProps({
+        transition: {duration: '0ms', timingFunction: 'none'},
+      });
+    });
+
+    it('passes transition properties to collapsible when newDesignLanguage is true', () => {
+      const secondary = mountWithApp(<Secondary expanded />, {
+        features: {newDesignLanguage: true},
+      });
+
+      expect(secondary.find(Collapsible)).toHaveReactProps({
+        transition: {duration: Tokens.duration150, timingFunction: Tokens.ease},
+      });
+    });
+  });
 });

src/components/Navigation/components/Item/tests/Item.test.tsx

@@ -164,11 +164,12 @@ describe('<Nav.Item />', () => {
       expect(secondary.exists()).toBe(true);
     });
 
-    it('does not render expanded when parent and children both have no match on the location', () => {
+    it('renders with expanded: false when parent and children both have no match on the location', () => {
       const item = itemForLocation('/admin/notARealRoute');
 
       const secondary = item.find(Secondary);
-      expect(secondary.exists()).toBe(false);
+      expect(secondary.exists()).toBe(true);
+      expect(secondary.prop('expanded')).toBe(false);
     });
   });
 
@@ -180,11 +181,12 @@ describe('<Nav.Item />', () => {
       expect(secondary.exists()).toBe(true);
     });
 
-    it('does not render expanded when no exact match on url', () => {
+    it('renders with expanded: false when no exact match on url', () => {
       const item = itemForLocation('/admin/orders/1', {exactMatch: true});
 
       const secondary = item.find(Secondary);
-      expect(secondary.exists()).toBe(false);
+      expect(secondary.exists()).toBe(true);
+      expect(secondary.prop('expanded')).toBe(false);
     });
 
     it('still renders expanded when there is a match on url for one of it`s children', () => {