Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Sep 17, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b527002
Added additional/base amount of z-index to popovers
Sep 13, 2019
55bf446
TEMP: Doc example in File Picker section
Sep 13, 2019
9c9b9e8
cl
Sep 13, 2019
edeb264
cl
Sep 17, 2019
820d66e
Revert "TEMP: Doc example in File Picker section"
Sep 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/popover/popover_fixed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions src/components/form/super_select/__snapshots__/super_select.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -933,7 +933,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
Object {
"left": -22,
"top": 8,
"zIndex": 0,
"zIndex": 2000,
}
}
>
Expand All @@ -944,7 +944,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
Object {
"left": -22,
"top": 8,
"zIndex": 0,
"zIndex": 2000,
}
}
>
Expand Down Expand Up @@ -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"
Expand Down
10 changes: 5 additions & 5 deletions src/components/popover/__snapshots__/popover.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
1 change: 0 additions & 1 deletion src/components/popover/_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smart that you used 2000, which matches $euiZContentMenu. I might add a comment just for folks so they know that's why you picked that number.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want this to be plus 2000 or at least 2000 ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking plus then it's alway overtop of any other content with the container as well. But I can see that this could get complicated with flyouts and modals both appearing at the same time?

But it should be at least 2000, and would still need to add a significant amount if the container is at least 2000 already.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, let's stick with +2000 and see how it goes :)

: zIndexProp;

const popoverStyles = {
Expand Down