diff --git a/CHANGELOG.md b/CHANGELOG.md index d66a7a33bc6..cbe94863ce3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ **Theme: Amsterdam** - Tightened `line-height` for some `EuiTitle` sizes ([4133](https://github.com/elastic/eui/pull/4133)) +- Fixed `EuiFilterGroup` and `EuiFilterButton` styles ([4151](https://github.com/elastic/eui/pull/4151)) ## [`29.5.0`](https://github.com/elastic/eui/tree/v29.5.0) diff --git a/src/components/filter_group/_filter_group.scss b/src/components/filter_group/_filter_group.scss index d3276480919..765a79b2ada 100644 --- a/src/components/filter_group/_filter_group.scss +++ b/src/components/filter_group/_filter_group.scss @@ -3,7 +3,7 @@ max-width: 100%; border-right: 1px solid $euiFormBorderColor; box-shadow: 0 1px 2px -1px transparentize($euiShadowColor, .8), 0 3px 3px -2px transparentize($euiShadowColor, .8); - overflow-x: auto; + overflow: hidden; > * { flex: 1 1 auto; diff --git a/src/themes/eui-amsterdam/overrides/_filter_group.scss b/src/themes/eui-amsterdam/overrides/_filter_group.scss index 5e94f59ad5a..3d907497a7c 100644 --- a/src/themes/eui-amsterdam/overrides/_filter_group.scss +++ b/src/themes/eui-amsterdam/overrides/_filter_group.scss @@ -1,3 +1,19 @@ +.euiFilterGroup { + border: none; + border-radius: $euiFormControlBorderRadius; + background-color: $euiFormBackgroundColor; + box-shadow: inset 0 0 0 1px $euiFormBorderColor; +} + .euiFilterButton { border-radius: 0; + border: none; + background-color: transparent; + // Box shadow simulates bottom and left borders + box-shadow: 0 1px 0 0 $euiFormBorderColor, -1px 0 0 0 $euiFormBorderColor; + + .euiFilterButton--withNext + & { + // Remove just the left faux border + box-shadow: 0 1px 0 0 $euiFormBorderColor; + } }