Skip to content

Add zIndexAdjustment prop to EuiPopover#1097

Merged
chandlerprall merged 3 commits into
elastic:masterfrom
chandlerprall:feature/1096-popover-zindex-adjustment
Aug 15, 2018
Merged

Add zIndexAdjustment prop to EuiPopover#1097
chandlerprall merged 3 commits into
elastic:masterfrom
chandlerprall:feature/1096-popover-zindex-adjustment

Conversation

@chandlerprall
Copy link
Copy Markdown
Contributor

Closes #1096

Adds new prop to EuiPopover allowing its z-index value to be adjusted.

@chandlerprall chandlerprall requested a review from cjcenizal August 8, 2018 16:17
Copy link
Copy Markdown
Contributor

@cjcenizal cjcenizal left a comment

Choose a reason for hiding this comment

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

Code LGTM! Didn't test locally. Just had a couple suggestions. Did you test to see if this fixes @cchaos's original issue?

* @param element {HTMLElement|React.Component}
* @param cousin {HTMLElement|React.Component}
* @returns {string}
* @returns {number}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Do you want to count this as a breaking change?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This function is only internal.

Copy link
Copy Markdown
Contributor

@cjcenizal cjcenizal Aug 8, 2018

Choose a reason for hiding this comment

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

I hear ya, just thought I would ask because technically consumers can access it like this:

import { getElementZIndex } from '@elastic/eui/lib/services/popover/popover_positioning';

Kibana is accessing the contents of other modules like this, which I'm not a fan of, but I'm not sure if our docs or conventions are clear about how to distinguish public from internal services. No big deal, just thought I'd mention it.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Ughhh; true. In response to Caroline's request I've reverted the changes to this function, but you're right with the deep-importing that could happen this would be a breaking change.

Comment thread src/components/popover/popover.js Outdated
/** 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,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I don't feel strongly about this but I think I've seen "offset" used more often to indicate a value that's added to an original value, e.g. offsetX. Just tossing it out there if you feel it's more descriptive. I'm OK with "adjustment" too as long as it's used consistently for similar variable names elsewhere.

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Aug 8, 2018

What's the thought on doing it this way instead of just allowing a supplied z-index value? I feel like the latter would allow for the most customization.

@chandlerprall
Copy link
Copy Markdown
Contributor Author

@cchaos This way the values in JS are not completely tied to the SCSS ones. However, if you think hardcoding z-index in these cases instead of applying a relative value is better/easier I'll make the change!

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Aug 8, 2018

Yeah my feeling is that, and as it was in my case, that in order to bump the z-index above other elements (not the trigger) I would have to know both the trigger z-index and the other element z-index and then do some math to come up with what would be the difference (adjustment). However, if we just allow a custom z-index, all I have to find is the z-index of the competing element and add however much to that.

@chandlerprall
Copy link
Copy Markdown
Contributor Author

@cjcenizal @cchaos changed from adding an offset to being a complete override

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Aug 9, 2018

Confirmed that it works (in IE as well)

before

screen shot 2018-08-09 at 15 26 01 pm

after

screen shot 2018-08-09 at 15 26 37 pm

👍

@cchaos
Copy link
Copy Markdown
Contributor

cchaos commented Aug 15, 2018

@chandlerprall I think this one is good to merge

@chandlerprall chandlerprall merged commit 7f7f068 into elastic:master Aug 15, 2018
@chandlerprall chandlerprall deleted the feature/1096-popover-zindex-adjustment branch August 15, 2018 21:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants