prevent modalBody render if no children provided (#1500)

* prevent modalBody render if no children provided * add test for empty euiModalBody * add title-only modal example to docs; clean up * #1500 changelog entry
elastic · Jan 31, 2019 · 085dc4f · 085dc4f
1 parent ec21b10
commit 085dc4f
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-- Changed `flex-basis` value on `EuiPageBody` for better cross-broswer support ([#1497](https://github.com/elastic/eui/pull/1497))
+- Changed `flex-basis` value on `EuiPageBody` for better cross-browser support ([#1497](https://github.com/elastic/eui/pull/1497))
 - Converted a number of components to support text localization ([#1485](https://github.com/elastic/eui/pull/1485))
 - Added a seconds option to the refresh interval selection in `EuiSuperDatePicker`  ([#1503](https://github.com/elastic/eui/pull/1503))
+- Changed to conditionally render `EuiModalBody` if `EuiConfirmModal` has no `children` ([#1500](https://github.com/elastic/eui/pull/1500))
 
 ## [`6.7.4`](https://github.com/elastic/eui/tree/v6.7.4)
 

diff --git a/src-docs/src/views/modal/confirm_modal.js b/src-docs/src/views/modal/confirm_modal.js
@@ -10,37 +10,36 @@ import {
 } from '../../../../src/components';
 
 export class ConfirmModal extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      isModalVisible: false,
-      isDestroyModalVisible: false,
-    };
-
-    this.closeModal = this.closeModal.bind(this);
-    this.showModal = this.showModal.bind(this);
-
-    this.closeDestroyModal = this.closeDestroyModal.bind(this);
-    this.showDestroyModal = this.showDestroyModal.bind(this);
+  state = {
+    isModalVisible: false,
+    isDestroyModalVisible: false,
+    isEmptyModalVisible: false
   }
 
-  closeModal() {
+  closeModal = () => {
     this.setState({ isModalVisible: false });
   }
 
-  showModal() {
+  showModal = () => {
     this.setState({ isModalVisible: true });
   }
 
-  closeDestroyModal() {
+  closeDestroyModal = () => {
     this.setState({ isDestroyModalVisible: false });
   }
 
-  showDestroyModal() {
+  showDestroyModal = () => {
     this.setState({ isDestroyModalVisible: true });
   }
 
+  closeEmptyModal = () => {
+    this.setState({ isEmptyModalVisible: false });
+  }
+
+  showEmptyModal = () => {
+    this.setState({ isEmptyModalVisible: true });
+  }
+
   render() {
     let modal;
 
@@ -83,6 +82,23 @@ export class ConfirmModal extends Component {
       );
     }
 
+    let emptyModal;
+
+    if (this.state.isEmptyModalVisible) {
+      emptyModal = (
+        <EuiOverlayMask>
+          <EuiConfirmModal
+            title="Do this thing"
+            onCancel={this.closeEmptyModal}
+            onConfirm={this.closeEmptyModal}
+            cancelButtonText="No, don't do it"
+            confirmButtonText="Yes, do it"
+            defaultFocusedButton={EUI_MODAL_CONFIRM_BUTTON}
+          />
+        </EuiOverlayMask>
+      );
+    }
+
     return (
       <div>
         <EuiButton onClick={this.showModal}>
@@ -95,8 +111,15 @@ export class ConfirmModal extends Component {
           Show dangerous ConfirmModal
         </EuiButton>
 
+        &nbsp;
+
+        <EuiButton onClick={this.showEmptyModal}>
+          Show title-only ConfirmModal
+        </EuiButton>
+
         {modal}
         {destroyModal}
+        {emptyModal}
       </div>
     );
   }

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.js.snap b/src/components/modal/__snapshots__/confirm_modal.test.js.snap
@@ -90,3 +90,82 @@ exports[`renders EuiConfirmModal 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders EuiConfirmModal without EuiModalBody, if empty 1`] = `
+<div>
+  <div
+    aria-label="aria-label"
+    class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
+    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 euiIcon--medium euiButtonIcon__icon"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
+        />
+      </svg>
+    </button>
+    <div
+      class="euiModal__flex"
+    >
+      <div
+        class="euiModalHeader"
+      >
+        <div
+          class="euiModalHeader__title"
+          data-test-subj="confirmModalTitleText"
+        >
+          A confirmation modal
+        </div>
+      </div>
+      <div
+        class="euiModalFooter"
+      >
+        <button
+          class="euiButtonEmpty euiButtonEmpty--primary"
+          data-test-subj="confirmModalCancelButton"
+          type="button"
+        >
+          <span
+            class="euiButtonEmpty__content"
+          >
+            <span
+              class="euiButtonEmpty__text"
+            >
+              Cancel Button Text
+            </span>
+          </span>
+        </button>
+        <button
+          class="euiButton euiButton--primary euiButton--fill"
+          data-test-subj="confirmModalConfirmButton"
+          type="button"
+        >
+          <span
+            class="euiButton__content"
+          >
+            <span
+              class="euiButton__text"
+            >
+              Confirm Button Text
+            </span>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/modal/confirm_modal.js b/src/components/modal/confirm_modal.js
@@ -75,7 +75,7 @@ export class EuiConfirmModal extends Component {
 
     let message;
 
-    if (typeof children === 'string') {
+    if (typeof children === 'string' && children.length > 0) {
       message = <p>{children}</p>;
     } else {
       message = children;
@@ -89,11 +89,13 @@ export class EuiConfirmModal extends Component {
       >
         {modalTitle}
 
-        <EuiModalBody>
-          <EuiText data-test-subj="confirmModalBodyText">
-            {message}
-          </EuiText>
-        </EuiModalBody>
+        {message && (
+          <EuiModalBody>
+            <EuiText data-test-subj="confirmModalBodyText">
+              {message}
+            </EuiText>
+          </EuiModalBody>
+        )}
 
         <EuiModalFooter>
           <EuiButtonEmpty

diff --git a/src/components/modal/confirm_modal.test.js b/src/components/modal/confirm_modal.test.js
@@ -33,6 +33,20 @@ test('renders EuiConfirmModal', () => {
   expect(component).toMatchSnapshot();
 });
 
+test('renders EuiConfirmModal without EuiModalBody, if empty', () => {
+  const component = render(
+    <EuiConfirmModal
+      title="A confirmation modal"
+      onCancel={() => {}}
+      onConfirm={onConfirm}
+      cancelButtonText="Cancel Button Text"
+      confirmButtonText="Confirm Button Text"
+      {...requiredProps}
+    />
+  );
+  expect(component).toMatchSnapshot();
+});
+
 test('onConfirm', () => {
   const component = mount(
     <EuiConfirmModal