Add Scrollable to Frame

Shopify · Apr 30, 2024 · 6c57a39 · 6c57a39
1 parent 847bad0
commit 6c57a39
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 46 deletions.
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -290,29 +290,8 @@
 }
 
 .Content-TopBarAndReframe {
-  overflow-y: auto;
-  /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */
-  margin-bottom: var(--pg-top-bar-height);
-  margin-right: var(--p-space-050);
-
-  .hasSidebar & {
-    /* Sidebar breakpoint is 1200px */
-    /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
-    @media screen and (min-width: 1200px) {
-      margin-right: unset;
-    }
-  }
-}
-
-.ScrollbarSafeArea-TopBarAndReframe {
   @media (--p-breakpoints-md-up) {
     transition: width var(--p-motion-duration-250) var(--p-motion-ease);
-    /* stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties */
-    width: calc(
-      100vw - var(--pg-navigation-width) -
-        var(--pc-app-provider-scrollbar-width) - var(--pc-frame-offset)
-    );
-    /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */
 
     @media (prefers-reduced-motion) {
       transition: none;
@@ -322,19 +301,13 @@
   .hasSidebar & {
     transition: width var(--p-motion-duration-250) var(--p-motion-ease);
 
-    /* Sidebar breakpoint is 1200px */
-    /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
-    @media screen and (min-width: 1200px) {
-      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
-      width: calc(
-        100vw - var(--pg-navigation-width) -
-          var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width)
-      );
-    }
-
     @media (prefers-reduced-motion) {
       transition: none;
     }
+
+    @media screen and (min-width: 1200px) {
+      margin-right: unset;
+    }
   }
 }
 

diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -31,6 +31,7 @@ import {
   CSSAnimation,
 } from './components';
 import styles from './Frame.module.css';
+import {Scrollable} from '../Scrollable';
 
 export interface FrameProps {
   /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */
@@ -76,7 +77,6 @@ interface State {
 const APP_FRAME = 'AppFrame';
 const APP_FRAME_MAIN = 'AppFrameMain';
 const APP_FRAME_CONTENT = 'AppFrameContent';
-const APP_FRAME_SCROLL_AREA = 'AppFrameScrollArea';
 const APP_FRAME_NAV = 'AppFrameNav';
 const APP_FRAME_TOP_BAR = 'AppFrameTopBar';
 const APP_FRAME_LOADING_BAR = 'AppFrameLoadingBar';
@@ -322,24 +322,25 @@ class FrameInner extends PureComponent<CombinedProps, State> {
                 id={APP_FRAME_MAIN}
                 data-has-global-ribbon={Boolean(globalRibbon)}
               >
-                <div
-                  className={classNames(
-                    styles.Content,
-                    hasDynamicTopBar && styles['Content-TopBarAndReframe'],
-                  )}
-                  id={APP_FRAME_CONTENT}
-                >
-                  {hasDynamicTopBar ? (
+                {hasDynamicTopBar ? (
+                  <Scrollable
+                    scrollbarWidth="thin"
+                    scrollbarGutter="stable"
+                    style={{width: '100%'}}
+                  >
                     <div
-                      className={styles['ScrollbarSafeArea-TopBarAndReframe']}
-                      id={APP_FRAME_SCROLL_AREA}
+                      className={classNames(
+                        styles.Content,
+                        styles['Content-TopBarAndReframe'],
+                      )}
+                      id={APP_FRAME_CONTENT}
                     >
                       {children}
                     </div>
-                  ) : (
-                    children
-                  )}
-                </div>
+                  </Scrollable>
+                ) : (
+                  <div className={styles.Content}>{children}</div>
+                )}
               </main>
             </div>
           ) : (