[EuiDatePicker] Add right padding to account for clear icon (#5095)

* [EuiDatePicker] Add right padding to account for clear icon - Should only appear when `onClear` is passed, and if a date is present (`selected`) * Add changelog entry * PR feedback Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Caroline Horn <[email protected]>
elastic · Aug 26, 2021 · e07da8b · e07da8b
1 parent 097238d
commit e07da8b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Fixed default value of `EuiPagination`'s `activePage` to target first page ([#5053](https://github.com/elastic/eui/pull/5053))
 - Fixed screen reader text from displaying in some `EuiDataGrid` cell popovers ([#5087](https://github.com/elastic/eui/pull/5087))
 - Fixed `EuiDatePicker` year dropdown when configured with `minDate` and/or `maxDate` ([#5069](https://github.com/elastic/eui/pull/5069))
+- Fixed `EuiDatePicker`'s clear icon overlaying date text ([#5095](https://github.com/elastic/eui/pull/5095))
 
 **Theme: Amsterdam**
 

diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
@@ -163,6 +163,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
         'euiFieldText--fullWidth': fullWidth,
         'euiFieldText-isLoading': isLoading,
         'euiFieldText--withIcon': !inline && showIcon,
+        'euiFieldText--isClearable': !inline && selected && onClear,
         'euiFieldText-isInvalid': isInvalid,
       },
       className

diff --git a/src/components/form/field_text/_field_text.scss b/src/components/form/field_text/_field_text.scss
@@ -14,3 +14,11 @@
 .euiFieldText--withIcon.euiFieldText--compressed {
   @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true);
 }
+
+.euiFieldText--isClearable {
+  @include euiFormControlWithIcon($isIconOptional: false, $side: 'right', $compressed: false);
+}
+
+.euiFieldText--isClearable.euiFieldText--compressed {
+  @include euiFormControlWithIcon($isIconOptional: false, $side: 'right', $compressed: true);
+}