Add zIndexAdjustment prop to EuiPopover

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**
 

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}

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]}

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,11 +437,14 @@ 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 = {
   isOpen: false,
   ownFocus: false,
   anchorPosition: 'downCenter',
   panelPaddingSize: 'm',
+  zIndexAdjustment: 0,
 };

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"

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;
 }