[EuiDataGrid] Enable row background color on hover for `stripes={true}` by acstll · Pull Request #8983 · elastic/eui

acstll · 2025-08-27T09:28:33Z

Summary

This PR adds a visual change to EuiDataGrid related to the background color of rows on hover, specifically when using stripes (stripes prop equals true).

The original design spec within the Visual Refresh effort removed the hover state color change for stripes. After further alignment with teams, this has been ~~reverted~~ reworked.

Why are we making this change?

To make sure the design spec is implemented equally and consistently.

Related PRs:

Screenshots

Hover states for striped data grids, in light and dark mode.

Impact to users

🟢 No direct impact. These visual changes ensure UI remains almost the same while encouraging consistency.

QA

Remove or strikethrough items that do not apply to your PR.

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 (not needed)
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)

with changes from elastic/eui#8983

acstll · 2025-08-28T11:04:03Z

@JoseLuisGJ for awareness, just in case there's any work to do related to this, in the current code/design parity effort 👀

mgadewoll · 2025-09-01T09:02:06Z

packages/eui-theme-borealis/src/variables/_components.ts


    buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,

+    dataGridRowStripesBackgroundHover: SEMANTIC_COLORS.shade130,


❓ Where was this color defined? The design specs states shade-15 but I don't see any specs for dark mode 🤔

yep, it's indeed missing from the spec so I "made it up" deriving it from other light/dark pairs, so it needs validation from design (I was expecting this to come up during testing in Kibana, to adjust if needed, but both Kate and Laura are on PTO)

Oki, yeah then let's wait for @ek-so to confirm or provide required specs once she's back 👍

Thank you both! 130 is the correct color.

packages/eui/changelogs/upcoming/8983.md

elasticmachine · 2025-09-01T10:39:06Z

💚 Build Succeeded

History

💚 Build #1102 succeeded 6b6e818

cc @acstll

elasticmachine · 2025-09-01T11:23:15Z

💚 Build Succeeded

Buildkite Build
Commit: ad7b7d2

History

💚 Build #4610 succeeded 6b6e818

cc @acstll

- `@elastic/eui`: `v106.4.0` ⏩ `v106.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

- `@elastic/eui`: `v106.4.0` ⏩ `v106.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([elastic#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([elastic#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([elastic#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([elastic#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([elastic#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([elastic#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.4.0` ⏩ `v106.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([elastic#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([elastic#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([elastic#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([elastic#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([elastic#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([elastic#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([elastic#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([elastic#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([elastic#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([elastic#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.4.0` ⏩ `v106.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) ## Package updates ## [`v106.5.0`](https://github.com/elastic/eui/releases/v106.5.0) - Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. ([#8988](elastic/eui#8988)) - Updated `EuiDataGrid` hover styles when `stripes={true}` to ensure a visible background color change on hover ([#8983](elastic/eui#8983)) **Bug fixes** - Fixed a 1ms time shift on `EuiSuperDatePicker` when using the quick select time window steps ([#8985](elastic/eui#8985)) - Fixed a visual issue in `EuiSuperDatePicker` with `isQuickSelectOnly` enabled, where delimiter padding caused an unexpected empty container ([#8985](elastic/eui#8985)) **Accessibility** - Changed the close button position in `EuiModal` to allow for the modal title to be perceivable first ([#8954](elastic/eui#8954)) - Added screen reader hint text on `EuiModal` to indicate closing behavior ([#8954](elastic/eui#8954)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([#8973](elastic/eui#8973))

- `@elastic/eui`: `v106.5.0` ⏩ `v106.6.0` - `@elastic/eui-theme-borealis`: `v3.3.2` ⏩ `v3.4.0` - `@elastic/eslint-plugin-eui`: `v2.3.0` ⏩ `v2.4.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) ## Package updates ### `@elastic/eui` #### [`v106.6.0`](https://github.com/elastic/eui/releases/v106.6.0) **Accessibility** - Removed focus state styles for `iconOnClick` on `EuiBadge` to improve color contrast in dark mode ([elastic#9004](elastic/eui#9004)) ### `@elastic/eui-theme-borealis` #### [`v3.4.0`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.4.0) - Updated values for component tokens ([elastic#8983](elastic/eui#8983)) - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` - `dataGridRowStripesBackgroundSelectHover` - `dataGridRowStripesBackgroundHover` - `dataGridRowStripesBackgroundStripedHover` ### `@elastic/eslint-plugin-eui` #### [`v2.4.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.4.0) - Added new `callout-announce-on-mount` rule. ([elastic#9005](elastic/eui#9005)) - Added new `no-unnamed-interactive-element` rule. ([elastic#8973](elastic/eui#8973))

[EuiDataGrid] Enable row background color hover when striped

716e597

acstll self-assigned this Aug 27, 2025

Changelog

6b6e818

acstll added a commit to elastic/kibana that referenced this pull request Aug 27, 2025

[REVERT][EUI] Use local build

f61f618

with changes from elastic/eui#8983

acstll mentioned this pull request Aug 27, 2025

[Visual Refresh][Discover] Update hover styles for tables elastic/kibana#229928

Merged

8 tasks

acstll marked this pull request as ready for review August 28, 2025 11:04

acstll requested a review from a team as a code owner August 28, 2025 11:04

mgadewoll self-requested a review August 28, 2025 13:41

mgadewoll reviewed Sep 1, 2025

View reviewed changes

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

Update changelog

ad7b7d2

mgadewoll approved these changes Sep 8, 2025

View reviewed changes

acstll merged commit 921983d into elastic:main Sep 8, 2025
5 checks passed

tkajtoch mentioned this pull request Sep 8, 2025

Update EUI to v106.5.0 elastic/kibana#234328

Merged

acstll mentioned this pull request Sep 12, 2025

Changelog entry missing for eui-theme-borealis in #8983 #9007

Merged

weronikaolejniczak pushed a commit that referenced this pull request Sep 15, 2025

Changelog entry missing for eui-theme-borealis in #8983 (#9007)

1c9f813

weronikaolejniczak mentioned this pull request Sep 15, 2025

[EUI] Upgrade EUI to v106.6.0 elastic/kibana#235106

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDataGrid] Enable row background color on hover for `stripes={true}`#8983

[EuiDataGrid] Enable row background color on hover for `stripes={true}`#8983
acstll merged 3 commits intoelastic:mainfrom
acstll:datagrid-stripes-hover

acstll commented Aug 27, 2025 •

edited

Loading

Uh oh!

acstll commented Aug 28, 2025

Uh oh!

mgadewoll Sep 1, 2025

Uh oh!

acstll Sep 1, 2025

Uh oh!

mgadewoll Sep 1, 2025

Uh oh!

ek-so Sep 8, 2025

Uh oh!

Uh oh!

elasticmachine commented Sep 1, 2025

Uh oh!

elasticmachine commented Sep 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants


		buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,

		dataGridRowStripesBackgroundHover: SEMANTIC_COLORS.shade130,

Conversation

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

Uh oh!

Summary

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

acstll commented Aug 28, 2025

Uh oh!

mgadewoll Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

ek-so Sep 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Sep 1, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 1, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

acstll commented Aug 27, 2025 •

edited

Loading