[Visual Refresh] Make `EuiDataGrid` and `EuiTable` hover consistent #8769

acstll · 2025-06-09T11:35:03Z

Summary

Closes https://github.com/elastic/eui-private/issues/301

Important

Separate PR to update border-strong-* token values in Amsterdam ~~is still underway~~ ~~in draft mode~~ ready!

Following the design spec, this PR introduces changes to

background colors mainly for hover, including selected states, for both EuiTable and EuiDataGrid
colors for cell selection outline in EuiDataGrid

The update adds a new colors.backgroundBaseInteractiveSelectHover token, to differentiate the hover state for selected rows. And removes hover states completely for the "stripes" version of Data Grid.

Demo videos (Borealis/light only)

Data Grid

data-grid-hover.mov

Table

table-hover.mov

Amsterdam

Styles for the Amsterdam theme were left untouched. There is only one small change we can consider a fix: for EuiTable the hover state color when there's an onClick handler applies (it didn't).

~~I have a few doubts regarding the adaptation for the legacy Amsterdam theme:~~

No hover color for stripes=true seems too breaking. I would keep it. @ek-so what do you think? (@mgadewoll I implemented this in the component code, not CSS; is there an accepted way to check if the theme is Amsterdam?)
~~I think the new backgroundBaseInteractiveSelectHover color is too different from backgroundBaseInteractiveSelect 🤔~~
- ~~and the values for SCSS are not exactly matching~~
~~The value for borderStrongPrimary was updated to keep the selected outline "primary" blue (this should be safe, but I felt like I should mention it) — @ek-so you think this is also OK?~~

QA

check colors and logic match the spec in:
- Borealis (light)
- Borealis (dark)
check styles remain the same:
- Amsterdam (light)
- Amsterdam (dark)
would new visual regression tests be needed/beneficial?

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
- Updated 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)

acstll · 2025-06-10T06:13:39Z

Converting to draft because a cypress test is failing — ~~seems to be failing not because of the colors of the cell outline changed, but something else?~~

mgadewoll · 2025-06-10T18:01:09Z

@acstll I don't think the dataGrid failing test is actually related to the changes. I've noticed those tests failing before locally 🫠 Here's a small PR to "fix" the issue.

ek-so · 2025-06-11T08:14:03Z

Hey @acstll, I'm afraid I need some clarification on the questions. Are they related only to Amsterdam? Why then we change anything there?
From what I see, in Borealis it all looks good an as expected.

acstll · 2025-06-11T09:09:01Z

Hey @acstll, I'm afraid I need some clarification on the questions. Are they related only to Amsterdam? Why then we change anything there?

@ek-so it's all clear now! We shouldn't change anything visually on Amsterdam; this was not clear to me and all related questions come from that confusion, so sorry — also the question regarding borderStrongPrimary is mainly related to the implementation (and has been cleared with Lene already) 🙂

From what I see, in Borealis it all looks good an as expected.

thanks for checking 🙏

acstll · 2025-06-12T06:35:32Z

Quick status update: I changed the implementation to use (new) component tokens instead of that bit of TS logic, in order to have Amsterdam remain exactly the same.

Will do the following next:

ensure (color) token values are correct across formats (both Borealis and Amsterdam)
double-check docs, Storybook, VRT
check cypress failing again (even after rebasing with the fix) — will do this last
- this time it was actually about the focus color (borderStrongPrimary)
(and that extra PR to update border tokens in Amsterdam) [Amsterdam] Update values for border-strong-* tokens #8794

packages/eui-theme-borealis/changelogs/upcoming/8769.md

packages/eui/changelogs/upcoming/8769.md

packages/eui/src/themes/amsterdam/global_styling/variables/_colors.ts

packages/eui/src/components/datagrid/data_grid.styles.ts

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

- borderStrongText - backgroundBaseInteractiveSelectHover

"clickable" styles are applied before "selected" so the latter, on hover, always wins

- borderStrongText and backgroundBaseInteractiveSelectHover - fix values in JSON

to demo new tokens backgroundBaseInteractiveSelect and backgroundBaseInteractiveSelectHover

add 6 new tokens for the "stripes" version, mainly to be able to have borealis and amsterdam have different styles

elasticmachine · 2025-06-18T16:59:03Z

💚 Build Succeeded

History

💚 Build #564 succeeded 94c55b0
💚 Build #512 succeeded e4f5d04
💔 Build #511 failed 828355a
💔 Build #510 failed 8cd38f5
💚 Build #500 succeeded 10e62b6
💚 Build #497 succeeded 0ebdcd5

cc @acstll

elasticmachine · 2025-06-18T17:11:32Z

💚 Build Succeeded

Buildkite Build
Commit: 0312e8a

