[Frame] Add ContextualSaveBar props to context (#11826)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1471

### WHAT is this pull request doing?

* Adds `contextualSaveBarVisible` and `contextualSaveBarProps` to
`Frame` context
* Does not render `ContextualSaveBar` UI when `dynamicTopBarAndReframe`
feature flag is on

This is to enable us to create our own contextual save bar styles in web
as a child of the new `TopBar` while still using the frame context
architecture to manage hiding and showing the bar.

### How to 🎩

1. Make sure contextual save bar with the beta flag off is unaffected
(spin)
2. Make sure contextual save bar with beta flag on doesn't show up
(spin)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)

.changeset/rude-boxes-carry.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `contextualSaveBarVisible` and `contextualSaveBarProps` to `Frame` context

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

@@ -253,13 +253,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 =
@@ -282,6 +290,8 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       stopLoading: this.stopLoading,
       setContextualSaveBar: this.setContextualSaveBar,
       removeContextualSaveBar: this.removeContextualSaveBar,
+      contextualSaveBarVisible: this.state.showContextualSaveBar,
+      contextualSaveBarProps: this.contextualSaveBar,
     };
 
     return (

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,
   };

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;
 }