[EuiFieldSearch] Fix padding when isClearable but no value yet (#4089)

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)
 

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>

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" />);
 

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
  );

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"

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=""