From d6c1bcc916e460f381327fb52bd65ed3152767ae Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 15 Apr 2019 14:22:38 -0400
Subject: [PATCH] Better overflow shadows and some mobile modal fixes  (#1829)

* Fix modal responsive and overflow

- Overflow shadow now uses the new overlay method (requires an extra wrapper)
- Confirmation modals no longer take up the entire mobile screen

* Update Flyout to use the new overflow shadow

(Required extra wrapping div)

* Updated SASS docs

* Allow confirm modal confirm button to be disabled
---
 CHANGELOG.md                                  | 11 ++++
 src-docs/src/views/guidelines/index.scss      | 26 ++-------
 src-docs/src/views/guidelines/sass.js         | 28 +++++----
 src-docs/src/views/modal/overflow_test.js     |  2 +-
 .../__snapshots__/flyout_body.test.tsx.snap   |  6 +-
 src/components/flyout/_flyout_body.scss       | 13 +++--
 src/components/flyout/_flyout_footer.scss     |  2 -
 src/components/flyout/_flyout_header.scss     |  2 -
 src/components/flyout/flyout_body.tsx         |  2 +-
 .../__snapshots__/confirm_modal.test.js.snap  | 14 +++--
 .../__snapshots__/modal_body.test.tsx.snap    |  6 +-
 src/components/modal/_modal.scss              | 33 ++++++-----
 src/components/modal/confirm_modal.js         |  3 +
 src/components/modal/confirm_modal.test.js    | 16 +++++
 src/components/modal/index.d.ts               |  1 +
 src/components/modal/modal_body.tsx           |  2 +-
 src/global_styling/mixins/_shadow.scss        | 58 ++++++++++++-------
 17 files changed, 140 insertions(+), 85 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b7f34e37c0c..9cff893fdfb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 - Converted `EuiTitle` to TS ([#1810](https://github.com/elastic/eui/pull/1810))
 - Added `adjustDateOnChange` prop to date pickers, enabling month and year changes to trigger `onChange` ([#1817](https://github.com/elastic/eui/pull/1817))
+- Updated the overflow shadows for `EuiModal` and `EuiFlyout` ([#1829](https://github.com/elastic/eui/pull/1829))
+- Added `confirmButtonDisabled` prop to `EuiConfirmModal` ([#1829](https://github.com/elastic/eui/pull/1829))
+
+**Bug fixes**
+
+- Fixed mobile layout for `EuiConfirmModal` ([#1829](https://github.com/elastic/eui/pull/1829))
+
+**Deprecations**
+
+- Replaced the following SASS mixins `euiOverflowShadowTop`, `euiOverflowShadowBottom` with `euiOverflowShadow`. ([#1829](https://github.com/elastic/eui/pull/1829))
+
 
 ## [`9.9.1`](https://github.com/elastic/eui/tree/v9.9.1)
 
diff --git a/src-docs/src/views/guidelines/index.scss b/src-docs/src/views/guidelines/index.scss
index 385d4698b29..b09bac2e1c3 100644
--- a/src-docs/src/views/guidelines/index.scss
+++ b/src-docs/src/views/guidelines/index.scss
@@ -157,33 +157,19 @@
 .guideSass__shadow--euiBottomShadowFlat { @include euiBottomShadowFlat; }
 .guideSass__shadow--euiBottomShadow { @include euiBottomShadow; }
 .guideSass__shadow--euiBottomShadowLarge { @include euiBottomShadowLarge; }
-.guideSass__shadow--euiOverflowShadowTop { @include euiOverflowShadowTop; }
-.guideSass__shadow--euiOverflowShadowBottom { @include euiOverflowShadowBottom; }
 
 .guideSass__overflowShadows {
+  @include euiOverflowShadow;
+  overflow-y: hidden;
   margin-top: $euiSize;
-  border: $euiBorderThin;
-  position: relative;
+  border: 1px solid $euiColorLightestShade;
   height: 200px;
 
   .guideSass__overflowShadowText {
-    height: 100px;
-    padding: $euiSize;
+    @include euiScrollBar;
+    height: 100%;
     overflow-y: auto;
-    position: absolute;
-    top: 50px;
-  }
-
-  .guideSass__shadow {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-  }
-
-  .guideSass__shadow + .guideSass__shadow {
-    bottom: 0;
-    top: auto;
+    padding: $euiSize;
   }
 }
 
diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
index 3233094ef7b..602767b8049 100644
--- a/src-docs/src/views/guidelines/sass.js
+++ b/src-docs/src/views/guidelines/sass.js
@@ -110,11 +110,6 @@ const euiAnimationTimings = [
   'euiAnimSlightResistance',
 ];
 
-const euiOverFlowShadows = [
-  'euiOverflowShadowBottom',
-  'euiOverflowShadowTop',
-];
-
 const euiBreakPoints = Object.getOwnPropertyNames(breakpoints.euiBreakpoints);
 
 function renderPaletteColor(palette, color) {
@@ -693,7 +688,7 @@ export const SassGuidelines = ({
           <EuiText>
             <p>
               Primarily used in modals and flyouts, the overflow shadows add a white
-              glow to subtly hide the content they float above.
+              glow to subtly indicate there is more content below/above.
             </p>
           </EuiText>
 
@@ -701,9 +696,23 @@ export const SassGuidelines = ({
 
           <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>.
+              </p>
+              <p><b>Example:</b></p>
+              <EuiCodeBlock language="sass" isCopyable paddingSize="s">
+                {`.bodyContent {
+  @include euiOverflowShadow;
+  height: 200px;
+  overflow: hidden;
+
+  .bodyContent__overflow {
+    height: 100%;
+    overflow-y: auto;
+  }
+}`}
+              </EuiCodeBlock>
               <p>
-                Minima reprehenderit aperiam at in ea. Veniam nihil quod tempore.
-                Dolores sit quo expedita voluptate libero.
                 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.
@@ -718,9 +727,6 @@ export const SassGuidelines = ({
                 et nisi. Doloribus ut corrupti voluptates qui exercitationem dolores.
               </p>
             </EuiText>
-            {euiOverFlowShadows.map(function (shadow, index) {
-              return renderShadow(shadow, index);
-            })}
           </div>
 
           <EuiSpacer />
diff --git a/src-docs/src/views/modal/overflow_test.js b/src-docs/src/views/modal/overflow_test.js
index 4853aa72d92..1ad3df8299a 100644
--- a/src-docs/src/views/modal/overflow_test.js
+++ b/src-docs/src/views/modal/overflow_test.js
@@ -46,7 +46,7 @@ export class OverflowTest extends Component {
           >
             <EuiModalHeader>
               <EuiModalHeaderTitle >
-                Form in a modal
+                Overflow test
               </EuiModalHeaderTitle>
             </EuiModalHeader>
 
diff --git a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
index 4d1ee744c66..5fefb3034d3 100644
--- a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
@@ -5,5 +5,9 @@ exports[`EuiFlyoutBody is rendered 1`] = `
   aria-label="aria-label"
   class="euiFlyoutBody testClass1 testClass2"
   data-test-subj="test subject string"
-/>
+>
+  <div
+    class="euiFlyoutBody__overflow"
+  />
+</div>
 `;
diff --git a/src/components/flyout/_flyout_body.scss b/src/components/flyout/_flyout_body.scss
index ead961b8bb2..032211baa03 100644
--- a/src/components/flyout/_flyout_body.scss
+++ b/src/components/flyout/_flyout_body.scss
@@ -1,7 +1,12 @@
 .euiFlyoutBody {
-  @include euiScrollBar;
-
+  @include euiOverflowShadow;
   flex-grow: 1;
-  overflow-y: auto;
-  padding: $euiSizeL;
+  overflow-y: hidden;
+
+  .euiFlyoutBody__overflow {
+    @include euiScrollBar;
+    height: 100%;
+    overflow-y: auto;
+    padding: $euiSizeL;
+  }
 }
diff --git a/src/components/flyout/_flyout_footer.scss b/src/components/flyout/_flyout_footer.scss
index d8664c6ff91..1578b1f4a40 100644
--- a/src/components/flyout/_flyout_footer.scss
+++ b/src/components/flyout/_flyout_footer.scss
@@ -1,6 +1,4 @@
 .euiFlyoutFooter {
-  @include euiOverflowShadowTop;
-
   background: $euiColorLightestShade;
   flex-grow: 0;
   padding: $euiSize $euiSizeL;
diff --git a/src/components/flyout/_flyout_header.scss b/src/components/flyout/_flyout_header.scss
index c2097e1661f..823190405da 100644
--- a/src/components/flyout/_flyout_header.scss
+++ b/src/components/flyout/_flyout_header.scss
@@ -1,6 +1,4 @@
 .euiFlyoutHeader {
-  @include euiOverflowShadowBottom;
-
   flex-grow: 0;
   padding: $euiSizeL $euiSizeXXL 0 $euiSizeL;
 }
diff --git a/src/components/flyout/flyout_body.tsx b/src/components/flyout/flyout_body.tsx
index d5592e3fda7..02b05b0050f 100644
--- a/src/components/flyout/flyout_body.tsx
+++ b/src/components/flyout/flyout_body.tsx
@@ -15,7 +15,7 @@ export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
 
   return (
     <div className={classes} {...rest}>
-      {children}
+      <div className="euiFlyoutBody__overflow">{children}</div>
     </div>
   );
 };
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
index 5395b7b449c..2eaee2eff9b 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.js.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
@@ -57,12 +57,16 @@ Array [
           class="euiModalBody"
         >
           <div
-            class="euiText euiText--medium"
-            data-test-subj="confirmModalBodyText"
+            class="euiModalBody__overflow"
           >
-            <p>
-              This is a confirmation modal example
-            </p>
+            <div
+              class="euiText euiText--medium"
+              data-test-subj="confirmModalBodyText"
+            >
+              <p>
+                This is a confirmation modal example
+              </p>
+            </div>
           </div>
         </div>
         <div
diff --git a/src/components/modal/__snapshots__/modal_body.test.tsx.snap b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
index 29d5c00d0a9..371fd024ef8 100644
--- a/src/components/modal/__snapshots__/modal_body.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
@@ -6,6 +6,10 @@ exports[`renders EuiModalBody 1`] = `
   class="euiModalBody testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  children
+  <div
+    class="euiModalBody__overflow"
+  >
+    children
+  </div>
 </div>
 `;
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index 3036a9b4535..4c0bc0c1d8d 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -35,8 +35,6 @@
 }
 
 .euiModalHeader {
-  @include euiOverflowShadowBottom;
-
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -50,16 +48,19 @@
 }
 
 .euiModalBody {
-  @include euiScrollBar;
-
-  padding: $euiSizeL;
+  @include euiOverflowShadow;
   flex-grow: 1;
-  overflow-y: auto;
+  overflow: hidden;
+
+  .euiModalBody__overflow {
+    @include euiScrollBar;
+    height: 100%;
+    overflow-y: auto;
+    padding: $euiSizeL;
+  }
 }
 
 .euiModalFooter {
-  @include euiOverflowShadowTop;
-
   display: flex;
   justify-content: flex-end;
   padding: $euiSizeL;
@@ -73,7 +74,7 @@
 
 // When both a header and body exist, drop the top padding so the overflow on
 // the body is spaced correctly.
-.euiModalHeader + .euiModalBody {
+.euiModalHeader + .euiModalBody .euiModalBody__overflow {
   padding-top: $euiSizeM;
 }
 
@@ -104,16 +105,21 @@
   .euiModal {
     // sass-lint:disable-block no-important
     position: fixed;
-    width: calc(100vw + 2px) !important;
+    width: 100vw !important;
     max-width: none !important;
+    min-width: 0 !important;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;
     border-radius: 0;
-    box-shadow: none;
     border: none;
 
+    &.euiModal--confirmation {
+      @include euiBottomShadowLarge($euiShadowColorLarge, .1, false, true);
+      top: auto;
+    }
+
     .euiModal__flex { /* 1 */
       max-height: 100vh;
     }
@@ -138,11 +144,6 @@
     }
   }
 
-  .euiModal__closeIcon {
-    position: fixed;
-    top: $euiSizeL + $euiSizeXS;
-  }
-
   .euiModalBody {
     width: 100vw;
   }
diff --git a/src/components/modal/confirm_modal.js b/src/components/modal/confirm_modal.js
index 17ff42d15d7..f06d8ec7981 100644
--- a/src/components/modal/confirm_modal.js
+++ b/src/components/modal/confirm_modal.js
@@ -53,6 +53,7 @@ export class EuiConfirmModal extends Component {
       onConfirm,
       cancelButtonText,
       confirmButtonText,
+      confirmButtonDisabled,
       className,
       buttonColor,
       defaultFocusedButton, // eslint-disable-line no-unused-vars
@@ -112,6 +113,7 @@ export class EuiConfirmModal extends Component {
             fill
             buttonRef={this.confirmRef}
             color={buttonColor}
+            isDisabled={confirmButtonDisabled}
           >
             {confirmButtonText}
           </EuiButton>
@@ -128,6 +130,7 @@ EuiConfirmModal.propTypes = {
   confirmButtonText: PropTypes.node,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func,
+  confirmButtonDisabled: PropTypes.bool,
   className: PropTypes.string,
   defaultFocusedButton: PropTypes.oneOf(CONFIRM_MODAL_BUTTONS),
   buttonColor: PropTypes.string,
diff --git a/src/components/modal/confirm_modal.test.js b/src/components/modal/confirm_modal.test.js
index 6afc2589042..732b4d3f4fd 100644
--- a/src/components/modal/confirm_modal.test.js
+++ b/src/components/modal/confirm_modal.test.js
@@ -62,6 +62,22 @@ test('onConfirm', () => {
   sinon.assert.notCalled(onCancel);
 });
 
+test('onConfirm can be disabled', () => {
+  const component = mount(
+    <EuiConfirmModal
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      cancelButtonText="Cancel Button Text"
+      confirmButtonText="Confirm Button Text"
+      confirmButtonDisabled={true}
+    />
+  );
+
+  findTestSubject(component, 'confirmModalConfirmButton').simulate('click');
+  sinon.assert.notCalled(onConfirm);
+  sinon.assert.notCalled(onCancel);
+});
+
 describe('onCancel', () => {
   test('triggerd by click', () => {
     const component = mount(
diff --git a/src/components/modal/index.d.ts b/src/components/modal/index.d.ts
index 9f6af7248df..2fa5b92e45f 100644
--- a/src/components/modal/index.d.ts
+++ b/src/components/modal/index.d.ts
@@ -51,6 +51,7 @@ declare module '@elastic/eui' {
     buttonColor?: ButtonColor;
     cancelButtonText?: ReactNode;
     confirmButtonText?: ReactNode;
+    confirmButtonDisabled?: boolean;
     defaultFocusedButton?: 'confirm' | 'cancel';
     title?: ReactNode;
     onCancel?: () => void;
diff --git a/src/components/modal/modal_body.tsx b/src/components/modal/modal_body.tsx
index a2036fe080e..40b1977150e 100644
--- a/src/components/modal/modal_body.tsx
+++ b/src/components/modal/modal_body.tsx
@@ -14,7 +14,7 @@ export const EuiModalBody: EuiModalBodyProps = ({
   const classes = classnames('euiModalBody', className);
   return (
     <div className={classes} {...rest}>
-      {children}
+      <div className="euiModalBody__overflow">{children}</div>
     </div>
   );
 };
diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
index 335a087fef2..36d801caf00 100644
--- a/src/global_styling/mixins/_shadow.scss
+++ b/src/global_styling/mixins/_shadow.scss
@@ -46,14 +46,27 @@
   }
 }
 
-@mixin euiBottomShadowLarge($color: $euiShadowColorLarge, $opacity: .1, $adjustBorders: false) {
-  box-shadow:
-    0 40px 64px 0 rgba($color, $opacity),
-    0 24px 32px 0 rgba($color, $opacity),
-    0 16px 16px 0 rgba($color, $opacity),
-    0 8px 8px 0 rgba($color, $opacity),
-    0 4px 4px 0 rgba($color, $opacity),
-    0 2px 2px 0 rgba($color, $opacity);
+@mixin euiBottomShadowLarge(
+  $color: $euiShadowColorLarge,
+  $opacity: .1,
+  $adjustBorders: false,
+  $reverse: false
+) {
+  @if ($reverse) {
+    box-shadow:
+      0 -40px 64px 0 rgba($color, $opacity),
+      0 -24px 32px 0 rgba($color, $opacity),
+      0 -16px 16px 0 rgba($color, $opacity),
+      0 -8px 8px 0 rgba($color, $opacity);
+  } @else {
+    box-shadow:
+      0 40px 64px 0 rgba($color, $opacity),
+      0 24px 32px 0 rgba($color, $opacity),
+      0 16px 16px 0 rgba($color, $opacity),
+      0 8px 8px 0 rgba($color, $opacity),
+      0 4px 4px 0 rgba($color, $opacity),
+      0 2px 2px 0 rgba($color, $opacity);
+  }
 
   // Never adjust borders if the border color is already on the dark side (dark theme)
   @if ($adjustBorders and not (lightness($euiBorderColor) < 50)) {
@@ -73,18 +86,6 @@
   @include euiSlightShadowHover($color, $opacity);
 }
 
-// Overflow shadows are useful when a middle element scrolls independently from
-// any top and/or bottom elements
-@mixin euiOverflowShadowTop {
-  box-shadow: 0 ($euiSize * -1) $euiSize (-$euiSize / 2) $euiColorEmptyShade;
-  z-index: 2;
-}
-
-@mixin euiOverflowShadowBottom {
-  box-shadow: 0 $euiSize $euiSize (-$euiSize / 2) $euiColorEmptyShade;
-  z-index: 2;
-}
-
 @mixin euiOverflowShadow($color: $euiColorEmptyShade) {
   // Only allow the shadow if we can properly remove pointer events
   // from it since it will overlay the contents
@@ -109,3 +110,20 @@
     }
   }
 }
+
+//** DEPRECATED **//
+//** DEPRECATED **//
+//** DEPRECATED **//
+//** DEPRECATED **//
+
+@mixin euiOverflowShadowTop {
+  box-shadow: 0 ($euiSize * -1) $euiSize (-$euiSize / 2) $euiColorEmptyShade;
+  z-index: 2;
+  @warn '`euiOverflowShadowTop()` is deprecated. Please use `euiOverflowShadow()` on a wrapping element instead.';
+}
+
+@mixin euiOverflowShadowBottom {
+  box-shadow: 0 $euiSize $euiSize (-$euiSize / 2) $euiColorEmptyShade;
+  z-index: 2;
+  @warn '`euiOverflowShadowBottom()` is deprecated. Please use `euiOverflowShadow()` on a wrapping element instead.';
+}