Merge pull request #415 from dcos-labs/mp/portal-modals-anywhere

Allow modals to choose which node they mount in
d2iq · Oct 11, 2019 · 4a9c7d0 · 4a9c7d0
2 parents 189903f + 25b07e7
commit 4a9c7d0
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 4 deletions.
diff --git a/packages/modal/README.md b/packages/modal/README.md
@@ -23,7 +23,7 @@ Modals can be dismissed by:
 
 ### Do
 
-Disable primary actions until user can proceed
+Disable primary actions until user can proceed.
 Use `DangerButton` to indicate destructive actions.
 Focus on the first input field.
 Bind the return key to the primary action.
@@ -34,4 +34,5 @@ Use primary action labels that enforce what taking the action does.
 Display an error message at the bottom of the modal body.
 Center align text in the modal body.
 Have sidebars in modals (use the tabbed navigation).
-Use use labels that are ambiguous at first glance e.g. use “Delete user” instead of “Are you sure?" and “Delete”
+Use labels that are ambiguous at first glance e.g. use “Delete user” instead of “Are you sure?" and “Delete”.
+Put a dialog modal inside of a dialog modal.
diff --git a/packages/modal/components/ModalBase.tsx b/packages/modal/components/ModalBase.tsx
@@ -38,6 +38,14 @@ export interface ModalBaseProps {
    * human-readable selector used for writing tests
    */
   dataCy?: string;
+  /**
+   * which DOM node the modal will attach to
+   */
+  overlayRoot?: HTMLElement;
+  /**
+   * the ID attribute that is passed to the modal dialog box
+   */
+  id?: string;
 }
 
 const animationDuration = 250;
@@ -63,11 +71,20 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
   public onKeyDown(e) {
     if (e.key === "Escape") {
       this.props.onClose(e);
+      e.stopPropagation();
     }
   }
 
   public render() {
-    const { children, isAnimated, size, isOpen, dataCy } = this.props;
+    const {
+      children,
+      isAnimated,
+      size,
+      isOpen,
+      dataCy,
+      overlayRoot,
+      id
+    } = this.props;
     const modalSize = size || ModalSizes.M;
 
     return (
@@ -78,7 +95,7 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
       >
         {state => {
           return (
-            <Overlay>
+            <Overlay overlayRoot={overlayRoot}>
               <FocusLock>
                 <div
                   role="button"
@@ -97,6 +114,7 @@ class ModalBase extends React.PureComponent<ModalBaseProps, {}> {
                   role="dialog"
                   onKeyDown={this.onKeyDown}
                   tabIndex={-1}
+                  id={id}
                 >
                   <ModalContents
                     isOpen={isOpen}

diff --git a/packages/modal/stories/Modal.stories.tsx b/packages/modal/stories/Modal.stories.tsx
@@ -325,6 +325,51 @@ storiesOf("Modal", module)
       }
     }
   )
+  .add(
+    "FullscreenModal w/ dialog modal",
+    () => {
+      return (
+        <ModalStoryContainer>
+          {({ isOpen, onClose }) => (
+            <FullscreenModal
+              isOpen={isOpen}
+              onClose={onClose}
+              title="I am modal"
+              subtitle="Optional subtitle"
+              closeText="Dismiss"
+              ctaButton={
+                <PrimaryButton
+                  onClick={action("handling CTA")}
+                  aria-haspopup={true}
+                >
+                  Continue
+                </PrimaryButton>
+              }
+              id="testId"
+            >
+              <ModalStoryContainer>
+                {({ isOpen, onClose }) => (
+                  <DialogModal
+                    isOpen={isOpen}
+                    onClose={onClose}
+                    title="I am modal"
+                    overlayRoot={document.querySelector("#testId")}
+                  >
+                    <ModalContent />
+                  </DialogModal>
+                )}
+              </ModalStoryContainer>
+            </FullscreenModal>
+          )}
+        </ModalStoryContainer>
+      );
+    },
+    {
+      info: {
+        propTables: [FullscreenModal]
+      }
+    }
+  )
   .add(
     "custom focused element",
     () => (