elastic · snide · Mar 15, 2018 · Mar 14, 2018 · Mar 14, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 **Bug fixes**
 
+- `EuiModal` is now responsive on mobile screens ([#512](https://github.com/elastic/eui/pull/512))
 - `EuiFlexGrid` now collapses down in mobile layouts properly. ([#515](https://github.com/elastic/eui/pull/515))
 - Made `EuiCard` proptypes more permission by changing strings to nodes. ([#515](https://github.com/elastic/eui/pull/515))
 - Fix `reponsive={false}` prop not working when flex groups were nested. ([#494](https://github.com/elastic/eui/pull/494))

diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
@@ -21,6 +21,10 @@ import { ConfirmModal } from './confirm_modal';
 const confirmModalSource = require('!!raw-loader!./confirm_modal');
 const confirmModalHtml = renderToHtml(ConfirmModal);
 
+import { OverflowTest } from './overflow_test';
+const overflowTestSource = require('!!raw-loader!./overflow_test');
+const overflowTestHtml = renderToHtml(OverflowTest);
+
 export const ModalExample = {
   title: 'Modal',
   sections: [{
@@ -56,5 +60,21 @@ export const ModalExample = {
     ),
     props: { EuiConfirmModal },
     demo: <ConfirmModal />,
+    }, {
+      title: 'Overflow overflow test',
+      source: [{
+        type: GuideSectionTypes.JS,
+        code: overflowTestSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: overflowTestHtml,
+      }],
+      text: (
+        <p>
+          This demo is to test long overflowing body content.
+        </p>
+      ),
+      props: { EuiConfirmModal },
+      demo: <OverflowTest />,
   }],
 };
diff --git a/src-docs/src/views/modal/overflow_test.js b/src-docs/src/views/modal/overflow_test.js
@@ -0,0 +1,155 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiRange,
+  EuiSwitch,
+  EuiText,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export class OverflowTest extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isModalVisible: false,
+      isSwitchChecked: true,
+    };
+
+    this.closeModal = this.closeModal.bind(this);
+    this.showModal = this.showModal.bind(this);
+  }
+
+  onSwitchChange = () => {
+    this.setState({
+      isSwitchChecked: !this.state.isSwitchChecked,
+    });
+  }
+
+  closeModal() {
+    this.setState({ isModalVisible: false });
+  }
+
+  showModal() {
+    this.setState({ isModalVisible: true });
+  }
+
+  render() {
+
+    let modal;
+
+    if (this.state.isModalVisible) {
+      modal = (
+        <EuiOverlayMask>
+          <EuiModal
+            onClose={this.closeModal}
+            style={{ width: '800px' }}
+          >
+            <EuiModalHeader>
+              <EuiModalHeaderTitle >
+                Form in a modal
+              </EuiModalHeaderTitle>
+            </EuiModalHeader>
+
+            <EuiModalBody>
+              <EuiText>
+                <p>
+                  KING. Whats he that wishes so?
+                  My cousin, Westmorland? No, my fair cousin;
+                  If we are mark'd to die, we are enow
+                  To do our country loss; and if to live,
+                  The fewer men, the greater share of honour.
+                  God's will! I pray thee, wish not one man more.
+                  By Jove, I am not covetous for gold,
+                  Nor care I who doth feed upon my cost;
+                  It yearns me not if men my garments wear;
+                  Such outward things dwell not in my desires.
+                  But if it be a sin to covet honour,
+                  I am the most offending soul alive.
+                  No, faith, my coz, wish not a man from England.
+                  God's peace! I would not lose so great an honour
+                  As one man more methinks would share from me
+                  For the best hope I have. O, do not wish one more!
+                  Rather proclaim it, Westmorland, through my host,
+                  That he which hath no stomach to this fight,
+                  Let him depart; his passport shall be made,
+                  And crowns for convoy put into his purse;
+                  We would not die in that man's company
+                  That fears his fellowship to die with us.
+                  This day is call'd the feast of Crispian.
+                  He that outlives this day, and comes safe home,
+                  Will stand a tip-toe when this day is nam'd,
+                  And rouse him at the name of Crispian.
+                  He that shall live this day, and see old age,
+                  Will yearly on the vigil feast his neighbours,
+                  And say "To-morrow is Saint Crispian."
+                  Then will he strip his sleeve and show his scars,
+                  And say "These wounds I had on Crispin's day."
+                  Old men forget; yet all shall be forgot,
+                  But he'll remember, with advantages,
+                  What feats he did that day. Then shall our names,
+                  Familiar in his mouth as household words—
+                  Harry the King, Bedford and Exeter,
+                  Warwick and Talbot, Salisbury and Gloucester—
+                  Be in their flowing cups freshly rememb'red.
+                  This story shall the good man teach his son;
+                  And Crispin Crispian shall ne'er go by,
+                  From this day to the ending of the world,
+                  But we in it shall be rememberèd—
+                  We few, we happy few, we band of brothers;
+                  For he to-day that sheds his blood with me
+                  Shall be my brother; be he ne'er so vile,
+                  This day shall gentle his condition;
+                  And gentlemen in England now a-bed
+                  Shall think themselves accurs'd they were not here,
+                  And hold their manhoods cheap whiles any speaks
+                  That fought with us upon Saint Crispin's day.
+                </p>
+              </EuiText>
+            </EuiModalBody>
+
+            <EuiModalFooter>
+              <EuiButtonEmpty
+                onClick={this.closeModal}
+                size="s"
+              >
+                Cancel
+              </EuiButtonEmpty>
+
+              <EuiButton
+                onClick={this.closeModal}
+                size="s"
+                fill
+              >
+                Save
+              </EuiButton>
+            </EuiModalFooter>
+          </EuiModal>
+        </EuiOverlayMask>
+      );
+    }
+    return (
+      <div>
+        <EuiButton onClick={this.showModal}>
+          Show Modal
+        </EuiButton>
+
+        {modal}
+      </div>
+    );
+  }
+}
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
@@ -8,6 +8,32 @@ exports[`renders EuiConfirmModal 1`] = `
     data-test-subj="test subject string"
     tabindex="0"
   >
+    <button
+      aria-label="Closes this modal window"
+      class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiButtonIcon__icon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+            id="cross-a"
+          />
+        </defs>
+        <use
+          fill-rule="nonzero"
+          href="#cross-a"
+        />
+      </svg>
+    </button>
     <div
       class="euiModalHeader"
     >

diff --git a/src/components/modal/__snapshots__/modal.test.js.snap b/src/components/modal/__snapshots__/modal.test.js.snap
@@ -8,6 +8,32 @@ exports[`renders EuiModal 1`] = `
     data-test-subj="test subject string"
     tabindex="0"
   >
+    <button
+      aria-label="Closes this modal window"
+      class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="euiIcon euiButtonIcon__icon euiIcon--medium"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+            id="cross-a"
+          />
+        </defs>
+        <use
+          fill-rule="nonzero"
+          href="#cross-a"
+        />
+      </svg>
+    </button>
     children
   </div>
 </div>

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -1,11 +1,14 @@
 .euiModal {
   @include euiBottomShadow;
 
+  display: flex;
+  flex-direction: column;
+  max-height: 75vh; // We overflow the modal body based off this
+  position: relative;
   background-color: $euiColorEmptyShade;
   border: $euiBorderThin;
   border-radius: $euiBorderRadius;
   z-index: $euiZModal;
-  padding: $euiSizeXL;
   min-width: 50%;
   animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;
 }
@@ -19,28 +22,47 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: $euiSizeL;
+  padding-bottom: 0;
+  flex-grow: 0;
+  padding-bottom: $euiSizeL;
 }
 
   .euiModalHeader__title {
     @include euiFontSizeL;
   }
 
-.euiModalHeaderCloseButton {
-}
-
 .euiModalBody {
-  padding: $euiSizeXL 0;
+  @include euiScrollBar;
+
+  padding: $euiSizeL;
+  flex-grow: 1;
+  overflow-y: auto;
 }
 
 .euiModalFooter {
   display: flex;
   justify-content: flex-end;
+  padding: $euiSizeL;
+  flex-grow: 0;
 
   > * + * {
     margin-left: $euiSize;
   }
 }
 
+// When both a header and body exist, drop the top padding so the overflow on
+// the body is spaced correctly.
+.euiModalHeader + .euiModalBody {
+  padding-top: 0;
+}
+
+.euiModal__closeIcon {
+  position: absolute;
+  right: $euiSizeL;
+  top: $euiSizeL;
+}
+
 @keyframes euiModal {
   0% {
     opacity: 0;
@@ -51,3 +73,35 @@
     transform: translateY(0);
   }
 }
+
+// On mobile we fix modals as a takeover.
+@include screenXSmall {
+  .euiModal {
+    position: fixed;
+    width: 100vw;
+    max-height: 100vh;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    box-shadow: none;
+    border: none;
+  }
+
+  .euiModalHeader {
+    width: 100vw;
+  }
+
+  .euiModalFooter {
+    background: $euiColorLightestShade;
+    width: 100vw;
+  }
+
+  .euiModal__closeIcon {
+    position: fixed;
+  }
+
+  .euiModalBody {
+    width: 100vw;
+  }
+}
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -7,6 +7,8 @@ import FocusTrap from 'focus-trap-react';
 
 import { keyCodes } from '../../services';
 
+import { EuiButtonIcon } from '../button'
+
 export class EuiModal extends Component {
   onKeyDown = event => {
     if (event.keyCode === keyCodes.ESCAPE) {
@@ -43,6 +45,13 @@ export class EuiModal extends Component {
           tabIndex={0}
           {...rest}
         >
+          <EuiButtonIcon
+            iconType="cross"
+            onClick={onClose}
+            className="euiModal__closeIcon"
+            color="text"
+            aria-label="Closes this modal window"
+          />
           {children}
         </div>
       </FocusTrap>