fix: keep arrow below popover content#8207
Conversation
|
Preview staging links for this PR:
|
💔 Build Failed
Failed CI Steps |
|
Once the current high contrast mode PR merges, we'll be using |
|
Ok nice, are your changes already in kibana If so, can you confirm this is fixed in kibana? I am developing in kibana with the latest borealis theme and still see this issue. 
|
|
They are not in Kibana main and it will be a while before it reaches Kibana main - is the fix urgent? If so, I'd ping @mgadewoll to make this temporary fix in the Borealis feature branch. |
No that should be fine. Do you know if it will be in |
|
Yes, it should be in by then 🤞 If high contrast work isn't in Borealis, at the very minimum Lene can copy the arrow CSS (sans high contrast logic) from it. |
|
ℹ️ I added this PR to introduce the popover arrow changes to Borealis. |
Summary
Adds a
z-indexof-1to popover arrow to prevent stacking on top of popover content.This issue was noticed in the Lens color mapping UI where we set
panelPaddingSize="none", see code here. We are not applying any special styles that I can tell but the arrow shows on top of the content, you can see this better when a background color is applied, see below...I was not able to reproduce this in eui docs but another improvement with this change that I did see is the focus state of the popover.
Notice how the arrow slightly occludes the border.
Maybe there is a better solution or issues with this one, open to alternatives.
QA
Remove or strikethrough items that do not apply to your PR.
General checklist