diff --git a/CHANGELOG.md b/CHANGELOG.md index 556b9aa4022..27ba7eb1591 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** diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 8a0db98038c..d5c8b391cfc 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); + const { zIndex: zIndexProp } = this.props; + const zIndex = zIndexProp == null ? getElementZIndex(this.button, this.panel) : zIndexProp; const popoverStyles = { top, @@ -307,6 +308,8 @@ export class EuiPopover extends Component { panelClassName, panelPaddingSize, popoverRef, + repositionOnScroll, // eslint-disable-line no-unused-vars + zIndex, // eslint-disable-line no-unused-vars ...rest } = this.props; @@ -436,6 +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, + /** By default, popover content inherits the z-index of the anchor component; pass zIndex to override */ + zIndex: PropTypes.number, }; EuiPopover.defaultProps = {