From 89e1fe82d5b89689d135ad41bfd41cdc0f92a7f6 Mon Sep 17 00:00:00 2001
From: Katy DeCorah <decorah@mapbox.com>
Date: Wed, 29 Sep 2021 11:10:25 -0400
Subject: [PATCH 1/2] Fix deprecated viewport classes

---
 .../__snapshots__/page-layout.test.js.snap     | 18 +++++++++---------
 .../page-layout/components/content.js          |  2 +-
 .../page-layout/components/sidebar.js          |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
index 9a210ae21..53e4da61b 100644
--- a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
+++ b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
@@ -20,7 +20,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled viewport-almost-mm px12-mm"
+          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -284,7 +284,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled viewport-almost-mxl sticky-mxl color-text"
+                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -646,7 +646,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled viewport-almost-mm px12-mm"
+          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -940,7 +940,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled viewport-almost-mxl sticky-mxl color-text"
+                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -1237,7 +1237,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled viewport-almost-mm px12-mm"
+          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -1561,7 +1561,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled viewport-almost-mxl sticky-mxl color-text"
+                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -1800,7 +1800,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled viewport-almost-mm px12-mm"
+          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -2157,7 +2157,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled viewport-almost-mxl sticky-mxl color-text"
+                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -2332,7 +2332,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled viewport-almost-mm px12-mm"
+          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
diff --git a/src/components/page-layout/components/content.js b/src/components/page-layout/components/content.js
index ed19fd92b..545cc3384 100644
--- a/src/components/page-layout/components/content.js
+++ b/src/components/page-layout/components/content.js
@@ -77,7 +77,7 @@ export class ContentWrapper extends React.PureComponent {
     return (
       <aside
         data-swiftype-index="false"
-        className="scroll-auto-mxl scroll-styled viewport-almost-mxl sticky-mxl color-text"
+        className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
         style={{ top: '10px' }}
       >
         {this.props.customAside ? this.props.customAside : undefined}
diff --git a/src/components/page-layout/components/sidebar.js b/src/components/page-layout/components/sidebar.js
index bac7a89c8..6abb19502 100644
--- a/src/components/page-layout/components/sidebar.js
+++ b/src/components/page-layout/components/sidebar.js
@@ -28,7 +28,7 @@ export default class Sidebar extends React.PureComponent {
       <div
         data-swiftype-index="false"
         id="dr-ui--page-layout-sidebar"
-        className="sticky-mm scroll-auto-mm scroll-styled viewport-almost-mm px12-mm"
+        className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
         style={{ top: '10px' }}
       >
         <div className="mb6 border-b border--darken10">

From 185c13c0429e54f79540cdda6b72c622c158a249 Mon Sep 17 00:00:00 2001
From: Katy DeCorah <decorah@mapbox.com>
Date: Wed, 29 Sep 2021 11:18:23 -0400
Subject: [PATCH 2/2] Fix overflow- class

---
 docs/src/css/site.css                          |  2 +-
 .../__snapshots__/page-layout.test.js.snap     | 18 +++++++++---------
 .../page-layout/components/content.js          |  2 +-
 .../page-layout/components/sidebar.js          |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/src/css/site.css b/docs/src/css/site.css
index b9822ed77..ca54d2cf7 100644
--- a/docs/src/css/site.css
+++ b/docs/src/css/site.css
@@ -7,7 +7,7 @@
   height: 50px !important;
 }
 @media screen and (min-width: 640px) {
-  #docs-content #dr-ui--page-layout-sidebar.scroll-auto-mm {
+  #docs-content #dr-ui--page-layout-sidebar.overflow-auto-mm {
     overflow: unset !important;
   }
 }
diff --git a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
index 53e4da61b..f167d6aa6 100644
--- a/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
+++ b/src/components/page-layout/__tests__/__snapshots__/page-layout.test.js.snap
@@ -20,7 +20,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
+          className="sticky-mm overflow-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -284,7 +284,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
+                className="overflow-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -646,7 +646,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
+          className="sticky-mm overflow-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -940,7 +940,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
+                className="overflow-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -1237,7 +1237,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
+          className="sticky-mm overflow-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -1561,7 +1561,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
+                className="overflow-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -1800,7 +1800,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
+          className="sticky-mm overflow-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
@@ -2157,7 +2157,7 @@ Array [
               className="dr-ui--page-layout-aside col w-full w-1/3-mxl"
             >
               <aside
-                className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
+                className="overflow-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
                 data-swiftype-index="false"
                 style={
                   Object {
@@ -2332,7 +2332,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
+          className="sticky-mm overflow-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
           data-swiftype-index="false"
           id="dr-ui--page-layout-sidebar"
           style={
diff --git a/src/components/page-layout/components/content.js b/src/components/page-layout/components/content.js
index 545cc3384..af33ddd12 100644
--- a/src/components/page-layout/components/content.js
+++ b/src/components/page-layout/components/content.js
@@ -77,7 +77,7 @@ export class ContentWrapper extends React.PureComponent {
     return (
       <aside
         data-swiftype-index="false"
-        className="scroll-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
+        className="overflow-auto-mxl scroll-styled h-viewport-11/12-mxl sticky-mxl color-text"
         style={{ top: '10px' }}
       >
         {this.props.customAside ? this.props.customAside : undefined}
diff --git a/src/components/page-layout/components/sidebar.js b/src/components/page-layout/components/sidebar.js
index 6abb19502..91725d3f1 100644
--- a/src/components/page-layout/components/sidebar.js
+++ b/src/components/page-layout/components/sidebar.js
@@ -28,7 +28,7 @@ export default class Sidebar extends React.PureComponent {
       <div
         data-swiftype-index="false"
         id="dr-ui--page-layout-sidebar"
-        className="sticky-mm scroll-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
+        className="sticky-mm overflow-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
         style={{ top: '10px' }}
       >
         <div className="mb6 border-b border--darken10">