From 1a49d729f4acd67a970666719923beef9981179c Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 14 Mar 2022 15:03:04 +0000 Subject: [PATCH 1/8] Added `compressed` prop to `EuiFilterGroup` --- CHANGELOG.md | 2 + .../views/filter_group/filter_group_simple.js | 45 +++++++++++-------- .../__snapshots__/filter_group.test.tsx.snap | 6 +++ src/components/filter_group/filter_button.tsx | 11 ++++- .../filter_group/filter_group.test.tsx | 6 +++ src/components/filter_group/filter_group.tsx | 6 +++ .../amsterdam/overrides/_filter_group.scss | 9 ++++ 7 files changed, 65 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d9c695e98772..86658c3d2c21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,7 @@ ## [`main`](https://github.com/elastic/eui/tree/main) +- Added `compressed` prop to `EuiFilterGroup` ([#0000](https://github.com/elastic/eui/pull/0000)) + **Breaking changes** - Removed Legacy theme including compiled CSS ([#5688](https://github.com/elastic/eui/pull/5688)) diff --git a/src-docs/src/views/filter_group/filter_group_simple.js b/src-docs/src/views/filter_group/filter_group_simple.js index 8639fa850c96..c0191508ed4e 100644 --- a/src-docs/src/views/filter_group/filter_group_simple.js +++ b/src-docs/src/views/filter_group/filter_group_simple.js @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { EuiFilterGroup, EuiFilterButton } from '../../../../src/components'; +import { DisplayToggles } from '../form_controls/display_toggles'; export default () => { const [isFilterOn, setIsFilterOn] = useState(false); @@ -22,23 +23,31 @@ export default () => { }; return ( - - - Single filter - - - On - - - Off - - + + + + Single filter + + + On + + + Off + + + ); }; diff --git a/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap index 910577566b47..069f998a003d 100644 --- a/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap +++ b/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap @@ -8,6 +8,12 @@ exports[`EuiFilterGroup is rendered 1`] = ` /> `; +exports[`EuiFilterGroup props compressed is rendered 1`] = ` +
+`; + exports[`EuiFilterGroup props fullWidth is rendered 1`] = `
& { /** * Bolds the button if true */ @@ -137,6 +143,7 @@ export const EuiFilterButton: FunctionComponent = ({ ); return ( + // @ts-ignore type error { expect(component).toMatchSnapshot(); }); + + test('compressed is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); }); diff --git a/src/components/filter_group/filter_group.tsx b/src/components/filter_group/filter_group.tsx index f502906e2edc..2b5139f282c3 100644 --- a/src/components/filter_group/filter_group.tsx +++ b/src/components/filter_group/filter_group.tsx @@ -17,18 +17,24 @@ export type EuiFilterGroupProps = HTMLAttributes & * Expand the whole bar to fill its parent's width */ fullWidth?: boolean; + /** + * When `true` creates a shorter height filter group + */ + compressed?: boolean; }; export const EuiFilterGroup: FunctionComponent = ({ children, className, fullWidth = false, + compressed, ...rest }) => { const classes = classNames( 'euiFilterGroup', { 'euiFilterGroup--fullWidth': fullWidth, + 'euiFilterGroup--compressed': compressed, }, className ); diff --git a/src/themes/amsterdam/overrides/_filter_group.scss b/src/themes/amsterdam/overrides/_filter_group.scss index 3d907497a7c4..0b29be6e94b7 100644 --- a/src/themes/amsterdam/overrides/_filter_group.scss +++ b/src/themes/amsterdam/overrides/_filter_group.scss @@ -5,6 +5,15 @@ box-shadow: inset 0 0 0 1px $euiFormBorderColor; } +.euiFilterGroup--compressed { + border-radius: $euiFormControlCompressedBorderRadius; + + & .euiFilterButton { + height: $euiButtonHeightSmall; + } +} + + .euiFilterButton { border-radius: 0; border: none; From adf91ff93d4af97cb6bcec155bffb2872757d683 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 14 Mar 2022 17:46:44 +0000 Subject: [PATCH 2/8] Addressing PR review --- CHANGELOG.md | 1 + .../__snapshots__/filter_button.test.tsx.snap | 42 +++++++++---------- src/components/filter_group/filter_button.tsx | 7 +--- src/components/filter_group/filter_group.tsx | 2 +- .../amsterdam/overrides/_filter_group.scss | 10 ++++- 5 files changed, 33 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b6ea7ec5599f..7bf0599e7658 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ **Breaking changes** - Removed Legacy theme including compiled CSS ([#5688](https://github.com/elastic/eui/pull/5688)) +- Removed `flush` and `size` props in `EuiFilterButtonProps` ([#5717](https://github.com/elastic/eui/pull/5717)) ## [`51.1.0`](https://github.com/elastic/eui/tree/v51.1.0) diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap index e0595f5d9cdd..401f57a268ec 100644 --- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap +++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap @@ -1,5 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiFilterButton does not render a badge or count if numFilters is not passed 1`] = ` + +`; + exports[`EuiFilterButton is rendered 1`] = ` `; - -exports[`EuiFilterButton does not render a badge or count if numFilters is not passed 1`] = ` - -`; diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index 50e03c50e130..3ff410012941 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/src/components/filter_group/filter_button.tsx @@ -18,10 +18,7 @@ import { import { useInnerText } from '../inner_text'; -export type EuiFilterButtonProps = Omit< - EuiButtonEmptyProps, - 'flush' | 'size' -> & { +export type EuiFilterButtonProps = { /** * Bolds the button if true */ @@ -53,7 +50,7 @@ export type EuiFilterButtonProps = Omit< * Remove border after button, good for opposite filters */ noDivider?: boolean; -}; +} & Omit; export const EuiFilterButton: FunctionComponent = ({ children, diff --git a/src/components/filter_group/filter_group.tsx b/src/components/filter_group/filter_group.tsx index 2b5139f282c3..e5dcd03d5485 100644 --- a/src/components/filter_group/filter_group.tsx +++ b/src/components/filter_group/filter_group.tsx @@ -18,7 +18,7 @@ export type EuiFilterGroupProps = HTMLAttributes & */ fullWidth?: boolean; /** - * When `true` creates a shorter height filter group + * When `true` creates a shorter height filter group matching that of `compressed` form controls */ compressed?: boolean; }; diff --git a/src/themes/amsterdam/overrides/_filter_group.scss b/src/themes/amsterdam/overrides/_filter_group.scss index 0b29be6e94b7..1e9d76c7e556 100644 --- a/src/themes/amsterdam/overrides/_filter_group.scss +++ b/src/themes/amsterdam/overrides/_filter_group.scss @@ -9,10 +9,16 @@ border-radius: $euiFormControlCompressedBorderRadius; & .euiFilterButton { - height: $euiButtonHeightSmall; + height: $euiFormControlCompressedHeight; } -} + // Override the size to match the default `.euiNotificationBadge` size + .euiFilterButton__notification { + line-height: $euiSize; + height: $euiSize; + min-width: $euiSize; + } +} .euiFilterButton { border-radius: 0; From ac687d9e52c5adedfea00e4570a3866d43362b0e Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 14 Mar 2022 18:12:51 +0000 Subject: [PATCH 3/8] Changing notification badge to default size --- .../filter_group/__snapshots__/filter_button.test.tsx.snap | 6 +++--- src/components/filter_group/filter_button.tsx | 1 - src/themes/amsterdam/overrides/_filter_group.scss | 7 ------- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap index 401f57a268ec..34908e06df0a 100644 --- a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap +++ b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap @@ -140,7 +140,7 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters is rendered /> 5 @@ -165,7 +165,7 @@ exports[`EuiFilterButton props numFilters is rendered 1`] = ` /> 5 @@ -230,7 +230,7 @@ exports[`EuiFilterButton renders zero properly 1`] = ` /> 0 diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index 3ff410012941..1ec1e2ff404d 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/src/components/filter_group/filter_button.tsx @@ -110,7 +110,6 @@ export const EuiFilterButton: FunctionComponent = ({ const badgeContent = showBadge && ( diff --git a/src/themes/amsterdam/overrides/_filter_group.scss b/src/themes/amsterdam/overrides/_filter_group.scss index 1e9d76c7e556..b311a6726e30 100644 --- a/src/themes/amsterdam/overrides/_filter_group.scss +++ b/src/themes/amsterdam/overrides/_filter_group.scss @@ -11,13 +11,6 @@ & .euiFilterButton { height: $euiFormControlCompressedHeight; } - - // Override the size to match the default `.euiNotificationBadge` size - .euiFilterButton__notification { - line-height: $euiSize; - height: $euiSize; - min-width: $euiSize; - } } .euiFilterButton { From df6a0ca41d83f1a33b46ca6e85e8d253e66f65f5 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 14 Mar 2022 18:22:43 +0000 Subject: [PATCH 4/8] CL --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7bf0599e7658..0ba13b818900 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`main`](https://github.com/elastic/eui/tree/main) -- Added `compressed` prop to `EuiFilterGroup` ([#5717](https://github.com/elastic/eui/pull/5717)) +- Added `compressed` prop to `EuiFilterGroup` and reduced the size of the `EuiFilterButton` notification badge ([#5717](https://github.com/elastic/eui/pull/5717)) - Updated `testenv` mock for `EuiIcon` to render `aria-label` as text ([#5709](https://github.com/elastic/eui/pull/5709)) **Breaking changes** From 515d89469fede633347fa3e01885efdeb7d78122 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 15 Mar 2022 11:38:44 +0000 Subject: [PATCH 5/8] Using `DistributiveOmit` instead of `Omit` in a `ExclusiveUnion` --- src/components/filter_group/filter_button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index 1ec1e2ff404d..20323cd4f9c0 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/src/components/filter_group/filter_button.tsx @@ -17,6 +17,7 @@ import { } from '../button/button_empty/button_empty'; import { useInnerText } from '../inner_text'; +import { DistributiveOmit } from '../common'; export type EuiFilterButtonProps = { /** @@ -50,7 +51,7 @@ export type EuiFilterButtonProps = { * Remove border after button, good for opposite filters */ noDivider?: boolean; -} & Omit; +} & DistributiveOmit; export const EuiFilterButton: FunctionComponent = ({ children, @@ -139,7 +140,6 @@ export const EuiFilterButton: FunctionComponent = ({ ); return ( - // @ts-ignore type error Date: Tue, 15 Mar 2022 20:05:09 +0000 Subject: [PATCH 6/8] Update src/components/filter_group/filter_button.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/filter_group/filter_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index 20323cd4f9c0..5356d3b7fd33 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/src/components/filter_group/filter_button.tsx @@ -14,7 +14,7 @@ import { EuiNotificationBadge } from '../badge/notification_badge'; import { EuiButtonEmpty, EuiButtonEmptyProps, -} from '../button/button_empty/button_empty'; +} from '../button/button_empty'; import { useInnerText } from '../inner_text'; import { DistributiveOmit } from '../common'; From 7430440a75b60a6faa9b7f39862a4573bc3069d9 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 15 Mar 2022 20:05:17 +0000 Subject: [PATCH 7/8] Update src/components/filter_group/filter_group.tsx Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- src/components/filter_group/filter_group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/filter_group/filter_group.tsx b/src/components/filter_group/filter_group.tsx index e5dcd03d5485..f747d212d532 100644 --- a/src/components/filter_group/filter_group.tsx +++ b/src/components/filter_group/filter_group.tsx @@ -18,7 +18,7 @@ export type EuiFilterGroupProps = HTMLAttributes & */ fullWidth?: boolean; /** - * When `true` creates a shorter height filter group matching that of `compressed` form controls + * When `true`, creates a shorter height filter group matching that of `compressed` form controls */ compressed?: boolean; }; From b023d0c8b29472f048797dadd5de3a1d9f47ede4 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 15 Mar 2022 20:47:51 +0000 Subject: [PATCH 8/8] Prettier --- src/components/filter_group/filter_button.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index 5356d3b7fd33..8a8fa9136520 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/src/components/filter_group/filter_button.tsx @@ -11,10 +11,7 @@ import classNames from 'classnames'; import { useEuiI18n } from '../i18n'; import { EuiNotificationBadge } from '../badge/notification_badge'; -import { - EuiButtonEmpty, - EuiButtonEmptyProps, -} from '../button/button_empty'; +import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty'; import { useInnerText } from '../inner_text'; import { DistributiveOmit } from '../common';