Skip to content

[EuiSuperDatePicker] Time window "zoom in"#9325

Merged
acstll merged 15 commits intoelastic:mainfrom
acstll:time-window-zoom-in
Jan 22, 2026
Merged

[EuiSuperDatePicker] Time window "zoom in"#9325
acstll merged 15 commits intoelastic:mainfrom
acstll:time-window-zoom-in

Conversation

@acstll
Copy link
Copy Markdown
Contributor

@acstll acstll commented Jan 19, 2026 •
edited by weronikaolejniczak
Loading

Summary

This PR adds a "zoom in" button to the time window feature in EuiSuperDatePicker.

It's hidden by default as per design decision. Can be enabled with a prop.

Why are we making this change?

To fulfill a request.

Screenshots

image

Impact to users

🟢 The new button being added is hidden by default. And for types, only a new optional prop was added.

QA

  • Verify the zoom in button works as expected (storybook, enable in showTimeWindowButtons with showZoomIn="true"
  • Verify docs are understandable and clear (staging)

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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)

@acstll acstll self-assigned this Jan 19, 2026
@acstll acstll added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jan 19, 2026
@acstll acstll removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Jan 19, 2026
@acstll acstll marked this pull request as ready for review January 19, 2026 11:57
@acstll acstll requested a review from a team as a code owner January 19, 2026 11:57
@weronikaolejniczak weronikaolejniczak self-requested a review January 20, 2026 09:02
weronikaolejniczak
weronikaolejniczak reviewed Jan 20, 2026
View reviewed changes
weronikaolejniczak
weronikaolejniczak reviewed Jan 20, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested the buttons in Storybook.

Zooming in works as expected!

✅ No regression to other functionality compared to prod
✅ When time window is 0, the buttons are correctly disabled and get enabled when I "zoom out"
✅ The tooltip on the "zoom in" says "Cannot zoom further in"
✅ I cannot use the buttons when the time window is invalid

I ran VRT locally and all tests passed (expect for EuiImage that I imagine is from main). And that leads me to think, don't we want to add VRT for the buttons?

weronikaolejniczak
weronikaolejniczak requested changes Jan 20, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The functionality looks and works correctly. I have a bunch of doubts and nits regarding the code though. It's not much but I think it's worth discussing 🙏🏻 Thank you for the hard work, Arturo!

@acstll
Copy link
Copy Markdown
Contributor Author

acstll commented Jan 20, 2026

The functionality looks and works correctly. I have a bunch of doubts and nits regarding the code though. It's not much but I think it's worth discussing 🙏🏻 Thank you for the hard work, Arturo!

thanks for the amazing review @weronikaolejniczak 🙌 — I'll handle the feedback tomorrow first thing

@KodeRad KodeRad mentioned this pull request Jan 20, 2026
Closed
@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jan 21, 2026

💚 Build Succeeded

History

cc @acstll

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jan 21, 2026

💚 Build Succeeded

History

cc @acstll

@acstll
Copy link
Copy Markdown
Contributor Author

acstll commented Jan 21, 2026 •
edited
Loading

I ran VRT locally and all tests passed (expect for EuiImage that I imagine is from main). And that leads me to think, don't we want to add VRT for the buttons?

I added a VRT in f6b8968 — thanks for the catch

while addressing the feedback, I also:

  • updated the "render null" check to account for the new prop in e034d9d
  • removed the isSelected prop from the button, no longer needed after that last button group update 6fbc418

I think I replied to every comment. Thanks again for the diligent review @weronikaolejniczak 🙏

weronikaolejniczak
weronikaolejniczak approved these changes Jan 22, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🟢 Thanks for addressing the code suggestions. 🙏🏻 Great job, Arturo!

