From 40782afef370033e893504d28d364d959b8889dc Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 11 Apr 2023 15:13:13 -0700 Subject: [PATCH 01/13] [docs setup] Make certain boolean flags/props more easily testable --- src-docs/src/views/date_picker/range.tsx | 2 +- .../form_control_layout_range.tsx | 45 +++++++++++++++++++ .../src/views/super_date_picker/playground.js | 14 ++++++ 3 files changed, 60 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/date_picker/range.tsx b/src-docs/src/views/date_picker/range.tsx index 65a08a8a655..a9ecf02cbc6 100644 --- a/src-docs/src/views/date_picker/range.tsx +++ b/src-docs/src/views/date_picker/range.tsx @@ -10,7 +10,7 @@ export default () => { return ( /* DisplayToggles wrapper for Docs only */ - + endDate} startDateControl={ diff --git a/src-docs/src/views/form_controls/form_control_layout_range.tsx b/src-docs/src/views/form_controls/form_control_layout_range.tsx index 9425c27c43e..ec15ef02c19 100644 --- a/src-docs/src/views/form_controls/form_control_layout_range.tsx +++ b/src-docs/src/views/form_controls/form_control_layout_range.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { EuiFormControlLayoutDelimited, EuiFormLabel, + EuiFieldNumber, EuiIcon, } from '../../../../src/components'; @@ -218,5 +219,49 @@ export default () => ( /> } /> + + Disabled} + startControl={ + + } + endControl={ + + } + /> + + Invalid} + startControl={ + + } + endControl={ + + } + /> ); diff --git a/src-docs/src/views/super_date_picker/playground.js b/src-docs/src/views/super_date_picker/playground.js index fb35eb69d49..b593cdc7924 100644 --- a/src-docs/src/views/super_date_picker/playground.js +++ b/src-docs/src/views/super_date_picker/playground.js @@ -18,6 +18,20 @@ export const superDatePickerConfig = () => { propsToUse.onTimeChange = simulateFunction(propsToUse.onTimeChange, true); propsToUse.onRefreshChange = simulateFunction(propsToUse.onRefreshChange); + propsToUse.isPaused = { + ...propsToUse.isPaused, + type: PropTypes.Boolean, + defaultValue: true, + value: true, + }; + + propsToUse.showUpdateButton = { + ...propsToUse.showUpdateButton, + type: PropTypes.Boolean, + defaultValue: true, + value: true, + }; + propsToUse.locale = { ...propsToUse.locale, type: PropTypes.String, From 28e49b288474be584a8565a6f78537a5b6f07a56 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 12 Apr 2023 09:33:15 -0700 Subject: [PATCH 02/13] [bugfix] Fix `EuiFormControlLayoutDelimited` not displaying `isInvalid` state on mount - needs a state rerender on mount - ref is insufficient + update tests to use RTL instead of enzyme and move to inline snapshots --- .../validatable_control.test.tsx.snap | 3 -- .../validatable_control.test.tsx | 42 ++++++++++++------- .../validatable_control.tsx | 11 +++-- upcoming_changelogs/6705.md | 3 ++ 4 files changed, 36 insertions(+), 23 deletions(-) delete mode 100644 src/components/form/validatable_control/__snapshots__/validatable_control.test.tsx.snap create mode 100644 upcoming_changelogs/6705.md diff --git a/src/components/form/validatable_control/__snapshots__/validatable_control.test.tsx.snap b/src/components/form/validatable_control/__snapshots__/validatable_control.test.tsx.snap deleted file mode 100644 index e7d4404985b..00000000000 --- a/src/components/form/validatable_control/__snapshots__/validatable_control.test.tsx.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiValidatableControl is rendered 1`] = ``; diff --git a/src/components/form/validatable_control/validatable_control.test.tsx b/src/components/form/validatable_control/validatable_control.test.tsx index 0c1972d461c..f5057a8d98c 100644 --- a/src/components/form/validatable_control/validatable_control.test.tsx +++ b/src/components/form/validatable_control/validatable_control.test.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { render, mount } from 'enzyme'; +import { render } from '@testing-library/react'; import { renderHook } from '@testing-library/react-hooks'; import { @@ -17,23 +17,33 @@ import { describe('EuiValidatableControl', () => { test('is rendered', () => { - const component = render( - + const { container, rerender } = render( + ); + expect(container.firstChild).toMatchInlineSnapshot(` + + `); - expect(component).toMatchSnapshot(); + rerender( + + + + ); + expect(container.firstChild).toMatchInlineSnapshot(''); }); test('aria-invalid allows falling back to prop set on the child input', () => { - const component = render( + const { container } = render( ); - expect(component).toMatchInlineSnapshot(` + expect(container.firstChild).toMatchInlineSnapshot(` @@ -44,7 +54,7 @@ describe('EuiValidatableControl', () => { it('calls a ref function', () => { const ref = jest.fn(); - mount( + render( @@ -59,7 +69,7 @@ describe('EuiValidatableControl', () => { it('sets a ref object\'s "current" property', () => { const ref = React.createRef(); - mount( + render( @@ -78,13 +88,13 @@ describe('EuiValidatableControl', () => { ); - const wrapper = mount(); + const { rerender } = render(); expect(ref).toHaveBeenCalledTimes(1); expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput'); // Force re-render - wrapper.setProps({}); + rerender(); expect(ref).toHaveBeenCalledTimes(1); expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput'); @@ -99,13 +109,13 @@ describe('EuiValidatableControl', () => { ); - const wrapper = mount(); + const { rerender } = render(); expect(ref).toHaveBeenCalledTimes(1); expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput'); // Force re-render - wrapper.setProps({}); + rerender(); expect(ref).toHaveBeenCalledTimes(3); @@ -126,12 +136,12 @@ describe('EuiValidatableControl', () => { ); - const wrapper = mount(); + const { rerender } = render(); expect(ref).toHaveBeenCalledTimes(1); expect(ref.mock.calls[0][0].getAttribute('id')).toBe('testInput'); - wrapper.setProps({ change: true }); + rerender(); expect(ref).toHaveBeenCalledTimes(3); @@ -155,14 +165,14 @@ describe('EuiValidatableControl', () => { ); - const wrapper = mount(); + const { rerender } = render(); expect(ref.current).not.toBeNull(); expect(ref.current!.getAttribute('id')).toBe('testInput'); const prevRef = ref.current; - wrapper.setProps({ change: true }); + rerender(); expect(ref.current).not.toBeNull(); expect(ref.current!.getAttribute('id')).toBe('testInput2'); diff --git a/src/components/form/validatable_control/validatable_control.tsx b/src/components/form/validatable_control/validatable_control.tsx index 1ae8932911f..748060441c3 100644 --- a/src/components/form/validatable_control/validatable_control.tsx +++ b/src/components/form/validatable_control/validatable_control.tsx @@ -13,7 +13,7 @@ import { ReactElement, Ref, FunctionComponent, - useRef, + useState, useEffect, useCallback, } from 'react'; @@ -45,14 +45,17 @@ export interface EuiValidatableControlProps { export const EuiValidatableControl: FunctionComponent< CommonProps & EuiValidatableControlProps > = ({ isInvalid, children }) => { - const control = useRef(null); + // Note that this must be state and not a ref to cause a rerender/set invalid state on initial mount + const [control, setControl] = useState( + null + ); const child = Children.only(children); const childRef = child.ref; const replacedRef = useCallback( (element: HTMLConstraintValidityElement) => { - control.current = element; + setControl(element); // Call the original ref, if any if (typeof childRef === 'function') { @@ -64,7 +67,7 @@ export const EuiValidatableControl: FunctionComponent< [childRef] ); - useSetControlValidity({ controlEl: control.current, isInvalid }); + useSetControlValidity({ controlEl: control, isInvalid }); return cloneElement(child, { ref: replacedRef, diff --git a/upcoming_changelogs/6705.md b/upcoming_changelogs/6705.md new file mode 100644 index 00000000000..ca14a68e67a --- /dev/null +++ b/upcoming_changelogs/6705.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiValidatableControl` to correctly display `isInvalid` states on mount From 7ca44eefffc997b56843afc470100551d1e04519 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 11 Apr 2023 17:47:36 -0700 Subject: [PATCH 03/13] [EuiFormControlLayout] Clean up positioning override CSS & side CSS - Positioning: prefer a prop instead, so that each usage (e.g. delimited, ranges) can pass in their own custom control over absolute vs static positioning - Side: clean up EuiFormLayoutControlIcons to render separate for left vs right side, which makes for better and more correct DOM order, + clean up classes + misc cleanup --- .../form_control_layout.test.tsx.snap | 59 +++++++++++++--- .../_form_control_layout_delimited.scss | 17 ----- .../_form_control_layout_icons.scss | 33 +++++++-- .../form_control_layout.test.tsx | 17 ++++- .../form_control_layout.tsx | 68 +++++++++++++++---- .../form_control_layout_delimited.tsx | 2 +- .../form_control_layout_icons.tsx | 55 ++++++--------- upcoming_changelogs/6705.md | 2 + 8 files changed, 171 insertions(+), 82 deletions(-) diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap index 3207fcb040a..226a92b3285 100644 --- a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap +++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap @@ -22,7 +22,7 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = ` class="euiFormControlLayout__childrenWrapper" >
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap index 09b2b778b60..ee65360e55b 100644 --- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap @@ -108,7 +108,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
- - -
+ + +
`; @@ -43,14 +43,8 @@ exports[`EuiFieldPassword props compressed is rendered 1`] = `
- - -
+ + +
`; @@ -73,14 +73,8 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
- - -
+ + +
`; @@ -200,16 +200,8 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
- - -
+ + +
- - -
+ + +
- - -
+ + +
`; @@ -392,14 +392,8 @@ exports[`EuiFieldPassword props type text is rendered 1`] = `
- - -
+ + +
`; diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap index 759b2fa8f74..d28059b4059 100644 --- a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap @@ -562,7 +562,7 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo value="8" />
- - -
+ + + + +
-
+
`; @@ -40,6 +40,19 @@ exports[`EuiSelectableSearch renders aria props if a listId is present 1`] = `
+
+ + +
+
+
+`; + +exports[`EuiSelectableSearch renders placeholder, value, name, and other remaining EuiFieldSearch props 1`] = ` +
+
-
-
-`; - -exports[`EuiSelectableSearch renders placeholder, value, name, and other remaining EuiFieldSearch props 1`] = ` -
-
- - -
-

-

+

-

+

-

+

-

+

-

+

-

+
-
+

-

+

-

+

-

+

+

+ + +
- - -
-

-

+
-
+
-
+
-
+

-

+ Date: Tue, 11 Apr 2023 18:19:58 -0700 Subject: [PATCH 06/13] Convert `EuiDatePickerRange` to use `EuiFormControlLayoutDelimited` - instead of using its own custom delimiter + add `controlOnly` support to the `EuiDatePicker` to avoid nested control layouts (matches `EuiFieldText/Number`) + add `append/prepend` props for future `EuiSuperDatePicker` use (& DRY out other props shared w/ `EuiFormControlLayoutDelimited`) --- .../date_picker_range.test.tsx.snap | 568 ++++++++---------- src/components/date_picker/date_picker.tsx | 105 ++-- .../date_picker/date_picker_range.tsx | 145 +++-- upcoming_changelogs/6705.md | 1 + 4 files changed, 364 insertions(+), 455 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 8fbf882c855..e3c7d02ae8e 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 @@ -2,464 +2,366 @@ exports[`EuiDatePickerRange disabled is rendered 1`] = `
-
+ + +
+
-
-
- -
-
-
-
- - +
- - - - -
+ + to + +
+
-
-
- -
-
+
- +
`; exports[`EuiDatePickerRange is rendered 1`] = `
-
+ + +
+
-
-
- -
-
-
-
- - +
- - - - -
+ + to + +
+
-
-
- -
-
+
- +
`; exports[`EuiDatePickerRange isInvalid is rendered 1`] = `
-
+ + +
+
-
-
- -
-
-
-
- - -
-
-
- - - - -
+ + to + +
+
-
-
- -
-
-
-
-
- +
+ +
+
`; exports[`EuiDatePickerRange readOnly is rendered 1`] = `
-
+ + +
+
-
-
- -
-
-
-
- - +
- - - - -
+ + to + +
+
-
-
- -
-
+
- +
`; exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
-
+ + +
+
-
-
- -
-
-
-
- - +
- - - - -
+ + to + +
+
-
-
- -
-
+
- +
`; diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx index 05e4db05844..a82cb76af81 100644 --- a/src/components/date_picker/date_picker.tsx +++ b/src/components/date_picker/date_picker.tsx @@ -126,6 +126,12 @@ interface EuiExtendedDatePickerProps * **Use [EuiPopover](/#/layout/popover) values**: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'. */ popoverPlacement?: PopoverAnchorPosition; + + /** + * Completely removes form control layout wrapper and ignores + * iconType. Best used inside EuiFormControlLayoutDelimited. + */ + controlOnly?: boolean; } export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps; @@ -134,6 +140,7 @@ export const EuiDatePicker: FunctionComponent = ({ adjustDateOnChange = true, calendarClassName, className, + controlOnly, customInput, dateFormat = euiDatePickerDefaultDateFormat, dayClassName, @@ -173,10 +180,12 @@ export const EuiDatePicker: FunctionComponent = ({ 'euiDatePicker--inline': inline, }); - const numIconsClass = getFormControlClassNameForIconCount({ - isInvalid, - isLoading, - }); + const numIconsClass = controlOnly + ? false + : getFormControlClassNameForIconCount({ + isInvalid, + isLoading, + }); const datePickerClasses = classNames( 'euiDatePicker', @@ -217,6 +226,52 @@ export const EuiDatePicker: FunctionComponent = ({ useEuiValidatableControl({ isInvalid, controlEl: inputValidityRef }); const inputRefs = useCombinedRefs([inputRef, setInputValidityRef]); + const control = ( + + {({ locale: contextLocale }) => { + return ( + + ); + }} + + ); + + if (controlOnly) return control; + return ( = ({ isLoading={isLoading} isInvalid={isInvalid} > - - {({ locale: contextLocale }) => { - return ( - - ); - }} - + {control} ); diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx index 7c48bf777b8..1b5cc77c05a 100644 --- a/src/components/date_picker/date_picker_range.tsx +++ b/src/components/date_picker/date_picker_range.tsx @@ -9,7 +9,6 @@ import React, { FocusEvent, FocusEventHandler, - Fragment, FunctionComponent, ReactNode, cloneElement, @@ -17,66 +16,59 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { IconType, EuiIcon } from '../icon'; +import { + EuiFormControlLayoutDelimited, + EuiFormControlLayoutDelimitedProps, +} from '../form'; +import { IconType } from '../icon'; import { CommonProps } from '../common'; import { EuiDatePickerProps } from './date_picker'; -export type EuiDatePickerRangeProps = CommonProps & { - /** - * Including any children will replace all innards with the provided children - */ - children?: ReactNode; - - /** - * The end date `EuiDatePicker` element - */ - endDateControl: ReactElement; - - /** - * The start date `EuiDatePicker` element - */ - startDateControl: ReactElement; - - /** - * Pass either an icon type or set to `false` to remove icon entirely - */ - iconType?: boolean | IconType; - - /** - * Won't apply any additional props to start and end date components - */ - isCustom?: boolean; - - /** - * Will color the range delimiter the `danger` color and pass through to each control - */ - isInvalid?: boolean; - - /** - * Passes through to each control - */ - disabled?: boolean; - - /** - * Passes through to each control - */ - readOnly?: boolean; - - /** - * Passes through to each control - */ - fullWidth?: boolean; - - /** - * Triggered whenever the start or end controls are blurred - */ - onBlur?: FocusEventHandler; - - /** - * Triggered whenever the start or end controls are focused - */ - onFocus?: FocusEventHandler; -}; +export type EuiDatePickerRangeProps = CommonProps & + Pick< + EuiFormControlLayoutDelimitedProps, + 'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append' + > & { + /** + * Including any children will replace all innards with the provided children + */ + children?: ReactNode; + + /** + * The end date `EuiDatePicker` element + */ + endDateControl: ReactElement; + + /** + * The start date `EuiDatePicker` element + */ + startDateControl: ReactElement; + + /** + * Pass either an icon type or set to `false` to remove icon entirely + */ + iconType?: boolean | IconType; + + /** + * Won't apply any additional props to start and end date components + */ + isCustom?: boolean; + + /** + * Passes through to each control + */ + disabled?: boolean; + + /** + * Triggered whenever the start or end controls are blurred + */ + onBlur?: FocusEventHandler; + + /** + * Triggered whenever the start or end controls are focused + */ + onFocus?: FocusEventHandler; + }; export const EuiDatePickerRange: FunctionComponent = ({ children, @@ -91,6 +83,8 @@ export const EuiDatePickerRange: FunctionComponent = ({ disabled, onFocus, onBlur, + append, + prepend, ...rest }) => { const classes = classNames( @@ -111,8 +105,8 @@ export const EuiDatePickerRange: FunctionComponent = ({ startControl = cloneElement( startDateControl as ReactElement, { - iconType: typeof iconType === 'boolean' ? undefined : iconType, - showIcon: !!iconType, + controlOnly: true, + showIcon: false, fullWidth: fullWidth, readOnly: readOnly, disabled: disabled || startDateControl.props.disabled, @@ -135,6 +129,7 @@ export const EuiDatePickerRange: FunctionComponent = ({ endControl = cloneElement( endDateControl as ReactElement, { + controlOnly: true, showIcon: false, fullWidth: fullWidth, readOnly: readOnly, @@ -157,23 +152,19 @@ export const EuiDatePickerRange: FunctionComponent = ({ ); } - const delimiter = ( - - - - ); - return ( -
- {children ? ( - children - ) : ( - - {startControl} - {delimiter} - {endControl} - - )} -
+ ); }; diff --git a/upcoming_changelogs/6705.md b/upcoming_changelogs/6705.md index 29b60964d31..23d4522bdd5 100644 --- a/upcoming_changelogs/6705.md +++ b/upcoming_changelogs/6705.md @@ -1,4 +1,5 @@ - Updated `EuiFormControlLayoutIcons` to render left icons in expected DOM order +- Updated `EuiDatePickerRange`'s `isInvalid` state to match other range inputs **Bug fixes** From f75da636d265ed35b029176b03c5b49febdc99a9 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 11 Apr 2023 18:22:34 -0700 Subject: [PATCH 07/13] Remove unnecessary CSS - EuiFormControlLayoutDelimited should be doing almost all the CSS heavy lifting at this point --- .../date_picker/_date_picker_range.scss | 60 ------------------- .../amsterdam/overrides/_date_picker.scss | 4 -- 2 files changed, 64 deletions(-) diff --git a/src/components/date_picker/_date_picker_range.scss b/src/components/date_picker/_date_picker_range.scss index a70bb73f80b..5ef1251be83 100644 --- a/src/components/date_picker/_date_picker_range.scss +++ b/src/components/date_picker/_date_picker_range.scss @@ -1,65 +1,5 @@ -/** - * 1. Account for inner box-shadow style border - */ - .euiDatePickerRange { - @include euiFormControlSize(auto, $includeAlternates: true); - // Match just the regular drop shadow of inputs - @include euiFormControlDefaultShadow; - display: flex; - align-items: center; - padding: 1px; /* 1 */ - - // Allow any child to fill entire range container - > * { - flex-grow: 1; - } - .euiFieldText.euiDatePicker { height: $euiFormControlLayoutGroupInputHeight; - // including all states - box-shadow: none !important; // stylelint-disable-line declaration-no-important - text-align: center; - } - - .euiDatePickerRange__start { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .euiDatePickerRange__end { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .react-datepicker-popper .euiFieldText.euiDatePicker { - // set any subsequent children in popper back to left align - text-align: left; - } - - // Necessary for EuiSuperDatePicker - &--inGroup { - box-shadow: none; - padding: 0; } } - -.euiDatePickerRange--isDisabled { - background: $euiFormBackgroundDisabledColor; -} - -.euiDatePickerRange--readOnly { - background: $euiFormBackgroundReadOnlyColor; -} - -.euiDatePickerRange__delimeter { - align-self: stretch; - height: auto; - flex-grow: 0; - display: flex; - align-items: center; -} - -.euiDatePickerRange--isInvalid:not(.euiDatePickerRange--isDisabled):not(.euiDatePickerRange--readOnly) .euiDatePickerRange__delimeter { - @include euiFormControlInvalidStyle; -} diff --git a/src/themes/amsterdam/overrides/_date_picker.scss b/src/themes/amsterdam/overrides/_date_picker.scss index f12fceeb07b..a2bc8ea1b50 100644 --- a/src/themes/amsterdam/overrides/_date_picker.scss +++ b/src/themes/amsterdam/overrides/_date_picker.scss @@ -8,10 +8,6 @@ } } -.euiDatePickerRange { - border-radius: $euiFormControlBorderRadius; -} - .euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { border: none; } From 028e1d23f6bd47649bd1502415c4362e3cf5f627 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 11 Apr 2023 18:30:52 -0700 Subject: [PATCH 08/13] Convert `EuiSuperDatePicker` to work with new `EuiDatePickerRange` - Remove duplicated `EuiFormControlLayout` - only render if `EuiDateRangePicker` isn't being used - Add `isLoading` display to picker if update button isn't being shown - Fix icons not displaying correctly if `isQuickSelectOnly` is true --- .../super_date_picker.test.tsx.snap | 931 +++++++++--------- .../super_date_picker/super_date_picker.tsx | 142 +-- upcoming_changelogs/6705.md | 1 + 3 files changed, 522 insertions(+), 552 deletions(-) diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index d753a10e5c1..c8c4d594cba 100644 --- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -10,7 +10,8 @@ exports[`EuiSuperDatePicker is rendered 1`] = ` } > - } - iconType={false} - isCustom={true} - startDateControl={
} + - + + } > - } - iconType={false} - isCustom={true} - startDateControl={
} + - + + } > - } - iconType={false} - isCustom={true} - startDateControl={
} + - - - - - - - -`; - -exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = ` - - - + + + + + + + + +`; + +exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = ` + + + `; @@ -1021,7 +1000,9 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = ` } > - } - iconType={false} - isCustom={true} - startDateControl={
} + - + + @@ -1583,7 +1557,8 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = ` } > - } - iconType={false} - isCustom={true} - startDateControl={
} + - + + } > - } - iconType={false} - isCustom={true} - startDateControl={
} + - + + } > - } - iconType={false} - isCustom={true} - startDateControl={
} + - + + { + const { + start, + end, + customQuickSelectPanels, + customQuickSelectRender, + commonlyUsedRanges, + timeOptions, + dateFormat, + onRefreshChange, + recentlyUsedRanges, + refreshInterval, + isPaused, + isDisabled, + } = this.props; + + return ( + + ); + }; + renderDatePickerRange = () => { const { end, @@ -407,30 +444,61 @@ export class EuiSuperDatePickerInternal extends Component< start, } = this.state; const { + isQuickSelectOnly, + showUpdateButton, commonlyUsedRanges, timeOptions, dateFormat, + refreshInterval, + isPaused, isDisabled, + isLoading, locale, timeFormat, utcOffset, compressed, onFocus, + className, + 'data-test-subj': dataTestSubj, } = this.props; + const autoRefreshAppend: EuiFormControlLayoutProps['append'] = !isPaused ? ( + + ) : undefined; + + const formControlLayoutProps = { + className: classNames('euiSuperDatePicker', className), + compressed, + isInvalid, + isLoading: isLoading && !showUpdateButton, + disabled: isDisabled, + prepend: this.renderQuickSelect(), + append: autoRefreshAppend, + 'data-test-subj': dataTestSubj, + }; + + if (isQuickSelectOnly) { + return ( + + ); + } + if ( showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen ) { return ( - } - endDateControl={
} - > + - + ); } @@ -455,11 +523,9 @@ export class EuiSuperDatePickerInternal extends Component< {({ locale: contextLocale }) => ( - ) : undefined; - - const quickSelect = ( - - ); - const flexWrapperClasses = classNames('euiSuperDatePicker__flexWrapper', { 'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton, 'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly, @@ -634,18 +661,7 @@ export class EuiSuperDatePickerInternal extends Component< ) : ( <> - - - {!isQuickSelectOnly && this.renderDatePickerRange()} - - + {this.renderDatePickerRange()} {this.renderUpdateButton()} )} diff --git a/upcoming_changelogs/6705.md b/upcoming_changelogs/6705.md index 23d4522bdd5..db8eb385a0a 100644 --- a/upcoming_changelogs/6705.md +++ b/upcoming_changelogs/6705.md @@ -1,5 +1,6 @@ - Updated `EuiFormControlLayoutIcons` to render left icons in expected DOM order - Updated `EuiDatePickerRange`'s `isInvalid` state to match other range inputs +- Updated `EuiSuperDatePicker`'s `isInvalid` state to match other range inputs **Bug fixes** From b5c077db94170ad9f27b46a5b2fe514aed97e548 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 11 Apr 2023 18:35:03 -0700 Subject: [PATCH 09/13] [EuiSuperDatePicker] Fix styling and `fullWidth` not applying to non-input children + fix extra padding on delimiter arrow when prepend/append exist + clean up/DRY out invalid styling on icons & delimiter --- .../super_date_picker/_super_date_picker.scss | 8 +++++++- .../form/form_control_layout/_form_control_layout.scss | 4 ++-- .../_form_control_layout_delimited.scss | 9 +++------ 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss index f48300548a7..3d809ca25f2 100644 --- a/src/components/date_picker/super_date_picker/_super_date_picker.scss +++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss @@ -38,8 +38,10 @@ max-width: 100% !important; > .euiFormControlLayout__childrenWrapper { - flex: 1 1 100%; + display: flex; + align-items: center; overflow: hidden; + background-color: $euiFormBackgroundColor; > .euiDatePickerRange { max-width: none; @@ -55,6 +57,10 @@ border-bottom-right-radius: 0; } } + + & > .euiFormControlLayoutDelimited__input { + flex-grow: 1; + } } } diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss index 6f0a4dea77b..dcd8d2b0ca1 100644 --- a/src/components/form/form_control_layout/_form_control_layout.scss +++ b/src/components/form/form_control_layout/_form_control_layout.scss @@ -128,7 +128,7 @@ // TEXT .euiFormLabel, - .euiText { + .euiText:not(.euiFormControlLayoutDelimited__delimiter) { background-color: $euiFormInputGroupLabelBackground; padding: $euiFormControlPadding; line-height: $euiSize !important; @@ -171,7 +171,7 @@ // Padding .euiFormLabel, - .euiText { + .euiText:not(.euiFormControlLayoutDelimited__delimiter) { padding: $euiFormControlCompressedPadding; // If the next sibling is not the input, pull it closer to the text to reduce space diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss index 0c7c51c4dee..59a5635e433 100644 --- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss +++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss @@ -24,7 +24,7 @@ // Target when the euiFormControlLayout is fullWidth without specifying the full class name in case it ever changes &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper, - &[class*='--fullWidth'] input { + &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper > *:not(.euiFormControlLayoutDelimited__delimiter):not(.euiFormControlLayoutIcons) { width: 100%; max-width: none; } @@ -50,7 +50,8 @@ } } - &--isInvalid .euiFormControlLayoutIcons { + &--isInvalid .euiFormControlLayoutIcons, + &--isInvalid .euiFormControlLayoutDelimited__delimiter { @include euiFormControlInvalidStyle; } } @@ -71,8 +72,4 @@ display: flex; align-items: center; line-height: 1; // Override EuiText line-height - - &--isInvalid { - @include euiFormControlInvalidStyle; - } } From ea6619f452c26eb1c0bad419e47b81ac51357608 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 11 Apr 2023 18:35:54 -0700 Subject: [PATCH 10/13] [EuiSuperDatePicker] Fix border-radius & remove unnecessary CSS/overrides --- .../super_date_picker/_super_date_picker.scss | 13 +------------ .../date_popover/_date_popover_button.scss | 4 ++-- src/themes/amsterdam/overrides/_date_picker.scss | 10 ---------- .../amsterdam/overrides/_date_popover_button.scss | 14 -------------- src/themes/amsterdam/overrides/_index.scss | 1 - 5 files changed, 3 insertions(+), 39 deletions(-) delete mode 100644 src/themes/amsterdam/overrides/_date_popover_button.scss diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss index 3d809ca25f2..66c53d8764a 100644 --- a/src/components/date_picker/super_date_picker/_super_date_picker.scss +++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss @@ -43,21 +43,10 @@ overflow: hidden; background-color: $euiFormBackgroundColor; - > .euiDatePickerRange { - max-width: none; - width: auto; + &:last-child { border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0; } - &:not(:last-child) > .euiDatePickerRange { - &, - .euiDatePopoverButton--end, - .euiSuperDatePicker__prettyFormat { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - & > .euiFormControlLayoutDelimited__input { flex-grow: 1; } diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss index 5042743941c..96f20dde83b 100644 --- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss +++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss @@ -44,9 +44,9 @@ } .euiDatePopoverButton--start { - text-align: right; + text-align: center; } .euiDatePopoverButton--end { - text-align: left; + text-align: center; } diff --git a/src/themes/amsterdam/overrides/_date_picker.scss b/src/themes/amsterdam/overrides/_date_picker.scss index a2bc8ea1b50..aebe13a68d4 100644 --- a/src/themes/amsterdam/overrides/_date_picker.scss +++ b/src/themes/amsterdam/overrides/_date_picker.scss @@ -11,13 +11,3 @@ .euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker { border: none; } - -.euiSuperDatePicker__prettyFormat { - border-top-right-radius: $euiFormControlBorderRadius; - border-bottom-right-radius: $euiFormControlBorderRadius; -} - -.euiFormControlLayout--compressed.euiSuperDatePicker .euiSuperDatePicker__prettyFormat { - border-top-right-radius: $euiFormControlCompressedBorderRadius; - border-bottom-right-radius: $euiFormControlCompressedBorderRadius; -} diff --git a/src/themes/amsterdam/overrides/_date_popover_button.scss b/src/themes/amsterdam/overrides/_date_popover_button.scss deleted file mode 100644 index 6b5d91cd27f..00000000000 --- a/src/themes/amsterdam/overrides/_date_popover_button.scss +++ /dev/null @@ -1,14 +0,0 @@ -.euiDatePopoverButton--start { - text-align: center; -} - -.euiDatePopoverButton--end { - text-align: center; - border-top-right-radius: $euiFormControlBorderRadius; - border-bottom-right-radius: $euiFormControlBorderRadius; - - &.euiDatePopoverButton--compressed { - border-top-right-radius: $euiFormControlCompressedBorderRadius; - border-bottom-right-radius: $euiFormControlCompressedBorderRadius; - } -} diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss index f3c16fa9c2f..7fb853f7628 100644 --- a/src/themes/amsterdam/overrides/_index.scss +++ b/src/themes/amsterdam/overrides/_index.scss @@ -1,7 +1,6 @@ @import 'combo_box'; @import 'data_grid'; @import 'date_picker'; -@import 'date_popover_button'; @import 'description_list'; @import 'filter_group'; @import 'form_control_layout'; From 759fc896abc594724b6514cafe2246112d9faaef Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 12 Apr 2023 12:54:30 -0700 Subject: [PATCH 11/13] [EuiSuperDatePicker] Update color of delimiter arrow during `needs update` state to match Figma --- .../super_date_picker/_super_date_picker.scss | 19 +++++++++++++++++++ .../super_date_picker/_variables.scss | 3 +++ .../date_popover/_date_popover_button.scss | 7 ++----- .../super_date_picker/super_date_picker.tsx | 4 ++++ 4 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss index 66c53d8764a..0b9254923a6 100644 --- a/src/components/date_picker/super_date_picker/_super_date_picker.scss +++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss @@ -70,3 +70,22 @@ cursor: not-allowed; } } + +/** +* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating` +*/ +.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles + .euiFormControlLayoutDelimited__delimiter { + background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor; + color: $euiSuperDatePickerNeedsUpdatingTextColor; + + .euiIcon { + color: currentcolor; + } + } +} + +.euiSuperDatePicker .euiFormControlLayoutDelimited__delimiter, +.euiSuperDatePicker .euiFormControlLayoutIcons { + transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton +} diff --git a/src/components/date_picker/super_date_picker/_variables.scss b/src/components/date_picker/super_date_picker/_variables.scss index 83f209098c2..d881875a56e 100644 --- a/src/components/date_picker/super_date_picker/_variables.scss +++ b/src/components/date_picker/super_date_picker/_variables.scss @@ -1,2 +1,5 @@ $euiSuperDatePickerWidth: $euiSize * 30; $euiSuperDatePickerButtonWidth: $euiButtonMinWidth + ($euiSizeXS * 1.5); + +$euiSuperDatePickerNeedsUpdatingBackgroundColor: tintOrShade($euiColorSuccess, 90%, 70%); +$euiSuperDatePickerNeedsUpdatingTextColor: makeHighContrastColor($euiColorSuccess, $euiSuperDatePickerNeedsUpdatingBackgroundColor); diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss index 96f20dde83b..b704cf0c003 100644 --- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss +++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss @@ -13,11 +13,8 @@ } &-needsUpdating { - $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%); - $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor); - - background-color: $backgroundColor; - color: $textColor; + background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor; + color: $euiSuperDatePickerNeedsUpdatingTextColor; &:focus, &.euiDatePopoverButton-isSelected { diff --git a/src/components/date_picker/super_date_picker/super_date_picker.tsx b/src/components/date_picker/super_date_picker/super_date_picker.tsx index 36cf5699ef9..52c928cad84 100644 --- a/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -524,6 +524,10 @@ export class EuiSuperDatePickerInternal extends Component< {({ locale: contextLocale }) => ( Date: Wed, 12 Apr 2023 13:01:25 -0700 Subject: [PATCH 12/13] [EuiSuperDatePicker] Fix invalid & disabled state to match other form controls --- .../super_date_picker/date_popover/_date_popover_button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss index b704cf0c003..6d782d2ae18 100644 --- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss +++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss @@ -35,6 +35,7 @@ &:disabled { background-color: $euiFormBackgroundDisabledColor; + background-image: none; color: $euiColorDarkShade; cursor: default; } From a315d1f9f10a556ce9c226262cc41df62232490e Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Thu, 13 Apr 2023 11:43:42 -0700 Subject: [PATCH 13/13] Simplify delimiter/icon CSS classes - instead of applying bg colors to individual delimiter and icon elements, apply it to the parent `__childenWrapper` + simplify default delimited icon to not set its own `color` but instead inherit from its `EuiText` wrapper + update downstream EuiSuperDatePicker CSS --- .../date_picker_range.test.tsx.snap | 7 +------ .../super_date_picker/_super_date_picker.scss | 12 +++++------- .../form_control_layout_delimited.test.tsx.snap | 1 - .../_form_control_layout_delimited.scss | 16 ++++------------ .../form_control_layout_delimited.tsx | 15 ++++++--------- .../range/__snapshots__/dual_range.test.tsx.snap | 2 -- 6 files changed, 16 insertions(+), 37 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 e3c7d02ae8e..9ba7ffb0fd8 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 @@ -43,7 +43,6 @@ exports[`EuiDatePickerRange disabled is rendered 1`] = ` class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued" > to @@ -116,7 +115,6 @@ exports[`EuiDatePickerRange is rendered 1`] = ` class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued" > to @@ -183,10 +181,9 @@ exports[`EuiDatePickerRange isInvalid is rendered 1`] = `
to @@ -265,7 +262,6 @@ exports[`EuiDatePickerRange readOnly is rendered 1`] = ` class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued" > to @@ -338,7 +334,6 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = ` class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued" > to diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss index 0b9254923a6..0d2b3f368a5 100644 --- a/src/components/date_picker/super_date_picker/_super_date_picker.scss +++ b/src/components/date_picker/super_date_picker/_super_date_picker.scss @@ -75,17 +75,15 @@ * Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating` */ .euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles - .euiFormControlLayoutDelimited__delimiter { + .euiFormControlLayout__childrenWrapper { background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor; - color: $euiSuperDatePickerNeedsUpdatingTextColor; + } - .euiIcon { - color: currentcolor; - } + .euiFormControlLayoutDelimited__delimiter { + color: $euiSuperDatePickerNeedsUpdatingTextColor; } } -.euiSuperDatePicker .euiFormControlLayoutDelimited__delimiter, -.euiSuperDatePicker .euiFormControlLayoutIcons { +.euiSuperDatePicker .euiFormControlLayout__childrenWrapper { transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton } diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap index 3f396138333..f5e986b346d 100644 --- a/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap +++ b/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap @@ -18,7 +18,6 @@ exports[`EuiFormControlLayoutDelimited is rendered 1`] = ` class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued" > to diff --git a/src/components/form/form_control_layout/_form_control_layout_delimited.scss b/src/components/form/form_control_layout/_form_control_layout_delimited.scss index 59a5635e433..fd90253a29b 100644 --- a/src/components/form/form_control_layout/_form_control_layout_delimited.scss +++ b/src/components/form/form_control_layout/_form_control_layout_delimited.scss @@ -5,15 +5,11 @@ align-items: stretch; padding: 1px; /* 1 */ - .euiFormControlLayoutDelimited__delimiter, - .euiFormControlLayoutIcons { - background-color: $euiFormBackgroundColor; - } - > .euiFormControlLayout__childrenWrapper { display: flex; align-items: center; width: 100%; + background-color: $euiFormBackgroundColor; } // Target when the euiFormControlLayout is compressed without specifying the full class name in case it ever changes @@ -33,8 +29,7 @@ &[class*='-isDisabled'] { @include euiFormControlDisabledStyle; - .euiFormControlLayoutDelimited__delimiter, - .euiFormControlLayoutIcons { + .euiFormControlLayout__childrenWrapper { background-color: $euiFormBackgroundDisabledColor; } } @@ -43,15 +38,12 @@ &[class*='--readOnly'] { @include euiFormControlReadOnlyStyle; - input, - .euiFormControlLayoutDelimited__delimiter, - .euiFormControlLayoutIcons { + .euiFormControlLayout__childrenWrapper { background-color: $euiFormBackgroundReadOnlyColor; } } - &--isInvalid .euiFormControlLayoutIcons, - &--isInvalid .euiFormControlLayoutDelimited__delimiter { + &--isInvalid .euiFormControlLayout__childrenWrapper { @include euiFormControlInvalidStyle; } } diff --git a/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/src/components/form/form_control_layout/form_control_layout_delimited.tsx index 98eca2926b6..8f0199eeddc 100644 --- a/src/components/form/form_control_layout/form_control_layout_delimited.tsx +++ b/src/components/form/form_control_layout/form_control_layout_delimited.tsx @@ -84,21 +84,18 @@ const EuiFormControlDelimiter = ({ delimiter?: ReactNode; isInvalid?: boolean; }) => { - const classes = classNames('euiFormControlLayoutDelimited__delimiter', { - 'euiFormControlLayoutDelimited__delimiter--isInvalid': isInvalid, - }); - const color = isInvalid ? 'danger' : 'subdued'; - const defaultAriaLabel = useEuiI18n( 'euiFormControlLayoutDelimited.delimiterLabel', 'to' ); return ( - - {delimiter ?? ( - - )} + + {delimiter ?? } ); }; diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap index d28059b4059..db1152e1a6b 100644 --- a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap @@ -545,7 +545,6 @@ exports[`EuiDualRange props loading should display when showInput="inputWithPopo class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued" > to @@ -635,7 +634,6 @@ exports[`EuiDualRange props slider should display in popover 1`] = ` class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued" > to