[Navigation/Frame] Update transitions and loading for view transitions

.changeset/kind-timers-thank.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for View Transitions on `Page`, `Navigation`, `Breadcrumbs`, and `Button`

polaris-react/src/components/Frame/Frame.tsx

@@ -24,12 +24,7 @@ import type {
 import {UseTheme} from '../../utilities/use-theme';
 import {UseFeatures} from '../../utilities/features';
 
-import {
-  ToastManager,
-  Loading,
-  ContextualSaveBar,
-  CSSAnimation,
-} from './components';
+import {ToastManager, ContextualSaveBar, CSSAnimation} from './components';
 import styles from './Frame.module.css';
 
 export interface FrameProps {
@@ -76,7 +71,6 @@ interface State {
 const APP_FRAME_MAIN = 'AppFrameMain';
 const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
-const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
 
 class FrameInner extends PureComponent<CombinedProps, State> {
   state: State = {
@@ -110,8 +104,7 @@ class FrameInner extends PureComponent<CombinedProps, State> {
   }
 
   render() {
-    const {skipFocused, loadingStack, toastMessages, showContextualSaveBar} =
-      this.state;
+    const {skipFocused, toastMessages, showContextualSaveBar} = this.state;
     const {
       logo,
       children,
@@ -185,13 +178,6 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       </UseTheme>
     ) : null;
 
-    const loadingMarkup =
-      loadingStack > 0 ? (
-        <div className={styles.LoadingBar} id={APP_FRAME_LOADING_BAR}>
-          <Loading />
-        </div>
-      ) : null;
-
     const topBarMarkup = topBar ? (
       <div
         className={styles.TopBar}
@@ -302,7 +288,6 @@ class FrameInner extends PureComponent<CombinedProps, State> {
           {topBarMarkup}
           {hasDynamicTopBar ? null : navigationMarkup}
           {contextualSaveBarMarkup}
-          {loadingMarkup}
           {navigationOverlayMarkup}
           {hasDynamicTopBar ? (
             <div className={styles.ShadowBevel}>

polaris-react/src/components/Frame/tests/Frame.test.tsx

@@ -4,13 +4,9 @@ import {animationFrame, dimension} from '@shopify/jest-dom-mocks';
 import {mountWithApp} from 'tests/utilities';
 
 import {ContextualSaveBar as PolarisContextualSavebar} from '../../ContextualSaveBar';
-import {Loading as PolarisLoading} from '../../Loading';
 import {TrapFocus} from '../../TrapFocus';
 import {Frame} from '../Frame';
-import {
-  ContextualSaveBar as FrameContextualSavebar,
-  Loading as FrameLoading,
-} from '../components';
+import {ContextualSaveBar as FrameContextualSavebar} from '../components';
 
 window.matchMedia =
   window.matchMedia ||
@@ -327,16 +323,4 @@ describe('<Frame />', () => {
       expect(frame).toContainReactComponent(FrameContextualSavebar);
     });
   });
-
-  describe('loading', () => {
-    it('renders a Frame Loading if Polaris Loading is rendered', () => {
-      const frame = mountWithApp(
-        <Frame>
-          <PolarisLoading />
-        </Frame>,
-      );
-
-      expect(frame).toContainReactComponent(FrameLoading);
-    });
-  });
 });

polaris-react/src/components/Navigation/Navigation.module.css

@@ -1111,19 +1111,3 @@
   height: 10px;
   width: 10px;
 }
-
-.SecondaryNavigationOpen {
-  animation: var(--p-motion-ease-out) var(--p-motion-duration-150) snappy-grow;
-}
-/* stylelint-disable -- set margin and opacity */
-@keyframes snappy-grow {
-  from {
-    margin-bottom: -10%;
-    opacity: 0;
-  }
-
-  to {
-    margin-bottom: 0%;
-    opacity: 1;
-  }
-}

polaris-react/src/components/Navigation/components/Item/components/SecondaryNavigation/SecondaryNavigation.tsx

@@ -40,18 +40,22 @@ export function SecondaryNavigation({
     isEqual(item, hoveredItem),
   );
 
+  const transition = {
+    duration: 'var(--p-motion-duration-100)',
+    timingFunction: 'var(--p-motion-ease-out)',
+  };
+
   return (
     <div
       className={classNames(
         styles.SecondaryNavigation,
-        showExpanded && styles.SecondaryNavigationOpen,
         !icon && styles['SecondaryNavigation-noIcon'],
       )}
     >
       <Collapsible
         id={secondaryNavigationId || uid}
         open={showExpanded}
-        transition={false}
+        transition={transition}
       >
         <ul className={styles.List}>
           {subNavigationItems.map((item, index) => {

polaris-react/src/components/Navigation/components/Item/components/SecondaryNavigation/tests/SecondaryNavigation.test.tsx

@@ -48,10 +48,13 @@ describe('<SecondaryNavigation />', () => {
       });
     });
 
-    it('disables Collapsible transition', () => {
+    it('renders Collapsible with a custom transition', () => {
       const component = mountWithApp(<SecondaryNavigation {...mockProps} />);
       expect(component).toContainReactComponent(Collapsible, {
-        transition: false,
+        transition: {
+          duration: 'var(--p-motion-duration-100)',
+          timingFunction: 'var(--p-motion-ease-out)',
+        },
       });
     });