[Assembly v1] Replace viewport and scroll classes in PageLayout (#524)

* Fix deprecated viewport classes * Fix overflow- class
mapbox · Oct 1, 2021 · f6f0554 · f6f0554
1 parent 617c23a
commit f6f0554
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -20,7 +20,7 @@ Array [
         }
       >
         <div
-          className="sticky-mm scroll-auto-mm scroll-styled viewport-almost-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 viewport-almost-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 viewport-almost-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 viewport-almost-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 viewport-almost-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 viewport-almost-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 viewport-almost-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 viewport-almost-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 viewport-almost-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
@@ -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="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
@@ -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 overflow-auto-mm scroll-styled h-viewport-11/12-mm px12-mm"
         style={{ top: '10px' }}
       >
         <div className="mb6 border-b border--darken10">