[EuiSuperDatePicker] Fix pretty format button truncation #9231

mgadewoll · 2025-11-21T10:28:48Z

Summary

This PR adds a tiny fix to the pretty format button in EuiSuperDatePicker to ensure the text can be truncated if not enough space is available.
The underlying EuiFormControlButton has truncation by default for the value prop, but if custom content is passed via children, truncation needs to be handled manually.

Additional changes

Updated VRT images that were missed in [EuiSuperDatePicker] Add tooltip with full range to "pretty duration" button #9221

Why are we making this change?

💅 UI consistency: This change ensures that the element behaves as expected and inline with other related elements.

Screenshots #

before	after

Impact to users

🟢 There are no code changes required on consumer side.

ℹ️ Due to the updated DOM structure, snapshot tests might require updates.

QA

verify that overflowing content in the pretty format button (superDatePickerShowDatesButton) is correctly truncated
verify there is no other unexpected regression

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)

- the underlying EuiFormControlButton has truncation by default for the value prop, but if custom content is passed via children, truncation would need to be handled manually

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

tkajtoch

The changes work as expected when testing in Storybook.

I left one comment about a class usage, but it's something we do all around EUI, so if you feel like leaving it as-is until we can improve it globally, I'm fine with that choice. LMK!

…on helper

tkajtoch · 2025-11-21T14:33:49Z

Code changes look great! I'll give the stories another go when they build, and we should be good to go 🎉

elasticmachine · 2025-11-21T14:47:36Z

💚 Build Succeeded

History

💚 Build #2029 succeeded 2dc27a5
💚 Build #2027 succeeded 1877fc9

cc @mgadewoll

tkajtoch

Everything looks great! Thank you for addressing my comment 💯

elasticmachine · 2025-11-21T15:03:16Z

💚 Build Succeeded

Buildkite Build
Commit: c2ae47b

History

💚 Build #5289 succeeded 2dc27a5
💚 Build #5288 succeeded 1877fc9

cc @mgadewoll

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.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 - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](elastic/eui#8231)) ([#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.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 - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([elastic#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([elastic#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([elastic#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([elastic#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([elastic#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([elastic#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([elastic#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([elastic#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([elastic#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([elastic#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([elastic#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([elastic#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([elastic#8231](elastic/eui#8231)) ([elastic#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([elastic#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

mgadewoll self-assigned this Nov 21, 2025

mgadewoll changed the title ~~[EuiSuperDatePicker] Fix pretty duration button truncation~~ [EuiSuperDatePicker] Fix pretty format button truncation Nov 21, 2025

mgadewoll force-pushed the superdatepicker/fix-pretty-format-truncation branch from 0625c71 to 1877fc9 Compare November 21, 2025 10:31

mgadewoll added 3 commits November 21, 2025 12:04

fix: ensure pretty format button has proper truncation

27f9802

- the underlying EuiFormControlButton has truncation by default for the value prop, but if custom content is passed via children, truncation would need to be handled manually

test(vrt): update images after elastic#9221

5b62b03

chore: add changelog

2dc27a5

mgadewoll force-pushed the superdatepicker/fix-pretty-format-truncation branch from 1877fc9 to 2dc27a5 Compare November 21, 2025 11:11

mgadewoll marked this pull request as ready for review November 21, 2025 13:33

mgadewoll requested a review from a team as a code owner November 21, 2025 13:33

tkajtoch self-requested a review November 21, 2025 13:57

tkajtoch reviewed Nov 21, 2025

View reviewed changes

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

tkajtoch reviewed Nov 21, 2025

View reviewed changes

mgadewoll added 3 commits November 21, 2025 15:25

feat: add euiTextTruncateCSS util

f7b8b4a

refactor(euiSuperDatePicker): replace global utility class with Emoti…

003e5e3

…on helper

chore: update changelog

c2ae47b

tkajtoch approved these changes Nov 21, 2025

View reviewed changes

mgadewoll merged commit cb98479 into elastic:main Nov 21, 2025
7 checks passed

weronikaolejniczak mentioned this pull request Nov 24, 2025

Update EUI to 109.2.0 elastic/kibana#244032

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiSuperDatePicker] Fix pretty format button truncation #9231

[EuiSuperDatePicker] Fix pretty format button truncation #9231

Uh oh!

mgadewoll commented Nov 21, 2025 •

edited by tkajtoch

Loading

Uh oh!

Uh oh!

tkajtoch left a comment

Uh oh!

tkajtoch commented Nov 21, 2025

Uh oh!

elasticmachine commented Nov 21, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

elasticmachine commented Nov 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiSuperDatePicker] Fix pretty format button truncation #9231

[EuiSuperDatePicker] Fix pretty format button truncation #9231

Uh oh!

Conversation

mgadewoll commented Nov 21, 2025 • edited by tkajtoch Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Additional changes

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

tkajtoch commented Nov 21, 2025

Uh oh!

elasticmachine commented Nov 21, 2025

💚 Build Succeeded

History

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 21, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mgadewoll commented Nov 21, 2025 •

edited by tkajtoch

Loading