History

💔 Build #4222 failed 94c55b0
💚 Build #4178 succeeded e4f5d04
💔 Build #4177 failed 828355a
💚 Build #4168 succeeded 10e62b6
💔 Build #4166 failed 0ebdcd5
💔 Build #4135 failed 7e58e9a

cc @acstll

ek-so · 2025-06-19T06:53:34Z

@acstll after this is merged, I would inform the discover team about it additionally, because they have a custom implementation in discover for this thing, and it doesn't look clean currently. We promised to do that as far as I recall, here.
/cc @JasonStoltz @l-suarez

acstll · 2025-06-19T08:05:36Z

@acstll after this is merged, I would inform the discover team about it additionally, because they have a custom implementation in discover for this thing, and it doesn't look clean currently. We promised to do that as far as I recall, here.

@ek-so I created a sub-task to track it (https://github.com/elastic/eui-private/issues/360), we'll be glad to help

mgadewoll

🟢 Changes are looking great. Thanks for the update! 🎉

`103.1.0` ⏩ `104.0.2` [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 - updates flat tooltip prop usages on **EuiCopy** to use new `tooltipProp` ## Package updates ### `@elastic/eui` ## [`v104.0.2`](https://github.com/elastic/eui/releases/v104.0.2) **Bug fixes** - Fixed missing JSON token exports for `euiColorBackgroundBaseInteractiveSelectHover` and `euiColorBorderStrongText` ([#8819](elastic/eui#8819)) ## [`v104.0.1`](https://github.com/elastic/eui/releases/v104.0.1) **Bug fixes** - Fixed a wrong path in the module declaration for the JSON token exports that would trigger typescript errors ([#8818](elastic/eui#8818)) ## [`v104.0.0`](https://github.com/elastic/eui/releases/v104.0.0) - Added data vis text color tokens: ([#8793](elastic/eui#8793)) - `colors.vis.euiColorVisText0` - `colors.vis.euiColorVisText1` - `colors.vis.euiColorVisText2` - `colors.vis.euiColorVisText3` - `colors.vis.euiColorVisText4` - `colors.vis.euiColorVisText5` - `colors.vis.euiColorVisText6` - `colors.vis.euiColorVisText7` - `colors.vis.euiColorVisText8` - `colors.vis.euiColorVisText9` - Updated and aligned background hover styles for `EuiTable` and `EuiDataGrid` ([#8769](elastic/eui#8769)) **Deprecations** - Deprecated `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` palettes. Use the newly added data vis color tokens instead. ([#8793](elastic/eui#8793)) **Breaking changes** - Removed tokens: ([#8793](elastic/eui#8793)) - `colors.vis.euiColorVisAsTextLight1` - `colors.vis.euiColorVisAsTextLight0` - `colors.vis.euiColorVisAsTextLight2` - `colors.vis.euiColorVisAsTextLight3` - `colors.vis.euiColorVisAsTextLight4` - `colors.vis.euiColorVisAsTextLight5` - `colors.vis.euiColorVisAsTextLight6` - `colors.vis.euiColorVisAsTextDark1` - `colors.vis.euiColorVisAsTextDark0` - `colors.vis.euiColorVisAsTextDark2` - `colors.vis.euiColorVisAsTextDark3` - `colors.vis.euiColorVisAsTextDark4` - `colors.vis.euiColorVisAsTextDark5` - `colors.vis.euiColorVisAsTextDark6` - Removed `xl` size from `EuiTabs` ([#8762](elastic/eui#8762)) - Added `tooltipProps` to `EuiCopy` which replaces spreading all props to `EuiToolTip` ([#8758](elastic/eui#8758))  --------- Co-authored-by: Elastic Machine <[email protected]>

`103.1.0` ⏩ `104.0.2` [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 - updates flat tooltip prop usages on **EuiCopy** to use new `tooltipProp` ## Package updates ### `@elastic/eui` ## [`v104.0.2`](https://github.com/elastic/eui/releases/v104.0.2) **Bug fixes** - Fixed missing JSON token exports for `euiColorBackgroundBaseInteractiveSelectHover` and `euiColorBorderStrongText` ([elastic#8819](elastic/eui#8819)) ## [`v104.0.1`](https://github.com/elastic/eui/releases/v104.0.1) **Bug fixes** - Fixed a wrong path in the module declaration for the JSON token exports that would trigger typescript errors ([elastic#8818](elastic/eui#8818)) ## [`v104.0.0`](https://github.com/elastic/eui/releases/v104.0.0) - Added data vis text color tokens: ([elastic#8793](elastic/eui#8793)) - `colors.vis.euiColorVisText0` - `colors.vis.euiColorVisText1` - `colors.vis.euiColorVisText2` - `colors.vis.euiColorVisText3` - `colors.vis.euiColorVisText4` - `colors.vis.euiColorVisText5` - `colors.vis.euiColorVisText6` - `colors.vis.euiColorVisText7` - `colors.vis.euiColorVisText8` - `colors.vis.euiColorVisText9` - Updated and aligned background hover styles for `EuiTable` and `EuiDataGrid` ([elastic#8769](elastic/eui#8769)) **Deprecations** - Deprecated `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` palettes. Use the newly added data vis color tokens instead. ([elastic#8793](elastic/eui#8793)) **Breaking changes** - Removed tokens: ([elastic#8793](elastic/eui#8793)) - `colors.vis.euiColorVisAsTextLight1` - `colors.vis.euiColorVisAsTextLight0` - `colors.vis.euiColorVisAsTextLight2` - `colors.vis.euiColorVisAsTextLight3` - `colors.vis.euiColorVisAsTextLight4` - `colors.vis.euiColorVisAsTextLight5` - `colors.vis.euiColorVisAsTextLight6` - `colors.vis.euiColorVisAsTextDark1` - `colors.vis.euiColorVisAsTextDark0` - `colors.vis.euiColorVisAsTextDark2` - `colors.vis.euiColorVisAsTextDark3` - `colors.vis.euiColorVisAsTextDark4` - `colors.vis.euiColorVisAsTextDark5` - `colors.vis.euiColorVisAsTextDark6` - Removed `xl` size from `EuiTabs` ([elastic#8762](elastic/eui#8762)) - Added `tooltipProps` to `EuiCopy` which replaces spreading all props to `EuiToolTip` ([elastic#8758](elastic/eui#8758))  --------- Co-authored-by: Elastic Machine <[email protected]> (cherry picked from commit efedad1) # Conflicts: # package.json # src/dev/license_checker/config.ts # yarn.lock

## Summary This PR updates styles in tables affecting background colors and hover states, aligning with current design spec. - PR with changes in EUI → elastic/eui#8769 - Additional context behind design decision → elastic/eui#8461 (comment) - ⚠️ `2025-08-27` Design spec was [updated to add hover state for stripes](#229928 (comment)) → elastic/eui-private#360 (comment) 🔒 ## Changes - Remove custom background hover color for rows, in both data grids (main and document/table) to leverage EUI's defaults [bed13fe](895c91b) - Use new `backgroundBaseInteractiveSelect` token for background color of expanded rows (when the document flyout is open [9d104c8](b164866) ### Previous Changes (initial iteration, no longer part of the PR) - ~~Remove custom background hover color for rows, in both data grids (main and document/table) bff52d8~~ - ~~Use new `backgroundBaseInteractiveSelect` token for background color of expanded rows (when the document flyout is open) 5a1f1f5~~ - ~~Use new `components.dataGridRowBackgroundMarked` token for background color in surrounding documents page e5528f5~~ ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] ~~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~ - [ ] ~~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~~ - [ ] ~~[Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios~~ - [ ] ~~If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~ - [ ] ~~This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~~ - [ ] ~~[Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~~ - [ ] ~~The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~ - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Only visual changes for colors on table rows, no performance regression risk. --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>

…9928) ## Summary This PR updates styles in tables affecting background colors and hover states, aligning with current design spec. - PR with changes in EUI → elastic/eui#8769 - Additional context behind design decision → elastic/eui#8461 (comment) - ⚠️ `2025-08-27` Design spec was [updated to add hover state for stripes](elastic#229928 (comment)) → elastic/eui-private#360 (comment) 🔒 ## Changes - Remove custom background hover color for rows, in both data grids (main and document/table) to leverage EUI's defaults [bed13fe](elastic@895c91b) - Use new `backgroundBaseInteractiveSelect` token for background color of expanded rows (when the document flyout is open [9d104c8](elastic@b164866) ### Previous Changes (initial iteration, no longer part of the PR) - ~~Remove custom background hover color for rows, in both data grids (main and document/table) bff52d8~~ - ~~Use new `backgroundBaseInteractiveSelect` token for background color of expanded rows (when the document flyout is open) 5a1f1f5~~ - ~~Use new `components.dataGridRowBackgroundMarked` token for background color in surrounding documents page e5528f5~~ ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] ~~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~ - [ ] ~~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~~ - [ ] ~~[Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios~~ - [ ] ~~If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~ - [ ] ~~This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~~ - [ ] ~~[Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~~ - [ ] ~~The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~ - [x] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Only visual changes for colors on table rows, no performance regression risk. --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]>

acstll self-assigned this Jun 9, 2025

acstll added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) and removed skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) labels Jun 9, 2025

