Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiSuperDatePicker] Convert form control styles to Emotion #7904

Merged
merged 11 commits into from
Jul 23, 2024
Merged

[EuiSuperDatePicker] Convert form control styles to Emotion #7904

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6cd8fce
Initial Emotion setup
cee-chen Jul 8, 2024
3c9a6c5
Convert date picker widths and width modifiers to Emotion
cee-chen Jul 8, 2024
e6c92d0
Fix/tweak various width permutations
cee-chen Jul 8, 2024
2ea9e6f
Convert remaining layout elements
cee-chen Jul 8, 2024
220a448
Convert needsUpdating state
cee-chen Jul 22, 2024
c4c4d49
DRY out/convert `euiSuperDatePickerText` mixin + `EuiDatePopoverButton`
cee-chen Jul 22, 2024
09c897e
Convert remaining form linear gradient/underline styles
cee-chen Jul 22, 2024
811ae87
Delete Sass mixin/variables files
cee-chen Jul 22, 2024
5bd947d
changelog
cee-chen Jul 22, 2024
b61fe26
Update visual regression snapshots
cee-chen Jul 22, 2024
1583a79
[tech debt] Convert Enzyme tests to RTL
cee-chen Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions ...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
data-test-subj="mySuperDatePicker"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -39,7 +39,7 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat"
class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
type="button"
>
Expand Down Expand Up @@ -75,7 +75,7 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -108,7 +108,7 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat"
class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
type="button"
>
Expand Down Expand Up @@ -240,7 +240,7 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly passes required props 1`] =

exports[`EuiSuperDatePicker props isDisabled config object 1`] = `
<button
class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
disabled=""
type="button"
Expand All @@ -258,7 +258,7 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
disabled=""
>
<div
Expand Down Expand Up @@ -293,7 +293,7 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
disabled=""
type="button"
Expand Down Expand Up @@ -331,7 +331,7 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
class="euiSuperDatePicker emotion-euiSuperDatePicker-auto-isQuickSelectOnly"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -392,7 +392,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted-noUpdateButton"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -425,7 +425,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat"
class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
type="button"
>
Expand All @@ -441,7 +441,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -474,7 +474,7 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat"
class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
type="button"
>
Expand Down Expand Up @@ -513,7 +513,7 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
class="euiSuperDatePicker emotion-euiSuperDatePicker-auto"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -546,7 +546,7 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat"
class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
type="button"
>
Expand Down Expand Up @@ -582,7 +582,7 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
class="euiSuperDatePicker emotion-euiSuperDatePicker-full"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -615,7 +615,7 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat"
class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
type="button"
>
Expand Down Expand Up @@ -652,7 +652,7 @@ exports[`EuiSuperDatePicker renders 1`] = `
data-test-subj="test subject string"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -685,7 +685,7 @@ exports[`EuiSuperDatePicker renders 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<button
class="euiSuperDatePicker__prettyFormat"
class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
data-test-subj="superDatePickerShowDatesButton"
type="button"
>
Expand Down Expand Up @@ -722,10 +722,10 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
data-test-subj="test subject string"
>
<span
class="euiDatePickerRange emotion-euiDatePickerRange"
class="euiDatePickerRange emotion-euiDatePickerRange-euiSuperDatePicker__range"
>
<div
class="euiFormControlLayout euiFormControlLayout--group euiFormControlLayoutDelimited"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group euiFormControlLayoutDelimited"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -758,7 +758,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
<div
class="euiPopover euiPopover-isOpen euiSuperDatePicker__startPopoverButton euiFormControlLayoutDelimited__input emotion-euiPopover-block"
class="euiPopover euiPopover-isOpen euiSuperDatePicker__startPopoverButton euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiSuperDatePicker__rangeInput"
>
<button
class="euiDatePopoverButton euiDatePopoverButton--start euiDatePopoverButton-isSelected"
Expand All @@ -779,7 +779,7 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
</span>
</div>
<div
class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block"
class="euiPopover euiFormControlLayoutDelimited__input emotion-euiPopover-block-euiSuperDatePicker__rangeInput"
>
<button
class="euiDatePopoverButton euiDatePopoverButton--end"
Expand Down
43 changes: 0 additions & 43 deletions packages/eui/src/components/date_picker/super_date_picker/_super_date_picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,3 @@
.euiSuperDatePicker {
.euiDatePickerRange {
flex-grow: 1;
}

.euiFormControlLayout {
max-width: 100%; // Allow it to always grow to fit the container since the default form max width is too small
}

.euiFormControlLayout__childrenWrapper {
display: flex;
align-items: center;
overflow: hidden;
background-color: $euiFormBackgroundColor;

&:last-child {
border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
}

& > .euiFormControlLayoutDelimited__input {
flex-grow: 1;
}
}
}

