[EuiSuperDatePicker] Papercuts by acstll · Pull Request #9239 · elastic/eui

acstll · 2025-11-25T17:19:16Z

Summary

This PR has a small series of changes related to EuiSuperDatePicker, namely:

Export EuiQuickSelectPanel — this has been left undocumented on purpose, because there's a way to customize quick select panels (92c945e)
- Agreed in Add “Entire time range” option in commonly used ranges (not EUI) kibana#241319 (comment)
Fix an accessibility issue with date text inputs in the popovers, where the visual label was not semantically connected to the inputs (dda2d4b)
- Spotted in this PR [EuiSuperDatePicker] Time zone display #9191 (comment)
Fix a strange behavior of isQuickSelectOnly prop in Storybook, where the popover button would still be visible when it shouldn't (b3ea2d5)
- Spotted while smoke testing for [EuiSuperDatePicker] Add tooltip with full range to "pretty duration" button #9221
- VRT updated because of this b3ea2d5
Adjust the width for the Time Window Buttons snippets in the docs (57a5c28)
- Feedback from @ek-so

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

Why are we making this change?

To wrap up a series of improvements to EuiSuperDatePicker, fixing small things that mostly were out of scope in previous PRs.

Impact to users

🟢 No impact

QA

Verify EuiQuickSelectPanel is exported
Check accessibility of text inputs in absolute and relative tabs
Double-check isQuickSelectOnly prop behaves as expected in Storybook
Verify snippet for Time Window Buttons section in the docs works as expected

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)

- improve interaction for QuickSelectOnly - update VRT

elasticmachine · 2025-11-25T17:41:14Z

💚 Build Succeeded

cc @acstll

elasticmachine · 2025-11-25T17:59:21Z

💚 Build Succeeded

Buildkite Build
Commit: 8229262

History

cc @acstll

acstll · 2025-11-25T18:00:49Z

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

-      css={css`
-        /* ensure the input content is visible without being truncated */
-        inline-size: 700px;
-      `}


@mgadewoll the problem was this 😁 — I couldn't find anything breaking after removing this, and I updated the stories (they look a bit more "real"), but I might be missing something — where is/was the input content being truncated?

Ah, good catch! Honestly, I can't recall what was the scenario there. But it looks to behave fine in the stories, so it's fine to remove. Ensuring stories showcase expected behavior has higher priority in any case. 👍

mgadewoll

🟢 The changes are LGTM.
Tested that the accessible labels are available and confirmed isQuickSelectOnly renders as expected in storybook. EuiQuickSelectPanel is available for export.

## 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 4 commits November 25, 2025 18:07

Export EuiQuickSelectPanel

92c945e

[EuiAbsoluteTab][EuiRelativeTab] Link text input with label

dda2d4b

[EuiSuperDatePicker][Docs] Adjust width for time window buttons snippet

57a5c28

[EuiSuperDatePicker] Remove hard-coded width in stories

b3ea2d5

- improve interaction for QuickSelectOnly - update VRT

acstll self-assigned this Nov 25, 2025

Changelog

8229262

acstll commented Nov 25, 2025

View reviewed changes

acstll marked this pull request as ready for review November 25, 2025 19:47

acstll requested a review from a team as a code owner November 25, 2025 19:48

mgadewoll self-requested a review November 26, 2025 09:37

mgadewoll approved these changes Nov 26, 2025

View reviewed changes

acstll merged commit 02528cc into elastic:main Nov 26, 2025
10 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] Papercuts#9239

[EuiSuperDatePicker] Papercuts#9239
acstll merged 5 commits intoelastic:mainfrom
acstll:super-date-picker-papercuts-1

acstll commented Nov 25, 2025 •

edited by mgadewoll

Loading

Uh oh!

elasticmachine commented Nov 25, 2025

Uh oh!

elasticmachine commented Nov 25, 2025 •

edited

Loading

Uh oh!

acstll Nov 25, 2025 •

edited

Loading

Uh oh!

mgadewoll Nov 26, 2025

Uh oh!

mgadewoll left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Summary

Why are we making this change?

Impact to users

QA

General checklist

Uh oh!

elasticmachine commented Nov 25, 2025

💚 Build Succeeded

Uh oh!

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

Uh oh!

💚 Build Succeeded

History

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Nov 25, 2025 •

edited by mgadewoll

Loading

elasticmachine commented Nov 25, 2025 •

edited

Loading

acstll Nov 25, 2025 •

edited

Loading

mgadewoll left a comment •

edited

Loading