Add in contextual save bar in context

Shopify · Apr 3, 2024 · 9066086 · 9066086
1 parent ab8a8cc
commit 9066086
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -30,6 +30,7 @@ import {
   CSSAnimation,
 } from './components';
 import styles from './Frame.module.css';
+import {UseFeatures} from '../../utilities/features';
 
 export interface FrameProps {
   /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */
@@ -246,13 +247,21 @@ class FrameInner extends PureComponent<CombinedProps, State> {
     );
 
     const contextualSaveBarMarkup = (
-      <CSSAnimation
-        in={showContextualSaveBar}
-        className={styles.ContextualSaveBar}
-        type="fade"
-      >
-        <ContextualSaveBar {...this.contextualSaveBar} />
-      </CSSAnimation>
+      <UseFeatures>
+        {({dynamicTopBarAndReframe}) =>
+          dynamicTopBarAndReframe ? (
+            <></>
+          ) : (
+            <CSSAnimation
+              in={showContextualSaveBar}
+              className={styles.ContextualSaveBar}
+              type="fade"
+            >
+              <ContextualSaveBar {...this.contextualSaveBar} />
+            </CSSAnimation>
+          )
+        }
+      </UseFeatures>
     );
 
     const navigationOverlayMarkup =
@@ -275,6 +284,8 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       stopLoading: this.stopLoading,
       setContextualSaveBar: this.setContextualSaveBar,
       removeContextualSaveBar: this.removeContextualSaveBar,
+      contextualSaveBarVisible: this.state.showContextualSaveBar,
+      contextualSaveBarProps: this.contextualSaveBar,
     };
 
     return (

diff --git a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
@@ -118,6 +118,8 @@ function createFrameContext({
   toastMessages = [],
   setContextualSaveBar = noop,
   removeContextualSaveBar = noop,
+  contextualSaveBarVisible = false,
+  contextualSaveBarProps = {},
   startLoading = noop,
   stopLoading = noop,
 }: Partial<FrameContextType> = {}): FrameContextType {
@@ -128,6 +130,8 @@ function createFrameContext({
     toastMessages,
     setContextualSaveBar,
     removeContextualSaveBar,
+    contextualSaveBarVisible,
+    contextualSaveBarProps,
     startLoading,
     stopLoading,
   };

diff --git a/polaris-react/src/utilities/frame/context.ts b/polaris-react/src/utilities/frame/context.ts
@@ -15,6 +15,8 @@ export interface FrameContextType {
   toastMessages: ToastPropsWithID[];
   setContextualSaveBar(props: ContextualSaveBarProps): void;
   removeContextualSaveBar(): void;
+  contextualSaveBarVisible: boolean;
+  contextualSaveBarProps: ContextualSaveBarProps | null;
   startLoading(): void;
   stopLoading(): void;
 }