Skip to content

Commit

Permalink
[EuiSuperDatePicker] Convert quick select styles to Emotion (#7909)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Jul 29, 2024
1 parent bc8eaff commit 68985df
Show file tree
Hide file tree
Showing 27 changed files with 946 additions and 709 deletions.
Binary file modified ...ages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...sktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rence/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...obile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...erence/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/7909.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**CSS-in-JS conversions**

- Converted `EuiSuperDatePicker`'s quick select to Emotion
1 change: 0 additions & 1 deletion packages/eui/src/components/date_picker/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
// The react-date-picker overrides exists in the global_styling folder
// to easily style differently between default and Amsterdam theme
@import 'super_date_picker/index';
142 changes: 81 additions & 61 deletions packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,18 @@ import React, {
ChangeEventHandler,
KeyboardEventHandler,
} from 'react';

import { htmlIdGenerator } from '../../../services';
import { EuiI18n } from '../../i18n';
import { EuiFlexGroup, EuiFlexItem } from '../../flex';
import { EuiSelect, EuiFieldNumber, EuiFormLabel, EuiSwitch } from '../../form';
import { htmlIdGenerator } from '../../../services';
import { EuiScreenReaderOnly } from '../../accessibility';

import {
RenderI18nTimeOptions,
TimeOptions,
} from '../super_date_picker/time_options';
import { EuiQuickSelectPanel } from '../super_date_picker/quick_select_popover/quick_select_panel';
import {
Milliseconds,
RefreshUnitsOptions,
Expand Down Expand Up @@ -127,7 +130,6 @@ export class EuiRefreshInterval extends Component<
};

generateId = htmlIdGenerator();
legendId = this.generateId();
refreshSelectionId = this.generateId();

onValueChange: ChangeEventHandler<HTMLInputElement> = (event) => {
Expand Down Expand Up @@ -247,66 +249,84 @@ export class EuiRefreshInterval extends Component<
const { value, units, min } = this.state;

return (
<RenderI18nTimeOptions>
{({ refreshUnitsOptions }) => (
<fieldset className="euiQuickSelectPopover__panel">
<EuiFlexGroup
alignItems="center"
gutterSize="s"
responsive={false}
wrap
>
<EuiFlexItem grow={false}>
<EuiSwitch
data-test-subj="superDatePickerToggleRefreshButton"
aria-describedby={this.refreshSelectionId}
checked={!isPaused}
onChange={this.toggleRefresh}
compressed
label={
<EuiFormLabel type="legend" id={this.legendId}>
<EuiI18n
token="euiRefreshInterval.legend"
default="Refresh every"
/>
</EuiFormLabel>
}
/>
</EuiFlexItem>
<EuiFlexItem style={{ minWidth: 60 }}>
<EuiFieldNumber
compressed
fullWidth
value={value}
min={min}
onChange={this.onValueChange}
onKeyDown={this.handleKeyDown}
isInvalid={!isPaused && (value === '' || value <= 0)}
disabled={isPaused}
aria-label="Refresh interval value"
aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
data-test-subj="superDatePickerRefreshIntervalInput"
/>
</EuiFlexItem>
<EuiFlexItem style={{ minWidth: 100 }} grow={2}>
<EuiSelect
compressed
fullWidth
aria-label="Refresh interval units"
aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
value={units}
disabled={isPaused}
options={refreshUnitsOptions}
onChange={this.onUnitsChange}
onKeyDown={this.handleKeyDown}
data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
/>
</EuiFlexItem>
</EuiFlexGroup>
{this.renderScreenReaderText(refreshUnitsOptions)}
</fieldset>
<EuiI18n
tokens={[
'euiRefreshInterval.toggleLabel',
'euiRefreshInterval.toggleAriaLabel',
'euiRefreshInterval.valueAriaLabel',
'euiRefreshInterval.unitsAriaLabel',
]}
defaults={[
'Refresh every',
'Toggle refresh',
'Refresh interval value',
'Refresh interval units',
]}
>
{([
toggleLabel,
toggleAriaLabel,
valueAriaLabel,
unitsAriaLabel,
]: string[]) => (
<RenderI18nTimeOptions>
{({ refreshUnitsOptions }) => (
<EuiQuickSelectPanel>
<EuiFlexGroup
alignItems="center"
gutterSize="s"
responsive={false}
wrap
>
<EuiFlexItem grow={false}>
<EuiSwitch
data-test-subj="superDatePickerToggleRefreshButton"
checked={!isPaused}
onChange={this.toggleRefresh}
compressed
// The IDs attached to this visible label are unused - we override with our own aria-label
label={<EuiFormLabel>{toggleLabel}</EuiFormLabel>}
aria-label={toggleAriaLabel}
aria-labelledby={undefined}
aria-describedby={this.refreshSelectionId}
/>
</EuiFlexItem>
<EuiFlexItem style={{ minWidth: 60 }}>
<EuiFieldNumber
compressed
fullWidth
value={value}
min={min}
onChange={this.onValueChange}
onKeyDown={this.handleKeyDown}
isInvalid={!isPaused && (value === '' || value <= 0)}
disabled={isPaused}
aria-label={valueAriaLabel}
aria-describedby={this.refreshSelectionId}
data-test-subj="superDatePickerRefreshIntervalInput"
/>
</EuiFlexItem>
<EuiFlexItem style={{ minWidth: 100 }} grow={2}>
<EuiSelect
compressed
fullWidth
aria-label={unitsAriaLabel}
aria-describedby={this.refreshSelectionId}
value={units}
disabled={isPaused}
options={refreshUnitsOptions}
onChange={this.onUnitsChange}
onKeyDown={this.handleKeyDown}
data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
/>
</EuiFlexItem>
</EuiFlexGroup>
{this.renderScreenReaderText(refreshUnitsOptions)}
</EuiQuickSelectPanel>
)}
</RenderI18nTimeOptions>
)}
</RenderI18nTimeOptions>
</EuiI18n>
);
}
}
40 changes: 20 additions & 20 deletions ...rc/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -82,13 +82,13 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -266,14 +266,14 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
disabled=""
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -338,13 +338,13 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -399,13 +399,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -448,13 +448,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -520,13 +520,13 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -589,13 +589,13 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -659,13 +659,13 @@ exports[`EuiSuperDatePicker renders 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down Expand Up @@ -732,13 +732,13 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
>
<button
aria-label="Date quick select"
class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
data-test-subj="superDatePickerToggleQuickMenuButton"
title="Date quick select"
type="button"
>
<span
class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
>
<span
class="eui-textTruncate euiButtonEmpty__text"
Expand Down
1 change: 0 additions & 1 deletion packages/eui/src/components/date_picker/super_date_picker/_index.scss
View file

This file was deleted.

Loading

0 comments on commit 68985df

Please sign in to comment.