[EuiDatePickerRange] Add `inline` display behavior; [EuiDatePicker] Improve `inline` display behavior by cee-chen · Pull Request #6795 · elastic/eui

cee-chen · 2023-05-23T04:31:09Z

Summary

⚠️ This PR has several cleanup and setup tasks, so I recommend following along by commit.
It's also our first-ever use of CSS container queries in EUI! 🎉

The ML team was previously using EuiDatePickerRange and inline together, which was an undocumented usage of the range picker and was only sorta working by accident (note the buggy shadow+border behavior):

#6705 broke this accidental behavior by enforcing all the height/width styles a delimited form control normally enforces:

The solution to this is to make the inline prop an actual first class citizen for EuiDatePickerRange. In addition to correctly displaying the base inline state, responsive behavior needed to be implemented, and there were numerous issues and untested permutations of inline and, e.g. disabled/readOnly/isInvalid that needed more thoughtful handling.

EuiDatePicker

EuiDateRangePicker

QA

Go to https://eui.elastic.co/pr_6795/#/forms/date-picker#date-picker-inline
Confirm that disabled and readOnly states for both the single and range picker display as visually expected, and cannot be clicked on or tabbed to
Confirm that loading and isInvalid icons appear / set a bottom line
Disable the show time select switch. Resize your screen and confirm the range picker collapses to a vertical display before any content is cut off
Enable the show time select switch. Resize your screen and confirm the range picker collapses to a vertical display before any content is cut off

General checklist

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs (using @default if default values are missing) and playground toggles
Added documentation
Added or updated jest and cypress tests
Checked for accessibility including keyboard-only ~~and screenreader modes~~
- Our date picker needs more thorough SR testing in general, so I skipped SR testing for now
A changelog entry exists and is marked appropriately

~~- [ ] Checked Code Sandbox works for any docs examples~~
~~- [ ] Checked for breaking changes and labeled appropriately~~ - there are className and DOM changes that we'll likely have to update several Kibana snapshots for, but I don't consider that to be breaking
~~- [ ] Updated the Figma library counterpart~~ - not seeing an inline prop demo in Figma

cee-chen · 2023-05-23T04:51:57Z

jenkins test this

- `.react-datepicker-popper` is no longer a class being set anywhere - shadow styles don't use a border

- fix `disabled` and `readOnly` styling & behavior - should match inputs and no longer be interactable - render form control icons below the datepicker - better docs - write tests (e2e for now, should likely be storybook)

+ remove unnecessary height style - appears to already work as-is thanks to `.euiFormControlLayoutDelimited`

- helps separate form control and date picker range concerns

… toggle - due to new `span` `isLoading` needs to be specified via typescript + pulled out of `...rest` tests - reorganize w/ `describe` - add missing props tests docs - convert to TSX - fix bad `isInvalid` use from min test - remove non-working `isInvalid` from `range.tsx` - the display toggle is overriding that prop

- use separate styles fn, since display is so different and has many extra conditions - requires a lot of resets and layout fixes - update docs examples with toggles & snippet - add unit test - but most permutations should likely be storybooks

…nd `prepend/append` display - they don't make sense to render, and the single datepicker doesn't render them either

- to get `@container` query support, which I'll want to use for responsive `inline` behavior

…siveness (sadly, jsdom errors on this, so we have to add another console error exclusion)

kibanamachine · 2023-05-23T04:58:12Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/

cee-chen · 2023-05-23T15:21:42Z

jenkins test this

kibanamachine · 2023-05-23T15:45:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/

kibanamachine · 2023-05-23T16:30:39Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/

tkajtoch

This is a huge improvement! 🎉 Code looks great and the changes work as expected on all browsers. Visually I noticed a couple minor things:

when isInvalid = true, the bottom bar is spaced 1px off the date picker's edge due to euiFormControlLayoutDelimited having padding: 1px
EuiDatePickerRange layout wraps content at 700px container width but some of the endDateControl content becomes obstructed below 740px when showTimeSelect = true.

cee-chen · 2023-05-25T15:41:57Z

Thanks for the great catches Tomasz! I'll fix the dependency conflicts and address the two visual items in your screenshot here shortly

kibanamachine · 2023-05-25T16:34:15Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6795/

tkajtoch

LGTM 🚢

