Describe the bug
when you add a tooltip to EuiListGroupItem, for instance by adding the showTooltips prop on <EuiListGroup />, any extraAction icons become misaligned vertically.
see this codesandbox for replicating the bug (borders added for visibility):
before/after adding showTooltips
Minimum reproducible sandbox
codesandbox
Additional context (Optional)
this likely is happening because tooltips inject a <span> between the <li> and <button> elements, which overrides the align-items: center property from the <li>. by adding align-items: center to the tooltip <span>, it aligns as expected.
just opening this to track; I can open a PR if the team doesnt' have the bandwidth to fix right away 👍
Describe the bug
when you add a tooltip to
EuiListGroupItem, for instance by adding theshowTooltipsprop on<EuiListGroup />, anyextraActionicons become misaligned vertically.see this codesandbox for replicating the bug (borders added for visibility):
before/after adding
showTooltipsMinimum reproducible sandbox
codesandbox
Additional context (Optional)
this likely is happening because tooltips inject a
<span>between the<li>and<button>elements, which overrides thealign-items: centerproperty from the<li>. by addingalign-items: centerto the tooltip<span>, it aligns as expected.just opening this to track; I can open a PR if the team doesnt' have the bandwidth to fix right away 👍