Use mask-image for overflow shadows (#2088)

* Fix modal padding * Using mask for overflow shadow who cares about IE anyhow… * Responsive modals too
elastic · Jul 8, 2019 · a61339b · a61339b
1 parent 9318b07
commit a61339b
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 78 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,8 @@
 - Added a `column` direction option to `EuiFlexGrid` ([#2073](https://github.com/elastic/eui/pull/2073))
 - Updated `EuiSuperDatePicker`'s  commonly used date/times to display as columns. ([#2073](https://github.com/elastic/eui/pull/2073))
 - Added TypeScript definition for `EuiFormControlLayout` ([#2086](https://github.com/elastic/eui/pull/2086))
+- Changed SASS mixin `euiOverflowShadow()` to use `mask-image` instead of `box-shadow` ([#2088](https://github.com/elastic/eui/pull/2088))
+- Added SASS mixin and CSS utility `euiYScrollWithShadows` ([#2088](https://github.com/elastic/eui/pull/2088))
 
 **Bug fixes**
 
@@ -11,6 +13,7 @@
 - Fixed responsive display of inline `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
 - Removed time from default `dateFormat` of `EuiDatePicker` ([#1820](https://github.com/elastic/eui/pull/1820))
 - Fixed `EuiPopover` from catching and preventing propagation of keydown events when closed ([#2089](https://github.com/elastic/eui/pull/2089))
+- Fixed padding sizes between `EuiModal` header, body, and footer ([#2088](https://github.com/elastic/eui/pull/2088))
 
 ## [`12.2.0`](https://github.com/elastic/eui/tree/v12.2.0)
 

diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss
@@ -159,16 +159,13 @@
 .guideSass__shadow--euiBottomShadowLarge { @include euiBottomShadowLarge; }
 
 .guideSass__overflowShadows {
-  @include euiOverflowShadow;
   overflow-y: hidden;
   margin-top: $euiSize;
   border: 1px solid $euiColorLightestShade;
   height: 200px;
 
   .guideSass__overflowShadowText {
-    @include euiScrollBar;
-    height: 100%;
-    overflow-y: auto;
+    @include euiYScrollWithShadows;
     padding: $euiSize;
   }
 }

diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
@@ -745,8 +745,9 @@ export const SassGuidelines = ({ selectedTheme }) => {
 
           <EuiText>
             <p>
-              Primarily used in modals and flyouts, the overflow shadows add a
-              white glow to subtly indicate there is more content below/above.
+              Primarily used in modals and flyouts, the overflow shadow masks
+              the top and bottom edges to indicate there is more content
+              below/above.
             </p>
           </EuiText>
 
@@ -755,22 +756,24 @@ export const SassGuidelines = ({ selectedTheme }) => {
           <div className="guideSass__overflowShadows">
             <EuiText className="guideSass__overflowShadowText" size="s">
               <p>
-                It requires a wrapper with <EuiCode>overflow: hidden</EuiCode>{' '}
-                and the content to have{' '}
-                <EuiCode>overflow-y: auto; height: 100%;</EuiCode>.
+                It requires a wrapping element to control the height with{' '}
+                <EuiCode>overflow-y: hidden;</EuiCode> and the content to
+                <EuiCode>@include euiYScrollWithShadows;</EuiCode> or use the{' '}
+                <Link to="/utilities/css-utility-classes">
+                  CSS utility class
+                </Link>{' '}
+                <EuiCode>.euiYScrollWithShadows</EuiCode>.
               </p>
               <p>
                 <b>Example:</b>
               </p>
               <EuiCodeBlock language="sass" isCopyable paddingSize="s">
                 {`.bodyContent {
-  @include euiOverflowShadow;
   height: 200px;
-  overflow: hidden;
+  overflow-y: hidden;
 
   .bodyContent__overflow {
-    height: 100%;
-    overflow-y: auto;
+    @include euiYScrollWithShadows;
   }
 }`}
               </EuiCodeBlock>

diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js
@@ -6,6 +6,7 @@ import {
   EuiSpacer,
   EuiIcon,
   EuiTextColor,
+  EuiCodeBlock,
 } from '../../../../src/components';
 
 const longLink =
@@ -190,6 +191,43 @@ export default () => (
       .eui-fullWidth (similar to eui-displayBlock but adds 100% width)
     </EuiCode>
 
+    <EuiSpacer />
+
+    <h4>Overflows</h4>
+
+    <div className="guideSass__overflowShadows">
+      <EuiText className="guideSass__overflowShadowText" size="s">
+        <p>
+          It requires a wrapping element to control the height with{' '}
+          <EuiCode>overflow-y: hidden;</EuiCode> and the content to use the CSS
+          utility class <EuiCode>.euiYScrollWithShadows</EuiCode>.
+        </p>
+        <p>
+          <b>Example:</b>
+        </p>
+        <EuiCodeBlock language="html" isCopyable paddingSize="s">
+          {`<BodyContent style={{ height: 200, overflowY: 'hidden' }}>
+  <BodyScroll className="euiYScrollWithShadows" />
+</BodyContent>`}
+        </EuiCodeBlock>
+        <p>
+          Consequuntur atque nulla atque nemo tenetur numquam. Assumenda
+          aspernatur qui aut sit. Aliquam doloribus iure sint id. Possimus dolor
+          qui soluta cum id tempore ea illum. Facilis voluptatem aut aut ut
+          similique ut. Sed repellendus commodi iure officiis exercitationem
+          praesentium dolor. Ratione non ut nulla accusamus et. Optio laboriosam
+          id incidunt. Ipsam voluptate ab quia necessitatibus sequi earum
+          voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero
+          tempore sit placeat maxime laudantium. Mollitia tempore minus qui
+          autem modi adipisci ad. Iste reprehenderit accusamus voluptatem velit.
+          Quidem delectus eos veritatis et vitae et nisi. Doloribus ut corrupti
+          voluptates qui exercitationem dolores.
+        </p>
+      </EuiText>
+    </div>
+
+    <EuiSpacer />
+
     <h4>Responsive</h4>
 
     <EuiCode className="eui-hideFor--xs">.eui-hideFor--xs</EuiCode>

diff --git a/src/components/flyout/_flyout_body.scss b/src/components/flyout/_flyout_body.scss
@@ -1,13 +1,10 @@
 .euiFlyoutBody {
-  @include euiOverflowShadow;
   flex-grow: 1;
   overflow-y: hidden;
   height: 100%;
 
   .euiFlyoutBody__overflow {
-    @include euiScrollBar;
-    height: 100%;
-    overflow-y: auto;
+    @include euiYScrollWithShadows;
     padding: $euiSizeL;
   }
 }
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -38,7 +38,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $euiSizeL $euiSizeXXL $euiSizeM $euiSizeL;
+  padding: $euiSizeL $euiSizeXXL $euiSize $euiSizeL;
   flex-grow: 0;
   flex-shrink: 0;
 }
@@ -48,25 +48,22 @@
 }
 
 .euiModalBody {
-  @include euiOverflowShadow;
   flex-grow: 1;
   overflow: hidden;
   // The below fixes scroll on Chrome and Safari
   display: flex;
   flex-direction: column;
 
   .euiModalBody__overflow {
-    @include euiScrollBar;
-    height: 100%;
-    overflow-y: auto;
-    padding: $euiSizeL;
+    @include euiYScrollWithShadows;
+    padding: $euiSizeS $euiSizeL;
   }
 }
 
 .euiModalFooter {
   display: flex;
   justify-content: flex-end;
-  padding: $euiSizeL;
+  padding: $euiSize $euiSizeL $euiSizeL;
   flex-grow: 0;
   flex-shrink: 0; // ensure the height of the footer is based off it's contents and doesn't squish
 
@@ -75,12 +72,17 @@
   }
 }
 
-// When both a header and body exist, drop the top padding so the overflow on
-// the body is spaced correctly.
-.euiModalHeader + .euiModalBody .euiModalBody__overflow {
-  padding-top: $euiSizeM;
+// If a body doesn't exist, remove some extra padding from footer
+.euiModalHeader + .euiModalFooter {
+  padding-top: $euiSizeS;
 }
 
+// If a footer doesn't exist (body is the last element) add padding to the bottom
+.euiModalBody:last-of-type .euiModalBody__overflow {
+  padding-bottom: $euiSizeL;
+}
+
+
 // The actual size of the X button in pixels is a bit fuzzy because of all the
 // button padding so there is some pixel pushing here.
 .euiModal__closeIcon {
@@ -134,7 +136,7 @@
 
   .euiModalFooter {
     background: $euiColorLightestShade;
-    padding: $euiSizeM $euiSizeL;
+    padding: $euiSizeM $euiSizeL !important; // sass-lint:disable-line no-important
     width: 100vw;
     justify-content: stretch;
 
@@ -149,5 +151,9 @@
 
   .euiModalBody {
     width: 100vw;
+
+    .euiModalBody__overflow {
+      padding-bottom: $euiSizeL;
+    }
   }
 }
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiSelectableListItem is rendered 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -32,7 +32,7 @@ exports[`EuiSelectableListItem props activeOptionIndex 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -52,7 +52,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -72,7 +72,7 @@ exports[`EuiSelectableListItem props bordered 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -92,7 +92,7 @@ exports[`EuiSelectableListItem props height is forced 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:200px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -104,15 +104,15 @@ exports[`EuiSelectableListItem props height is forced 1`] = `
 
 exports[`EuiSelectableListItem props height is full 1`] = `
 <div
-  class="euiSelectableList euiSelectableList-fullHeight euiSelectableList-overflowing"
+  class="euiSelectableList euiSelectableList-fullHeight"
 >
   <div
     style="overflow:visible;height:0;width:0"
   >
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:0;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:auto"
@@ -132,7 +132,7 @@ exports[`EuiSelectableListItem props renderOption 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -152,7 +152,7 @@ exports[`EuiSelectableListItem props rowHeight 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:120px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -172,7 +172,7 @@ exports[`EuiSelectableListItem props searchValue 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -192,7 +192,7 @@ exports[`EuiSelectableListItem props searchValue 2`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -212,7 +212,7 @@ exports[`EuiSelectableListItem props showIcons can be turned off 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -232,7 +232,7 @@ exports[`EuiSelectableListItem props singleSelection can be forced so that at le
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -252,7 +252,7 @@ exports[`EuiSelectableListItem props singleSelection can be turned on 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:192px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"
@@ -272,7 +272,7 @@ exports[`EuiSelectableListItem props visibleOptions 1`] = `
     <div
       aria-label="grid"
       aria-readonly="true"
-      class="ReactVirtualized__Grid ReactVirtualized__List"
+      class="ReactVirtualized__Grid ReactVirtualized__List euiSelectableList__list"
       id="htmlid_listbox"
       role="listbox"
       style="box-sizing:border-box;direction:ltr;height:128px;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:hidden"

diff --git a/src/components/selectable/selectable_list/_selectable_list.scss b/src/components/selectable/selectable_list/_selectable_list.scss
@@ -1,9 +1,3 @@
-.euiSelectableList {
-  .ReactVirtualized__List {
-    @include euiScrollBar;
-  }
-}
-
 // Expand height of list via flex box
 .euiSelectableList-fullHeight {
   flex-grow: 1;
@@ -15,8 +9,9 @@
   border-radius: $euiBorderRadius;
 }
 
-.euiSelectableList-overflowing {
+.euiSelectableList__list {
   @include euiOverflowShadow;
+  @include euiScrollBar;
 }
 
 .euiSelectableList__groupLabel {