feat(eui): pass data-test-subj to date picker elements #9042

weronikaolejniczak · 2025-09-19T11:13:22Z

Summary

Resolves #9020

Added data-test-subj support to EuiDatePicker and EuiDatePickerRange and all their essential elements.

Changes

[EuiDatePicker] Added data-test-subj prop that propagates to the main wrapper, input field, calendar popover, navigation buttons and clear button.
[EuiDatePickerRange] Added data-test-subj prop that creates wrapper elements with test subjects for start/end date controls (*-start-date, *-end-date).
Enhanced the internal react-datepicker fork to support test subjects on calendar elements, navigation buttons (*-prev-month, *-next-month) and popover containers.

Patterns

`EuiDatePicker` (story)

data-test-subj="my-date-picker"
data-test-subj="my-date-picker-input-container"
data-test-subj="my-date-picker-input"
data-test-subj="my-date-picker-clear"
data-test-subj="my-date-picker-popover"
data-test-subj="my-date-picker-calendar-prev-month"
data-test-subj="my-date-picker-calendar-next-month"

Screenshots

`EuiDatePickerRange` (story)

data-test-subj="my-date-range-picker"
data-test-subj="my-date-range-picker-range-wrapper" (requested)
data-test-subj="my-date-range-picker-start-date-input-container"
data-test-subj="my-date-range-picker-start-date-input" (requested)
data-test-subj="my-date-range-picker-end-date-input-container"
data-test-subj="my-date-range-picker-end-date-input" (requested)
data-test-subj="my-date-range-picker-start-date-popover"
data-test-subj="my-date-range-picker-start-date-calendar-prev-month"
data-test-subj="my-date-range-picker-start-date-calendar-next-month"

Why are we making this change?

It was raised as an internal request by a Kibana developer. They want to implement analytics tracking but the ReactDatePicker isn't applying the passed data-test-subj in EuiDatePicker.

They mentioned they need to query 3 elements for the tracking:

the date picker container excluding prepend and append (data-test-subj="my-date-range-picker-range-wrapper"),
the start date (data-test-subj="my-date-range-picker-start-date-input"),
the end date (data-test-subj="my-date-range-picker-end-date-input").

Impact to users

🟢 No impact to users. This is purely a change for testing / tracking purposes. No visual or behavioral changes.

QA

Tip

I added a data-test-subj to date picker stories for easier testing.

Specific checklist

Tests pass in CI
There is no regression to the existing functionality in:
- EuiDatePicker
- EuiDatePickerRange
There is no visual regression to the related components: yarn workspace @elastic/eui test-visual-regression
The top-most data-test-subj propagates to all essential elements in:
- EuiDatePicker
- EuiDatePickerRange

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)
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/react-datepicker/src/index.js

acstll

Thank you @weronikaolejniczak for taking this one. I tested in Storybook and it's working as expected. The tests make sense.

The one thing I had doubts with was the casing of the nested names. I had imagine something BEM-like, like ${dataTestSubj}__input-container or even ${dataTestSubj}__inputContainer, but I found there's no consistency in the codebase with similar cases, so I actually find the one you went with (kebab) is appropriate. Did you consider other options?

Mostly nits in the comments.

packages/eui/src/components/date_picker/react-datepicker/src/index.js

packages/eui/src/components/date_picker/react-datepicker/src/calendar.js

packages/eui/changelogs/upcoming/9042.md

Co-authored-by: Arturo Castillo Delgado <[email protected]>

packages/eui/src/components/date_picker/react-datepicker/src/calendar.js

weronikaolejniczak · 2025-09-23T10:08:45Z

@acstll thanks for the review! 💚 I applied your suggestions, they are very useful, thanks!

packages/eui/src/components/date_picker/react-datepicker/src/calendar.js

…alendar.js

acstll

🟢 Thanks for the updates, and again for picking this one up.

elasticmachine · 2025-09-23T10:57:42Z

💚 Build Succeeded

History

💚 Build #1322 succeeded a18f54c
💚 Build #1310 succeeded 0903112
💚 Build #1308 succeeded 1311701
💚 Build #1305 succeeded 9008503
💚 Build #1292 succeeded 29868cc
💚 Build #1289 succeeded b805ea3

cc @weronikaolejniczak

elasticmachine · 2025-09-23T11:08:51Z

💚 Build Succeeded

Buildkite Build
Commit: c3fad44

History

💚 Build #4776 succeeded a18f54c
💚 Build #4768 succeeded 0903112
💚 Build #4767 succeeded 1311701
💔 Build #4764 failed 9008503
💚 Build #4754 succeeded 29868cc
💚 Build #4751 succeeded b805ea3

