Maintain DOM ordering when top bar is undefined in reframe

Shopify · May 10, 2024 · 7c1af27 · 7c1af27
1 parent 9833c5d
commit 7c1af27
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/.changeset/sixty-terms-bake.md b/.changeset/sixty-terms-bake.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Maintained DOM ordering for `Frame` reframe when `topBar` is undefined
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -280,6 +280,10 @@
   }
 }
 
+.NoScrollbarGutterLine-TopBarAndReframe {
+  border-inline-end: none;
+}
+
 .Content {
   position: relative;
   /* stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY */
@@ -470,13 +474,17 @@
   }
 }
 
-.Scrollable {
+.NoShadowBevel {
   width: 100%;
+}
+
+.Scrollable {
+  width: 100vw;
 
   /* Not using the spacer custom property so the space is applied always */
   margin-right: var(--p-space-050);
   /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */
-  height: calc(100% - var(--pg-top-bar-height));
+  height: calc(100vh - var(--pg-top-bar-height));
 
   scrollbar-width: thin;
   scrollbar-color: var(--p-color-scrollbar-thumb-bg) transparent;

diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -295,60 +295,67 @@ class FrameInner extends PureComponent<CombinedProps, State> {
       contextualSaveBarProps: this.contextualSaveBar,
     };
 
-    const hasDynamicTopBar =
-      this.props.dynamicTopBarAndReframe && Boolean(topBar);
+    const {dynamicTopBarAndReframe} = this.props;
 
     return (
       <FrameContext.Provider value={context}>
         <div
-          className={getFrameClassName(hasDynamicTopBar)}
+          className={getFrameClassName(
+            dynamicTopBarAndReframe && Boolean(topBar),
+          )}
           {...layer.props}
           {...navigationAttributes}
         >
           {skipMarkup}
           {topBarMarkup}
-          {hasDynamicTopBar ? null : navigationMarkup}
+          {dynamicTopBarAndReframe ? null : navigationMarkup}
           {contextualSaveBarMarkup}
           {loadingMarkup}
-          {navigationOverlayMarkup}
-          {hasDynamicTopBar ? (
-            <div className={styles.ShadowBevel} id={APP_FRAME_BEVEL}>
+          {dynamicTopBarAndReframe ? null : navigationOverlayMarkup}
+          {dynamicTopBarAndReframe ? (
+            <div
+              className={classNames(
+                topBar ? styles.ShadowBevel : styles.NoShadowBevel,
+              )}
+              id={APP_FRAME_BEVEL}
+            >
               {navigationMarkup}
+              {navigationOverlayMarkup}
               <main
                 className={classNames(
                   styles.Main,
-                  styles['Main-TopBarAndReframe'],
+                  topBar && styles['Main-TopBarAndReframe'],
+                  dynamicTopBarAndReframe &&
+                    styles['NoScrollbarGutterLine-TopBarAndReframe'],
                 )}
                 id={APP_FRAME_MAIN}
                 data-has-global-ribbon={Boolean(globalRibbon)}
               >
-                {hasDynamicTopBar ? (
-                  <Scrollable
-                    scrollbarWidth="thin"
-                    horizontal={false}
+                <Scrollable
+                  scrollbarWidth="thin"
+                  horizontal={false}
+                  className={classNames(
+                    styles.Scrollable,
+                    this.state.scrollbarAlwaysVisible &&
+                      styles['Scrollable-ScrollbarAlwaysVisible'],
+                  )}
+                  id={APP_FRAME_SCROLLABLE}
+                >
+                  <div
                     className={classNames(
-                      styles.Scrollable,
-                      this.state.scrollbarAlwaysVisible &&
-                        styles['Scrollable-ScrollbarAlwaysVisible'],
+                      styles.Content,
+                      styles['Content-TopBarAndReframe'],
                     )}
-                    id={APP_FRAME_SCROLLABLE}
                   >
                     <div
                       className={classNames(
-                        styles.Content,
-                        styles['Content-TopBarAndReframe'],
+                        topBar && styles['ScrollbarSafeArea-TopBarAndReframe'],
                       )}
                     >
-                      <div
-                        className={styles['ScrollbarSafeArea-TopBarAndReframe']}
-                      >
-                        {children}
-                      </div>
+                      {children}
                     </div>
-                  </Scrollable>
-                ) : (
-                  <div className={styles.Content}>{children}</div>
-                )}
+                  </div>
+                </Scrollable>
               </main>
             </div>
           ) : (