Better overflow shadows and some mobile modal fixes

CHANGELOG.md

@@ -1,6 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Converted `EuiTitle` to TS ([#1810](https://github.com/elastic/eui/pull/1810))
+- 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))
 
 ## [`9.9.1`](https://github.com/elastic/eui/tree/v9.9.1)
 

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;
   }
 }
 

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,17 +688,31 @@ 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>
 
           <EuiSpacer />
 
           <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 />

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>
 

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>
 `;

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;
+  }
 }

src/components/flyout/_flyout_footer.scss

@@ -1,6 +1,4 @@
 .euiFlyoutFooter {
-  @include euiOverflowShadowTop;
-
   background: $euiColorLightestShade;
   flex-grow: 0;
   padding: $euiSize $euiSizeL;

src/components/flyout/_flyout_header.scss

@@ -1,6 +1,4 @@
 .euiFlyoutHeader {
-  @include euiOverflowShadowBottom;
-
   flex-grow: 0;
   padding: $euiSizeL $euiSizeXXL 0 $euiSizeL;
 }

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>
   );
 };

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

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>
 `;

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: calc(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;
   }

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,

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(

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;

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>
   );
 };