[EuiSuperDatePicker] Fixes for width and auto refresh by cchaos · Pull Request #5383 · elastic/eui

cchaos · 2021-11-16T21:36:57Z

[EuiRefreshInterval] Updates

I did some user-testing on this with a sample size of 1 😂 , but the main feedback was that the "Start"/"Stop" nomenclature was confusing because it felt more like it was going to animate over a period of time, instead of refreshing. This new design was immediately recognizable as to what was going to occur.

Uses a toggle for start/pause
Disables inputs if paused
Invalidates value if 0 or less
Render in one row
Increases the default refreshInterval to 1000 / 1s

I also looked at attempting to fix #2249 but the problem is, if it doesn't turn back off, then the refresh continues to happen constantly.

[New] EuiAutoRefresh & EuiAutoRefreshButton components

Fixes #1545

EuiAutoRefresh is just a [readOnly] text input that's wrapped in an EuiInputWrapper whose popover contains the EuiRefreshInterval.
EuiAutoRefreshButton is similar to the above but instead of an input, it's just an EuiEmptyButton.

[EuiSuperDatePicker] Sizing updates

Added width prop
Adjusted styles accordingly with sensible min-widths
Now supports compressed: Partially covers [EuiDatePicker] compressed flag support #4572

Screen.Recording.2021-11-17.at.10.30.10.AM.mp4

Added isQuickSelectOnly prop
Added an "Elastic Pattern" section showing a "KQL" bar interacting with date picker

Screen.Recording.2021-11-17.at.10.33.29.AM.mp4

