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
elastic · Apr 15, 2019 · d6c1bcc · d6c1bcc
1 parent 768d4bf
commit d6c1bcc
Show file tree

Hide file tree

Showing 17 changed files with 140 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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 />

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 };