elastic · thompsongl · Feb 2, 2021 · Jan 12, 2021 · Jan 12, 2021 · Jan 12, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `isLoading` prop and added `EuiOverlayMask` directly to `EuiConfirmModal` ([#4421](https://github.com/elastic/eui/pull/4421))
+
 **Bug fixes**
 
 - Fixed `id` usage throughout `EuiTreeView` to respect custom ids and stop conflicts in generated ids ([#4435](https://github.com/elastic/eui/pull/4435))

diff --git a/src-docs/src/views/modal/confirm_modal.js b/src-docs/src/views/modal/confirm_modal.js
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import {
   EuiButton,
   EuiConfirmModal,
-  EuiOverlayMask,
   EuiFlexGroup,
   EuiFlexItem,
 } from '../../../../src/components';
@@ -16,6 +15,10 @@ export default () => {
     isButtonDisabledModalVisible,
     setIsButtonDisabledModalVisible,
   ] = useState(false);
+  const [
+    isConfirmlLoadingModalVisible,
+    setIsConfirmlLoadingModalVisible,
+  ] = useState(false);
 
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
@@ -29,77 +32,89 @@ export default () => {
   const closeButtonDisabledModal = () => setIsButtonDisabledModalVisible(false);
   const showButtonDisabledModal = () => setIsButtonDisabledModalVisible(true);
 
+  const closeConfirmLoadingModal = () =>
+    setIsConfirmlLoadingModalVisible(false);
+  const showConfirmLoadingModal = () => setIsConfirmlLoadingModalVisible(true);
+
   let modal;
 
   if (isModalVisible) {
     modal = (
-      <EuiOverlayMask>
-        <EuiConfirmModal
-          title="Do this thing"
-          onCancel={closeModal}
-          onConfirm={closeModal}
-          cancelButtonText="No, don't do it"
-          confirmButtonText="Yes, do it"
-          defaultFocusedButton="confirm">
-          <p>You&rsquo;re about to do something.</p>
-          <p>Are you sure you want to do this?</p>
-        </EuiConfirmModal>
-      </EuiOverlayMask>
+      <EuiConfirmModal
+        title="Do this thing"
+        onCancel={closeModal}
+        onConfirm={closeModal}
+        cancelButtonText="No, don't do it"
+        confirmButtonText="Yes, do it"
+        defaultFocusedButton="confirm">
+        <p>You&rsquo;re about to do something.</p>
+        <p>Are you sure you want to do this?</p>
+      </EuiConfirmModal>
     );
   }
 
   let destroyModal;
 
   if (isDestroyModalVisible) {
     destroyModal = (
-      <EuiOverlayMask>
-        <EuiConfirmModal
-          title="Do this destructive thing"
-          onCancel={closeDestroyModal}
-          onConfirm={closeDestroyModal}
-          cancelButtonText="No, don't do it"
-          confirmButtonText="Yes, do it"
-          buttonColor="danger"
-          defaultFocusedButton="confirm">
-          <p>You&rsquo;re about to destroy something.</p>
-          <p>Are you sure you want to do this?</p>
-        </EuiConfirmModal>
-      </EuiOverlayMask>
+      <EuiConfirmModal
+        title="Do this destructive thing"
+        onCancel={closeDestroyModal}
+        onConfirm={closeDestroyModal}
+        cancelButtonText="No, don't do it"
+        confirmButtonText="Yes, do it"
+        buttonColor="danger"
+        defaultFocusedButton="confirm">
+        <p>You&rsquo;re about to destroy something.</p>
+        <p>Are you sure you want to do this?</p>
+      </EuiConfirmModal>
     );
   }
 
   let emptyModal;
 
   if (isEmptyModalVisible) {
     emptyModal = (
-      <EuiOverlayMask>
-        <EuiConfirmModal
-          title="Do this thing"
-          onCancel={closeEmptyModal}
-          onConfirm={closeEmptyModal}
-          cancelButtonText="No, don't do it"
-          confirmButtonText="Yes, do it"
-          defaultFocusedButton="confirm"
-        />
-      </EuiOverlayMask>
+      <EuiConfirmModal
+        title="Do this thing"
+        onCancel={closeEmptyModal}
+        onConfirm={closeEmptyModal}
+        cancelButtonText="No, don't do it"
+        confirmButtonText="Yes, do it"
+        defaultFocusedButton="confirm"
+      />
     );
   }
 
   let buttonDisabledModal;
 
   if (isButtonDisabledModalVisible) {
     buttonDisabledModal = (
-      <EuiOverlayMask>
-        <EuiConfirmModal
-          title="My button is disabled"
-          onCancel={closeButtonDisabledModal}
-          onConfirm={closeButtonDisabledModal}
-          cancelButtonText="No, don't do it"
-          confirmButtonText="Yes, do it"
-          defaultFocusedButton="cancel"
-          confirmButtonDisabled={true}
-        />
-      </EuiOverlayMask>
+      <EuiConfirmModal
+        title="My button is disabled"
+        onCancel={closeButtonDisabledModal}
+        onConfirm={closeButtonDisabledModal}
+        cancelButtonText="No, don't do it"
+        confirmButtonText="Yes, do it"
+        defaultFocusedButton="cancel"
+        confirmButtonDisabled={true}
+      />
+    );
+  }
+
+  let confirmLoadingModal;
+
+  if (isConfirmlLoadingModalVisible) {
+    confirmLoadingModal = (
+      <EuiConfirmModal
+        title="My button is loading"
+        onCancel={closeConfirmLoadingModal}
+        onConfirm={closeConfirmLoadingModal}
+        isLoading
+        cancelButtonText="No, don't do it"
+        confirmButtonText="Loading"
+        defaultFocusedButton="cancel"
+      />
     );
   }
 
@@ -124,11 +139,17 @@ export default () => {
             Show confirm disabled confirm modal
           </EuiButton>
         </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={showConfirmLoadingModal}>
+            Show confirm loading confirm modal
+          </EuiButton>
+        </EuiFlexItem>
       </EuiFlexGroup>
       {modal}
       {destroyModal}
       {emptyModal}
       {buttonDisabledModal}
+      {confirmLoadingModal}
     </div>
   );
 };
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -3,11 +3,15 @@
 exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
 Array [
   <div
+    aria-hidden="true"
+    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
   <div
+    aria-hidden="true"
+    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="1"
@@ -99,6 +103,8 @@ Array [
     </div>
   </div>,
   <div
+    aria-hidden="true"
+    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
@@ -109,11 +115,15 @@ Array [
 exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty 1`] = `
 Array [
   <div
+    aria-hidden="true"
+    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
   />,
   <div
+    aria-hidden="true"
+    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="1"
@@ -189,6 +199,8 @@ Array [
     </div>
   </div>,
   <div
+    aria-hidden="true"
+    data-aria-hidden="true"
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"

diff --git a/src/components/modal/confirm_modal.test.tsx b/src/components/modal/confirm_modal.test.tsx
@@ -90,6 +90,21 @@ describe('EuiConfirmModal', () => {
     expect(onCancel).toHaveBeenCalledTimes(0);
   });
 
+  test('isLoading', () => {
+    const component = mount(
+      <EuiConfirmModal
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        isLoading
+        cancelButtonText="Cancel Button Text"
+        confirmButtonText="Confirm Button Text"
+      />
+    );
+
+    findTestSubject(component, 'confirmModalConfirmButton').simulate('click');
+    expect(onConfirm).toHaveBeenCalledTimes(0);
+  });
+
   test('onConfirm can be disabled', () => {
     const component = mount(
       <EuiConfirmModal

diff --git a/src/components/modal/confirm_modal.tsx b/src/components/modal/confirm_modal.tsx
@@ -34,6 +34,7 @@ import { EuiModalBody } from './modal_body';
 import { EuiButton, EuiButtonEmpty } from '../button';
 
 import { EuiText } from '../text';
+import { EuiOverlayMask } from '../overlay_mask';
 
 export interface EuiConfirmModalProps
   extends Omit<
@@ -72,6 +73,10 @@ export interface EuiConfirmModalProps
    * set to a string for a custom width in custom measurement.
    */
   maxWidth?: boolean | number | string;
+  /**
+   * Passes `isLoading` prop to the confirm button
+   */
+  isLoading?: boolean;
 }
 
 export const CONFIRM_BUTTON = 'confirm';
@@ -88,6 +93,7 @@ export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = ({
   className,
   buttonColor = 'primary',
   defaultFocusedButton,
+  isLoading,
   ...rest
 }) => {
   const [cancelButton, setCancelButton] = useState<
@@ -138,33 +144,36 @@ export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = ({
   }
 
   return (
-    <EuiModal className={classes} onClose={onCancel} {...rest}>
-      {modalTitle}
-
-      {message && (
-        <EuiModalBody>
-          <EuiText data-test-subj="confirmModalBodyText">{message}</EuiText>
-        </EuiModalBody>
-      )}
-
-      <EuiModalFooter>
-        <EuiButtonEmpty
-          data-test-subj="confirmModalCancelButton"
-          onClick={onCancel}
-          buttonRef={cancelRef}>
-          {cancelButtonText}
-        </EuiButtonEmpty>
-
-        <EuiButton
-          data-test-subj="confirmModalConfirmButton"
-          onClick={onConfirm}
-          fill
-          buttonRef={confirmRef}
-          color={buttonColor}
-          isDisabled={confirmButtonDisabled}>
-          {confirmButtonText}
-        </EuiButton>
-      </EuiModalFooter>
-    </EuiModal>
+    <EuiOverlayMask>
+      <EuiModal className={classes} onClose={onCancel} {...rest}>
+        {modalTitle}
+
+        {message && (
+          <EuiModalBody>
+            <EuiText data-test-subj="confirmModalBodyText">{message}</EuiText>
+          </EuiModalBody>
+        )}
+
+        <EuiModalFooter>
+          <EuiButtonEmpty
+            data-test-subj="confirmModalCancelButton"
+            onClick={onCancel}
+            buttonRef={cancelRef}>
+            {cancelButtonText}
+          </EuiButtonEmpty>
+
+          <EuiButton
+            data-test-subj="confirmModalConfirmButton"
+            onClick={onConfirm}
+            isLoading={isLoading}
+            fill
+            buttonRef={confirmRef}
+            color={buttonColor}
+            isDisabled={confirmButtonDisabled}>
+            {confirmButtonText}
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
   );
 };