cc @weronikaolejniczak

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.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 - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

Co-authored-by: Arturo Castillo Delgado <[email protected]>

- `@elastic/eui`: `v106.6.0` ⏩ `v106.7.0` - `@elastic/eui-theme-borealis`: `v3.4.0` ⏩ `v3.5.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 - replaced usages of `EuiButtonEmpty` in Discover `change_dataview` and `EuiFilterButton` in Dashboard `options_list_control `with the newly added `EuiFormControlButton` component to ensure cohesive form layout styling (EUI [elastic#9006](elastic/eui#9006)) **Discover** | before | after | |---|---| | <img width="434" height="369" alt="Screenshot 2025-10-07 at 22 13 23" src="https://github.com/user-attachments/assets/488984a0-a6a1-488e-8db5-588c84be6765" /> | <img width="418" height="365" alt="Screenshot 2025-10-07 at 22 20 16" src="https://github.com/user-attachments/assets/16164d3f-0b8d-4ceb-a971-a10a6d1f5aee" /> | | <img width="432" height="371" alt="Screenshot 2025-10-07 at 22 12 39" src="https://github.com/user-attachments/assets/37fd32f5-6d15-459d-9e14-776a671b7fd6" /> | <img width="423" height="372" alt="Screenshot 2025-10-07 at 22 21 16" src="https://github.com/user-attachments/assets/846eb3f6-7d39-4c6e-9e22-42b694f9a276" /> | **Dashboard** | before | after | |---|---| | <img width="475" height="288" alt="Screenshot 2025-10-07 at 22 13 13" src="https://github.com/user-attachments/assets/4ff88734-18d7-456a-991d-ba491550a4dd" /> | <img width="432" height="292" alt="Screenshot 2025-10-07 at 17 44 25" src="https://github.com/user-attachments/assets/6e97337f-11e6-4213-a80b-5424dcb3ee38" /> | | <img width="475" height="289" alt="Screenshot 2025-10-07 at 22 12 51" src="https://github.com/user-attachments/assets/dcbd1470-8bdd-453a-8fc0-20da26bc3e27" /> | <img width="471" height="288" alt="Screenshot 2025-10-07 at 21 44 36" src="https://github.com/user-attachments/assets/7f2c5b10-44cf-4efc-a902-dd72889b3043" /> | ## Package updates ## [`v106.7.0`](https://github.com/elastic/eui/releases/v106.7.0) - Updated `EuiComboBox` to properly break long strings without spaces when `rowHeight="auto"` ([elastic#9063](elastic/eui#9063)) - Added `data-test-subj` support to `EuiDatePicker` and `EuiDatePickerRange` for improved testability. Propagates to main component wrappers, inputs, clear buttons, calendar navigation, and popover panels. ([elastic#9042](elastic/eui#9042)) - Added `streamsClassic` and `streamsWired` icons ([elastic#9017](elastic/eui#9017)) - Updated icons based on feedback: `boxesVertical`, `documentation`, `error`, `export`, `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `grab`, `grabOmnidirectional`, `grabHorizontal`, `importAction`, `indexTemporary`, `link`, `list`, `magnifyWithExclamation`, `magnifyWithMinus`, `magnifyWithPlus`, `minus`, `minusInCircle`, `pencil`, `pin`, `pinFilled`, `plus`, `plusInCircle`, `question`, `search`, `sortLeft`, `sortRight`, `sortDown`, `sortUp`, `sortable`, `unlink`. ([elastic#9026](elastic/eui#9026)) - Added new icon: `backgroundTask`. ([elastic#9026](elastic/eui#9026)) - Marked icons for deprecation: `boxesHorizontal`, `checkInCircleFilled`, `copyClipboard`, `documentEdit`, `errorFilled`, `expandMini`, `filterInCircle`, `lettering`, `listAdd`, `minusInCircleFilled`, `newChat`, `playFilled`, `plusInCircleFilled`, `submodule`, `tableDensityNormal`, `warningFilled`. ([elastic#9026](elastic/eui#9026)) - Added `workflowsApp` icon ([elastic#9011](elastic/eui#9011)) - Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout` ([elastic#9006](elastic/eui#9006)) - Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered ([elastic#9006](elastic/eui#9006)) **Bug fixes** - Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. ([elastic#9059](elastic/eui#9059)) - Fixed `columns` in `EuiDataGrid` not being rendered in the correct order as defined by `columnVisibility.visibleColumns` which resulted in unexpected updates when reordering columns ([elastic#9030](elastic/eui#9030)) **Accessibility** - Improved color contrast of non-interactive `EuiBreadcrumbs` items in dark mode ([elastic#9071](elastic/eui#9071)) - Make `EuiProgress` respect user's reduced motion setting by not animating when in indeterminite state. ([elastic#9054](elastic/eui#9054)) ### `@elastic/eui-theme-borealis` ## [`v3.5.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v350) - Updated color value of `textSubdued` and legacy `subduedText` in dark mode from `#8E9FBC` to `#98A8C3` ([elastic#9071](elastic/eui#9071)) **Bug fixes** - Fixed values of `$euiFormBackground` and `$euiFormBackgroundReadOnlyColor` to match JS tokens ([elastic#9067](elastic/eui#9067)) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

weronikaolejniczak self-assigned this Sep 19, 2025

weronikaolejniczak force-pushed the feat/eui-date-picker-data-test-subj branch 2 times, most recently from c3efc7f to 29868cc Compare September 19, 2025 12:21

weronikaolejniczak marked this pull request as ready for review September 19, 2025 12:22

weronikaolejniczak requested a review from a team as a code owner September 19, 2025 12:22

acstll self-requested a review September 22, 2025 10:35

weronikaolejniczak marked this pull request as draft September 22, 2025 12:26

weronikaolejniczak marked this pull request as ready for review September 22, 2025 12:34

weronikaolejniczak force-pushed the feat/eui-date-picker-data-test-subj branch from ee87f24 to 26b7e0b Compare September 22, 2025 12:37

weronikaolejniczak added 3 commits September 22, 2025 14:37

feat(eui): pass data-test-subj to date picker elements

3d2f377

feat(eui): add data-test-subj to form control layout wrapper props

fd341b4

chore(eui): add a test case for date-range-test-range-wrapper

9008503

weronikaolejniczak force-pushed the feat/eui-date-picker-data-test-subj branch from 26b7e0b to 9008503 Compare September 22, 2025 12:37

weronikaolejniczak marked this pull request as draft September 22, 2025 13:06

chore(eui): update snapshot test

1311701

weronikaolejniczak marked this pull request as ready for review September 22, 2025 15:15

weronikaolejniczak commented Sep 22, 2025

View reviewed changes

packages/eui/src/components/date_picker/react-datepicker/src/index.js Show resolved Hide resolved

chore(react-datepicker): remove formatting

0903112

acstll requested changes Sep 23, 2025

View reviewed changes

packages/eui/src/components/date_picker/react-datepicker/src/index.js Show resolved Hide resolved

packages/eui/src/components/date_picker/react-datepicker/src/calendar.js Show resolved Hide resolved

packages/eui/changelogs/upcoming/9042.md Outdated Show resolved Hide resolved

Update packages/eui/changelogs/upcoming/9042.md

424de81

Co-authored-by: Arturo Castillo Delgado <[email protected]>

weronikaolejniczak commented Sep 23, 2025

View reviewed changes

packages/eui/src/components/date_picker/react-datepicker/src/calendar.js Show resolved Hide resolved

Apply suggestion from @weronikaolejniczak

a18f54c

acstll reviewed Sep 23, 2025

View reviewed changes

packages/eui/src/components/date_picker/react-datepicker/src/calendar.js Show resolved Hide resolved

Update packages/eui/src/components/date_picker/react-datepicker/src/c…

c3fad44

…alendar.js

acstll approved these changes Sep 23, 2025

View reviewed changes

weronikaolejniczak merged commit 2446f15 into elastic:main Sep 23, 2025
5 checks passed

acstll mentioned this pull request Oct 6, 2025

Upgrade EUI to v106.7.0 elastic/kibana#237661

Merged

tsullivan pushed a commit that referenced this pull request Oct 15, 2025

feat(eui): pass data-test-subj to date picker elements (#9042)

e79d66a

Co-authored-by: Arturo Castillo Delgado <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(eui): pass data-test-subj to date picker elements #9042

feat(eui): pass data-test-subj to date picker elements #9042

Uh oh!

weronikaolejniczak commented Sep 19, 2025 •

edited

Loading

Uh oh!

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Sep 23, 2025

Uh oh!

Uh oh!

acstll left a comment

Uh oh!

elasticmachine commented Sep 23, 2025

Uh oh!

elasticmachine commented Sep 23, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(eui): pass data-test-subj to date picker elements #9042

feat(eui): pass data-test-subj to date picker elements #9042

Uh oh!

Conversation

weronikaolejniczak commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Patterns

EuiDatePicker (story)

EuiDatePickerRange (story)

Why are we making this change?

Impact to users

QA

Specific checklist

General checklist

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Sep 23, 2025

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Sep 23, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 23, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Sep 19, 2025 •

edited

Loading

`EuiDatePicker` (story)

`EuiDatePickerRange` (story)