From 66896e942334fe09d80af8f55d1d32e917dbee08 Mon Sep 17 00:00:00 2001
From: rubenthoms <69145689+rubenthoms@users.noreply.github.com>
Date: Mon, 27 Jun 2022 10:50:38 +0200
Subject: [PATCH] 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                                                | 4 ++++
 .../components/Menu/components/MenuDrawer/MenuDrawer.css    | 2 +-
 react/src/lib/components/Overlay/Overlay.css                | 1 -
 react/src/lib/components/Overlay/Overlay.tsx                | 6 ++++++
 .../components/ViewSelector/view-selector.tsx               | 1 +
 5 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0838a79b..75d490cf 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/react/src/lib/components/Menu/components/MenuDrawer/MenuDrawer.css b/react/src/lib/components/Menu/components/MenuDrawer/MenuDrawer.css
index 0f54a725..2eb3c53a 100644
--- a/react/src/lib/components/Menu/components/MenuDrawer/MenuDrawer.css
+++ b/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;
 }
 
diff --git a/react/src/lib/components/Overlay/Overlay.css b/react/src/lib/components/Overlay/Overlay.css
index 2de47c53..30e3c352 100644
--- a/react/src/lib/components/Overlay/Overlay.css
+++ b/react/src/lib/components/Overlay/Overlay.css
@@ -5,5 +5,4 @@
     left: 0;
     top: 0;
     background-color: black;
-    z-index: 1010;
 }
diff --git a/react/src/lib/components/Overlay/Overlay.tsx b/react/src/lib/components/Overlay/Overlay.tsx
index 46465b3f..78855724 100644
--- a/react/src/lib/components/Overlay/Overlay.tsx
+++ b/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.
      */
diff --git a/react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.tsx b/react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.tsx
index 67bf5628..674abbe9 100644
--- a/react/src/lib/components/WebvizSettingsDrawer/components/ViewSelector/view-selector.tsx
+++ b/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}