Legend / color picker overflow

[flash1293]

Summary

Fixes #17488

Depends on #30478

This fixes some layouting problems with the legend/ color picker:

• For horizontal legends it is displayed as overlay instead of inline
• Harmonize size and margin of color dots
• Move it down a bit to not overlap with the focus outline
• Fix jumping of selected legend item

This doesn't fix the problem with multi-line horizontal legends pushing down the chart @ppisljar noted in an old unmerged PR (#17489) for this issue but I think we should fix that one in a separate PR because it seems to be caused by the visualization itself not correctly updating its bounds.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
  - [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  - [ ] Documentation was added for features that require explanation or tutorials
  - [ ] Unit or functional tests were updated or added to match the most common scenarios
  - [ ] This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
  - [] This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[cchaos]

Why were these comments removed?

[cchaos]

Oh yeah this is much better, thank you. Once those comments go back in, I think it's ready for CI. I just had one more suggestion.

[cchaos]

To clean these two lines you could just add that margin bottom amount to the bottom so it's:

bottom: $visLegendLineHeight + $euiSizeS;

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[ppisljar]

1. when legend is long and spans multiple lines the chart overflows the axes

2. when opening a legend its not possible to close it anymore (dashboard)

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[ppisljar]

nevermind the 2). figured i can close it by clicking on the same item again ... but took me some time, so we might want to improve experience around that by hiding it on clicking outside ?

long legends need to be fixed.

[flash1293]

@ppisljar

when legend is long and spans multiple lines the chart overflows the axes

I mentioned that in the PR description, I will fix this is a separate PR since it is another bug (not related to the overlays itself, happens even if no overlay is expanded) which seems to be caused by the chart not correctly calculating its bounds (perhaps something about the render order?).

figured i can close it by clicking on the same item again ... but took me some time, so we might want to improve experience around that by hiding it on clicking outside?

+1, makes sense to me, what do you think @cchaos ?

[ppisljar]

sorry, missed that. apart from that its a LGTM

[flash1293]

@ppisljar @cchaos I looked into the code and it looks like the "on click outside" thing is a bit out of scope for this bug fix PR. Since the overlay will soon(-ish) be replaced by a far better EUI solution I don't think we should add this here and now IMHO.

[cchaos]

I think it's fine to figure that out later or just wait for the new charts