From bd2302be76c7422d5dd93a709fedca108043e4ba Mon Sep 17 00:00:00 2001 From: winnllam Date: Thu, 23 Apr 2020 23:27:39 -0400 Subject: [PATCH 1/7] Start date popover for date picker range starts at the calendar icon --- .../date_picker_range.test.tsx.snap | 22 ++++++++++++------- .../date_picker/date_picker_range.tsx | 4 ++-- 2 files changed, 16 insertions(+), 10 deletions(-) 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.tsx b/src/components/date_picker/date_picker_range.tsx index e81006a708c..ed0d4072fdb 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -65,7 +65,7 @@ export const EuiDatePickerRange: FunctionComponent = ({ className, startDateControl, endDateControl, - iconType = true, + iconType = false, fullWidth, isCustom, readOnly, @@ -100,7 +100,7 @@ export const EuiDatePickerRange: FunctionComponent = ({ startControl = cloneElement( startDateControl as ReactElement, { - showIcon: false, + showIcon: true, fullWidth: fullWidth, readOnly: readOnly, } From 78ee7ee7bb951336c16a85350ad459561c27d8d6 Mon Sep 17 00:00:00 2001 From: winnllam Date: Thu, 23 Apr 2020 23:46:34 -0400 Subject: [PATCH 2/7] Added changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ca6927f2ac6..d30969af162 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ **Bug Fixes** +- Fixed `EuiDatePicker` `startDateControl` where the popover now sits on the left under the icon ([#3383](https://github.com/elastic/eui/pull/3383)) - Fixed z-index issue in `EuiDatePicker` where it's popover would sit beneath other DOM siblings that had z-index applied ([#3376](https://github.com/elastic/eui/pull/3376)) - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364)) - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) From 800bade8a2ddffce528639501b94284ddcc5c7fc Mon Sep 17 00:00:00 2001 From: winnllam Date: Mon, 27 Apr 2020 21:46:23 -0400 Subject: [PATCH 3/7] EuiDatePicker allows for icon input --- src/components/date_picker/date_picker.tsx | 21 ++++++++++++------- .../date_picker/date_picker_range.tsx | 19 +++++++---------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index 2757c6348d1..9fd36d393ac 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -70,6 +70,10 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps { */ onClear?: MouseEventHandler; + /** + * Which icon in input + */ + optionalIcon?: EuiFormControlLayoutIconsProps['icon']; /** * Opens to this date (in moment format) on first press, regardless of selection */ @@ -156,6 +160,8 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { ...rest } = this.props; + let { optionalIcon } = this.props; + const classes = classNames('euiDatePicker', { 'euiDatePicker--shadow': shadow, 'euiDatePicker--inline': inline, @@ -173,13 +179,14 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { className ); - let optionalIcon: EuiFormControlLayoutIconsProps['icon']; - if (inline || customInput || !showIcon) { - optionalIcon = undefined; - } else if (showTimeSelectOnly) { - optionalIcon = 'clock'; - } else { - optionalIcon = 'calendar'; + if (!optionalIcon) { + if (inline || customInput || !showIcon) { + optionalIcon = undefined; + } else if (showTimeSelectOnly) { + optionalIcon = 'clock'; + } else { + optionalIcon = 'calendar'; + } } // In case the consumer did not alter the default date format but wants diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index ed0d4072fdb..cb9bd4242b2 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'; @@ -65,7 +65,7 @@ export const EuiDatePickerRange: FunctionComponent = ({ className, startDateControl, endDateControl, - iconType = false, + iconType = true, fullWidth, isCustom, readOnly, @@ -82,15 +82,12 @@ export const EuiDatePickerRange: FunctionComponent = ({ // Set the icon for the entire group instead of per control let optionalIcon; + let showIcon = false; if (iconType) { - const icon = typeof iconType === 'string' ? iconType : 'calendar'; - optionalIcon = ( - - - - ); + optionalIcon = typeof iconType === 'string' ? iconType : 'calendar'; + showIcon = true; } else { - optionalIcon = null; + optionalIcon = undefined; } let startControl = startDateControl; @@ -100,7 +97,8 @@ export const EuiDatePickerRange: FunctionComponent = ({ startControl = cloneElement( startDateControl as ReactElement, { - showIcon: true, + optionalIcon: optionalIcon, + showIcon: showIcon, fullWidth: fullWidth, readOnly: readOnly, } @@ -123,7 +121,6 @@ export const EuiDatePickerRange: FunctionComponent = ({ children ) : ( - {optionalIcon} {startControl} Date: Mon, 27 Apr 2020 21:53:24 -0400 Subject: [PATCH 4/7] Updated Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d30969af162..cc1617cd02a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `optionalIcon` 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)) From 64d102677fc225a9b7d1c87f070c6e1bc7b82702 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Apr 2020 21:59:58 -0400 Subject: [PATCH 5/7] [Update] Change `optionalIcon` to `iconType` and pass `iconType` in Range directly to first date input --- src/components/date_picker/date_picker.tsx | 29 ++++++++++--------- .../date_picker/date_picker_range.tsx | 14 ++------- 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index 9fd36d393ac..8c06e7457e0 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -70,10 +70,6 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps { */ onClear?: MouseEventHandler; - /** - * Which icon in input - */ - optionalIcon?: EuiFormControlLayoutIconsProps['icon']; /** * Opens to this date (in moment format) on first press, regardless of selection */ @@ -94,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"` */ @@ -133,6 +134,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { excludeDates, filterDate, fullWidth, + iconType, injectTimes, inline, inputRef, @@ -160,8 +162,6 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { ...rest } = this.props; - let { optionalIcon } = this.props; - const classes = classNames('euiDatePicker', { 'euiDatePicker--shadow': shadow, 'euiDatePicker--inline': inline, @@ -179,14 +179,15 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> { className ); - if (!optionalIcon) { - if (inline || customInput || !showIcon) { - optionalIcon = undefined; - } else if (showTimeSelectOnly) { - optionalIcon = 'clock'; - } else { - optionalIcon = 'calendar'; - } + let optionalIcon: EuiFormControlLayoutIconsProps['icon']; + if (inline || customInput || !showIcon) { + optionalIcon = undefined; + } else if (iconType) { + optionalIcon = iconType; + } else if (showTimeSelectOnly) { + optionalIcon = 'clock'; + } else { + optionalIcon = 'calendar'; } // In case the consumer did not alter the default date format but wants diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index cb9bd4242b2..bf354edc135 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -80,16 +80,6 @@ export const EuiDatePickerRange: FunctionComponent = ({ className ); - // Set the icon for the entire group instead of per control - let optionalIcon; - let showIcon = false; - if (iconType) { - optionalIcon = typeof iconType === 'string' ? iconType : 'calendar'; - showIcon = true; - } else { - optionalIcon = undefined; - } - let startControl = startDateControl; let endControl = endDateControl; @@ -97,10 +87,10 @@ export const EuiDatePickerRange: FunctionComponent = ({ startControl = cloneElement( startDateControl as ReactElement, { - optionalIcon: optionalIcon, - showIcon: showIcon, fullWidth: fullWidth, readOnly: readOnly, + iconType: typeof iconType === 'boolean' ? undefined : iconType, + showIcon: !!iconType, } ); From 459a0aa6166b26e6689e453f81fe753e84fd559c Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Apr 2020 22:02:52 -0400 Subject: [PATCH 6/7] CL --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ab57121f328..04c944379e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Added `optionalIcon` prop to `EuiDatePicker` ([#3383](https://github.com/elastic/eui/pull/3383)) +- 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)) @@ -15,7 +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 `EuiDatePicker` `startDateControl` where the popover now sits on the left under the icon ([#3383](https://github.com/elastic/eui/pull/3383)) +- 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) From 2765b98a19850478f167628ea37d4dcd67739a82 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 28 Apr 2020 22:15:30 -0400 Subject: [PATCH 7/7] Removed now obsolete styles associated with removed element --- src/components/date_picker/_date_picker_range.scss | 6 ------ 1 file changed, 6 deletions(-) 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;