From 6b842c670317d093cee9a45e0f7d199113de232d Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 24 Jul 2023 08:02:42 -0700 Subject: [PATCH 1/2] Fix EuiFilterGroup's responsive styling - I messed up the breakpoint interpretation/logic during its Emotion conversion --- src/components/filter_group/filter_group.styles.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/filter_group/filter_group.styles.ts b/src/components/filter_group/filter_group.styles.ts index 36753ec19bc..56ef48a6c57 100644 --- a/src/components/filter_group/filter_group.styles.ts +++ b/src/components/filter_group/filter_group.styles.ts @@ -10,11 +10,7 @@ import { CSSProperties } from 'react'; import { css } from '@emotion/react'; import { UseEuiTheme } from '../../services'; -import { - logicalCSS, - mathWithUnits, - euiMaxBreakpoint, -} from '../../global_styling'; +import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling'; import { euiFormVariables } from '../form/form.styles'; import { euiFilterButtonDisplay } from './filter_button.styles'; @@ -51,10 +47,10 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => { } } - ${euiMaxBreakpoint(euiThemeContext, 's')} { + ${euiBreakpoint(euiThemeContext, ['xs', 's'])} { flex-wrap: wrap; } - ${euiMaxBreakpoint(euiThemeContext, 'xs')} { + ${euiBreakpoint(euiThemeContext, ['xs'])} { /* Force all tiny screens to take up the entire width */ display: flex; From 0ee5a0781f487d8b1af53a8767d229be04654c90 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 24 Jul 2023 08:07:08 -0700 Subject: [PATCH 2/2] changelog --- upcoming_changelogs/6983.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/6983.md diff --git a/upcoming_changelogs/6983.md b/upcoming_changelogs/6983.md new file mode 100644 index 00000000000..ed000531414 --- /dev/null +++ b/upcoming_changelogs/6983.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiFilterGroup`'s responsive styles