Added additional/base amount of z-index to popovers (#2341)

elastic · Sep 17, 2019 · acf20a9 · acf20a9
1 parent 628a888
commit acf20a9
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `14.1.1`.
+**Bug fixes**
+
+- Fixed default z-index of `EuiPopover` ([#2341](https://github.com/elastic/eui/pull/2341))
 
 ## [`14.1.1`](https://github.com/elastic/eui/tree/v14.1.1)
 

diff --git a/src-docs/src/views/popover/popover_fixed.js b/src-docs/src/views/popover/popover_fixed.js
@@ -50,7 +50,7 @@ export default class PopoverContainer extends Component {
             button={button}
             isOpen={this.state.isPopoverOpen}
             closePopover={this.closePopover}
-            style={{ position: 'fixed', bottom: 50, right: 50 }}
+            style={{ position: 'fixed', bottom: 50, right: 50, zIndex: 10 }}
             repositionOnScroll={true}>
             <div>This popover scrolls with the button element!</div>
           </EuiPopover>

diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -181,7 +181,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
       <div
         aria-live="assertive"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-        style="top: 8px; left: -22px; z-index: 0;"
+        style="top: 8px; left: -22px; z-index: 2000;"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -388,7 +388,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
       <div
         aria-live="assertive"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-        style="top: 8px; left: -22px; z-index: 0;"
+        style="top: 8px; left: -22px; z-index: 2000;"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -755,7 +755,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                             <div
                               aria-live="assertive"
                               class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-                              style="top: 8px; left: -22px; z-index: 0;"
+                              style="top: 8px; left: -22px; z-index: 2000;"
                             >
                               <div
                                 class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -844,7 +844,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                               <div
                                 aria-live="assertive"
                                 class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-                                style="top: 8px; left: -22px; z-index: 0;"
+                                style="top: 8px; left: -22px; z-index: 2000;"
                               >
                                 <div
                                   class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -933,7 +933,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                           Object {
                             "left": -22,
                             "top": 8,
-                            "zIndex": 0,
+                            "zIndex": 2000,
                           }
                         }
                       >
@@ -944,7 +944,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                             Object {
                               "left": -22,
                               "top": 8,
-                              "zIndex": 0,
+                              "zIndex": 2000,
                             }
                           }
                         >
@@ -1202,7 +1202,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
       <div
         aria-live="assertive"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
-        style="top: 8px; left: -22px; z-index: 0;"
+        style="top: 8px; left: -22px; z-index: 2000;"
       >
         <div
           class="euiPopover__panelArrow euiPopover__panelArrow--bottom"

diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -134,7 +134,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
         <div
           aria-live="assertive"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
-          style="top: 16px; left: -22px; z-index: 0;"
+          style="top: 16px; left: -22px; z-index: 2000;"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -181,7 +181,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
         <div
           aria-live="assertive"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
-          style="top: 16px; left: -22px; z-index: 0;"
+          style="top: 16px; left: -22px; z-index: 2000;"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -235,7 +235,7 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
           aria-live="off"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
           data-autofocus="true"
-          style="top: 16px; left: -22px; z-index: 0;"
+          style="top: 16px; left: -22px; z-index: 2000;"
           tabindex="0"
         >
           <div
@@ -283,7 +283,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
         <div
           aria-live="assertive"
           class="euiPanel euiPanel--paddingMedium euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen test"
-          style="top: 16px; left: -22px; z-index: 0;"
+          style="top: 16px; left: -22px; z-index: 2000;"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
@@ -330,7 +330,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
         <div
           aria-live="assertive"
           class="euiPanel euiPanel--paddingSmall euiPopover__panel euiPopover__panel--bottom euiPopover__panel-isOpen"
-          style="top: 16px; left: -22px; z-index: 0;"
+          style="top: 16px; left: -22px; z-index: 2000;"
         >
           <div
             class="euiPopover__panelArrow euiPopover__panelArrow--bottom"

diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
@@ -32,7 +32,6 @@
   // Ignore linting for legibility of transition property, and the mixin performs an overwrite
   // sass-lint:disable-block indentation, mixins-before-declarations
   position: absolute;
-  z-index: $euiZContentMenu;
   min-width: $euiButtonMinWidth; /* 1 */
   max-width: calc(100vw - #{$euiSizeXL}); /* 3 */
   backface-visibility: hidden;

diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
@@ -458,7 +458,7 @@ export class EuiPopover extends Component<Props, State> {
     const { zIndex: zIndexProp } = this.props;
     const zIndex =
       zIndexProp == null
-        ? getElementZIndex(this.button, this.panel)
+        ? getElementZIndex(this.button, this.panel) + 2000
         : zIndexProp;
 
     const popoverStyles = {