.euiSuperDatePicker__prettyFormat {
@include euiSuperDatePickerText;
display: flex;
justify-content: space-between;
text-align: left;

&:not(:disabled):hover,
&:focus {
text-decoration: none;
}

&:disabled {
background-color: $euiFormBackgroundDisabledColor;
color: $euiColorDarkShade;
cursor: not-allowed;
}
}

/**
* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
*/
Expand Down
41 changes: 41 additions & 0 deletions packages/eui/src/components/date_picker/super_date_picker/super_date_picker.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { css } from '@emotion/react';

import { UseEuiTheme } from '../../../services';
import {
euiFontSize,
euiCanAnimate,
euiMaxBreakpoint,
logicalCSS,
mathWithUnits,
Expand Down Expand Up @@ -46,6 +48,12 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
${euiMaxBreakpoint(euiThemeContext, 'm')} {
${logicalCSS('width', '100%')}
}

/* Fix border radius clipping, but only if the auto refresh append item isn't rendered */
.euiFormControlLayout__childrenWrapper:last-child {
${logicalCSS('border-top-right-radius', 'inherit')}
${logicalCSS('border-bottom-right-radius', 'inherit')}
}
`,

widths: {
Expand Down Expand Up @@ -96,5 +104,38 @@ export const euiSuperDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
isQuickSelectOnly: css`
${logicalCSS('min-width', 0)}
`,

euiSuperDatePicker__range: css`
flex-grow: 1;
`,
euiSuperDatePicker__rangeInput: css`
flex-grow: 1;
/* Needs !important to override EuiFormControlLayoutDelimited's fullWidth CSS */
${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};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed this color changed noticeably and reducing the color contrast quite a lot. Is this expected?

Screen.Recording.2024-07-23.at.14.34.03.mov

before
Screenshot 2024-07-23 at 14 49 30

after
Screenshot 2024-07-23 at 14 49 22

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO it's more correct as it matches our existing form controls/fields:

EuiFieldText

It's also worth noting that there are no WCAG color contrast requirements for disabled elements/buttons: https://sean-elliott.medium.com/a11y-tips-disabled-buttons-and-colour-contrast-f8824d5e9610

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, that overall this change makes sense to align with other form controls. I was just wondering if we consider the contrast, but if that would be the case it's anyway a question on a broader level for forms I guess.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, and this way/with this change, if we change contrast levels for all form components, this component will also update automatically :)

cursor: not-allowed;
}

${euiCanAnimate} {
transition: background-color ${euiTheme.animation.fast} ease-in;
}
`,
};
};
6 changes: 6 additions & 0 deletions packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,6 +516,7 @@ export class EuiSuperDatePickerInternal extends Component<
utcOffset,
compressed,
onFocus,
memoizedStyles: styles,
} = this.props;

const autoRefreshAppend: EuiFormControlLayoutProps['append'] = !isPaused ? (
Expand All @@ -537,6 +538,7 @@ export class EuiSuperDatePickerInternal extends Component<
disabled: !!isDisabled,
prepend: this.renderQuickSelect(),
append: autoRefreshAppend,
fullWidth: true,
};

if (isQuickSelectOnly) {
Expand All @@ -558,6 +560,7 @@ export class EuiSuperDatePickerInternal extends Component<
<EuiFormControlLayout {...formControlLayoutProps}>
<button
type="button"
css={styles.euiSuperDatePicker__prettyFormat}
className={classNames('euiSuperDatePicker__prettyFormat', {
'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
})}
Expand Down Expand Up @@ -586,10 +589,12 @@ export class EuiSuperDatePickerInternal extends Component<
{({ locale: contextLocale }) => (
<EuiDatePickerRange
{...formControlLayoutProps}
css={styles.euiSuperDatePicker__range}
isCustom={true}
iconType={false}
startDateControl={
<EuiDatePopoverButton
css={styles.euiSuperDatePicker__rangeInput}
className="euiSuperDatePicker__startPopoverButton"
compressed={compressed}
position="start"
Expand All @@ -612,6 +617,7 @@ export class EuiSuperDatePickerInternal extends Component<
}
endDateControl={
<EuiDatePopoverButton
css={styles.euiSuperDatePicker__rangeInput}
position="end"
compressed={compressed}
needsUpdating={hasChanged}
Expand Down