[EuiSuperDatePicker] Allow passing `canRoundRelativeUnits={false}`, which turns off relative unit rounding #7502

cee-chen · 2024-02-02T02:36:23Z

Summary

closes #4026, addresses elastic/kibana#143157

👋 I'm bad at naming things, please feel free to suggest a less wordy name for this prop if you can think of one!

💭 NOTE: If we find that users prefer this behavior as a default, we should potentially consider turning this flag on to default to true in the future. This will require us to track usage and user feedback over time.

Screencaps

Before	After

QA

Go to https://eui.elastic.co/pr_7502/#/templates/super-date-picker
Click the Playground link on the page
Find the canRoundRelativeUnits control and toggle it to false
Click the playground input
Change the numeric value from 15 to 1500 and confirm that the rendered output shows 1500 minutes ago (instead of rounding up to a day)
Change the unit to hours and confirm the rendered output shows 1500 hours ago (instead of rounding up to months etc)
Confirm that changing to future times still renders the correct humanized phrase, e.g. "in x years"
Find the locale playground toggle and change it to, e.g. fr or ja
Confirm the in the input correctly renders in the expected language

General checklist

Browser QA
- Checked in Chrome, Safari, Edge, and Firefox
- Checked in multiple i18n locales
Docs site QA
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- [ ] Added documentation - I don't consider this important enough to add an entire section for (vs. just testing in the playground), please LMK if you disagree!
Code quality checklist
- Added or updated jest ~~and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.
Designer checklist - N/A

+ default it to true and pass it down to the subcomponents that will need it

+ add tests for `useFormatTimeString` - except for the roundUp option because I can't figure out what the heck that does 🤷

tkajtoch · 2024-02-02T16:27:38Z

src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx

@@ -38,6 +38,7 @@ export interface EuiDatePopoverButtonProps {
  onPopoverClose: EuiPopoverProps['closePopover'];
  onPopoverToggle: MouseEventHandler<HTMLButtonElement>;
  position: 'start' | 'end';
+  preferLargerRelativeUnits?: boolean;


This prop name might be a bit unclear. What do you think of renaming it to relativeUnitRounding as in the title of this PR? :D I think including the word "rounding" makes it easier to search for when you see that rounding behavior and want to do something about it

Yep, that does sound way better. Let's go with that!

Actually, hm, does making it a verb sound better to you at all, out of curiosity? roundRelativeUnits={false} vs relativeUnitRounding={false}?

Or yet another thought: if we want to follow is/has/can/shouldX naming convention style for booleans, we could do canRoundRelativeUnits, but now we're getting back into the original verbose var name territory lmao

To recap our Slack discussion: We went with canRoundRelativeUnits for clearer boolean naming. roundRelativeUnits as a verb feels like it would take a callback rather than a boolean, so we avoided that (unless we someday want to do one of those union types that Tomasz hates so much, like Function | boolean 🤣)

Also our next datepicker component will definitely be named EuiSuperDuperDatePicker.

tkajtoch · 2024-02-02T16:38:01Z

Great job on clean and quick implementation! The changes look and work great, I'll approve when you're happy with the naming of the new prop!

tkajtoch

approved.final.final.v7 (Copy).gif

kibanamachine · 2024-02-02T17:28:21Z

Preview staging links for this PR:

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

elasticmachine · 2024-02-02T17:28:24Z

💚 Build Succeeded

Buildkite Build
Commit: 489c100

History

💚 Build #1347 succeeded 64b0fab

`v93.0.0` ⏩ `v93.1.1` --- ## [`v93.1.1`](https://github.com/elastic/eui/releases/v93.2.0) **This is a patch release primarily intended for use by Kibana.** - Added top-level `EuiTreeView.Item` export ([#7526](elastic/eui#7526)) ## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0) - Added `index` glyph to `EuiIcon` ([#7498](elastic/eui#7498)) - Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. ([#7496](elastic/eui#7496)) - Updated `EuiContextMenu` with a new `panels.items.renderItem` property, which allows rendering completely custom items next to standard `EuiContextMenuItem` objects ([#7510](elastic/eui#7510)) - `EuiSuperDatePicker` updates: - Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](elastic/eui#7501)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](elastic/eui#7501)) - Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). ([#7501](elastic/eui#7501)) - Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. ([#7502](elastic/eui#7502)) - Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds ([#7516](elastic/eui#7516)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds ([#7516](elastic/eui#7516)) **Bug fixes** - Fixed `EuiHighlight` to not parse `search` strings as regexes ([#7496](elastic/eui#7496)) - Fixed `EuiSuperDatePicker` submit bug when used within `<form>` elements ([#7504](elastic/eui#7504)) - Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to items without expandable children ([#7513](elastic/eui#7513)) **CSS-in-JS conversions** - Converted `EuiTreeView` to Emotion. Updates as part of the conversion: ([#7513](elastic/eui#7513)) - Removed `.euiTreeView__wrapper` div node - Enforced consistent `icon` size based on `display` size

`v93.0.0` ⏩ `v93.1.1` --- ## [`v93.1.1`](https://github.com/elastic/eui/releases/v93.2.0) **This is a patch release primarily intended for use by Kibana.** - Added top-level `EuiTreeView.Item` export ([elastic#7526](elastic/eui#7526)) ## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0) - Added `index` glyph to `EuiIcon` ([elastic#7498](elastic/eui#7498)) - Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. ([elastic#7496](elastic/eui#7496)) - Updated `EuiContextMenu` with a new `panels.items.renderItem` property, which allows rendering completely custom items next to standard `EuiContextMenuItem` objects ([elastic#7510](elastic/eui#7510)) - `EuiSuperDatePicker` updates: - Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([elastic#7501](elastic/eui#7501)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([elastic#7501](elastic/eui#7501)) - Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). ([elastic#7501](elastic/eui#7501)) - Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. ([elastic#7502](elastic/eui#7502)) - Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds ([elastic#7516](elastic/eui#7516)) - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds ([elastic#7516](elastic/eui#7516)) **Bug fixes** - Fixed `EuiHighlight` to not parse `search` strings as regexes ([elastic#7496](elastic/eui#7496)) - Fixed `EuiSuperDatePicker` submit bug when used within `<form>` elements ([elastic#7504](elastic/eui#7504)) - Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to items without expandable children ([elastic#7513](elastic/eui#7513)) **CSS-in-JS conversions** - Converted `EuiTreeView` to Emotion. Updates as part of the conversion: ([elastic#7513](elastic/eui#7513)) - Removed `.euiTreeView__wrapper` div node - Enforced consistent `icon` size based on `display` size

cee-chen added 4 commits February 1, 2024 13:28

Set up new preferLargerRelativeUnits prop

5e2c091

+ default it to true and pass it down to the subcomponents that will need it

Update pretty duration utils to accept preferLargerRelativeUnits

91872a8

+ add tests for `useFormatTimeString` - except for the roundUp option because I can't figure out what the heck that does 🤷

Add final tests with event/user behavior

312815e

changelog

64b0fab

cee-chen marked this pull request as ready for review February 2, 2024 03:17

cee-chen requested a review from a team as a code owner February 2, 2024 03:17

tkajtoch reviewed Feb 2, 2024

View reviewed changes

cee-chen force-pushed the super-date-picker/relative-units branch from e7a874e to 64b0fab Compare February 2, 2024 16:47

[PR feedback] naming: final_FINAL_v4.docx

489c100

tkajtoch approved these changes Feb 2, 2024

View reviewed changes

cee-chen changed the title ~~[EuiSuperDatePicker] Allow passing preferLargerRelativeUnits={false}, which turns off relative unit rounding~~ [EuiSuperDatePicker] Allow passing canRoundRelativeUnits={false}, which turns off relative unit rounding Feb 2, 2024

cee-chen merged commit 203c6c9 into elastic:main Feb 5, 2024
7 checks passed

cee-chen deleted the super-date-picker/relative-units branch February 5, 2024 17:57

cee-chen mentioned this pull request Feb 12, 2024

Upgrade EUI to v93.1.1 elastic/kibana#176762

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSuperDatePicker] Allow passing `canRoundRelativeUnits={false}`, which turns off relative unit rounding #7502

