[EuiSuperDatePicker] Fix icon size in time window buttons by acstll · Pull Request #9245 · elastic/eui

acstll · 2025-11-27T13:52:56Z

Summary

This PR is fixing a bug where icons show smaller than they should in EuiSuperDatePicker's time window buttons.

It also exposes plain text versions of the information in the timeZoneDisplayProps.customRender prop — this has been left undocumented intentionally.

Why are we making this change?

It's a bug fix, plus a small improvement.

Screenshots

Before (bad)

After (good)

Impact to users

🟢 No impact.

QA

Verify the icon sizes are m when compressed and looks as expected (Storybook)

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)

…imeZoneDisplay

ek-so

Nice, thank you Arturo!

weronikaolejniczak

LGTM 🟢 Thank you for the update, Arturo!

This likely need some VRT refs update as well, right? I'll leave an approve anyway because the code changes look fine for me.

acstll · 2025-11-28T10:04:21Z

This likely need some VRT refs update as well, right?

yes! :nod: — we needed one with compressed, added in d20e2a0

elasticmachine · 2025-11-28T10:19:03Z

💚 Build Succeeded

History

💚 Build #2091 succeeded 6d18af9

cc @acstll

elasticmachine · 2025-11-28T10:32:50Z

💚 Build Succeeded

Buildkite Build
Commit: d20e2a0

History

💚 Build #5333 succeeded 6d18af9

cc @acstll

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([elastic#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([elastic#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([elastic#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([elastic#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([elastic#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([elastic#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([elastic#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([elastic#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([elastic#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([elastic#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([elastic#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([elastic#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

acstll added 2 commits November 27, 2025 14:38

[EuiSuperDatePicker] Fix time window buttons icon size

d2f1107

[EuiSuperDatePicker] Expose plain text options for custom render in t…

8692620

…imeZoneDisplay

acstll self-assigned this Nov 27, 2025

Changelog

6d18af9

acstll marked this pull request as ready for review November 27, 2025 14:33

acstll requested a review from a team as a code owner November 27, 2025 14:33

acstll requested a review from ek-so November 27, 2025 14:34

ek-so approved these changes Nov 27, 2025

View reviewed changes

weronikaolejniczak approved these changes Nov 27, 2025

View reviewed changes

[EuiSuperDatePicker] VRT update, compressed time window buttons

d20e2a0

acstll merged commit 6d0dd12 into elastic:main Nov 28, 2025
7 checks passed

mgadewoll mentioned this pull request Dec 2, 2025

Update EUI to 110.0.0 elastic/kibana#244866

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiSuperDatePicker] Fix icon size in time window buttons#9245

[EuiSuperDatePicker] Fix icon size in time window buttons#9245
acstll merged 4 commits intoelastic:mainfrom
acstll:super-date-picker-polish

acstll commented Nov 27, 2025 •

edited by weronikaolejniczak

Loading

Uh oh!

ek-so left a comment

Uh oh!

weronikaolejniczak left a comment

Uh oh!

acstll commented Nov 28, 2025

Uh oh!

elasticmachine commented Nov 28, 2025

Uh oh!

elasticmachine commented Nov 28, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

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

Uh oh!

Summary

Why are we making this change?

Screenshots

Before (bad)

After (good)

Impact to users

QA

General checklist

Uh oh!

ek-so left a comment

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

acstll commented Nov 28, 2025

Uh oh!

elasticmachine commented Nov 28, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 28, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

acstll commented Nov 27, 2025 •

edited by weronikaolejniczak

Loading