[EuiSuperDatePicker] Improve `Absolute` tab input UX further #7341

cee-chen · 2023-11-03T19:34:57Z

Summary

As always, I recommend reviewing by commit, as there was an incidental i18n fix/missing feature that was needed along the way

Follow up to #7331 - @mjaggard had some further excellent points/discussions that led me to revisit the UX once again. I removed the type debouncer with an Enter keypress UX event instead (and added more helpful hint text on user type). I also added an onPaste handler to automatically parse pasted timestamps without requiring the extra Enter keypress.

All in all, this ideally should be a solid win for users with multiple flows:

Pasting in timestamps (no extra 1 second of wait time or keypress needed)
Typing in a timestamp manually (no shenanigans for either slow or fast typers, and information about the accepted formats are now displayed before an error occurs)

QA

Go to https://eui.elastic.co/pr_7341/#/templates/super-date-picker
Click the first example's Last 30 minutes text
Click the Absolute tab
Start typing in the Start Date input and confirm that guiding help text appears
Press the Enter key and confirm that the expected valid or invalid behavior occurs (If valid, the date format updates and the help text disappears. If invalid, the format message goes red and a warning icon appears)
Paste the following text into the start date input (sourced from https://www.unixtimestamp.com), and confirm they are all immediately parsed/formatted without needing an extra Enter keypress:
- 2023-10-31T23:12:10Z
- Tue, 31 Oct 2023 23:12:10 +0000
- 1698793930
- hello world (should immediately parse invalid)
- Confirm that both Ctrl+V to paste and right click to paste work the same way

General checklist

Browser QA
~~- [ ] Checked in both light and dark modes~~
- [ ] Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA - N/A
Code quality checklist
- Added or updated jest ~~and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.
  ~~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist - N/A

- not sure why this was never baked in 🤷

+ minor CSS hack to preserve visual order when error appears

…nter key requires an early return on `onChange` - onPaste fires before onChange, and onChange will bogart the state updates otherwise

mjaggard · 2023-11-03T19:59:53Z

Thank you. I get a NoSuchKey error on the linked web page though

cee-chen · 2023-11-03T20:00:39Z

yeah sorry, the URL is a bit pre-emptive! Kibanamachine should comment here in a bit once the staging environment is done spinning up

cee-chen · 2023-11-03T20:02:47Z

Also dangit, I should have done cross browser testing before opening this PR, apologies 😅 It turns out Firefox fires the onChange vs onPaste events in a different order from webkit, so Safari/Edge isn't acting the same as my screencap above. Please hold...

for some incredibly frustrating reason, firefox correctly runs `finishParsing` after `this.setState` after `onChange` fires, but webkit browsers run it before `onChange`, thus the state shenanigans and for some even more incredibly bizarre reason, `requestAnimationFrame` works for every browser :dead_inside:

src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss

kibanamachine · 2023-11-03T21:02:47Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7341/
Storybook: https://eui.elastic.co/pr_7341/storybook

elasticmachine · 2023-11-03T21:02:51Z

💚 Build Succeeded

Buildkite Build
Commit: 1b6335c

History

💚 Build #986 succeeded 69de2c7

cee-chen · 2023-11-06T15:53:54Z

@tkajtoch I'd love to get this PR in before today's release!

tkajtoch

The changes look and work great!

cee-chen · 2023-11-06T19:13:48Z

Thanks Tomasz!

mjaggard · 2023-11-07T15:03:55Z

@cee-chen perfection achieved ✅︎

`v90.0.0`⏩`v91.0.0-backport.0` ⚠️ While this upgrade pings many teams and has a large code diff, **the majority of the changes are snapshots or tests-related** and do not touch source code, so should theoretically only need a code review and not dedicated QA. The changes in EUI that required a large swathe of these updates are: - **EuiPopover** removed an extra unnecessary `<div>` wrapper on its anchors, which affected many snapshots and a few CSS overrides, which should have been updated - **EuiButtonGroup** now renders `<button>` elements instead of `<input type="radio">` elements for single selection, which affected both snapshots and E2E tests - **EuiSuperDatePicker**'s absolute date input now requires an `Enter` keypress when parsing dates (affected E2E tests) - **EuiComboBox**, when rendered with `singleSelection={{ plainText: 'true' }}`, no longer renders a pill (i.e. text). This combobox type now behaves more like an `EuiFieldText`, where the selection is rendered via input `value` instead. This affected a high amount of E2E tests (both FTR and Cypress), both in terms of updating assertions and changing selections, but should **not** significantly affect user experience - see elastic/eui#7332 for more. --- ## [`v91.0.0-backport.0`](https://github.com/elastic/eui/tree/v91.0.0-backport.0) **This is a backport release only intended for use by Kibana.** - Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs. - `EuiSelectable` now allows configurable text truncation via `listProps.truncationProps` ([#7388](elastic/eui#7388)) - `EuiTextTruncate` now supports a new `calculationDelayMs` prop for working around font loading or layout shifting scenarios ([#7388](elastic/eui#7388)) **Bug fixes** - Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where scrollbar widths were not being accounted for ([#7392](elastic/eui#7392)) ## [`91.0.0`](https://github.com/elastic/eui/tree/v91.0.0) - Updated the background color of `EuiPopover`s in dark mode to increase visibility & contrast against other page/panel backgrounds ([#7310](elastic/eui#7310)) - Memoized `EuiDataGrid` to prevent unneeded re-renders ([#7324](elastic/eui#7324)) - Added a configurable `role` prop to `EuiAccordion` ([#7326](elastic/eui#7326)) - Added a configurable `role` prop to `EuiGlobalToastList` ([#7328](elastic/eui#7328)) - For greater flexibility, `EuiSuperDatePicker` now allows users to paste ISO 8601, RFC 2822, and Unix timestamps in the `Absolute` tab input, in addition to timestamps in the `dateFormat` prop ([#7331](elastic/eui#7331)) - Plain text `EuiComboBox`es now behave more like a normal text field/input. Backspacing will no longer delete the entire value, and selected values can now be double clicked and copied. ([#7332](elastic/eui#7332)) - `EuiDataGrid`'s display settings popover now allows users to clear the "Lines per row" input before typing in a new number ([#7338](elastic/eui#7338)) - Improved the UX of `EuiSuperDatePicker`'s Absolute tab for users manually typing in timestamps ([#7341](elastic/eui#7341)) - Updated `EuiI18n`s with multiple `tokens` to accept dynamic `values` ([#7341](elastic/eui#7341)) **Bug fixes** - Fixed `EuiComboBox`'s `onSearchChange` callback to pass the correct `hasMatchingOptions` value ([#7334](elastic/eui#7334)) - Fixed an `EuiSelectableTemplateSitewide` bug where the `popoverButton` behavior would break if passed a non-DOM React wrapper ([#7339](elastic/eui#7339)) **Deprecations** - `EuiPopover`: deprecated `anchorClassName`. Use `className` instead ([#7311](elastic/eui#7311)) - `EuiPopover`: deprecated `buttonRef`. Use `popoverRef` instead ([#7311](elastic/eui#7311)) - `EuiPopover`: removed extra `.euiPopover__anchor` div wrapper. Target `.euiPopover` instead if necessary ([#7311](elastic/eui#7311)) - Deprecated `EuiButtonGroup`'s `name` prop. This can safely be removed. ([#7325](elastic/eui#7325)) **Breaking changes** - Removed deprecated `euiPaletteComplimentary` - use `euiPaletteComplementary` Instead ([#7333](elastic/eui#7333)) **Accessibility** - Updated `type="single"` `EuiButtonGroup`s to render standard buttons instead of radio buttons under the hood, per recent a11y recommendations ([#7325](elastic/eui#7325)) - `EuiAccordion` now defaults to a less screenreader-noisy `group` role instead of `region`. If your accordion contains significant enough content to be a document landmark role, you may re-configure it back to `region`. ([#7326](elastic/eui#7326)) - Reduced screen reader noisiness when sorting `EuiDataGrid` columns via toolbar ([#7327](elastic/eui#7327)) - `EuiGlobalToastList` now defaults to a `log` role. If your toasts will always require immediate user action, consider (with caution) using the `alert` role instead. ([#7328](elastic/eui#7328)) **CSS-in-JS conversions** - Updated `$euiFontFamily` and `$euiCodeFontFamily` to match Emotion fonts ([#7332](elastic/eui#7332)) --------- Co-authored-by: Cee Chen <constance.chen@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>

cee-chen added 2 commits November 3, 2023 12:26

Change UX to parse on Enter key instead of on every keystroke

68a712c

Add an Enter key helptext hint

70f3168

cee-chen force-pushed the super-date-picker/ux branch from ca945ca to 7aeeca9 Compare November 3, 2023 19:50

cee-chen added 4 commits November 3, 2023 12:54

Fix EuiI18n with multiple tokens not accepting values

c1c5a91

- not sure why this was never baked in 🤷

Minor UX improvement - show formats as helptext

875e036

+ minor CSS hack to preserve visual order when error appears

[ft request] Add extra UX affordance for pasting to not require the e…

ef71862

…nter key requires an early return on `onChange` - onPaste fires before onChange, and onChange will bogart the state updates otherwise

changelog

69de2c7

cee-chen force-pushed the super-date-picker/ux branch from 7aeeca9 to 69de2c7 Compare November 3, 2023 19:55

cee-chen commented Nov 3, 2023

View reviewed changes

src/components/date_picker/super_date_picker/date_popover/_absolute_tab.scss Show resolved Hide resolved

cee-chen marked this pull request as ready for review November 3, 2023 21:55

cee-chen requested a review from a team as a code owner November 3, 2023 21:55

cee-chen requested a review from tkajtoch November 6, 2023 15:49

tkajtoch approved these changes Nov 6, 2023

View reviewed changes

cee-chen merged commit 0fc3c43 into elastic:main Nov 6, 2023
8 checks passed

cee-chen deleted the super-date-picker/ux branch November 6, 2023 19:13

tkajtoch mentioned this pull request Nov 7, 2023

Upgrade EUI to v91.0.0 (with backports) elastic/kibana#170716

Merged

cee-chen mentioned this pull request Nov 27, 2023

WIP elastic/kibana#172021

Closed

cee-chen mentioned this pull request Dec 7, 2023

[Unified search] Manually changing the date in the timepicker in JP errors out elastic/kibana#172340

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSuperDatePicker] Improve `Absolute` tab input UX further #7341

[EuiSuperDatePicker] Improve `Absolute` tab input UX further #7341

cee-chen commented Nov 3, 2023 •

edited by tkajtoch

Loading

mjaggard commented Nov 3, 2023

cee-chen commented Nov 3, 2023

cee-chen commented Nov 3, 2023 •

edited

Loading

kibanamachine commented Nov 3, 2023

elasticmachine commented Nov 3, 2023

cee-chen commented Nov 6, 2023

tkajtoch left a comment

cee-chen commented Nov 6, 2023

mjaggard commented Nov 7, 2023

[EuiSuperDatePicker] Improve Absolute tab input UX further #7341

[EuiSuperDatePicker] Improve Absolute tab input UX further #7341

Conversation

cee-chen commented Nov 3, 2023 • edited by tkajtoch Loading

Summary

QA

General checklist

mjaggard commented Nov 3, 2023

cee-chen commented Nov 3, 2023

cee-chen commented Nov 3, 2023 • edited Loading

kibanamachine commented Nov 3, 2023

elasticmachine commented Nov 3, 2023

💚 Build Succeeded

History

cee-chen commented Nov 6, 2023

tkajtoch left a comment

Choose a reason for hiding this comment

cee-chen commented Nov 6, 2023

mjaggard commented Nov 7, 2023

[EuiSuperDatePicker] Improve `Absolute` tab input UX further #7341

[EuiSuperDatePicker] Improve `Absolute` tab input UX further #7341

cee-chen commented Nov 3, 2023 •

edited by tkajtoch

Loading

cee-chen commented Nov 3, 2023 •

edited

Loading