[EuiButtonGroup] Improve interaction states

[elizabetdev]

Summary

Closes #4105.

This PR improves the EuiButtonGroup interaction states.

Checklist

• Check against all themes for compatibility in both light and dark modes
• [ ] Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[cchaos]

Unfortunately this going to have a pretty big conflict with #4056 which is why it's been put into draft mode. We'll want to wait til that PR gets merged first as it completely re-works the styles because of the updated component structure.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[cchaos]

Thanks for tackling this one. Sorry for the conflicts that surely ensued. I'm visually ok with more pronounced selected state, but it did create a few visual regressions.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[elizabetdev]

@cchaos thanks for your previous feedback.

I decided to make all the interaction states for the EuiButtonGroup similar. The only difference is that the compressed buttons have a focus ring.

The best way to test the changes is to replace the files src-docs/src/views/button/button_group.js and src-docs/src/views/form_compressed/complex_example.js with https://gist.github.com/miukimiu/13064cd5fa1345ff39a8569a0ceddfe8.

Then in /forms/compressed-forms#complex-example you can test the compressed EuiButtonGroup versions. And in /navigation/button#button-groups you can test the non-compressed versions.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[cchaos]

👍 LGTM. Thanks for those gists for testing!

The only possibly one thing you might want to tweak is the hover state affecting the text color. It is causing the text color to change in some instances like the Warning and Success colors, and the Text color in dark mode.

[cchaos]

I'd guess this lint disable is not needed anymore?

[elizabetdev]

@cchaos the .is-selected hover states affecting the texts were on purpose.

I thought it didn't have enough contrast when the background gets darker:

So I decided to use the chooseLightOrDarkText() based on the contrast:

Is it too much? 😛

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[cchaos]

I'm thinking that in general the buttons are going too dark on hover. We should probably be consistent with our base buttons which only darken by 5% in default theme, which we should use in Amsterdam too.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4142/

[monfera]

Thanks a lot @miukimiu @cchaos @snide, looks great!