[EuiFieldSearch] Fix padding when isClearable but no value yet (ela…

…stic#4089)
kshitij86 · Nov 29, 2020 · 60d5535 · 60d5535
1 parent bfba5f9
commit 60d5535
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 13 deletions.
diff --git 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
@@ -33,7 +33,7 @@ exports[`EuiFieldSearch props append is rendered 1`] = `
 >
   <eui-validatable-control>
     <input
-      class="euiFieldSearch euiFieldText--inGroup euiFieldSearch-isClearable"
+      class="euiFieldSearch euiFieldText--inGroup"
       type="search"
     />
   </eui-validatable-control>
@@ -49,13 +49,47 @@ exports[`EuiFieldSearch props fullWidth is rendered 1`] = `
 >
   <eui-validatable-control>
     <input
-      class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+      class="euiFieldSearch euiFieldSearch--fullWidth"
       type="search"
     />
   </eui-validatable-control>
 </eui-form-control-layout>
 `;
 
+exports[`EuiFieldSearch props isClearable is accepted 1`] = `
+<eui-form-control-layout
+  compressed="false"
+  fullwidth="false"
+  icon="search"
+  isloading="false"
+>
+  <eui-validatable-control>
+    <input
+      class="euiFieldSearch"
+      type="search"
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
+
+exports[`EuiFieldSearch props isClearable is rendered when a value exists 1`] = `
+<eui-form-control-layout
+  clear="[object Object]"
+  compressed="false"
+  fullwidth="false"
+  icon="search"
+  isloading="false"
+>
+  <eui-validatable-control>
+    <input
+      class="euiFieldSearch euiFieldSearch-isClearable"
+      type="search"
+      value="Hello"
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
+
 exports[`EuiFieldSearch props isInvalid is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
@@ -67,7 +101,7 @@ exports[`EuiFieldSearch props isInvalid is rendered 1`] = `
     isinvalid="true"
   >
     <input
-      class="euiFieldSearch euiFieldSearch-isClearable"
+      class="euiFieldSearch"
       type="search"
     />
   </eui-validatable-control>
@@ -83,7 +117,7 @@ exports[`EuiFieldSearch props isLoading is rendered 1`] = `
 >
   <eui-validatable-control>
     <input
-      class="euiFieldSearch euiFieldSearch-isLoading euiFieldSearch-isClearable"
+      class="euiFieldSearch euiFieldSearch-isLoading"
       type="search"
     />
   </eui-validatable-control>
@@ -100,7 +134,7 @@ exports[`EuiFieldSearch props prepend is rendered 1`] = `
 >
   <eui-validatable-control>
     <input
-      class="euiFieldSearch euiFieldText--inGroup euiFieldSearch-isClearable"
+      class="euiFieldSearch euiFieldText--inGroup"
       type="search"
     />
   </eui-validatable-control>

diff --git 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(<EuiFieldSearch isClearable />);
+
+        expect(component).toMatchSnapshot();
+      });
+
+      test('is rendered when a value exists', () => {
+        const component = render(
+          <EuiFieldSearch isClearable defaultValue="Hello" />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+
     test('prepend is rendered', () => {
       const component = render(<EuiFieldSearch prepend="Prepend" />);
 

diff --git 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
@@ -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/.../selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/.../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=""