[terra-modal-manager] Added zIndex prop to handle nested modals. (#2156)

cerner · May 8, 2024 · d7176cc · d7176cc
1 parent 0fde38c
commit d7176cc
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 1 deletion.
diff --git a/packages/terra-application-layout/tests/jest/__snapshots__/ApplicationLayout.test.jsx.snap b/packages/terra-application-layout/tests/jest/__snapshots__/ApplicationLayout.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`ApplicationLayout Snapshot Tests renders the ApplicationLayout with giv
 <ModalManager
   closeOnOutsideClick={false}
   shouldTrapFocus={false}
+  zIndex="6000"
 >
   <withRouter(NavigationLayout)
     config={
@@ -311,6 +312,7 @@ exports[`ApplicationLayout Snapshot Tests renders the ApplicationLayout with onl
 <ModalManager
   closeOnOutsideClick={false}
   shouldTrapFocus={false}
+  zIndex="6000"
 >
   <withRouter(NavigationLayout)
     config={
@@ -428,6 +430,7 @@ exports[`ApplicationLayout Snapshot Tests when given nav items with icons matche
 <ModalManager
   closeOnOutsideClick={false}
   shouldTrapFocus={false}
+  zIndex="6000"
 >
   <withRouter(NavigationLayout)
     config={

diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
@@ -5,6 +5,9 @@
 * Changed
   * Updated `terra-folder-tree` example styles.
 
+* Changed
+  * Updated `terra-modal-manager` example to consume `zIndex` prop.
+
 ## 1.85.0 - (May 1, 2024)
 
 * Changed

diff --git a/...terra-framework-docs/src/terra-dev-site/doc/modal-manager/example/ModalManagerExample.jsx b/...terra-framework-docs/src/terra-dev-site/doc/modal-manager/example/ModalManagerExample.jsx
@@ -284,6 +284,7 @@ const ModalManagerExample = ({ showDisclosureAccessory }) => (
           Disclosure Accessory
         </div>
       ) : undefined}
+      zIndex="7000"
     >
       <ContentComponent disclosureType="modal" />
     </ModalManager>

diff --git a/packages/terra-modal-manager/CHANGELOG.md b/packages/terra-modal-manager/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Added `zIndex` prop to handle nested modals.
+
 ## 6.76.0 - (April 4, 2024)
 
 * Changed

diff --git a/packages/terra-modal-manager/src/ModalManager.jsx b/packages/terra-modal-manager/src/ModalManager.jsx
@@ -15,6 +15,8 @@ export { disclosureType };
 
 const cx = classNamesBind.bind(styles);
 
+const zIndexes = ['6000', '7000', '8000', '9000'];
+
 const propTypes = {
   /**
    * The components to be rendered in the body of the ModalManager. These components will receive the
@@ -38,11 +40,16 @@ const propTypes = {
    * If set to true, then the outside click will get enabled.
    */
   closeOnOutsideClick: PropTypes.bool,
+  /**
+   * Z-Index layer to apply to the ModalContent and ModalOverlay. Valid values are the standard modal layer: '6000', and the max layer: '9000'.
+   */
+  zIndex: PropTypes.oneOf(zIndexes),
 };
 
 const defaultProps = {
   shouldTrapFocus: false,
   closeOnOutsideClick: false,
+  zIndex: '6000',
 };
 
 const heightFromSize = {
@@ -81,7 +88,7 @@ class ModalManager extends React.Component {
 
   renderModal(manager) {
     const {
-      children, disclosureAccessory, withDisclosureContainer, shouldTrapFocus, closeOnOutsideClick, ...customProps
+      children, disclosureAccessory, withDisclosureContainer, shouldTrapFocus, closeOnOutsideClick, zIndex, ...customProps
     } = this.props;
     const theme = this.context;
 
@@ -120,6 +127,7 @@ class ModalManager extends React.Component {
           ariaLabel={(headerDataForPresentedComponent) ? headerDataForPresentedComponent.title : customProps['aria-label'] || 'Modal'}
           setModalFocusElementRef={this.setModalFocusElementRef}
           shouldTrapFocus={shouldTrapFocus}
+          zIndex={zIndex}
         >
           <ContentContainer
             fill

diff --git a/packages/terra-modal-manager/tests/jest/ModalManager.test.jsx b/packages/terra-modal-manager/tests/jest/ModalManager.test.jsx
@@ -94,4 +94,15 @@ describe('ModalManager', () => {
     );
     expect(modalManager).toMatchSnapshot();
   });
+
+  it('should render the ModalManager with custom zIndex', () => {
+    const modalManager = (
+      <ModalManager zIndex="7000">
+        <TestContainer />
+      </ModalManager>
+    );
+
+    const result = enzymeIntl.mountWithIntl(modalManager);
+    expect(result).toMatchSnapshot();
+  });
 });
diff --git a/packages/terra-modal-manager/tests/jest/__snapshots__/ModalManager.test.jsx.snap b/packages/terra-modal-manager/tests/jest/__snapshots__/ModalManager.test.jsx.snap
@@ -11,6 +11,7 @@ exports[`ModalManager correctly applies the theme context className 1`] = `
   <ModalManager
     closeOnOutsideClick={false}
     shouldTrapFocus={false}
+    zIndex="6000"
   >
     <withDisclosureManager(DisclosureManager)
       render={[Function]}
@@ -102,6 +103,7 @@ exports[`ModalManager should disclose content in Modal 1`] = `
     }
   }
   shouldTrapFocus={true}
+  zIndex="6000"
 >
   <withDisclosureManager(DisclosureManager)
     render={[Function]}
@@ -1350,6 +1352,7 @@ exports[`ModalManager should render the ModalManager with custom props 1`] = `
     }
   }
   shouldTrapFocus={false}
+  zIndex="6000"
 >
   <withDisclosureManager(DisclosureManager)
     render={[Function]}
@@ -1437,6 +1440,124 @@ exports[`ModalManager should render the ModalManager with custom props 1`] = `
 </ModalManager>
 `;
 
+exports[`ModalManager should render the ModalManager with custom zIndex 1`] = `
+<ModalManager
+  closeOnOutsideClick={false}
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {},
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": null,
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": "span",
+      "timeZone": null,
+    }
+  }
+  shouldTrapFocus={false}
+  zIndex="7000"
+>
+  <withDisclosureManager(DisclosureManager)
+    render={[Function]}
+    supportedDisclosureTypes={
+      Array [
+        "modal",
+      ]
+    }
+    trapNestedDisclosureRequests={true}
+  >
+    <DisclosureManager
+      render={[Function]}
+      supportedDisclosureTypes={
+        Array [
+          "modal",
+        ]
+      }
+      trapNestedDisclosureRequests={true}
+    >
+      <div
+        className="container"
+        intl={
+          Object {
+            "defaultFormats": Object {},
+            "defaultLocale": "en",
+            "formatDate": [Function],
+            "formatHTMLMessage": [Function],
+            "formatMessage": [Function],
+            "formatNumber": [Function],
+            "formatPlural": [Function],
+            "formatRelative": [Function],
+            "formatTime": [Function],
+            "formats": Object {},
+            "formatters": Object {
+              "getDateTimeFormat": [Function],
+              "getMessageFormat": [Function],
+              "getNumberFormat": [Function],
+              "getPluralFormat": [Function],
+              "getRelativeFormat": [Function],
+            },
+            "locale": "en",
+            "messages": null,
+            "now": [Function],
+            "onError": [Function],
+            "textComponent": "span",
+            "timeZone": null,
+          }
+        }
+      >
+        <withDisclosureManager(Component)>
+          <Component
+            disclosureManager={
+              DisclosureManagerDelegateInstance {
+                "disclose": [Function],
+              }
+            }
+          >
+            <button
+              type="button"
+            >
+              Hello World
+            </button>
+          </Component>
+        </withDisclosureManager(Component)>
+        <AbstractModal
+          ariaLabel="Modal"
+          classNameModal="modal-manager"
+          classNameOverlay={null}
+          closeOnEsc={true}
+          closeOnOutsideClick={false}
+          isCalledFromNotificationDialog={false}
+          isFullscreen={false}
+          isOpen={false}
+          onRequestClose={[Function]}
+          role="dialog"
+          rootSelector="#root"
+          setModalFocusElementRef={[Function]}
+          shouldTrapFocus={false}
+          zIndex="7000"
+        />
+      </div>
+    </DisclosureManager>
+  </withDisclosureManager(DisclosureManager)>
+</ModalManager>
+`;
+
 exports[`ModalManager should render the ModalManager with defaults 1`] = `
 <ModalManager
   closeOnOutsideClick={false}
@@ -1468,6 +1589,7 @@ exports[`ModalManager should render the ModalManager with defaults 1`] = `
     }
   }
   shouldTrapFocus={false}
+  zIndex="6000"
 >
   <withDisclosureManager(DisclosureManager)
     render={[Function]}