Revert "Add overflow to disabled rules."

This reverts commit 5a040a8.
cloudscape-design · Nov 7, 2023 · effa8b6 · effa8b6
1 parent aee5e0a
commit effa8b6
Show file tree

Hide file tree

Showing 51 changed files with 83 additions and 135 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -4,7 +4,7 @@
     "stylelint-prettier/recommended"
   ],
   "rules": {
-    "property-disallowed-list": ["margin", "border", "padding", "overflow", "overflow-x", "overflow-y"],
+    "property-disallowed-list": ["margin", "border", "padding"],
     "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,8 +22,7 @@
 
   &.scroll,
   &.auto {
-    overflow-block: scroll;
-    overflow-inline: scroll;
+    overflow: scroll;
     > .inner-container {
       position: relative;
       inset-inline-start: 300px;
@@ -38,8 +37,7 @@
   }
 
   &.hidden {
-    overflow-block: hidden;
-    overflow-inline: hidden;
+    overflow: hidden;
     > .inner-container {
       position: relative;
       inset-inline-start: 50px;
@@ -69,8 +67,7 @@
   border-inline: red 1px solid;
   inline-size: 600px;
   block-size: 600px;
-  overflow-block: hidden;
-  overflow-inline: hidden;
+  overflow: 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-block: scroll;
+  overflow-y: scroll;
   block-size: 100%;
 }
 

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

diff --git a/pages/radio-group/styles.scss b/pages/radio-group/styles.scss
@@ -4,8 +4,7 @@
 */
 
 .scrollableContainer {
-  overflow-block: scroll;
-  overflow-inline: scroll;
+  overflow: 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-inline: auto;
+  overflow-x: auto;
   inline-size: 100%;
 
   &.use-wrapper-paddings {
@@ -34,8 +34,7 @@
     padding-block: 8px;
     padding-inline: 16px;
 
-    overflow-block: hidden;
-    overflow-inline: hidden;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 

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

diff --git a/src/annotation-context/annotation/arrow.scss b/src/annotation-context/annotation/arrow.scss
@@ -32,8 +32,7 @@
   &-outer,
   &-inner {
     position: absolute;
-    overflow-block: hidden;
-    overflow-inline: hidden;
+    overflow: 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,8 +21,7 @@
 }
 
 .description {
-  overflow-block: hidden;
-  overflow-inline: hidden;
+  overflow: hidden;
   margin-block-start: awsui.$space-xxs;
 }
 

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

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

diff --git a/src/app-layout/styles.scss b/src/app-layout/styles.scss
@@ -52,8 +52,7 @@
   background-color: awsui.$color-background-layout-main;
 
   &-no-scroll {
-    overflow-block: hidden;
-    overflow-inline: hidden;
+    overflow: hidden;
   }
 }
 
@@ -63,8 +62,7 @@
   background-color: awsui.$color-background-layout-main;
   position: relative;
   &-scrollable {
-    overflow-block: auto;
-    overflow-inline: auto;
+    overflow: 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-block: hidden;
-  overflow-inline: hidden;
+  overflow-y: hidden;
+  overflow-x: 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-block: hidden;
-  overflow-inline: hidden;
+  overflow-y: hidden;
+  overflow-x: 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-block: auto;
+    overflow-y: 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-block: scroll;
+  overflow-y: scroll;
 
   &.has-split-panel.split-panel-position-bottom {
     #{custom-props.$mainTemplateRows}: repeat(2, auto);
@@ -322,8 +322,7 @@ 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-block: hidden;
-  overflow-inline: hidden;
+  overflow: 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-inline: hidden;
-  overflow-block: auto;
+  overflow-x: hidden;
+  overflow-y: 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-block: hidden;
+  overflow-y: 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-inline: hidden;
+  overflow-x: 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-block: auto;
-  overflow-inline: hidden;
+  overflow-y: auto;
+  overflow-x: 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,11 +42,9 @@
 }
 .compressed {
   min-inline-size: 0;
-  overflow-block: hidden;
-  overflow-inline: hidden;
+  overflow: hidden;
   > .text {
-    overflow-block: hidden;
-    overflow-inline: hidden;
+    overflow: 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-block: auto;
+  overflow-y: auto;
 }
diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
@@ -19,8 +19,7 @@
   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-block: auto;
-  overflow-inline: auto;
+  overflow: auto;
 
   &-inner {
     margin-block: awsui.$space-xs;

diff --git a/src/cards/styles.scss b/src/cards/styles.scss
@@ -59,8 +59,7 @@
 
 .loading,
 .empty {
-  overflow-block: hidden;
-  overflow-inline: hidden;
+  overflow: 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,8 +46,7 @@
 
   &__list {
     flex: 1;
-    overflow-block: auto;
-    overflow-inline: auto;
+    overflow: 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,8 +26,7 @@
   &:focus {
     @include styles.focus-highlight(3px);
     position: absolute;
-    overflow-block: visible;
-    overflow-inline: visible;
+    overflow: visible;
   }
 }
 

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