From 60d553544225daeac9c926f8313d62d3ba57d4a9 Mon Sep 17 00:00:00 2001 From: Kshitij Kotasthane Date: Thu, 1 Oct 2020 10:52:25 -0400 Subject: [PATCH] [EuiFieldSearch] Fix padding when `isClearable` but no value yet (#4089) --- CHANGELOG.md | 5 ++- .../__snapshots__/field_search.test.tsx.snap | 44 ++++++++++++++++--- .../form/field_search/field_search.test.tsx | 16 +++++++ .../form/field_search/field_search.tsx | 2 +- .../selectable_search.test.tsx.snap | 2 +- ...selectable_template_sitewide.test.tsx.snap | 10 ++--- 6 files changed, 66 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e1e95fe5311..375be656fdc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `29.3.0`. +**Bug fixes** + +- Fixed `EuiFieldSearch` padding when `isClearable` but has no `value` ([#4089](https://github.com/elastic/eui/pull/4089)) + ## [`29.3.0`](https://github.com/elastic/eui/tree/v29.3.0) diff --git a/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap b/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap index 2a692824744..555296c356d 100644 --- a/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap +++ b/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap @@ -33,7 +33,7 @@ exports[`EuiFieldSearch props append is rendered 1`] = ` > @@ -49,13 +49,47 @@ exports[`EuiFieldSearch props fullWidth is rendered 1`] = ` > `; +exports[`EuiFieldSearch props isClearable is accepted 1`] = ` + + + + + +`; + +exports[`EuiFieldSearch props isClearable is rendered when a value exists 1`] = ` + + + + + +`; + exports[`EuiFieldSearch props isInvalid is rendered 1`] = ` @@ -83,7 +117,7 @@ exports[`EuiFieldSearch props isLoading is rendered 1`] = ` > @@ -100,7 +134,7 @@ exports[`EuiFieldSearch props prepend is rendered 1`] = ` > diff --git a/src/components/form/field_search/field_search.test.tsx b/src/components/form/field_search/field_search.test.tsx index e42d36da773..f45efeceb5b 100644 --- a/src/components/form/field_search/field_search.test.tsx +++ b/src/components/form/field_search/field_search.test.tsx @@ -65,6 +65,22 @@ describe('EuiFieldSearch', () => { expect(component).toMatchSnapshot(); }); + describe('isClearable', () => { + test('is accepted', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('is rendered when a value exists', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + test('prepend is rendered', () => { const component = render(); diff --git a/src/components/form/field_search/field_search.tsx b/src/components/form/field_search/field_search.tsx index 87507c67ac3..4b8b73d2bb6 100644 --- a/src/components/form/field_search/field_search.tsx +++ b/src/components/form/field_search/field_search.tsx @@ -246,7 +246,7 @@ export class EuiFieldSearch extends Component< 'euiFieldSearch--compressed': compressed, 'euiFieldSearch-isLoading': isLoading, 'euiFieldText--inGroup': prepend || append, - 'euiFieldSearch-isClearable': isClearable, + 'euiFieldSearch-isClearable': isClearable && value, }, className ); diff --git a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap index 80b8396c18a..feaf6298b59 100644 --- a/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap +++ b/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap @@ -15,7 +15,7 @@ exports[`EuiSelectableSearch is rendered 1`] = ` aria-label="aria-label" aria-owns="list" autocomplete="off" - class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch testClass1 testClass2" + class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2" data-test-subj="test subject string" role="combobox" type="search" diff --git a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap index c3f2b69f485..161fb7bc286 100644 --- a/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap +++ b/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap @@ -22,7 +22,7 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = ` aria-haspopup="listbox" aria-label="aria-label" autocomplete="off" - class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search" + class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search" placeholder="Search for anything..." type="search" value="" @@ -68,7 +68,7 @@ exports[`EuiSelectableTemplateSitewide props popoverButton is not rendered with aria-haspopup="listbox" aria-label="Filter options" autocomplete="off" - class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search" + class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search" placeholder="Search for anything..." type="search" value="" @@ -150,7 +150,7 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = ` aria-haspopup="listbox" aria-label="Filter options" autocomplete="off" - class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search" + class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search" placeholder="Search for anything..." type="search" value="" @@ -196,7 +196,7 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = ` aria-haspopup="listbox" aria-label="Filter options" autocomplete="off" - class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search" + class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search" placeholder="Search for anything..." type="search" value="" @@ -242,7 +242,7 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = ` aria-haspopup="listbox" aria-label="Filter options" autocomplete="off" - class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search" + class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch euiSelectableTemplateSitewide__search" placeholder="Search for anything..." type="search" value=""