feat(modal): add preventCloseOnClickOutside prop to Modal (#6886)

Co-authored-by: DAK <40970507+dakahn@users.noreply.github.com>
carbon-design-system · Sep 23, 2020 · 9743681 · 9743681
1 parent fcb44ac
commit 9743681
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3100,6 +3100,7 @@ Map {
       "onRequestClose": [Function],
       "onRequestSubmit": [Function],
       "passiveModal": false,
+      "preventCloseOnClickOutside": false,
       "primaryButtonDisabled": false,
       "selectorPrimaryFocus": "[data-modal-primary-focus]",
     },
@@ -3157,6 +3158,9 @@ Map {
       "passiveModal": Object {
         "type": "bool",
       },
+      "preventCloseOnClickOutside": Object {
+        "type": "bool",
+      },
       "primaryButtonDisabled": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
@@ -63,6 +63,10 @@ const props = () => ({
   onRequestClose: action('onRequestClose'),
   onRequestSubmit: action('onRequestSubmit'),
   onSecondarySubmit: action('onSecondarySubmit'),
+  preventCloseOnClickOutside: boolean(
+    'Prevent closing on click outside of modal (preventCloseOnClickOutside)',
+    false
+  ),
 });
 
 const titleOnlyProps = () => {

diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
@@ -132,6 +132,11 @@ export default class Modal extends Component {
      */
     passiveModal: PropTypes.bool,
 
+    /**
+     * Prevent closing on click outside of modal
+     */
+    preventCloseOnClickOutside: PropTypes.bool,
+
     /**
      * Specify whether the Button should be disabled, or not
      */
@@ -179,6 +184,7 @@ export default class Modal extends Component {
     iconDescription: 'Close',
     modalHeading: '',
     modalLabel: '',
+    preventCloseOnClickOutside: false,
     selectorPrimaryFocus: '[data-modal-primary-focus]',
     hasScrollingContent: false,
   };
@@ -211,7 +217,8 @@ export default class Modal extends Component {
       !elementOrParentIsFloatingMenu(
         evt.target,
         this.props.selectorsFloatingMenus
-      )
+      ) &&
+      !this.props.preventCloseOnClickOutside
     ) {
       this.props.onRequestClose(evt);
     }
@@ -321,6 +328,7 @@ export default class Modal extends Component {
       shouldSubmitOnEnter, // eslint-disable-line
       size,
       hasScrollingContent,
+      preventCloseOnClickOutside, // eslint-disable-line
       ...other
     } = this.props;
 

diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -57,6 +57,7 @@ exports[`ModalWrapper should render 1`] = `
       onRequestSubmit={[Function]}
       open={false}
       passiveModal={false}
+      preventCloseOnClickOutside={false}
       primaryButtonDisabled={false}
       primaryButtonText="Save"
       secondaryButtonText="Cancel"