[EuiSuperDatePicker] Time zone display #9191

acstll · 2025-11-06T15:17:01Z

Summary

Important

This PR merges into a feature branch

This adds time zone information to the date picker popovers in the EuiSuperDatePicker. Passing the name of the time zone is required. The space where the time zone information is shown can be customized with a render function prop.

Resolves https://github.com/elastic/eui-private/issues/440 🔒

Why are we making this change?

As part of a series of improvements to EuiSuperDatePicker that should have a positive immediate impact for users.

Screenshots

Figma

Impact to users

🟢 No impact. Setting the timeZoneDisplay prop is needed in order for the info to show. No logic in the component is affected.

QA

📘 I'm open to feedback regarding:

the prop names
whether the render function (timeZoneCustomDisplayRender) is the best approach for the custom content
- the requirement, as in the acceptance criteria is: "Optionally add an icon button that links to the settings page where the time zone can be changed"
anything else is needed for accessibility — I considered nothing specific was needed

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - ~~(emulate forced colors if you do not have access to a Windows machine.)~~
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression 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)~~
- ~~If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

packages/eui/src/components/date_picker/super_date_picker/date_popover/timezone_display.tsx

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

mgadewoll · 2025-11-11T08:34:09Z

packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx

  roundUp,
  labelPrefix,
+  timeZoneDisplay,
+  timeZoneCustomDisplayRender,


[Unrelated to the marked line]:

I noticed that the prepend on the EuiFieldText is not linked to the input (code), meaning the input has no label (the same applies in other tabs).

We don't have to fix it here if you prefer keeping it scoped, but maybe you could add it at some point where it fits in while working on EuiSuperDatePicker?

nice catch, if I don't do it here, I'll make sure to do it while working on EuiSuperDatePicker as you suggest

will do this in a separate PR 🫡

packages/website/docs/components/forms/date-and-time/super-date-picker.mdx

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx

probably no difference, but no need to change it

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx

Co-authored-by: Lene Gadewoll <[email protected]>

elasticmachine · 2025-11-12T16:02:21Z

💚 Build Succeeded

History

💚 Build #1900 succeeded 64938bb
💚 Build #1899 succeeded 5e32411
💚 Build #1890 succeeded cf487a8
💚 Build #1859 succeeded dcce4f0
💚 Build #1857 succeeded 651d787
💚 Build #1854 succeeded 1028a20

cc @acstll

mgadewoll

🟢 Thanks for the additional updates! The changes are LGTM and the added timezone display works as expected.

elasticmachine · 2025-11-12T16:13:17Z

💚 Build Succeeded

Buildkite Build
Commit: 7387079

History

💚 Build #5192 succeeded 64938bb
💚 Build #5183 succeeded cf487a8
💚 Build #5161 succeeded dcce4f0
💚 Build #5157 succeeded 1028a20
💚 Build #5153 succeeded f51c969
💔 Build #5152 failed 0237cd1

cc @acstll

Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([elastic#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([elastic#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([elastic#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([elastic#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([elastic#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([elastic#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([elastic#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([elastic#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([elastic#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([elastic#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([elastic#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([elastic#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([elastic#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([elastic#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([elastic#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

acstll added 2 commits November 6, 2025 15:59

[EuiTimeZoneDisplay] New component

ae6cdbb

[EuiSuperDatePicker] Integrate time zone display

0237cd1

acstll self-assigned this Nov 6, 2025

acstll added 11 commits November 6, 2025 17:07

[EuiTimeZoneDisplay] locale not actually needed

acbd81d

[EuiTimeZoneDisplay] Add story

9bf0081

[TimeWindowButtons] Try fixing flaky test

34a77ea

Lint, remove smoke testing leftover

f51c969

[EuiTimeZoneDisplay] Rename hook and add eui prefix

91c3751

TODO comment

7748688

[EuiTimeZoneDisplay] Add unit tests

216f083

Update VRT

f0a2a79

[Docs] Time zone display

954232f

Lint

58d8029

Changelog

1028a20

acstll marked this pull request as ready for review November 7, 2025 12:26

acstll requested a review from a team as a code owner November 7, 2025 12:26

acstll added 2 commits November 7, 2025 15:45

[TimeWindowButtons] Try fixing flaky test 2

651d787

[TimeWindowButtons] Try fixing flaky test 3

dcce4f0

mgadewoll self-requested a review November 10, 2025 09:31

mgadewoll reviewed Nov 11, 2025

View reviewed changes

acstll added 5 commits November 11, 2025 17:51

[EuiTimeZoneDisplay] Refactor props, use timeZoneDisplayProps

cf487a8

[Docs] Add missing aria-label to EuiButtonIcon

9a20e95

[EuiTimeZoneDisplay] Link inputs via aria-describedby

a990bf5

[EuiSuperDatePicker] Show time zone by default in stories

bb9904b

[Docs] Update time zone bit

3d010a3

mgadewoll reviewed Nov 12, 2025

View reviewed changes

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx Outdated Show resolved Hide resolved

acstll added 4 commits November 12, 2025 13:10

Polish comments, JSDoc

4219bbc

Update snapshots

325881e

[Docs] Fix snippet

5e32411

Update changelog

b1737aa

[Nit] Keep interface as it was

64938bb

probably no difference, but no need to change it

acstll requested a review from mgadewoll November 12, 2025 12:45

mgadewoll reviewed Nov 12, 2025

View reviewed changes

acstll and others added 2 commits November 12, 2025 16:21

Typo

dcda47f

Co-authored-by: Lene Gadewoll <[email protected]>

Fix Storybook interaction

7387079

mgadewoll approved these changes Nov 12, 2025

View reviewed changes

acstll merged commit 3742248 into elastic:feat/super-date-picker-track-1-ms-1 Nov 12, 2025
4 checks passed

acstll added a commit that referenced this pull request Nov 13, 2025

[EuiSuperDatePicker] Time zone display (#9191)

caae254

Co-authored-by: Lene Gadewoll <[email protected]>

This was referenced Nov 14, 2025

[EuiSuperDatePicker] Improvements (batch 1) #9210

Merged

Update EUI to v109.1.0 elastic/kibana#243270

Merged

acstll mentioned this pull request Nov 25, 2025

[EuiSuperDatePicker] Papercuts #9239

Merged

18 tasks

[EuiSuperDatePicker] Time zone display #9191

[EuiSuperDatePicker] Time zone display #9191

Uh oh!

Conversation

acstll commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Figma

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Nov 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Nov 12, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 12, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Nov 6, 2025 •

edited

Loading