[EuiFilterGroup] and [EuiFilterButton] Fix styling for Amsterdam

[cchaos]

Fixes Amsterdam style of filter buttons to match form inputs

After 4 hours of struggling with this thing, I was finally able to get it to work with the rounded corners and minimal style overrides.

Some before and afters

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_4151/

[johnbarrierwilson]

Looks so good! 🎉

[andreadelrio]

@cchaos Looks great, the only thing I'm finding now with the latest changes in is this:

[cchaos]

Thanks @andreadelrio ! I was hoping no one would catch that. 😆 It's an artifact from the fact that our form borders use a transparency and when certain filter buttons are grouped together, I pull them closer together. I'll see if there's a quick fix, but we might live with that for a bit.

[cchaos]

Yeah, I can't find an easy solution and I also noticed this is only happening once the buttons stack (mobile view) so I think it will really be a rare occurrence. Would love to punt on that one for another time.

[andreadelrio]

Yeah, I can't find an easy solution and I also noticed this is only happening once the buttons stack (mobile view) so I think it will really be a rare occurrence. Would love to punt on that one for another time.

Alright, LGTM then! 🎉