acstll force-pushed the table-data-grid-select-hover branch from 9561a64 to 7e58e9a Compare June 9, 2025 15:18

acstll marked this pull request as ready for review June 9, 2025 15:25

acstll requested a review from a team as a code owner June 9, 2025 15:25

acstll marked this pull request as draft June 10, 2025 06:14

acstll force-pushed the table-data-grid-select-hover branch from 7e58e9a to 0ebdcd5 Compare June 11, 2025 21:30

acstll force-pushed the table-data-grid-select-hover branch from 8cd38f5 to 828355a Compare June 12, 2025 18:15

acstll marked this pull request as ready for review June 12, 2025 18:18

acstll mentioned this pull request Jun 12, 2025

[Amsterdam] Update values for border-strong-* tokens #8794

Merged

3 tasks

mgadewoll reviewed Jun 13, 2025

View reviewed changes

acstll added 13 commits June 18, 2025 17:53

feat(theme): add 2 new tokens

1912704

- borderStrongText - backgroundBaseInteractiveSelectHover

feat(table_row): improve background colors

6109911

"clickable" styles are applied before "selected" so the latter, on hover, always wins

feat(amsterdam): add tokens for borealis parity

6288956

- borderStrongText and backgroundBaseInteractiveSelectHover - fix values in JSON