[EuiSuperDatePicker] Allow passing `canRoundRelativeUnits={false}`, which turns off relative unit rounding #7502

cee-chen commented Feb 2, 2024 •

edited

Loading

tkajtoch Feb 2, 2024

cee-chen Feb 2, 2024

cee-chen Feb 2, 2024 •

edited

Loading

cee-chen Feb 2, 2024 •

edited

Loading

cee-chen Feb 2, 2024

tkajtoch commented Feb 2, 2024

tkajtoch left a comment

kibanamachine commented Feb 2, 2024

elasticmachine commented Feb 2, 2024

[EuiSuperDatePicker] Allow passing canRoundRelativeUnits={false}, which turns off relative unit rounding #7502

[EuiSuperDatePicker] Allow passing canRoundRelativeUnits={false}, which turns off relative unit rounding #7502

Conversation

cee-chen commented Feb 2, 2024 • edited Loading

Summary

Screencaps

QA

General checklist

tkajtoch Feb 2, 2024

Choose a reason for hiding this comment

cee-chen Feb 2, 2024

Choose a reason for hiding this comment

cee-chen Feb 2, 2024 • edited Loading

Choose a reason for hiding this comment

cee-chen Feb 2, 2024 • edited Loading

Choose a reason for hiding this comment

cee-chen Feb 2, 2024

Choose a reason for hiding this comment

tkajtoch commented Feb 2, 2024

tkajtoch left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 2, 2024

elasticmachine commented Feb 2, 2024

💚 Build Succeeded

History

[EuiSuperDatePicker] Allow passing `canRoundRelativeUnits={false}`, which turns off relative unit rounding #7502

[EuiSuperDatePicker] Allow passing `canRoundRelativeUnits={false}`, which turns off relative unit rounding #7502

cee-chen commented Feb 2, 2024 •

edited

Loading

cee-chen Feb 2, 2024 •

edited

Loading

cee-chen Feb 2, 2024 •

edited

Loading