From fd4ee900b21c7bfcdbefa35203df2ac765fe3c88 Mon Sep 17 00:00:00 2001 From: Winnie <36285522+winnllam@users.noreply.github.com> Date: Wed, 29 Apr 2020 06:51:18 -0400 Subject: [PATCH] Start date popover for date picker range starts at the calendar icon (#3383) * Start date popover for date picker range starts at the calendar icon * Added changelog entry * EuiDatePicker allows for icon input * Updated Changelog * [Update] Change `optionalIcon` to `iconType` and pass `iconType` in Range directly to first date input * CL * Removed now obsolete styles associated with removed element Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: cchaos --- CHANGELOG.md | 2 ++ .../date_picker_range.test.tsx.snap | 22 ++++++++++++------- .../date_picker/_date_picker_range.scss | 6 ----- src/components/date_picker/date_picker.tsx | 8 +++++++ .../date_picker/date_picker_range.tsx | 19 +++------------- 5 files changed, 27 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 438a74f5479..04c944379e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `iconType` prop to `EuiDatePicker` ([#3383](https://github.com/elastic/eui/pull/3383)) - Applied `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) - Added `titleSize` prop to `EuiStep` and `EuiSteps` ([#3340](https://github.com/elastic/eui/pull/3340)) - Handled `ref` passed to `EuiHeaderSectionItemButton` ([#3378](https://github.com/elastic/eui/pull/3378)) @@ -14,6 +15,7 @@ - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) - Added `ReactElement` to `EuiCard` `image` prop type to allow custom component ([#3370](https://github.com/elastic/eui/pull/3370)) - Fixed `EuiCollapsibleNavGroup` `titleSize` prop type to properly exclude `l` and `m` sizes ([#3365](https://github.com/elastic/eui/pull/3365)) +- Fixed `EuiDatePickerRange` start date popover to sit left under the icon ([#3383](https://github.com/elastic/eui/pull/3383)) ## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0) diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap index e7c0ae33e80..97f683ed143 100644 --- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap @@ -6,13 +6,6 @@ exports[`EuiDatePickerRange is rendered 1`] = ` class="euiDatePickerRange testClass1 testClass2" data-test-subj="test subject string" > - -
-
+
+ +
diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index 4d75335b3bf..a48c3373f5a 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/src/components/date_picker/_date_picker_range.scss @@ -37,12 +37,6 @@ // Direct descendent selectors to override `> span` - > .euiDatePickerRange__icon { - flex: 0 0 auto; - padding-left: $euiFormControlPadding; - padding-right: $euiFormControlPadding; - } - > .euiDatePickerRange__delimeter { background-color: transparent !important; // override .euiFormControlLayout--group .euiText line-height: 1 !important; diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index 2757c6348d1..8c06e7457e0 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -90,6 +90,11 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps { */ showIcon?: boolean; + /** + * Pass an icon type to change the default `calendar` or `clock` icon + */ + iconType?: EuiFormControlLayoutIconsProps['icon']; + /** * Sets the placement of the popover. It accepts: `"bottom"`, `"bottom-end"`, `"bottom-start"`, `"left"`, `"left-end"`, `"right"`, `"right-end"`, `"right-start"`, `"top"`, `"top-end"`, `"top-start"` */ @@ -129,6 +134,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { excludeDates, filterDate, fullWidth, + iconType, injectTimes, inline, inputRef, @@ -176,6 +182,8 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { let optionalIcon: EuiFormControlLayoutIconsProps['icon']; if (inline || customInput || !showIcon) { optionalIcon = undefined; + } else if (iconType) { + optionalIcon = iconType; } else if (showTimeSelectOnly) { optionalIcon = 'clock'; } else { diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index e81006a708c..bf354edc135 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -27,7 +27,7 @@ import React, { import classNames from 'classnames'; import { EuiText } from '../text'; -import { EuiIcon, IconType } from '../icon'; +import { IconType } from '../icon'; import { CommonProps } from '../common'; import { EuiDatePickerProps } from './date_picker'; @@ -80,19 +80,6 @@ export const EuiDatePickerRange: FunctionComponent = ({ className ); - // Set the icon for the entire group instead of per control - let optionalIcon; - if (iconType) { - const icon = typeof iconType === 'string' ? iconType : 'calendar'; - optionalIcon = ( - - - - ); - } else { - optionalIcon = null; - } - let startControl = startDateControl; let endControl = endDateControl; @@ -100,9 +87,10 @@ export const EuiDatePickerRange: FunctionComponent = ({ startControl = cloneElement( startDateControl as ReactElement, { - showIcon: false, fullWidth: fullWidth, readOnly: readOnly, + iconType: typeof iconType === 'boolean' ? undefined : iconType, + showIcon: !!iconType, } ); @@ -123,7 +111,6 @@ export const EuiDatePickerRange: FunctionComponent = ({ children ) : ( - {optionalIcon} {startControl}