fix(amsterdam): table row component tokens

95817b6

fix(data_grid_cell): focus and hover colors for outline

c6de3a8

feat(data_grid): add 2 new component tokens

9f26a53

feat(data_grid): adjust hover row styles to new design spec

efd14a7

feat(data_grid): do not apply hover styles for stripes

ce6aa83

style: lint

1c3c2a0

docs(data_grid): update row classes demo

99eaaea

to demo new tokens backgroundBaseInteractiveSelect and backgroundBaseInteractiveSelectHover

chore: changelogs

1cccf60

test: update visual regression refs (EuiDataGrid)

7ed4a46

fix(theme-borealis): value for primary90 in light mode

0e62b61

acstll added 12 commits June 18, 2025 17:56

test(visual): update EuiDataGrid (after reverting ca2e5c3)

cddc3dd

feat(data_grid): add stripes styles using tokens

3a3bf43

add 6 new tokens for the "stripes" version, mainly to be able to have borealis and amsterdam have different styles

test(cypress): data grid cell focus color

47d5fc1

chore: correct changelogs

e8c6717

fix(amsterdam): token color values in JSON

69d558b

fix(amsterdam): undo changes to table row component tokens

55485c9

test(visual): update EuiDataGrid

a81e48d

fix(amsterdam): token color values in JSON, for real

76f8882

docs: add tip admonition for data grid selected CSS class

2332e54

chore: correct and better changelog messages

ea9e40f

nit: 1 CSS rule less

f0cae73

fix(theme): remove redundant dataGridRowBackgroundStriped token

94c55b0

acstll force-pushed the table-data-grid-select-hover branch from cc15c97 to 94c55b0 Compare June 18, 2025 15:57

style: lint, argh

0312e8a

acstll requested a review from mgadewoll June 18, 2025 16:42

mgadewoll approved these changes Jun 19, 2025

View reviewed changes

acstll merged commit ae61a89 into elastic:main Jun 20, 2025
5 checks passed

This was referenced Jun 23, 2025

[Fix] Add missing JSON token exports #8819

Merged

Upgrade EUI to v104.0.2 elastic/kibana#224855

Merged

acstll mentioned this pull request Jul 30, 2025

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

Merged

8 tasks

acstll mentioned this pull request Aug 27, 2025

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

Merged

13 tasks

[Visual Refresh] Make EuiDataGrid and EuiTable hover consistent #8769

[Visual Refresh] Make EuiDataGrid and EuiTable hover consistent #8769

Uh oh!

Conversation

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

Uh oh!

Summary

Demo videos (Borealis/light only)

Amsterdam

QA

General checklist

Uh oh!

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

Uh oh!

Uh oh!

mgadewoll commented Jun 10, 2025

Uh oh!

ek-so commented Jun 11, 2025

Uh oh!

acstll commented Jun 11, 2025

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jun 18, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jun 18, 2025

💚 Build Succeeded

History

Uh oh!

ek-so commented Jun 19, 2025

Uh oh!

acstll commented Jun 19, 2025

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[Visual Refresh] Make `EuiDataGrid` and `EuiTable` hover consistent #8769

[Visual Refresh] Make `EuiDataGrid` and `EuiTable` hover consistent #8769

acstll commented Jun 9, 2025 •

edited

Loading

acstll commented Jun 10, 2025 •

edited

Loading

acstll commented Jun 12, 2025 •

edited

Loading