[Visual Refresh][Discover] Update hover styles for tables by acstll · Pull Request #229928 · elastic/kibana

acstll · 2025-07-30T09:18:29Z

Summary

This PR updates styles in tables affecting background colors and hover states, aligning with current design spec.

PR with changes in EUI → [Visual Refresh] Make EuiDataGrid and EuiTable hover consistent eui#8769
Additional context behind design decision → [EUI Data Grid / Table] Colors and hover effect eui#8461 (comment)
⚠️ 2025-08-27 Design spec was updated to add hover state for stripes → https://github.com/elastic/eui-private/issues/360#issuecomment-3214444318 🔒

Changes

Remove custom background hover color for rows, in both data grids (main and document/table) to leverage EUI's defaults bed13fe1d3376651b5e10e18ebb2e16fb3f9c435
Use new backgroundBaseInteractiveSelect token for background color of expanded rows (when the document flyout is open 9d104c8b106cee4eb98e281b1ee8faf55a0d65a1

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, uses sentence case text and includes i18n support~~
~~Documentation was added for features that require explanation or tutorials~~
~~Unit or functional tests 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~~
~~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 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~~
Review the backport guidelines and apply applicable backport:* labels.

Identify risks

Only visual changes for colors on table rows, no performance regression risk.

elasticmachine · 2025-07-30T17:12:55Z

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

kibanamachine · 2025-07-30T17:24:20Z

Cloud deployment initiated, see credentials at: https://buildkite.com/elastic/kibana-deploy-cloud-from-pr/builds/321

acstll · 2025-07-30T17:44:02Z

Deployment is up for testing:

/cc @jughosta @l-suarez @ek-so

ek-so · 2025-07-30T18:43:04Z

Thank you! From my side looks good and as we discussed.

jughosta

Thanks, @acstll!

acstll · 2025-07-31T14:31:46Z

@elasticmachine merge upstream

l-suarez · 2025-07-31T16:27:27Z

Thanks for working on this.

As I mentioned in the slack thread the other day, I really miss the hover state in the datagrid in Discover, it really helps with readability when viewing a dense amount of data. The hover state in the table component looks good.

All good in light theme. A few comments on dark theme:

There's little difference between row background colors on striped datagrids (on my macbook is better but on my other monitor the difference is almost not noticeable)

Active row has good contrast:

Hope this helps, thank you!

davismcphee · 2025-07-31T16:37:04Z

Count me as a +1 to @l-suarez's comment about the hover state. Even in the GIF she shared it's very hard for me to tell at a glance which row she's hovering over despite the cell border. I now have to track where the cell border is and work horizontally from there to identify the other cells in the same row. The old approach with row hover was a lot better for usability IMO, at least for me.

ek-so · 2025-08-20T07:24:32Z

@acstll when you get back to it, here is the comment in Slack with a slightly different proposal. Please let me know what you think.

acstll · 2025-08-27T09:10:41Z

@elasticmachine merge upstream

elasticmachine · 2025-08-27T09:10:44Z

merge conflict between base and head

jbudz · 2025-08-27T12:46:02Z

elastic_eui.stripes_hover.tgz

Are the files expected?

no, these are just for visually testing the latest changes now, before they go out on the EUI side (and save some time); if the changes are OK, we can revert f61f618 and the regular EUI package update will do

~~btw, do you know how can I know if the cloud deployment is running? I remember having some checkboxes but they're gone and I couldn't find a way to check what's happening…~~ 🙏 I got it 👍

these are the changes in EUI I was referring to: elastic/eui#8983

acstll · 2025-08-27T15:31:05Z

Deployment is up for testing again:

🔗 https://kibana-pr-229928.kb.us-west2.gcp.elastic-cloud.com/
🔑 in paste bin (or DM)

acstll · 2025-09-08T11:29:38Z

@elasticmachine merge upstream

l-suarez

LGTM, thanks team!

acstll · 2025-09-08T14:04:38Z

quick status update:

[EuiDataGrid] Enable row background color on hover for stripes={true} eui#8983 just got merged ✨
~~after this week's EUI release, I will update this PR with the latest version and remove the local build~~
waiting one more week for the latest release (v106.6.0), that actually includes the changes we need

…or on hover in favor of EUI defaults

…no-cache --fix'

acstll · 2025-09-26T09:40:26Z

@elasticmachine merge upstream

elasticmachine · 2025-09-26T10:49:12Z

⏳ Build in-progress, with failures

Buildkite Build
Commit: 1d8713e

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #4 / discover/group1 discover histogram should modify the time range when the histogram is brushed

History

cc @acstll

acstll · 2025-09-26T10:55:14Z

@jbudz the FTR failures seem unrelated to the changes in the PR — any ideas? 🙏

jbudz · 2025-09-26T12:26:07Z

@jbudz the FTR failures seem unrelated to the changes in the PR — any ideas? 🙏

General flakiness upstream, they passed on retries. The build is green and this PR can be merged if ready.

## 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 <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

…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 <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

acstll self-assigned this Jul 30, 2025

acstll added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting EUI Visual Refresh ci:cloud-deploy Create or update a Cloud deployment ci:cloud-persist-deployment Persist cloud deployment indefinitely labels Jul 30, 2025

kertal added Team:DataDiscovery Discover, search (data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. t// Feature:Discover Discover Application labels Jul 30, 2025

acstll marked this pull request as ready for review July 30, 2025 17:12

acstll requested review from a team as code owners July 30, 2025 17:12

PhilippeOberti approved these changes Jul 31, 2025

View reviewed changes

jughosta approved these changes Jul 31, 2025

View reviewed changes

ek-so approved these changes Jul 31, 2025

View reviewed changes

acstll mentioned this pull request Aug 27, 2025

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

Merged

13 tasks

acstll force-pushed the eui/discover-tables-hover branch from 4ab3342 to f61f618 Compare August 27, 2025 12:14

acstll added ci:cloud-deploy Create or update a Cloud deployment and removed ci:cloud-deploy Create or update a Cloud deployment labels Aug 27, 2025

acstll requested a review from a team as a code owner August 27, 2025 12:43

jbudz reviewed Aug 27, 2025

View reviewed changes

acstll added ci:cloud-redeploy Always create a new Cloud deployment and removed ci:cloud-redeploy Always create a new Cloud deployment labels Aug 27, 2025

acstll requested a review from a team as a code owner August 27, 2025 13:42

elena-shostak approved these changes Aug 28, 2025

View reviewed changes

acstll requested a review from l-suarez August 28, 2025 11:06

l-suarez approved these changes Sep 8, 2025

View reviewed changes

acstll force-pushed the eui/discover-tables-hover branch from 3bb0441 to b164866 Compare September 12, 2025 09:09

acstll and others added 3 commits September 19, 2025 10:41

[Unified Doc Viewer][Unified Data Table] Remove custom background col…

dfa5ba0

…or on hover in favor of EUI defaults

[Unified Data Table] Update background color for expanded row

427126d

[CI] Auto-commit changed files from 'node scripts/eslint_all_files --…

0836093

…no-cache --fix'

acstll force-pushed the eui/discover-tables-hover branch from 5df16a4 to 0836093 Compare September 19, 2025 08:58

Merge branch 'main' into eui/discover-tables-hover

1d8713e

acstll merged commit d83935b into main Sep 26, 2025
12 checks passed

acstll deleted the eui/discover-tables-hover branch September 26, 2025 12:49

kibanamachine added the v9.2.0 label Sep 26, 2025

Conversation

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

Uh oh!

Summary

Changes

Previous Changes (initial iteration, no longer part of the PR)

Checklist

Identify risks

Uh oh!

elasticmachine commented Jul 30, 2025

Uh oh!

kibanamachine commented Jul 30, 2025

Uh oh!

acstll commented Jul 30, 2025

Uh oh!

ek-so commented Jul 30, 2025

Uh oh!

jughosta left a comment

Choose a reason for hiding this comment

Uh oh!

acstll commented Jul 31, 2025

Uh oh!

l-suarez commented Jul 31, 2025

Uh oh!

davismcphee commented Jul 31, 2025

Uh oh!

ek-so commented Aug 20, 2025

Uh oh!

acstll commented Aug 27, 2025

Uh oh!

elasticmachine commented Aug 27, 2025

Uh oh!

jbudz Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Aug 27, 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!

acstll Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

acstll commented Aug 27, 2025

Uh oh!

acstll commented Sep 8, 2025

Uh oh!

l-suarez left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

acstll commented Sep 26, 2025

Uh oh!

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

Uh oh!

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

History

Uh oh!

acstll commented Sep 26, 2025

Uh oh!

jbudz commented Sep 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

acstll commented Jul 30, 2025 •

edited

Loading

acstll Aug 27, 2025 •

edited

Loading

acstll commented Sep 8, 2025 •

edited

Loading

elasticmachine commented Sep 26, 2025 •

edited

Loading