From 651c539753ab5248313aee55c6519da5b1389973 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 8 Aug 2018 10:14:59 -0600
Subject: [PATCH 1/3] Add zIndexAdjustment prop to EuiPopover

---
 .../__snapshots__/collapsed_item_actions.test.js.snap       | 1 +
 .../basic_table/__snapshots__/in_memory_table.test.js.snap  | 1 +
 src/components/popover/popover.js                           | 6 +++++-
 .../__snapshots__/field_value_selection_filter.test.js.snap | 4 ++++
 src/services/popover/popover_positioning.js                 | 6 +++---
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
index 3e3483542f80..e4d00029f086 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
@@ -21,6 +21,7 @@ exports[`CollapsedItemActions render 1`] = `
   ownFocus={false}
   panelPaddingSize="none"
   popoverRef={[Function]}
+  zIndexAdjustment={0}
 >
   <EuiContextMenuPanel
     hasFocus={true}
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index d0d3fcdeda15..4a40e7cdc5fd 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -275,6 +275,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       ownFocus={false}
                       panelPaddingSize="none"
                       withTitle={true}
+                      zIndexAdjustment={0}
                     >
                       <EuiOutsideClickDetector
                         onOutsideClick={[Function]}
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 8a0db98038c0..a93a9dfa1a86 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -260,7 +260,7 @@ export class EuiPopover extends Component {
     // the popover's z-index must inherit from the button
     // this keeps a button's popover under a flyout that would cover the button
     // but a popover triggered inside a flyout will appear over that flyout
-    const zIndex = getElementZIndex(this.button, this.panel);
+    const zIndex = getElementZIndex(this.button, this.panel) + this.props.zIndexAdjustment;
 
     const popoverStyles = {
       top,
@@ -307,6 +307,7 @@ export class EuiPopover extends Component {
       panelClassName,
       panelPaddingSize,
       popoverRef,
+      zIndexAdjustment, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -436,6 +437,8 @@ EuiPopover.propTypes = {
   ]),
   /** When `true`, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. */
   repositionOnScroll: PropTypes.bool,
+  /** Popover content inherits the z-index of the anchor component, zIndexAdjustment is added to this z-index */
+  zIndexAdjustment: PropTypes.number,
 };
 
 EuiPopover.defaultProps = {
@@ -443,4 +446,5 @@ EuiPopover.defaultProps = {
   ownFocus: false,
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
+  zIndexAdjustment: 0,
 };
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
index dbadf457d739..3d64539ca6eb 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
@@ -23,6 +23,7 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
+  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
@@ -68,6 +69,7 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
+  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
@@ -113,6 +115,7 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
+  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
@@ -158,6 +161,7 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
+  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
diff --git a/src/services/popover/popover_positioning.js b/src/services/popover/popover_positioning.js
index d41f55d6a353..1d129405d618 100644
--- a/src/services/popover/popover_positioning.js
+++ b/src/services/popover/popover_positioning.js
@@ -515,7 +515,7 @@ export function intersectBoundingBoxes(firstBox, secondBox) {
  * relative to the `target` element; if no z-index is defined, returns "0"
  * @param element {HTMLElement|React.Component}
  * @param cousin {HTMLElement|React.Component}
- * @returns {string}
+ * @returns {number}
  */
 export function getElementZIndex(element, cousin) {
   element = findDOMNode(element);
@@ -567,8 +567,8 @@ export function getElementZIndex(element, cousin) {
       const zIndex = window.document.defaultView.getComputedStyle(node).getPropertyValue('z-index');
 
       // if the z-index is not a number (e.g. "auto") return null, else the value
-      return isNaN(zIndex) ? null : zIndex;
+      return isNaN(zIndex) ? null : parseInt(zIndex, 10);
     },
     null
-  ) || '0';
+  ) || 0;
 }

From f354f441f96edbc3a3af183cd4120a677eaa99d2 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Wed, 8 Aug 2018 10:18:45 -0600
Subject: [PATCH 2/3] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 556b9aa40227..27ba7eb1591c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Added `string` to allowed `restrictWidth` prop type of `EuiPage` and `EuiPageBody` ([#1090](https://github.com/elastic/eui/pull/1090))
 - Added `.eui-textBreakNormal` and `@mixin euiTextTruncate` as CSS/SASS utilities ([#1092](https://github.com/elastic/eui/pull/1092))
 - Added `fullWidth` support to `EuiComboBox` ([#1095](https://github.com/elastic/eui/pull/1095))
+- Added `zIndexAdjustment` to `EuiPopover` which allows tweaking the popover content's `z-index` ([#1097](https://github.com/elastic/eui/pull/1097))
 
 **Bug fixes**
 

From 69820a496b21c7d81500c7c429c7ee4c232e08a6 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 9 Aug 2018 10:19:38 -0600
Subject: [PATCH 3/3] change popover zindex prop to a full override

---
 .../__snapshots__/collapsed_item_actions.test.js.snap |  1 -
 .../__snapshots__/in_memory_table.test.js.snap        |  1 -
 src/components/popover/popover.js                     | 11 ++++++-----
 .../field_value_selection_filter.test.js.snap         |  4 ----
 src/services/popover/popover_positioning.js           |  6 +++---
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
index e4d00029f086..3e3483542f80 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap
@@ -21,7 +21,6 @@ exports[`CollapsedItemActions render 1`] = `
   ownFocus={false}
   panelPaddingSize="none"
   popoverRef={[Function]}
