From 8354de5c5eeb60e447712c04e25c2ef370206488 Mon Sep 17 00:00:00 2001
From: Vinicius Depizzol <vdepizzol@gmail.com>
Date: Fri, 20 May 2022 11:06:05 -0700
Subject: [PATCH] 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>
---
 .changeset/nine-dragons-wave.md                   |  5 +++++
 .../components/Layout/LayoutBeta.stories.jsx      |  3 ++-
 .../components/Layout/SplitPageLayout.stories.jsx |  1 +
 src/layout/page-layout.scss                       | 15 +++++++++------
 4 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/nine-dragons-wave.md

diff --git a/.changeset/nine-dragons-wave.md b/.changeset/nine-dragons-wave.md
new file mode 100644
index 0000000000..fd0a0ca2e2
--- /dev/null
+++ 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
index 2f1260a628..c182bc25dd 100644
--- 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
index 6e4dbf4e7c..30f5792680 100644
--- 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
index 0f55e6d932..4179f024cc 100644
--- 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;
       }
     }