[Emotion] Convert EuiFilterGroup and EuiFilterButton

[cee-chen]

Summary

• See [Emotion] EuiFilterGroup #6398
  • There's still one unconverted component before this issue closes (EuiFilterSelectItem), but this PR is getting pretty long as it is and already has its own set of Kibana changes, so I'll convert that component later separately.

I recommend following along by commit - as always, there's a good amount of incidental cleanup happening, so I tried to make individual commits as atomic and 1:1 as possible for easier review.

Other than snapshots, there is one active Kibana cleanup item that needs to be done as part of the next upgrade, which is converting all direct usages of .euiFilterGroup__popoverPanel to Emotion (see 7412d84). @tkajtoch, let me know once you've created a Kibana upgrade PR and I'll push up the work needed for this to your branch.

QA

• Compare staging against prod and confirm docs examples look the same as before
• gh pr checkout 6957 && yarn storybook
• Go to http://localhost:6006/?path=/story/euifiltergroup--playground and toggle various props, and confirm that nothing looks broken in any permutation
• Go to http://localhost:6006/?path=/story/euifilterbutton--playground and click around, and confirm that nothing looks broken in any permutation

General checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Added or updated jest and cypress tests
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

Emotion checklist

General

• Output CSS matches the previous CSS (works as expected in all browsers)
• Rendered className(s) read as expected in snapshots and browsers
• [ ] Checked component playground - No playground exists for this component

---

Unit tests

• shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)
• Converted tests to RTL

---

Sass/Emotion conversion process

• [ ] Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base) No Sass vars
• [ ] Removed or converted component-specific Sass vars/mixins to exported JS versions
• [ ] Listed var/mixin removals in changelog
• [ ] Ran yarn compile-scss to update var/mixin JSON files
• [ ] Simplified calc() to mathWithUnits if possible (if mixing different unit types, this may not be possible)
• [ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file
• Removed converted Sass files
• Deleted any src/amsterdam/overrides/{component}.scss files (styles within should have been converted to the baseline Emotion styles)

---

CSS tech debt

• [ ] Wrapped all animations or transitions in euiCanAnimate No animations
• Used gap property to add margin between items if using flex
• Converted side specific padding, margin, and position to -inline and -block logical properties (check inline styles as well as CSS)

---

DOM Cleanup

• Did NOT remove any block/element classNames (e.g. euiComponent, euiComponent__child)
• SEARCH KIBANA FIRST: Deleted any modifier classNames or maps if not being used in Kibana.
  • - (single hyphen instead of double hyphen) modifiers left alone, as there's multiple references to them across Kibana. Double hyphen modifiers are in snapshots only and were removed

---

Kibana due diligence

• Pre-emptively check how your conversion will impact the next Kibana upgrade. This entails searching/grepping through Kibana (excluding **/target, **/*.snap, **/*.storyshot for less noise) for eui{Component} (case sensitive) to find:
• Any test/query selectors that will need to be updated
• Any Sass or CSS that will need to be updated, particularly if a component Sass var was deleted
• Any direct className usages that will need to be refactored (e.g. someone calling the euiBadge class on a div instead of simply using the EuiBadge component)
  • ⚠️ KIBANA TODO: Direct references to .euiFilterGroup__popoverPanel need to be converted to Emotion instead (see 7412d84)

---

Extras/nice-to-have

• [ ] Documentation pass:
• Reduced specificity where possible (usually by reducing nesting and class name chaining)
• [ ] Check for issues in the backlog that could be a quick fix for that component
• [ ] Optional component/code cleanup: consider splitting up the component into multiple children if it's overly verbose or difficult to reason about

[kibanamachine]

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

[tkajtoch]

Code and updated tests look great! I found a couple of styling differences that probably need fixing:

• Single filter focus state outline offset is 1px different (fixed border radius looks so much better though!)

• fullWidth Layout example is squished to a single line and doesn't look good on small viewports

[cee-chen]

Single filter focus state outline offset is 1px different (fixed border radius looks so much better though!)

This was an intentional change (see 15cd531). I think the slight offset difference on the right is well worth the improved border-radius focus state, especially across multiple browsers (this is primarily only an issue on Chromium - FF and Safari have better focus rings).

fullWidth Layout example is squished to a single line and doesn't look good on small viewports

Will take a look at this, not sure what's going on there. Thanks for catching it!

[cee-chen]

@tkajtoch Breakpoints shenanigans should be fixed now. Thanks a million for catching that again! 🎉 Let me know if you're good with shipping with the focus outline change.

[tkajtoch]

Thank you!! I'm good, it definitely looks better than the previous version and I don't mind it at all :) I'll retest it as soon as the PR environment updates

[kibanamachine]

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

[tkajtoch]

Code and functionality look great! Thanks for converting tests to RTL 🎉