Amsterdam euiFilterGroup have a sharp angle border on rounded buttons

[phyolim]

current:

proposed:

I believe this is a simple fix of adding a overwrite for euiFilterGroup css with border radius and box-shadow. I'd like to submit a PR.

[cchaos]

Thanks @phylim for catching this one. Amsterdam is a very new theme and we're still working on a lot of downstream component fixes.

For this component in particular, I'm not quite sure your proposed solution is what we're aiming for. Instead, what we'd like is to keep them looking a single group. They'll most likely need to align with how we will be updating our form elements which we are still working on.

But for a quick fix, it seems the problem is stemming from the fact that .euiButtonEmpty styles are overriding the .euiFilterButton styles. So likely we just need to 0 out be border-radius on the filter button and ensure it sticks with !important.

[phyolim]

Ah Ok. That makes sense. Should it have shadow? Looks like other Buttons don't have shadow in Amsterdam.

[cchaos]

We style EuiFilterGroups more like or form inputs and not like our buttons though they render buttons underneath. Therefore, we should be aligning the styles to forms. Currently they do so by using the same SASS mixins from our form mixins, and so we should leave those as-is until we update the mixins themselves.

[phyolim]

new proposed:

[cchaos]

Yep, that would be great thanks!