## Summary `eui@81.0.0` ⏩ `eui@81.2.0` - Most changes to source code in this PR are CSS cleanups/deprecations in `EuiSuperDatePicker`/`EuiDatePickerRange` - One team (ML) had a `inline` specific usage of `EuiDatePickerRange` that they reached out to us about via Slack, and that we have fixed in this PR. - All other usages of date picker components should have remained working as-is with no changes, but please ping us if you see otherwise! ___ ## [`81.2.0`](https://github.com/elastic/eui/tree/v81.2.0) - Updated `EuiSuperDatePicker` to accept an object configuration for `isDisabled` ([#6821](elastic/eui#6821)) **Bug fixes** - Fixed broken `EuiSuperDatePicker` styles ([#6821](elastic/eui#6821)) ## [`81.1.0`](https://github.com/elastic/eui/tree/v81.1.0) - Added `EuiInlineEditText` and `EuiInlineEditTitle` components ([#6757](elastic/eui#6757)) - Updated `EuiDatePickerRange` to support `inline` display ([#6795](elastic/eui#6795)) - Added an `onError` callback prop to `EuiErrorBoundary` ([#6810](elastic/eui#6810)) - Updated `EuiDataGrid` to only render screen reader text announcing cell position if the cell is currently focused. This should improve the ability to copy and paste multiple cells without SR text. ([#6817](elastic/eui#6817)) **Bug fixes** - Fixed `EuiDatePicker`'s `inline` display to correctly render and prevent user interaction when `disabled` or `readOnly` ([#6795](elastic/eui#6795)) - Fixed `EuiDatePicker`'s `inline` display to correctly render `isInvalid` and `isLoading` icons ([#6795](elastic/eui#6795)) **CSS-in-JS conversions** - Converted `EuiDatePickerRange` to Emotion ([#6795](elastic/eui#6795)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

cee-chen requested a review from tkajtoch May 23, 2023 04:36

cee-chen added 10 commits May 22, 2023 21:52

[EuiDatePicker] Remove unused CSS

d28fb70

- `.react-datepicker-popper` is no longer a class being set anywhere - shadow styles don't use a border

[EuiDatePicker] Improve inline display

78ab875

- fix `disabled` and `readOnly` styling & behavior - should match inputs and no longer be interactable - render form control icons below the datepicker - better docs - write tests (e2e for now, should likely be storybook)

[EuiDatePickerRange] Convert to emotion

ff16447

+ remove unnecessary height style - appears to already work as-is thanks to `.euiFormControlLayoutDelimited`

[EuiDatePickerRange] Remove unused modifier classes & syntax cleanup

616f148

[EuiDatePickerRange] Use span wrapper to match EuiDatePicker

fa7bc44

- helps separate form control and date picker range concerns

[EuiDatePickerRange] When inline, remove iconType, fullWidth, a…

a3df8c6

…nd `prepend/append` display - they don't make sense to render, and the single datepicker doesn't render them either

[setup] Upgrade @emotion dependencies to latest

b340607

- to get `@container` query support, which I'll want to use for responsive `inline` behavior

[EuiDatePickerRange] Use container queries for better inline respon…

df16cc7

…siveness (sadly, jsdom errors on this, so we have to add another console error exclusion)

cee-chen force-pushed the daterange-inline branch from e096f99 to df16cc7 Compare May 23, 2023 04:59

elastic deleted a comment from kibanamachine May 23, 2023

Fix inline snapshot to not change literally every day lol

cc8200a

tkajtoch reviewed May 25, 2023

View reviewed changes

cee-chen added 3 commits May 25, 2023 08:53

Merge branch 'main' into daterange-inline

703bf01

[PR feedback] Unset .euiFormControlLayoutDelimited's 1px padding

2b5a7f5

[PR feedback] Finetune container queries

9a0ec4a

cee-chen requested a review from tkajtoch May 25, 2023 16:11

tkajtoch approved these changes May 25, 2023

View reviewed changes

cee-chen merged commit 43c9bc5 into elastic:main May 25, 2023

cee-chen deleted the daterange-inline branch May 25, 2023 20:04

cee-chen self-assigned this May 26, 2023

cee-chen mentioned this pull request May 31, 2023

Upgrade EUI to v81.2.0 elastic/kibana#158781

Merged

cee-chen mentioned this pull request Oct 24, 2023

[EuiSuperDatePicker] Fix inline date picker width #7313

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDatePickerRange] Add `inline` display behavior; [EuiDatePicker] Improve `inline` display behavior#6795

[EuiDatePickerRange] Add `inline` display behavior; [EuiDatePicker] Improve `inline` display behavior#6795
cee-chen merged 14 commits intoelastic:mainfrom
cee-chen:daterange-inline

cee-chen commented May 23, 2023 •

edited

Loading

Uh oh!

cee-chen commented May 23, 2023

Uh oh!

kibanamachine commented May 23, 2023

Uh oh!

cee-chen commented May 23, 2023

Uh oh!

kibanamachine commented May 23, 2023

Uh oh!

kibanamachine commented May 23, 2023

Uh oh!

tkajtoch left a comment

Uh oh!

cee-chen commented May 25, 2023

Uh oh!

kibanamachine commented May 25, 2023

Uh oh!

tkajtoch left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

cee-chen commented May 23, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

EuiDatePicker

EuiDateRangePicker

QA

General checklist

Uh oh!

cee-chen commented May 23, 2023

Uh oh!

kibanamachine commented May 23, 2023

Uh oh!

cee-chen commented May 23, 2023

Uh oh!

kibanamachine commented May 23, 2023

Uh oh!

kibanamachine commented May 23, 2023

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

cee-chen commented May 25, 2023

Uh oh!

kibanamachine commented May 25, 2023

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cee-chen commented May 23, 2023 •

edited

Loading