From 6cd8fce036968325830b0e8851f7495ac37806e7 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 8 Jul 2024 01:01:29 -0700 Subject: [PATCH 01/11] Initial Emotion setup - some shenanigans rquired because of existing render fn --- .../super_date_picker.test.tsx.snap | 24 ++++++------ .../super_date_picker/_super_date_picker.scss | 2 - .../super_date_picker.styles.ts | 22 +++++++++++ .../super_date_picker/super_date_picker.tsx | 39 ++++++++++++------- 4 files changed, 59 insertions(+), 28 deletions(-) create mode 100644 packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index 15009f90921..dd83aaab4b0 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormControlLayout 1`] = `
{ + const { euiTheme } = euiThemeContext; + + return { + euiSuperDatePicker: css` + display: flex; + gap: ${euiTheme.size.s}; + `, + }; +}; diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx index d7db318dd59..0f525ef4d88 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -16,6 +16,7 @@ import classNames from 'classnames'; import moment, { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named import dateMath from '@elastic/datemath'; +import { useEuiMemoizedStyles } from '../../../services'; import { isObject } from '../../../services/predicate'; import { EuiI18nConsumer } from '../../context'; import { CommonProps } from '../../common'; @@ -52,6 +53,8 @@ import { EuiAutoRefreshButton, } from '../auto_refresh/auto_refresh'; +import { euiSuperDatePickerStyles } from './super_date_picker.styles'; + export interface OnTimeChangeProps extends DurationRange { isInvalid: boolean; isQuickSelection: boolean; @@ -205,6 +208,7 @@ export type EuiSuperDatePickerProps = CommonProps & { }; type EuiSuperDatePickerInternalProps = EuiSuperDatePickerProps & { + memoizedStyles: ReturnType; timeOptions: TimeOptions; // The below options are marked as required because they have default fallbacks commonlyUsedRanges: DurationRange[]; @@ -686,6 +690,7 @@ export class EuiSuperDatePickerInternal extends Component< isQuickSelectOnly, compressed, className, + memoizedStyles: styles, } = this.props; const { hasChanged, isInvalid } = this.state; @@ -702,8 +707,10 @@ export class EuiSuperDatePickerInternal extends Component< 'euiSuperDatePicker--autoWidth': width === 'auto', }); + const cssStyles = [styles.euiSuperDatePicker]; + return ( -
+
{isAutoRefreshOnly && onRefreshChange ? ( = ( props -) => ( - - {(timeOptions) => ( - - )} - -); +) => { + const styles = useEuiMemoizedStyles(euiSuperDatePickerStyles); + return ( + + {(timeOptions) => ( + + )} + + ); +}; From 3c9a6c5326042a85735d970062f85ebc74d353e5 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 8 Jul 2024 01:52:58 -0700 Subject: [PATCH 02/11] Convert date picker widths and width modifiers to Emotion + delete width Sass variables --- .../super_date_picker.test.tsx.snap | 24 ++++---- .../super_date_picker/_super_date_picker.scss | 32 ---------- .../super_date_picker/_variables.scss | 3 - .../super_date_picker.styles.ts | 58 ++++++++++++++++++- .../super_date_picker/super_date_picker.tsx | 19 +++--- 5 files changed, 79 insertions(+), 57 deletions(-) diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index dd83aaab4b0..3623829ceab 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormControlLayout 1`] = `
{ const { euiTheme } = euiThemeContext; + const inputWidth = euiTheme.base * 30; + const buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts + const gap = euiTheme.size.s; + + // Default restricted width + const restrictedWidth = mathWithUnits( + gap, + (gap) => inputWidth + gap + buttonWidth + ); + + // Set a sensible min-width for when width is auto + const { maxWidth: maxFormWidth } = euiFormVariables(euiThemeContext); + const minFormWidth = parseFloat(maxFormWidth) / 2; + const autoMinWidth = mathWithUnits( + gap, + (gap) => minFormWidth + gap + buttonWidth + ); + return { euiSuperDatePicker: css` display: flex; - gap: ${euiTheme.size.s}; + gap: ${gap}; + ${logicalCSS('max-width', '100%')} + + ${euiMaxBreakpoint(euiThemeContext, 'm')} { + ${logicalCSS('width', '100%')} + } + `, + + widths: { + restricted: css` + ${logicalCSS('width', restrictedWidth)} + `, + full: css` + ${logicalCSS('width', '100%')} + `, + auto: css` + display: inline-flex; + ${logicalCSS('min-width', `min(${autoMinWidth}, 100%)`)} + ${logicalCSS('width', 'auto')} + `, + }, + + // Special rendering cases that override all permutations of the above widths + noUpdateButton: css` + ${logicalCSS('min-width', `min(${minFormWidth}, 100%)`)} + ${logicalCSS('width', `${inputWidth}px`)} + `, + isAutoRefreshOnly: css` + ${logicalCSS('min-width', `min(${minFormWidth}, 100%)`)} + ${logicalCSS('width', `${maxFormWidth}px`)} + `, + isQuickSelectOnly: css` + ${logicalCSS('min-width', 0)} `, }; }; diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx index 0f525ef4d88..efebc9690f7 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -694,20 +694,21 @@ export class EuiSuperDatePickerInternal extends Component< } = this.props; const { hasChanged, isInvalid } = this.state; - // Force reduction in width if showing quick select only - const width = isQuickSelectOnly ? 'auto' : _width; - const classes = classNames('euiSuperDatePicker', className, { 'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid, - 'euiSuperDatePicker--noUpdateButton': !showUpdateButton, - 'euiSuperDatePicker--isAutoRefreshOnly': isAutoRefreshOnly, - 'euiSuperDatePicker--isQuickSelectOnly': isQuickSelectOnly, - 'euiSuperDatePicker--fullWidth': width === 'full', - 'euiSuperDatePicker--autoWidth': width === 'auto', }); - const cssStyles = [styles.euiSuperDatePicker]; + // Force reduction in width if showing quick select only + const width = isQuickSelectOnly ? 'auto' : _width; + + const cssStyles = [ + styles.euiSuperDatePicker, + styles.widths[width!], + !showUpdateButton && styles.noUpdateButton, + isAutoRefreshOnly && styles.isAutoRefreshOnly, + isQuickSelectOnly && styles.isQuickSelectOnly, + ]; return (
From e6c92d0189a9a6bb674f3808b2610d4df7dac40c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 8 Jul 2024 02:10:21 -0700 Subject: [PATCH 03/11] Fix/tweak various width permutations - `noUpdateButton` requires a few per-width-type tweaks to get this working as before in prod, due to changed CSS delcaration order - `isAutoRefreshOnly` is not correctly responding to width prop on prod, this fixes that --- .../super_date_picker.styles.ts | 42 ++++++++++++++----- .../super_date_picker/super_date_picker.tsx | 8 ++-- 2 files changed, 36 insertions(+), 14 deletions(-) diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts index 9205d0f069f..1f6e831a51f 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts @@ -18,6 +18,7 @@ import { euiFormVariables } from '../../form/form.styles'; export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const forms = euiFormVariables(euiThemeContext); const inputWidth = euiTheme.base * 30; const buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts @@ -30,8 +31,7 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { ); // Set a sensible min-width for when width is auto - const { maxWidth: maxFormWidth } = euiFormVariables(euiThemeContext); - const minFormWidth = parseFloat(maxFormWidth) / 2; + const minFormWidth = parseFloat(forms.maxWidth) / 2; const autoMinWidth = mathWithUnits( gap, (gap) => minFormWidth + gap + buttonWidth @@ -63,14 +63,36 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { }, // Special rendering cases that override all permutations of the above widths - noUpdateButton: css` - ${logicalCSS('min-width', `min(${minFormWidth}, 100%)`)} - ${logicalCSS('width', `${inputWidth}px`)} - `, - isAutoRefreshOnly: css` - ${logicalCSS('min-width', `min(${minFormWidth}, 100%)`)} - ${logicalCSS('width', `${maxFormWidth}px`)} - `, + noUpdateButton: { + // Skipping css`` and using the `label` key instead to reduce repeat Emotion generated classNames + restricted: ` + label: noUpdateButton; + ${logicalCSS('width', `${inputWidth}px`)}; + `, + auto: ` + label: noUpdateButton; + ${logicalCSS('min-width', `min(${minFormWidth}px, 100%)`)}; + `, + full: ` + label: noUpdateButton; + `, + }, + isAutoRefreshOnly: { + // display: block over flex is required to have the nested .euiPopover wrap expand to the wrapper width + restricted: ` + label: isAutoRefreshOnly; + display: block; + ${logicalCSS('width', forms.maxWidth)} + `, + auto: ` + label: isAutoRefreshOnly; + `, + full: ` + label: isAutoRefreshOnly; + display: block; + `, + }, + // isQuickSelectOnly forces `width` to be `auto` isQuickSelectOnly: css` ${logicalCSS('min-width', 0)} `, diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx index efebc9690f7..77b5b53cb1d 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx @@ -700,13 +700,13 @@ export class EuiSuperDatePickerInternal extends Component< }); // Force reduction in width if showing quick select only - const width = isQuickSelectOnly ? 'auto' : _width; + const width = isQuickSelectOnly ? 'auto' : _width ?? 'restricted'; const cssStyles = [ styles.euiSuperDatePicker, - styles.widths[width!], - !showUpdateButton && styles.noUpdateButton, - isAutoRefreshOnly && styles.isAutoRefreshOnly, + styles.widths[width], + !showUpdateButton && styles.noUpdateButton[width], + isAutoRefreshOnly && styles.isAutoRefreshOnly[width], isQuickSelectOnly && styles.isQuickSelectOnly, ]; From 2ea9e6f4d5f7785298175729407c4e67a37867c3 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 8 Jul 2024 14:20:35 -0700 Subject: [PATCH 04/11] Convert remaining layout elements - flatten CSS where possible (in the case of `.euiFormControlLayout__childrenWrapper`'s border-radius it is sadly not possible) - un-DRY prettyFormat CSS for now, DRY out with popover buttons later - `!important` on `.euiSuperDatePicker__rangeInput` required to offset the CSS added by `fullWidth: true` on the form control layout --- .../super_date_picker.test.tsx.snap | 44 +++++++++---------- .../super_date_picker/_super_date_picker.scss | 43 ------------------ .../super_date_picker.styles.ts | 41 +++++++++++++++++ .../super_date_picker/super_date_picker.tsx | 6 +++ 4 files changed, 69 insertions(+), 65 deletions(-) diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index 3623829ceab..2a5cec22fc6 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo data-test-subj="mySuperDatePicker" >
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts index 503f7c0626a..badaec45b91 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts +++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts @@ -128,28 +128,7 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('width', 'auto !important')} `, euiSuperDatePicker__prettyFormat: css` - ${logicalCSS('height', '100%')} - ${logicalCSS('width', '100%')} - ${logicalCSS('padding-horizontal', euiTheme.size.s)} - display: flex; - align-items: center; - justify-content: space-between; - - font-size: ${euiFontSize(euiThemeContext, 's').fontSize}; - text-align: start; - word-break: break-all; - color: ${forms.textColor}; - background-color: ${forms.backgroundColor}; - - &:disabled { - background-color: ${forms.backgroundDisabledColor}; - color: ${forms.controlDisabledColor}; - cursor: not-allowed; - } - - ${euiCanAnimate} { - transition: background-color ${euiTheme.animation.fast} ease-in; - } + ${_buttonStyles(euiThemeContext)} `, // Range states @@ -167,3 +146,26 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => { `, }; }; + +export const _buttonStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return css` + ${logicalCSS('height', '100%')} + ${logicalCSS('width', '100%')} + ${logicalCSS('padding-horizontal', euiTheme.size.s)} + + /* Align content automatically for compressed heights */ + display: flex; + align-items: center; + + font-size: ${euiFontSize(euiThemeContext, 's').fontSize}; + word-break: break-all; + color: inherit; + background-color: inherit; + + &:disabled { + cursor: not-allowed; + } + `; +}; From 09c897e23f93ca13cfa2a5d5c8ded9b99f7daa9e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 22 Jul 2024 13:49:17 -0700 Subject: [PATCH 07/11] Convert remaining form linear gradient/underline styles - [opinionated cleanup/change] set background colors on the layout wrapper div instead of the button where possible - reuse the CSS variable and form Emotion mixins where possible as well --- .../super_date_picker.test.tsx.snap | 24 +++--- .../date_popover/_date_popover_button.scss | 36 --------- .../super_date_picker.styles.ts | 73 +++++++++++++++---- .../super_date_picker/super_date_picker.tsx | 20 ++++- 4 files changed, 86 insertions(+), 67 deletions(-) diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap index 2a5cec22fc6..1abdff6c019 100644 --- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap +++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap @@ -6,7 +6,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo data-test-subj="mySuperDatePicker" >