Bug fix: Overlay hiding menu, conflicting z-index properties (#220)

* Bug fix: `Overlay` hiding menu, conflicting `z-index` properties
Added `zIndex` prop to `Overlay`

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED] - YYYY-MM-DD
 
+### Fixed
+
+-   [#220](https://github.com/equinor/webviz-core-components/pull/220) - `Overlay` was hiding menu due to conflicting z-index properties. Added `zIndex` prop to `Overlay` component and adjusted consumers.
+
 ### Added
 
 -   [#207](https://github.com/equinor/webviz-core-components/pull/207) - Added `storybook` and stories for each component. Added publishment of `storybook` to GitHub workflow. Added `storybook` link to README.

react/src/lib/components/Menu/components/MenuDrawer/MenuDrawer.css

@@ -3,7 +3,7 @@
     position: fixed;
     height: 100vh;
     width: fit-content;
-    z-index: 1001;
+    z-index: 1002;
     display: inline-block;
 }
 

react/src/lib/components/Overlay/Overlay.css

@@ -5,5 +5,4 @@
     left: 0;
     top: 0;
     background-color: black;
-    z-index: 1010;
 }

react/src/lib/components/Overlay/Overlay.tsx

@@ -4,6 +4,7 @@ import "./Overlay.css";
 
 export type OverlayProps = {
     visible: boolean;
+    zIndex?: number;
     onClick: () => void;
 };
 
@@ -54,6 +55,7 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
             style={{
                 display: opacity > 0 ? "block" : "none",
                 opacity: opacity,
+                zIndex: props.zIndex || 1001,
             }}
             onClick={props.onClick}
         ></div>
@@ -65,6 +67,10 @@ Overlay.propTypes = {
      * Set if the overlay shall be shown or not.
      */
     visible: PropTypes.bool.isRequired,
+    /**
+     * Optionally defined a preferred z-index for the overlay.
+     */
+    zIndex: PropTypes.number,
     /**
      * Callback function called when the overlay is clicked on.
      */

react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.tsx

@@ -49,6 +49,7 @@ export const ViewSelector: React.FC<ViewSelectorProps> = (
                         <Overlay
                             visible={menuOpen}
                             onClick={() => setMenuOpen(false)}
+                            zIndex={1003}
                         />
                         <ViewList
                             open={menuOpen}