-  zIndexAdjustment={0}
 >
   <EuiContextMenuPanel
     hasFocus={true}
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
index 4a40e7cdc5fd..d0d3fcdeda15 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -275,7 +275,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       ownFocus={false}
                       panelPaddingSize="none"
                       withTitle={true}
-                      zIndexAdjustment={0}
                     >
                       <EuiOutsideClickDetector
                         onOutsideClick={[Function]}
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index a93a9dfa1a86..d5c8b391cfc8 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -260,7 +260,8 @@ export class EuiPopover extends Component {
     // the popover's z-index must inherit from the button
     // this keeps a button's popover under a flyout that would cover the button
     // but a popover triggered inside a flyout will appear over that flyout
-    const zIndex = getElementZIndex(this.button, this.panel) + this.props.zIndexAdjustment;
+    const { zIndex: zIndexProp } = this.props;
+    const zIndex = zIndexProp == null ? getElementZIndex(this.button, this.panel) : zIndexProp;
 
     const popoverStyles = {
       top,
@@ -307,7 +308,8 @@ export class EuiPopover extends Component {
       panelClassName,
       panelPaddingSize,
       popoverRef,
-      zIndexAdjustment, // eslint-disable-line no-unused-vars
+      repositionOnScroll, // eslint-disable-line no-unused-vars
+      zIndex, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -437,8 +439,8 @@ EuiPopover.propTypes = {
   ]),
   /** When `true`, the popover's position is re-calculated when the user scrolls, this supports having fixed-position popover anchors. */
   repositionOnScroll: PropTypes.bool,
-  /** Popover content inherits the z-index of the anchor component, zIndexAdjustment is added to this z-index */
-  zIndexAdjustment: PropTypes.number,
+  /** By default, popover content inherits the z-index of the anchor component; pass zIndex to override */
+  zIndex: PropTypes.number,
 };
 
 EuiPopover.defaultProps = {
@@ -446,5 +448,4 @@ EuiPopover.defaultProps = {
   ownFocus: false,
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
-  zIndexAdjustment: 0,
 };
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
index 3d64539ca6eb..dbadf457d739 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap
@@ -23,7 +23,6 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
-  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
@@ -69,7 +68,6 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
-  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
@@ -115,7 +113,6 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
-  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
@@ -161,7 +158,6 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = `
   panelClassName="euiFilterGroup__popoverPanel"
   panelPaddingSize="none"
   withTitle={null}
-  zIndexAdjustment={0}
 >
   <div
     className="euiFilterSelect__note"
diff --git a/src/services/popover/popover_positioning.js b/src/services/popover/popover_positioning.js
index 1d129405d618..d41f55d6a353 100644
--- a/src/services/popover/popover_positioning.js
+++ b/src/services/popover/popover_positioning.js
@@ -515,7 +515,7 @@ export function intersectBoundingBoxes(firstBox, secondBox) {
  * relative to the `target` element; if no z-index is defined, returns "0"
  * @param element {HTMLElement|React.Component}
  * @param cousin {HTMLElement|React.Component}
- * @returns {number}
+ * @returns {string}
  */
 export function getElementZIndex(element, cousin) {
   element = findDOMNode(element);
@@ -567,8 +567,8 @@ export function getElementZIndex(element, cousin) {
       const zIndex = window.document.defaultView.getComputedStyle(node).getPropertyValue('z-index');
 
       // if the z-index is not a number (e.g. "auto") return null, else the value
-      return isNaN(zIndex) ? null : parseInt(zIndex, 10);
+      return isNaN(zIndex) ? null : zIndex;
     },
     null
-  ) || 0;
+  ) || '0';
 }