Skip to content

Commit

Permalink
[EuiSuperDatePicker] Convert form control styles to Emotion (#7904)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Jul 23, 2024
1 parent 3bd418e commit 4ef461c
Show file tree
Hide file tree
Showing 19 changed files with 388 additions and 304 deletions.
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 ...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.
8 changes: 8 additions & 0 deletions packages/eui/changelogs/upcoming/7904.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
**CSS-in-JS conversions**

- Converted `EuiSuperDatePicker`'s form control to Emotion;
- Removed `$euiSuperDatePickerWidth`
- Removed `$euiSuperDatePickerButtonWidth`
- Removed `$euiSuperDatePickerNeedsUpdatingBackgroundColor`
- Removed `$euiSuperDatePickerNeedsUpdatingTextColor`
- Removed `@euiSuperDatePickerText` mixin
72 changes: 36 additions & 36 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 @@ -2,11 +2,11 @@

exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormControlLayout 1`] = `
<div
class="euiSuperDatePicker"
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
data-test-subj="mySuperDatePicker"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<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 @@ -72,10 +72,10 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo

exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
<div
class="euiSuperDatePicker"
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
>
<div
class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<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 @@ -141,7 +141,7 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `

exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = `
<div
class="euiSuperDatePicker euiSuperDatePicker--isAutoRefreshOnly"
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted-isAutoRefreshOnly"
>
<div
class="euiPopover euiInputPopover euiAutoRefresh emotion-euiPopover-block-EuiInputPopover"
Expand Down Expand Up @@ -189,7 +189,7 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly is rendered 1`] = `

exports[`EuiSuperDatePicker props isAutoRefreshOnly passes required props 1`] = `
<div
class="euiSuperDatePicker euiSuperDatePicker--isAutoRefreshOnly"
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted-isAutoRefreshOnly"
data-test-subj="autoRefreshOnly"
>
<div
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 @@ -255,10 +255,10 @@ exports[`EuiSuperDatePicker props isDisabled config object 1`] = `

exports[`EuiSuperDatePicker props isDisabled true 1`] = `
<div
class="euiSuperDatePicker"
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-disabled"
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 @@ -328,10 +328,10 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `

exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
<div
class="euiSuperDatePicker euiSuperDatePicker--isQuickSelectOnly euiSuperDatePicker--autoWidth"
class="euiSuperDatePicker emotion-euiSuperDatePicker-auto-isQuickSelectOnly"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<div
class="euiPopover emotion-euiPopover-inline-block"
Expand Down Expand Up @@ -389,10 +389,10 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `

exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
<div
class="euiSuperDatePicker euiSuperDatePicker--noUpdateButton"
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted-noUpdateButton"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<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 @@ -438,10 +438,10 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `

exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
<div
class="euiSuperDatePicker"
class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<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 @@ -510,10 +510,10 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `

exports[`EuiSuperDatePicker props width can be auto 1`] = `
<div
class="euiSuperDatePicker euiSuperDatePicker--autoWidth"
class="euiSuperDatePicker emotion-euiSuperDatePicker-auto"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<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 @@ -579,10 +579,10 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `

exports[`EuiSuperDatePicker props width can be full 1`] = `
<div
class="euiSuperDatePicker euiSuperDatePicker--fullWidth"
class="euiSuperDatePicker emotion-euiSuperDatePicker-full"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<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 @@ -648,11 +648,11 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `

exports[`EuiSuperDatePicker renders 1`] = `
<div
class="euiSuperDatePicker testClass1 testClass2 emotion-euiTestCss"
class="euiSuperDatePicker testClass1 testClass2 emotion-euiSuperDatePicker-restricted-euiTestCss"
data-test-subj="test subject string"
>
<div
class="euiFormControlLayout euiFormControlLayout--group"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group emotion-euiSuperDatePicker__formControlLayout-default"
>
<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 @@ -718,14 +718,14 @@ exports[`EuiSuperDatePicker renders 1`] = `

exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
<div
class="euiSuperDatePicker testClass1 testClass2 emotion-euiTestCss"
class="euiSuperDatePicker testClass1 testClass2 emotion-euiSuperDatePicker-restricted-euiTestCss"
data-test-subj="test subject string"
>
<span
class="euiDatePickerRange emotion-euiDatePickerRange"
class="euiDatePickerRange emotion-euiDatePickerRange-euiSuperDatePicker__range-euiSuperDatePicker__formControlLayout-default"
>
<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,10 +758,10 @@ 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"
class="euiDatePopoverButton euiDatePopoverButton--start euiDatePopoverButton-isSelected emotion-euiDatePopoverButton"
data-test-subj="superDatePickerstartDatePopoverButton"
title="~ 15 minutes ago"
type="button"
Expand All @@ -779,10 +779,10 @@ 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"
class="euiDatePopoverButton euiDatePopoverButton--end emotion-euiDatePopoverButton"
data-test-subj="superDatePickerendDatePopoverButton"
title="now"
type="button"
Expand Down
4 changes: 0 additions & 4 deletions packages/eui/src/components/date_picker/super_date_picker/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,2 @@
@import 'variables';
@import 'mixins';

@import 'date_popover/index';
@import 'quick_select_popover/index';
@import 'super_date_picker';
10 changes: 0 additions & 10 deletions packages/eui/src/components/date_picker/super_date_picker/_mixins.scss
View file

This file was deleted.

95 changes: 0 additions & 95 deletions packages/eui/src/components/date_picker/super_date_picker/_super_date_picker.scss
View file

This file was deleted.

5 changes: 0 additions & 5 deletions packages/eui/src/components/date_picker/super_date_picker/_variables.scss
View file

This file was deleted.

Loading

0 comments on commit 4ef461c

Please sign in to comment.