Add back in scrollbar padding onto content

Shopify · Apr 17, 2024 · 8fde9f1 · 8fde9f1
1 parent 4b6cfa8
commit 8fde9f1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/unlucky-coats-add.md b/.changeset/unlucky-coats-add.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': patch
 ---
 
-Changed `Frame` content overflow-y from scroll to auto
+Moved `Frame` scrollbar from main to content and set overflow-y from scroll to auto behind a feature flag
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -293,6 +293,17 @@
   }
 }
 
+.ScrollbarSafeArea-TopBarAndReframe {
+  @media (--p-breakpoints-md-up) {
+    /* 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) - 6px
+    );
+    /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */
+  }
+}
+
 .GlobalRibbonContainer {
   position: fixed;
   z-index: var(--p-z-index-3);

diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -327,7 +327,17 @@ class FrameInner extends PureComponent<CombinedProps, State> {
                           styles['Content-TopBarAndReframe'],
                       )}
                     >
-                      {children}
+                      {features?.dynamicTopBarAndReframe ? (
+                        <div
+                          className={
+                            styles['ScrollbarSafeArea-TopBarAndReframe']
+                          }
+                        >
+                          {children}
+                        </div>
+                      ) : (
+                        children
+                      )}
                     </div>
                   </main>
                 </div>