[EuiTour] Fix positioning calculation issues caused by width style overrides#5897
[EuiTour] Fix positioning calculation issues caused by width style overrides#5897cee-chen merged 6 commits intoelastic:mainfrom
Conversation
…oesn't seem necessary to explicitly document
|
I built this PR and bootstrapped it in Kibana to test and can confirm the issue @afgomez reported in #5861 is fixed :) (EDIT: Apologies, autocomplete tagged the wrong user!)
Unfortunately I'm a huge o11y noob and can't figure out how to get data into APM to test the screen that @cauemarcondes reported in #5731 🙈 I'm like 90% sure this PR will still fix that issue but can't 100% confirm, unless someone wants to help me out with setting up my local env to get to that screen |
|
Thanks so much for helping me get set up @cauemarcondes! I can confirm the issue reported in #5731 should be fixed, and the EuiTour will be properly left aligned in Kibana once this lands.
|
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5897/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5897/ |
Summary
closes #5861
closes #5731 (I'm relatively confident this is the same root problem)
QA can be performed on the Data Grid example (I was trying to recreate/repro the issue screencapped by a separate Kibana setup)
Before
After
Why was this bug happening?
Unfortunately, EuiPopover's popover positioning calculation does not elegantly handle overriding the width of the popover via either CSS or styling of
width,max-width, ormin-widthon the popover panel itself. Instead, the "correct" (or non-bug-inducing-way) to manage a popover's width is to restrict it with a wrapper around the popover's contents (which is the change that this PR made).I could dive more deeply into EuiPopover's
popover_positioningservice to try and figure out how to work around this, but that seemed like a much more involved fix compared to this much simpler one, and since it hasn't come up before except for EuiTour, I figured there wasn't a super pressing need for it.Checklist
Added orupdated jest and cypress tests