Removed ‘Show dates’ in favor of automatically expanding pretty format and opening start date popover (before it used to take 2 clicks to open the the start date when in pretty format. Now it's only one.

Screen.Recording.2021-11-17.at.10.39.22.AM.mp4

[EuiSuperDatePicker] Auto refresh updates

Fixes #4213

Simplified isAutoRefreshOnly to render the new EuiAutoRefresh component
Added EuiAutoRefreshButton as an append when turned on which provides a much better indicator that it is in fact on
prettyInterval(): added shortHand parameter

[EuiSuperDatePicker] Other fixes

Fixed border-radius for append
Fixed up some horizontal rules in Quick Select
Moved round switch to popover footer to prepare for [EuiSuperDatePicker] Add "Round to" flag on commonly used section and expose a property to enable it by default #4537

[EuiSuperUpdateButton] Added support for `iconOnly` version and moved `responsive` to customizable prop

Support in EuiSuperDatePicker with showUpdateButton = ‘iconOnly’
Fix min-widths on smaller screens
Split up prop types between internal and configurable

Screen.Recording.2021-11-17.at.10.58.57.AM.mp4

[EuiFormControlLayout] Fixes

Fixed dataTestSubj -> data-test-subj (Added data-test-subj to EuiFormControlLayout component in super_date_picker file #5085 accidentally created the prop name incorrectly)
Fixed background of button prepend/appends with readOnly
Fix color of prepend/append backgrounds in dark mode

[EuiIcon] Added `timeRefresh`

Checklist

- Adds `width` and `isQuickSelectOnly` props - Adjusts styles accordingly with sensible min-widths - Adds Playground - Updated Save Queries example to show auto width and reducing to quick select only when KQL is in focus - Fixed `dataTestSubj` -> `data-test-subj` - Removed ‘Show dates’ in favor of automatically expandin pretty format and opening start date popover

…`readOnly` And fixed border-radius for EuiSuperDatePicker with `append`

- disabling inputs if paused - invalidating value if 0 or less - always rendering (moved render logic to quick select) - render in one row

…uiAutoRefresh component - Increases the default `refreshInterval` to `1000` / `1s`

…urned on - [prettyInterval()] added `shortHand` parameter

…ng tests

…esponsive` to customizable prop - Support in EuiSuperDatePicker with `showUpdateButton = ‘iconOnly’` - Fix min-widths on smaller screens

…onfigurable

kibanamachine · 2021-11-16T22:06:02Z

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

cchaos · 2021-11-17T16:04:05Z

I've filled out the PR summary with screenshots and some more explanations now this PR is ready for review as I finalize all the checklist items.

elizabetdev · 2021-11-22T16:54:56Z

@cchaos I started reviewing this PR. Need to do some more tests. But before I continue, one thing that came to my mind for the EuiAutoRefreshButton is if we should allow an animation on refresh. For example, the icon could have a subtle animation.

This way users would have feedback and know that the refresh is working as expected.

cchaos · 2021-11-22T18:32:47Z

An animation could be helpful. I think that would require a new prop since the standalone EuiAutoRefresh doesn't actually handle the countdown. Can you make a specific issue for follow up? Since this PR is big enough already 😬

kibanamachine · 2021-11-23T04:03:00Z

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

kibanamachine · 2021-12-03T17:01:05Z

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

src-docs/src/views/auto_refresh/auto_refresh_input.tsx

src-docs/src/views/super_date_picker/super_date_picker_example.js

cee-chen

Changes LGTM once CI is passing!

kibanamachine · 2021-12-03T18:57:17Z

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

…d button - Change `TSX` source types examples back to `JS` for now

kibanamachine · 2021-12-03T19:48:48Z

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

cchaos · 2021-12-03T20:56:41Z

@miukimiu Can you spot check this for any design issues next week?

src-docs/src/views/super_date_picker/super_date_picker_example.js

kibanamachine · 2021-12-03T23:00:09Z

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

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

kibanamachine · 2021-12-04T00:33:43Z

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

elizabetdev

Thanks, @cchaos! Great enhancements! LGTM! 🎉

Tested in Chrome, Safari, Edge, and Firefox. I also looked into the code.

src-docs/src/views/super_date_picker/super_date_picker_config.tsx

elizabetdev · 2021-12-06T12:34:28Z

src-docs/src/views/super_date_picker/super_date_picker_example.js

 export const SuperDatePickerExample = {
  title: 'Super date picker',
+  intro: (
+    <EuiText grow={false}>


Should we remove the grow={false} so that the text has the same width as the rest of the page?

Suggested change

<EuiText grow={false}>

<EuiText>

Removing grow actually aligns better with our our EuiPageHeader renders the description prop. I know it may seem odd comparatively, but it's a much better line-length for readability and will align with our guidelines pages.

src/components/date_picker/auto_refresh/refresh_interval.tsx

src-docs/src/views/auto_refresh/auto_refresh_example.js

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

kibanamachine · 2021-12-06T15:50:39Z

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

kibanamachine · 2021-12-06T16:41:25Z

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

cee-chen · 2021-12-06T16:45:54Z

jenkins test this

kibanamachine · 2021-12-06T17:10:18Z

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

kibanamachine · 2021-12-06T21:11:27Z

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

cchaos added 19 commits November 14, 2021 14:26

[EuiIcon] Added timeRefresh

8b17281

Remove HTML imports from docs generator

b141a65

[EuiFormControlLayout] Fix background of button prepend/appends with …

98c9185

…`readOnly` And fixed border-radius for EuiSuperDatePicker with `append`

[EuiRefreshInterval] Using a toggle for start/stop

50eae32

- disabling inputs if paused - invalidating value if 0 or less - always rendering (moved render logic to quick select) - render in one row

[New] EuiAutoRefresh & EuiAutoRefreshButton components

1939702

[EuiSuperDatePicker] Simplify isAutoRefreshOnly to render the new E…

b2ea67c

…uiAutoRefresh component - Increases the default `refreshInterval` to `1000` / `1s`

[EuiSuperDatePicker] Added EuiAutoRefreshButton as an append when t…

caa8534

…urned on - [prettyInterval()] added `shortHand` parameter

[Cleanup] Early docs, playgrounds, reusing types, moving files, beefi…

1f9292f

…ng tests

Fix color of prepend/append backgrounds in dark mode

056336e

More docs and fixing up some horizontal rules

191436e

Moved round switch to popover footer to prepare for elastic#4537

4d05eb1

[EuiSuperDatePicker] Now supports compressed

5c1fa41

[EuiSuperUpdateButton] Add support for iconOnly version and move `r…

b1d5e9f

…esponsive` to customizable prop - Support in EuiSuperDatePicker with `showUpdateButton = ‘iconOnly’` - Fix min-widths on smaller screens

More docs updates

e100977

[EuiSuperUpdateButton] Splitting up prop types between internal and c…

cc927b7

…onfigurable

Moved Auto refresh docs to their own section

cb8e7dc

More style and playground fixes

e1ebf47

Elastic pattern and Typescript docs

5a8bed1

cchaos added this to the Elastic Stack 8.1 milestone Nov 17, 2021

cchaos marked this pull request as ready for review November 17, 2021 16:03

elizabetdev self-requested a review November 19, 2021 15:29

Merge branch 'main' into fix/super_date_picker_width

49ec347

cchaos added 2 commits November 22, 2021 23:25

Changelog and more test

4185ac1

Some mobile fixes

bb16631

Missed a few comments on the docs

b0cb475

cee-chen reviewed Dec 3, 2021

View reviewed changes

src-docs/src/views/auto_refresh/auto_refresh_input.tsx Show resolved Hide resolved

cee-chen reviewed Dec 3, 2021

View reviewed changes

src-docs/src/views/super_date_picker/super_date_picker_example.js Show resolved Hide resolved

cee-chen approved these changes Dec 3, 2021

View reviewed changes

Merge branch 'main' into fix/super_date_picker_width

4092bff

Apply an aria-label to the AutoRefresh input the same as the prepen…

422f3fd

…d button - Change `TSX` source types examples back to `JS` for now

[Docs] Back to .TSX source types

b265700

cee-chen reviewed Dec 3, 2021

View reviewed changes

src-docs/src/views/super_date_picker/super_date_picker_example.js Outdated Show resolved Hide resolved

Remove comment

a6d1a6a

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

elizabetdev approved these changes Dec 6, 2021

View reviewed changes

Merge branch 'main' into fix/super_date_picker_width

e69fd02

cchaos added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Dec 6, 2021

cchaos and others added 2 commits December 6, 2021 10:21

Typos

0a679a5

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

Fix example spacing for Safari

fd3e7d2

[EuiAutoRefresh] Fix on handler for input

a442b9d

Merge branch 'main' into fix/super_date_picker_width

4bc82da

cchaos merged commit 17692a4 into elastic:main Dec 6, 2021

cchaos deleted the fix/super_date_picker_width branch December 6, 2021 21:27

thompsongl mentioned this pull request Dec 9, 2021

Upgrade EUI to v43.1.1 elastic/kibana#120935

Merged

1 task

Conversation

cchaos commented Nov 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

[EuiRefreshInterval] Updates

[New] EuiAutoRefresh & EuiAutoRefreshButton components

[EuiSuperDatePicker] Sizing updates

[EuiSuperDatePicker] Auto refresh updates

[EuiSuperDatePicker] Other fixes

[EuiSuperUpdateButton] Added support for iconOnly version and moved responsive to customizable prop

[EuiFormControlLayout] Fixes

[EuiIcon] Added timeRefresh

Checklist

Uh oh!

kibanamachine commented Nov 16, 2021

Uh oh!

cchaos commented Nov 17, 2021

Uh oh!

elizabetdev commented Nov 22, 2021

Uh oh!

cchaos commented Nov 22, 2021

Uh oh!

kibanamachine commented Nov 23, 2021

Uh oh!

kibanamachine commented Dec 3, 2021

Uh oh!

Uh oh!

Uh oh!

cee-chen left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Dec 3, 2021

Uh oh!

kibanamachine commented Dec 3, 2021

Uh oh!

cchaos commented Dec 3, 2021

Uh oh!

Uh oh!

kibanamachine commented Dec 3, 2021

Uh oh!

kibanamachine commented Dec 4, 2021

Uh oh!

elizabetdev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elizabetdev Dec 6, 2021

Choose a reason for hiding this comment

Uh oh!

cchaos Dec 6, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kibanamachine commented Dec 6, 2021

Uh oh!

kibanamachine commented Dec 6, 2021

Uh oh!

cee-chen commented Dec 6, 2021

Uh oh!

kibanamachine commented Dec 6, 2021

Uh oh!

kibanamachine commented Dec 6, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cchaos commented Nov 16, 2021 •

edited

Loading

[EuiSuperUpdateButton] Added support for `iconOnly` version and moved `responsive` to customizable prop

[EuiIcon] Added `timeRefresh`