Add overflow to disabled rules.

cloudscape-design · Nov 3, 2023 · bb873c4 · bb873c4
1 parent e6b2043
commit bb873c4
Show file tree

Hide file tree

Showing 51 changed files with 134 additions and 82 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -4,7 +4,7 @@
     "stylelint-prettier/recommended"
   ],
   "rules": {
-    "property-disallowed-list": ["margin", "border", "padding"],
+    "property-disallowed-list": ["margin", "border", "padding", "overflow", "overflow-x", "overflow-y"],
     "csstools/use-logical": "always",
     "custom-property-pattern": "^(?!.+)",
     "scss/comment-no-empty": null,

diff --git a/pages/button-dropdown/styles.scss b/pages/button-dropdown/styles.scss
@@ -22,7 +22,8 @@
 
   &.scroll,
   &.auto {
-    overflow: scroll;
+    overflow-block: scroll;
+    overflow-inline: scroll;
     > .inner-container {
       position: relative;
       inset-inline-start: 300px;
@@ -37,7 +38,8 @@
   }
 
   &.hidden {
-    overflow: hidden;
+    overflow-block: hidden;
+    overflow-inline: hidden;
     > .inner-container {
       position: relative;
       inset-inline-start: 50px;
@@ -67,7 +69,8 @@
   border-inline: red 1px solid;
   inline-size: 600px;
   block-size: 600px;
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
 }
 
 .positioning-container {

diff --git a/pages/dropdown/fixed-container.scss b/pages/dropdown/fixed-container.scss
@@ -6,7 +6,7 @@
 @use '~design-tokens' as awsui;
 
 .bodyScrollOverride {
-  overflow-y: scroll;
+  overflow-block: scroll;
   block-size: 100%;
 }
 

diff --git a/pages/dropdown/styles.scss b/pages/dropdown/styles.scss
@@ -4,7 +4,8 @@
 */
 
 .list-container {
-  overflow: auto;
+  overflow-block: auto;
+  overflow-inline: auto;
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
@@ -17,19 +18,21 @@
   block-size: 200px;
   border-block: 1px solid cornflowerblue;
   border-inline: 1px solid cornflowerblue;
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   display: inline-block;
 
   &-wide {
     inline-size: 400px;
   }
 
   &-overflow-visible {
-    overflow: auto;
+    overflow-block: auto;
+    overflow-inline: auto;
   }
 
   &-overflow-y-visible {
-    overflow-y: auto;
+    overflow-block: auto;
   }
 }
 
@@ -44,7 +47,7 @@
   margin-block: 0;
   margin-inline: 0;
   list-style: none;
-  overflow-y: auto;
+  overflow-block: auto;
 }
 
 .wide-container {

diff --git a/pages/radio-group/styles.scss b/pages/radio-group/styles.scss
@@ -4,7 +4,8 @@
 */
 
 .scrollableContainer {
-  overflow: scroll;
+  overflow-block: scroll;
+  overflow-inline: scroll;
   block-size: 70px;
 }
 

diff --git a/pages/table-fragments/styles.scss b/pages/table-fragments/styles.scss
@@ -7,7 +7,7 @@
 
 .custom-table {
   box-sizing: border-box;
-  overflow-x: auto;
+  overflow-inline: auto;
   inline-size: 100%;
 
   &.use-wrapper-paddings {
@@ -34,7 +34,8 @@
     padding-block: 8px;
     padding-inline: 16px;
 
-    overflow: hidden;
+    overflow-block: hidden;
+    overflow-inline: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 

diff --git a/pages/token-group/styles.scss b/pages/token-group/styles.scss
@@ -14,11 +14,13 @@
 
 .file-option-metadata {
   inline-size: 100%;
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
 }
 
 .file-option-name-label {
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
 }
diff --git a/pages/wizard/styles.scss b/pages/wizard/styles.scss
@@ -12,7 +12,8 @@
   display: inline-block;
   inline-size: 100%;
   block-size: 200px;
-  overflow: scroll;
+  overflow-block: scroll;
+  overflow-inline: scroll;
 }
 
 .content-item {

diff --git a/src/annotation-context/annotation/arrow.scss b/src/annotation-context/annotation/arrow.scss
@@ -32,7 +32,8 @@
   &-outer,
   &-inner {
     position: absolute;
-    overflow: hidden;
+    overflow-block: hidden;
+    overflow-inline: hidden;
     inline-size: $arrow-width;
     block-size: $arrow-height;
 

diff --git a/src/annotation-context/annotation/styles.scss b/src/annotation-context/annotation/styles.scss
@@ -21,7 +21,8 @@
 }
 
 .description {
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   margin-block-start: awsui.$space-xxs;
 }
 

diff --git a/src/app-layout/drawer/styles.scss b/src/app-layout/drawer/styles.scss
@@ -39,7 +39,8 @@ $drawer-z-index-mobile: 1001;
 }
 .drawer-content {
   position: fixed;
-  overflow: auto;
+  overflow-block: auto;
+  overflow-inline: auto;
   background-color: awsui.$color-background-layout-panel-content;
   .drawer-mobile > & {
     z-index: $drawer-z-index-mobile;

diff --git a/src/app-layout/mobile-toolbar/styles.scss b/src/app-layout/mobile-toolbar/styles.scss
@@ -8,7 +8,8 @@
 @use '../constants' as constants;
 
 .block-body-scroll {
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
 }
 
 .mobile-bar {

diff --git a/src/app-layout/styles.scss b/src/app-layout/styles.scss
@@ -52,7 +52,8 @@
   background-color: awsui.$color-background-layout-main;
 
   &-no-scroll {
-    overflow: hidden;
+    overflow-block: hidden;
+    overflow-inline: hidden;
   }
 }
 
@@ -62,7 +63,8 @@
   background-color: awsui.$color-background-layout-main;
   position: relative;
   &-scrollable {
-    overflow: auto;
+    overflow-block: auto;
+    overflow-inline: auto;
   }
 }
 

diff --git a/src/app-layout/visual-refresh/drawers.scss b/src/app-layout/visual-refresh/drawers.scss
@@ -55,8 +55,8 @@
   background-color: transparent;
   box-sizing: border-box;
   block-size: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
 
@@ -119,8 +119,8 @@
   flex-shrink: 0;
 
   block-size: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   pointer-events: auto;
@@ -133,7 +133,7 @@
     display: grid;
     grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
     grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
-    overflow-y: auto;
+    overflow-block: auto;
 
     > .drawer-close-button {
       grid-column: 3;

diff --git a/src/app-layout/visual-refresh/layout.scss b/src/app-layout/visual-refresh/layout.scss
@@ -299,7 +299,7 @@ notifications top margin and some additional vertical space for aesthetics.
   #{custom-props.$mainTemplateRows}: 1fr auto;
   #{custom-props.$offsetTop}: 0px;
   block-size: var(#{custom-props.$contentHeight});
-  overflow-y: scroll;
+  overflow-block: scroll;
 
   &.has-split-panel.split-panel-position-bottom {
     #{custom-props.$mainTemplateRows}: repeat(2, auto);
@@ -322,7 +322,8 @@ This CSS class is applied to the document body to prevent overflow scrolling
 when the navigation or tools drawers are open in responsive viewports.
 */
 .block-body-scroll {
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
 }
 
 // Prevent content that is visually hidden behind drawers and content area in mobile view from receiving focus

diff --git a/src/app-layout/visual-refresh/navigation.scss b/src/app-layout/visual-refresh/navigation.scss
@@ -91,8 +91,8 @@ nav.navigation {
   box-shadow: awsui.$shadow-panel;
   inset-block-end: 0;
   block-size: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow-inline: hidden;
+  overflow-block: auto;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   position: relative;

diff --git a/src/app-layout/visual-refresh/split-panel.scss b/src/app-layout/visual-refresh/split-panel.scss
@@ -24,7 +24,7 @@ section.split-panel-bottom {
   grid-column: 1 / 6;
   grid-row: 10;
   block-size: auto;
-  overflow-y: hidden;
+  overflow-block: hidden;
 
   /*
   The position sticky will work in conjunction with the align self: end; property.
@@ -94,7 +94,7 @@ section.split-panel-bottom {
 
 section.split-panel-side {
   block-size: 100%;
-  overflow-x: hidden;
+  overflow-inline: hidden;
   pointer-events: auto;
 
   &:not(.is-split-panel-open),

diff --git a/src/app-layout/visual-refresh/tools.scss b/src/app-layout/visual-refresh/tools.scss
@@ -64,8 +64,8 @@ viewport size and state of the Tools drawer.
   box-shadow: awsui.$shadow-panel;
   flex-shrink: 0;
   block-size: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow-block: auto;
+  overflow-inline: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
   pointer-events: auto;

diff --git a/src/breadcrumb-group/item/styles.scss b/src/breadcrumb-group/item/styles.scss
@@ -42,9 +42,11 @@
 }
 .compressed {
   min-inline-size: 0;
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   > .text {
-    overflow: hidden;
+    overflow-block: hidden;
+    overflow-inline: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: block;

diff --git a/src/button-dropdown/category-elements/styles.scss b/src/button-dropdown/category-elements/styles.scss
@@ -127,5 +127,5 @@
   margin-block-start: -1px;
   margin-block-end: 0;
   margin-inline: 0;
-  overflow-y: auto;
+  overflow-block: auto;
 }
diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
@@ -19,7 +19,8 @@
   display: block;
   // IE11 does not calculate the height correctly when in nested flex containers (@see https://github.com/philipwalton/flexbugs#flexbug-3)
   inline-size: awsui.$size-calendar-grid-width;
-  overflow: auto;
+  overflow-block: auto;
+  overflow-inline: auto;
 
   &-inner {
     margin-block: awsui.$space-xs;

diff --git a/src/cards/styles.scss b/src/cards/styles.scss
@@ -59,7 +59,8 @@
 
 .loading,
 .empty {
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   text-align: center;
   color: awsui.$color-text-empty;
   margin-block-end: awsui.$space-scaled-l;

diff --git a/src/code-editor/pane.scss b/src/code-editor/pane.scss
@@ -46,7 +46,8 @@
 
   &__list {
     flex: 1;
-    overflow: auto;
+    overflow-block: auto;
+    overflow-inline: auto;
     max-block-size: 100%;
     box-sizing: border-box;
     margin-inline-end: calc(#{awsui.$line-height-body-m} + 2 * #{awsui.$space-xs});

diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
@@ -26,7 +26,8 @@
   &:focus {
     @include styles.focus-highlight(3px);
     position: absolute;
-    overflow: visible;
+    overflow-block: visible;
+    overflow-inline: visible;
   }
 }
 

diff --git a/src/collection-preferences/visible-content.scss b/src/collection-preferences/visible-content.scss
@@ -43,7 +43,8 @@ $border: awsui.$border-divider-list-width solid awsui.$color-border-divider-defa
 }
 
 .visible-content-option-label {
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   text-overflow: ellipsis;
   padding-inline-end: awsui.$space-l;
   flex-grow: 1;

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -80,12 +80,14 @@
   inline-size: 100%;
   &-fit-height {
     block-size: 100%;
-    overflow: hidden;
+    overflow-block: hidden;
+    overflow-inline: hidden;
   }
 }
 
 .media {
-  overflow: hidden;
+  overflow-block: hidden;
+  overflow-inline: hidden;
   flex-shrink: 0;
 
   // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type
@@ -222,7 +224,8 @@ the default white background of the container component.
 .content {
   flex: 1;
   &-fit-height {
-    overflow: auto;
+    overflow-block: auto;
+    overflow-inline: auto;
   }
   &.with-paddings {
     padding-block: awsui.$space-scaled-l;