[EuiFilterButton] Sass and Emotion CSS order is causing an incorrect border-radius in Kibana components

[1Copenut]

Describe the bug
@andreadelrio let us know there were at least two Kibana components that had a border / border-radius displaying incorrectly for buttons that were embedded with inputs. The EUI team's investigation concluded this is a difference in the order Emotion and Sass styles are loaded in EUI vs. Kibana.

The EUI team concluded the best way to manage this will be to convert EuiFilterButton to use Emotion and fold it into a next release. The fix would then be upstreamed into Kibana on next upgrade.

Environment and versions

• EUI version: 83.0.0
• React version: 17
• Kibana version (if applicable): 8.8.2
• Browser: Chrome
• Operating System: MacOS

To Reproduce
Steps to reproduce the behavior:

1. Pull latest main from Kibana and bootstrap it
2. Load the sample flight data
3. Navigate to the Discover view
4. Observe the slight rounded border as shown in the screen shot below.

Expected behavior
The border should be square (not radiused) and not show through the background.

Screenshots

[cee-chen]

This was fixed by elastic/kibana#161592