[terra-application] Revert Added zIndex prop to control OverlayProvid…

…ers (#368) * Revert "[terra-application] Added prop to control the zIndex of overlay provider (#367)" This reverts commit c550db5. * UXPLATFORM-10287 Updated jest screenshots * UXPLATFORM-10287 Updated wdio screenshots --------- Co-authored-by: Avijit Das <[email protected]>
cerner · Mar 11, 2024 · 4666888 · 4666888
1 parent c550db5
commit 4666888
Show file tree

Hide file tree

Showing 14 changed files with 13 additions and 144 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -15,7 +15,6 @@ Cerner Corporation
 - Pranav Agarwal [@pranav300]
 - Mackenzie Revoyr [@revoyrm]
 - Sam Bao [@sambao21]
-- Avijit Das [@adavijit]
 
 [@mjhenkes]: https://github.com/mjhenkes
 [@tbiethman]: https://github.com/tbiethman
@@ -32,4 +31,3 @@ Cerner Corporation
 [@pranav300]: https://github.com/pranav300
 [@revoyrm]: https://github.com/revoyrm
 [@sambao21]: https://github.com/sambao21
-[@adavijit]: https://github.com/adavijit
diff --git a/packages/terra-application/CHANGELOG.md b/packages/terra-application/CHANGELOG.md
@@ -11,7 +11,6 @@
 * Added
   * Added user action utility button.
   * Added `noScroll` prop to remove scroll in powerchart.
-  * Added `zIndex` prop to control z-index of ApplicationStatusOverlayContext
 
 ## 2.1.0 - (June 22, 2022)
 

diff --git a/packages/terra-application/src/application-base/ApplicationBase.jsx b/packages/terra-application/src/application-base/ApplicationBase.jsx
@@ -64,21 +64,10 @@ const propTypes = {
    * When set to true scroll will be disabled. internal prop to be used by Mpages for terra-tabs in  Powerchart.
    */
   noScroll: PropTypes.bool,
-  /**
-   * @private
-   * @type {number}
-   * @default 0
-   * Prop to control the z-index of overlay provider.
-   */
-  zIndex: PropTypes.number,
-};
-
-const defaultProps = {
-  zIndex: 0,
 };
 
 const ApplicationBase = ({
-  locale, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll, zIndex,
+  locale, themeName, fitToParentIsDisabled, children, unloadPromptIsDisabled, noScroll,
 }) => {
   const registeredPromptsRef = useRef();
   const [messages, setMessages] = useState();
@@ -149,7 +138,7 @@ const ApplicationBase = ({
                     }}
                   >
                     <ApplicationLoadingOverlayProvider noScroll={noScroll}>
-                      <ApplicationStatusOverlayProvider noScroll={noScroll} zIndex={zIndex}>
+                      <ApplicationStatusOverlayProvider noScroll={noScroll}>
                         <Suspense fallback={<ApplicationLoadingOverlay isOpen />}>
                           {children}
                         </Suspense>
@@ -167,5 +156,5 @@ const ApplicationBase = ({
 };
 
 ApplicationBase.propTypes = propTypes;
-ApplicationBase.defaultProps = defaultProps;
+
 export default ApplicationBase;
diff --git a/...ges/terra-application/src/application-status-overlay/ApplicationStatusOverlayProvider.jsx b/...ges/terra-application/src/application-status-overlay/ApplicationStatusOverlayProvider.jsx
@@ -26,21 +26,10 @@ const propTypes = {
    * Prop to not render scroll in  Powerchart.
    */
   noScroll: PropTypes.bool,
-  /**
-   * @private
-   * @type {number}
-   * @default 0
-   * Prop to control the z-index of overlay provider.
-   */
-  zIndex: PropTypes.number,
-};
-
-const defaultProps = {
-  zIndex: 0,
 };
 
 const ApplicationStatusOverlayProvider = ({
-  children, scrollRefCallback, noScroll, zIndex, ...customProps
+  children, scrollRefCallback, noScroll, ...customProps
 }) => {
   const [registeredStatusOverlay, setRegisteredStatusOverlay] = React.useState({});
 
@@ -104,7 +93,6 @@ const ApplicationStatusOverlayProvider = ({
   }, [registeredStatusOverlayKeys]);
 
   let className = cx('container');
-
   if (customProps.className) {
     className = [className, customProps.className].join(' ');
   }
@@ -123,8 +111,7 @@ const ApplicationStatusOverlayProvider = ({
   const scrollClass = cx({ 'remove-scroll': noScroll });
 
   return (
-    // eslint-disable-next-line react/forbid-dom-props
-    <div {...customProps} className={className} style={{ zIndex }}>
+    <div {...customProps} className={className}>
       {statusView}
       <div data-status-overlay-container-content ref={containerRef} className={cx('container-content')}>
         <Scroll className={scrollClass} refCallback={scrollRefCallback}>
@@ -138,6 +125,5 @@ const ApplicationStatusOverlayProvider = ({
 };
 
 ApplicationStatusOverlayProvider.propTypes = propTypes;
-ApplicationStatusOverlayProvider.defaultProps = defaultProps;
 
 export default ApplicationStatusOverlayProvider;
diff --git a/...a-application/src/application-status-overlay/ApplicationStatusOverlayProvider.module.scss b/...a-application/src/application-status-overlay/ApplicationStatusOverlayProvider.module.scss
@@ -7,6 +7,7 @@
     height: 100%;
     outline: none;
     position: relative;
+    z-index: 0;
   }
 
   .container-content {

diff --git a/packages/terra-application/tests/jest/application-base/ApplicationBase.test.jsx b/packages/terra-application/tests/jest/application-base/ApplicationBase.test.jsx
@@ -42,13 +42,4 @@ describe('ApplicationBase', () => {
     ));
     expect(wrapper).toMatchSnapshot();
   });
-
-  it('should render with zIndex prop', () => {
-    const wrapper = mountWithIntl((
-      <ApplicationBase zIndex={5000}>
-        <div>content</div>
-      </ApplicationBase>
-    ));
-    expect(wrapper).toMatchSnapshot();
-  });
 });
diff --git a/...terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap b/...terra-application/tests/jest/application-base/__snapshots__/ApplicationBase.test.jsx.snap
@@ -5,32 +5,19 @@ exports[`ApplicationBase should render with all props 1`] = `
   locale="en"
   themeName="test-theme"
   unloadPromptIsDisabled={true}
-  zIndex={0}
 />
 `;
 
 exports[`ApplicationBase should render with minimal props 1`] = `
 <ApplicationBase
   locale="en"
-  zIndex={0}
 />
 `;
 
-exports[`ApplicationBase should render with the preferred browser locale 1`] = `
-<ApplicationBase
-  zIndex={0}
-/>
-`;
-
-exports[`ApplicationBase should render with zIndex prop 1`] = `
-<ApplicationBase
-  zIndex={5000}
-/>
-`;
+exports[`ApplicationBase should render with the preferred browser locale 1`] = `<ApplicationBase />`;
 
 exports[`ApplicationBase should render without scroll 1`] = `
 <ApplicationBase
   noScroll={true}
-  zIndex={0}
 />
 `;
diff --git a/...ation/tests/jest/application-navigation/__snapshots__/ApplicationNavigation.test.jsx.snap b/...ation/tests/jest/application-navigation/__snapshots__/ApplicationNavigation.test.jsx.snap
@@ -7,9 +7,7 @@ exports[`ApplicationNavigation should render default element 1`] = `
   utilityItems={Array []}
 >
   <ApplicationLoadingOverlayProvider>
-    <ApplicationStatusOverlayProvider
-      zIndex={0}
-    >
+    <ApplicationStatusOverlayProvider>
       <withPromptRegistration(NavigationPromptCheckpoint)>
         <injectIntl(ApplicationErrorBoundary)>
           <Suspense
@@ -99,9 +97,7 @@ exports[`ApplicationNavigation should render with all props 1`] = `
   }
 >
   <ApplicationLoadingOverlayProvider>
-    <ApplicationStatusOverlayProvider
-      zIndex={0}
-    >
+    <ApplicationStatusOverlayProvider>
       <withPromptRegistration(NavigationPromptCheckpoint)>
         <injectIntl(ApplicationErrorBoundary)>
           <Suspense

diff --git a/...plication/tests/jest/application-status-overlay/ApplicationStatusOverlayProvider.test.jsx b/...plication/tests/jest/application-status-overlay/ApplicationStatusOverlayProvider.test.jsx
@@ -157,13 +157,5 @@ describe('ApplicationStatusOverlayProvider', () => {
 
       expect(wrapper).toMatchSnapshot();
     });
-
-    it('should render with zIndex prop', () => {
-      const wrapper = shallow((
-        <ApplicationStatusOverlayProvider zIndex={5000} />
-      ));
-
-      expect(wrapper).toMatchSnapshot();
-    });
   });
 });
