feat: Nest modal support

packages/react/src/components/Modal/Modal.js

@@ -294,12 +294,16 @@ const Modal = React.forwardRef(function Modal(
   return (
     <div
       {...rest}
-      onKeyDown={handleKeyDown}
-      onMouseDown={handleMousedown}
-      onBlur={handleBlur}
       className={modalClasses}
+      ref={ref}
       role="presentation"
-      ref={ref}>
+      onKeyDown={handleKeyDown}>
+      <div
+        className={`${prefix}--modal-background`}
+        onMouseDown={handleMousedown}
+        onBlur={handleBlur}
+        aria-hidden
+      />
       {/* Non-translatable: Focus-wrap code makes this `<span>` not actually read by screen readers */}
       <span
         ref={startTrap}

packages/react/src/components/Modal/Modal.stories.js

@@ -6,7 +6,6 @@
  */
 
 import React, { useState, useRef } from 'react';
-import ReactDOM from 'react-dom';
 import { action } from '@storybook/addon-actions';
 import Modal from './Modal';
 import Button from '../Button';
@@ -23,6 +22,7 @@ import {
   StructuredListRow,
   StructuredListCell,
 } from '../StructuredList';
+import { Portal } from '../Portal';
 
 export default {
   title: 'Components/Modal',
@@ -358,30 +358,26 @@ Playground.argTypes = {
   },
 };
 
-export const WithStateManager = () => {
-  /**
-   * Simple state manager for modals.
-   */
-  const ModalStateManager = ({
-    renderLauncher: LauncherContent,
-    children: ModalContent,
-  }) => {
-    const [open, setOpen] = useState(false);
-    return (
-      <>
-        {!ModalContent || typeof document === 'undefined'
-          ? null
-          : ReactDOM.createPortal(
-              <ModalContent open={open} setOpen={setOpen} />,
-              document.body
-            )}
-        {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
-      </>
-    );
-  };
+/**
+ * Simple state manager for modals.
+ */
+const ModalStateManager = ({
+  renderLauncher: LauncherContent,
+  children: ModalContent,
+}) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Portal>
+        <ModalContent open={open} setOpen={setOpen} />
+      </Portal>
+      {LauncherContent && <LauncherContent open={open} setOpen={setOpen} />}
+    </>
+  );
+};
 
+export const WithStateManager = () => {
   const button = useRef();
-
   return (
     <ModalStateManager
       renderLauncher={({ setOpen }) => (
@@ -420,6 +416,56 @@ export const WithStateManager = () => {
   );
 };
 
+export const Nested = () => {
+  const button = useRef();
+
+  const ModalOne = ({ children }) => (
+    <ModalStateManager
+      renderLauncher={({ setOpen }) => (
+        <Button ref={button} onClick={() => setOpen(true)}>
+          Launch modal one
+        </Button>
+      )}>
+      {({ open, setOpen }) => (
+        <Modal
+          id="modal1"
+          modalHeading="Modal One"
+          passiveModal
+          open={open}
+          onRequestClose={() => setOpen(false)}>
+          {children}
+        </Modal>
+      )}
+    </ModalStateManager>
+  );
+
+  const ModalTwo = ({ children }) => (
+    <ModalStateManager
+      renderLauncher={({ setOpen }) => (
+        <Button ref={button} onClick={() => setOpen(true)}>
+          Launch modal two
+        </Button>
+      )}>
+      {({ open, setOpen }) => (
+        <Modal
+          id="modal2"
+          modalHeading="Modal Two"
+          passiveModal
+          open={open}
+          onRequestClose={() => setOpen(false)}>
+          {children}
+        </Modal>
+      )}
+    </ModalStateManager>
+  );
+
+  return (
+    <ModalOne>
+      <ModalTwo />
+    </ModalOne>
+  );
+};
+
 export const PassiveModal = () => {
   return (
     <Modal

packages/styles/scss/components/modal/_modal.scss

@@ -25,15 +25,10 @@
   .#{$prefix}--modal {
     position: fixed;
     z-index: z('modal');
-    top: 0;
-    left: 0;
     display: flex;
-    width: 100vw;
-    height: 100vh;
     align-items: center;
     justify-content: center;
-    background-color: $overlay;
-    content: '';
+    inset: 0;
     opacity: 0;
     transition: opacity $duration-moderate-02 motion(exit, expressive),
       visibility 0ms linear $duration-moderate-02;
@@ -50,6 +45,13 @@
       }
     }
 
+    .#{$prefix}--modal-background {
+      position: fixed;
+      z-index: -1;
+      background-color: $overlay;
+      inset: 0;
+    }
+
     // V11: Question for design: do we have an updated tokens for fields that exist on `layer`?
     .#{$prefix}--pagination,
     .#{$prefix}--pagination__control-buttons,