@acstll acstll merged commit be54f31 into elastic:main Jan 22, 2026
5 checks passed
weronikaolejniczak added a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026
@acstll @weronikaolejniczak
[EuiSuperDatePicker] Time window "zoom in" (elastic#9325)
6404000 
Co-authored-by: Weronika Olejniczak <32842468+weronikaolejniczak@users.noreply.github.com>
@acstll acstll mentioned this pull request Jan 26, 2026
Merged
acstll added a commit to elastic/kibana that referenced this pull request Jan 28, 2026
@acstll @tkajtoch
Upgrade EUI to v112.1.0 (#250407)
814fdbd 
`112.0.0` ⏩ `112.1.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

## Changes

- Update `span_links_badge.tsx` conditional `onClick` props on
`EuiBadge` to satisfy TypeScript
93d7fae
- Update snapshots 24c2f9a

## Package updates

### `@elastic/eui`
[`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0)

- Updated `timeline` icon glyph
([#9331](elastic/eui#9331))
- Updated `EuiContextMenu` panels to allow passing `data-test-subj`,
`aria-label`, `className` and `css` props
([#9323](elastic/eui#9323))
- Added "zoom in" functionality to time window buttons in
`EuiSuperDatePicker` ([#9325](elastic/eui#9325))
- Added `displayName` to `EuiButton`, `EuiButtonEmpty`,
`EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`,
`EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`,
`EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its
sub-components and `EuiPanel`
([#9324](elastic/eui#9324))
- Added `fill` prop (defaults to `false`) to `EuiBadge` component that
controls whether the badge should use filled or non-filled (less
intense) colors. By default, badges will now render as the non-filled
variant. ([#9306](elastic/eui#9306))
- Updated EuiBadge design to have rounded corners and improved paddings
([#9302](elastic/eui#9302))

**Bug fixes**

- Fixed non-virtualized `EuiSelectable` throwing SyntaxError when
selecting an option ([#9326](elastic/eui#9326))
- Fixed an issue where `push` flyouts in a stacked layout calculated the
content offset based on the hidden main flyout's width instead of the
visible child flyout's width
([#9322](elastic/eui#9322))

### @elastic/eui-theme-borealis
[`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540)

- Updated `badgeBackground` color token value to equal
`backgroundFilledText`
([#9306](elastic/eui#9306))

### @elastic/eui-docusaurus-theme
[`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220)

- Added `extraFiles` prop to the `Demo` component. It allows to pass
extra files that will be added to the Codesandbox instance.
([#9317](elastic/eui#9317))
- Updated the `IMPORT_REGEX` to include relative imports so that all
imports are removed from the snippet. All imported references have to be
passed to `Demo` in the `scope` prop.
([#9317](elastic/eui#9317))

---------

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
hannahbrooks pushed a commit to hannahbrooks/kibana that referenced this pull request Jan 30, 2026
@acstll @tkajtoch @hannahbrooks
Upgrade EUI to v112.1.0 (elastic#250407)
e964a37 
`112.0.0` ⏩ `112.1.0`

[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)

## Changes

- Update `span_links_badge.tsx` conditional `onClick` props on
`EuiBadge` to satisfy TypeScript
93d7fae
- Update snapshots 24c2f9a

## Package updates

### `@elastic/eui`
[`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0)

- Updated `timeline` icon glyph
([elastic#9331](elastic/eui#9331))
- Updated `EuiContextMenu` panels to allow passing `data-test-subj`,
`aria-label`, `className` and `css` props
([elastic#9323](elastic/eui#9323))
- Added "zoom in" functionality to time window buttons in
`EuiSuperDatePicker` ([elastic#9325](elastic/eui#9325))
- Added `displayName` to `EuiButton`, `EuiButtonEmpty`,
`EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`,
`EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`,
`EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its
sub-components and `EuiPanel`
([elastic#9324](elastic/eui#9324))
- Added `fill` prop (defaults to `false`) to `EuiBadge` component that
controls whether the badge should use filled or non-filled (less
intense) colors. By default, badges will now render as the non-filled
variant. ([elastic#9306](elastic/eui#9306))
- Updated EuiBadge design to have rounded corners and improved paddings
([elastic#9302](elastic/eui#9302))

**Bug fixes**

- Fixed non-virtualized `EuiSelectable` throwing SyntaxError when
selecting an option ([elastic#9326](elastic/eui#9326))
- Fixed an issue where `push` flyouts in a stacked layout calculated the
content offset based on the hidden main flyout's width instead of the
visible child flyout's width
([elastic#9322](elastic/eui#9322))

### @elastic/eui-theme-borealis
[`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540)

- Updated `badgeBackground` color token value to equal
`backgroundFilledText`
([elastic#9306](elastic/eui#9306))

### @elastic/eui-docusaurus-theme
[`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220)

- Added `extraFiles` prop to the `Demo` component. It allows to pass
extra files that will be added to the Codesandbox instance.
([elastic#9317](elastic/eui#9317))
- Updated the `IMPORT_REGEX` to include relative imports so that all
imports are removed from the snippet. All imported references have to be
passed to `Demo` in the `scope` prop.
([elastic#9317](elastic/eui#9317))

---------

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@weronikaolejniczak weronikaolejniczak weronikaolejniczak approved these changes

Assignees

@acstll acstll

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@acstll @elasticmachine @weronikaolejniczak