Fix layout sticky pane modifier name (#2087)

* Fix sticky pane modifier class name * Set SplitPageLayout pane sticky by default * Create nine-dragons-wave.md Co-authored-by: Jon Rohan <yes@jonrohan.codes>
primer · May 20, 2022 · 8354de5 · 8354de5
1 parent 6836586
commit 8354de5
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/.changeset/nine-dragons-wave.md b/.changeset/nine-dragons-wave.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`.
diff --git a/docs/src/stories/components/Layout/LayoutBeta.stories.jsx b/docs/src/stories/components/Layout/LayoutBeta.stories.jsx
@@ -371,7 +371,6 @@ export const LayoutTemplate = ({
           paneWidth && layoutClassName + '--paneWidth-' + `${paneWidth}`,
           panePosition && layoutClassName + '--panePos-' + `${panePosition}`,
           hasPaneDivider && layoutClassName + '--hasPaneDivider',
-          paneIsSticky && layoutClassName + '--isPaneSticky',
 
           layoutClassName + '--responsive-' + `${responsiveVariant}`,
           responsiveVariant === 'separateRegions' && layoutClassName + '--responsive-primary-' + `${primaryRegion}`,
@@ -403,6 +402,7 @@ export const LayoutTemplate = ({
                   className={clsx(
                     layoutClassName + '-region',
                     layoutClassName + '-pane',
+                    paneIsSticky && layoutClassName + '-pane--sticky',
                     paneDividerWhenNarrow &&
                       layoutClassName +
                         '-region--dividerNarrow-' +
@@ -433,6 +433,7 @@ export const LayoutTemplate = ({
                   className={clsx(
                     layoutClassName + '-region',
                     layoutClassName + '-pane',
+                    paneIsSticky && layoutClassName + '-pane--sticky',
                     paneDividerWhenNarrow &&
                       layoutClassName +
                         '-region--dividerNarrow-' +

diff --git a/docs/src/stories/components/Layout/SplitPageLayout.stories.jsx b/docs/src/stories/components/Layout/SplitPageLayout.stories.jsx
@@ -163,6 +163,7 @@ Playground.args = {
   // Pane
   hasPane: true,
   paneWidth: 'wide',
+  paneIsSticky: true,
 
   // Content
   contentWidth: 'full',

diff --git a/src/layout/page-layout.scss b/src/layout/page-layout.scss
@@ -111,12 +111,15 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
     // sticky pane
 
-    &.PageLayout--isPaneSticky {
-      .PageLayout-pane {
-        position: sticky;
-        top: 0;
-        max-height: 100vh;
-        overflow: auto;
+    .PageLayout-pane--sticky {
+      position: sticky;
+      top: 0;
+      max-height: 100vh;
+      overflow: auto;
+      scrollbar-width: thin;
+
+      @supports (max-height: 100dvh) {
+        max-height: 100dvh;
       }
     }