diff --git a/...t/application-status-overlay/__snapshots__/ApplicationStatusOverlayProvider.test.jsx.snap b/...t/application-status-overlay/__snapshots__/ApplicationStatusOverlayProvider.test.jsx.snap
@@ -3,11 +3,6 @@
 exports[`ApplicationStatusOverlayProvider Snapshots should render a single status view with the configuration from the last rendered ApplicationStatusOverlay when more than one are specified 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <StatusView
     buttonAttrs={Array []}
@@ -44,11 +39,6 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render a single statu
 exports[`ApplicationStatusOverlayProvider Snapshots should render the status view based on the current state 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <StatusView
     buttonAttrs={
@@ -96,11 +86,6 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
 exports[`ApplicationStatusOverlayProvider Snapshots should render the status view when only buttonAttrs is specified 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <StatusView
     buttonAttrs={
@@ -142,11 +127,6 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
 exports[`ApplicationStatusOverlayProvider Snapshots should render the status view when only message is specified 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <StatusView
     buttonAttrs={Array []}
@@ -182,11 +162,6 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
 exports[`ApplicationStatusOverlayProvider Snapshots should render the status view when only variant is specified 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <StatusView
     buttonAttrs={Array []}
@@ -222,11 +197,6 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render the status vie
 exports[`ApplicationStatusOverlayProvider Snapshots should render with custom props 1`] = `
 <div
   className="container testClassName"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <div
     className="container-content"
@@ -251,11 +221,6 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render with custom pr
 exports[`ApplicationStatusOverlayProvider Snapshots should render with minimal props 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <div
     className="container-content"
@@ -280,11 +245,6 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render with minimal p
 exports[`ApplicationStatusOverlayProvider Snapshots should render with optional props 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <div
     className="container-content"
@@ -311,43 +271,9 @@ exports[`ApplicationStatusOverlayProvider Snapshots should render with optional
 </div>
 `;
 
-exports[`ApplicationStatusOverlayProvider Snapshots should render with zIndex prop 1`] = `
-<div
-  className="container"
-  style={
-    Object {
-      "zIndex": 5000,
-    }
-  }
->
-  <div
-    className="container-content"
-    data-status-overlay-container-content={true}
-  >
-    <Scroll
-      className=""
-    >
-      <ContextProvider
-        value={
-          Object {
-            "hide": [Function],
-            "show": [Function],
-          }
-        }
-      />
-    </Scroll>
-  </div>
-</div>
-`;
-
 exports[`ApplicationStatusOverlayProvider Snapshots should render without scroll 1`] = `
 <div
   className="container"
-  style={
-    Object {
-      "zIndex": 0,
-    }
-  }
 >
   <div
     className="container-content"

diff --git a/packages/terra-application/tests/jest/modal-manager/__snapshots__/ModalManager.test.jsx.snap b/packages/terra-application/tests/jest/modal-manager/__snapshots__/ModalManager.test.jsx.snap
@@ -2,11 +2,13 @@
 
 exports[`ModalManager Snapshots should render with optional props 1`] = `
 <ModalManager
+  closeOnOutsideClick={false}
   disclosureAccessory={
     <div>
       Test Accessory
     </div>
   }
+  shouldTrapFocus={false}
   withDisclosureContainer={[Function]}
 >
   <TestChild />
@@ -15,6 +17,8 @@ exports[`ModalManager Snapshots should render with optional props 1`] = `
 
 exports[`ModalManager Snapshots should render with required props 1`] = `
 <ModalManager
+  closeOnOutsideClick={false}
+  shouldTrapFocus={false}
   withDisclosureContainer={[Function]}
 >
   <TestChild />

diff --git a/...large/application-navigation-spec/1__no_prompt_for_primary_navigation_items.png b/...large/application-navigation-spec/1__no_prompt_for_primary_navigation_items.png
diff --git a/...a-default-theme/en/chrome_large/application-navigation-spec/2__Popup_Closed.png b/...a-default-theme/en/chrome_large/application-navigation-spec/2__Popup_Closed.png
diff --git a/...chrome_large/slide-panel-manager-spec/2__panel_persists_after_close_attempt.png b/...chrome_large/slide-panel-manager-spec/2__panel_persists_after_close_attempt.png