[EuiBasicTable][EuiDataGrid] Add marked row styling #8834

mgadewoll · 2025-07-01T11:25:30Z

Summary

This PR adds a new "marked" row styling to EuiBasicTable and EuiDataGrid. The styling is not natively applied by the components, but we're adding utility classes for consumers to use:

euiTableRow--marked
euiDataGridRow--marked

These classes apply the defined highlight styling for rows and adjusts its hover and active/focus style accordingly.

light	dark

To support this "marked" style new component tokens are added:

dataGridRowBackgroundMarked
dataGridRowBackgroundMarkedHover
dataGridRowBorderMarked
  
tableRowBackgroundMarked
tableRowBackgroundMarkedHover

Additionally this PR adds new component tokens for other cell outline colors to align usages:

dataGridRowBorderActive
dataGridRowBorderHover

Why are we making this change?

There are clear product needs on consumer side that require this update. By providing utility classes we can prevent consumers from having to add the styles manually themselves.

Screenshots

EuiBasicTable

Screen.Recording.2025-07-01.at.13.20.36.mov

EuiDataGrid

Screen.Recording.2025-06-27.at.13.16.46.mov

Impact to users

🟢 There are no breaking changes.

QA

checkout this PR and review the two new added stories and verify the styling matches design specs
- EuiBasicTable > Marked Row
- EuiDataGrid > gridStyle > Marked Row
review the added/updated documentation for both components
- EuiBasicTable
- EuiDataGrid

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)

- adds additional tokens to handle marked styles

acstll

Only a couple of nits regarding comments, everything else is perfect. Thanks for tackling this one so nicely (the new "Table row classes" section in the docs is great.)

We talked about this briefly recently, but just double-checking JSON and SCSS are not needed for component tokens, correct?

I reviewed the code and tested the results in the udpated docs.

🟢

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

packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts

elasticmachine · 2025-07-04T08:40:57Z

💚 Build Succeeded

History

💚 Build #663 succeeded 762cf4b
💚 Build #659 succeeded 28c3640

cc @mgadewoll

elasticmachine · 2025-07-04T08:57:40Z

💚 Build Succeeded

Buildkite Build
Commit: 92a40ca

History

💚 Build #4295 succeeded 762cf4b
💚 Build #4292 succeeded 28c3640

cc @mgadewoll

mgadewoll · 2025-07-04T09:55:39Z

@acstll Thanks for the review and suggestions!

We talked about this briefly recently, but just double-checking JSON and SCSS are not needed for component tokens, correct?

Before I forget about answering your question:
Yes we currently don't export component tokens in JSON or SCSS. The main reason for even having them was to handle Amsterdam and Borealis in parity without needing extensive in-code feature-flagging. And while we're updating components still those tokens are not fully stable yet. If there is a need for anything specific, global tokens should generally work fine as most tokens are simply mapped to global semantic tokens.

Edit: Fyi, buttons and forms are a bit more standout component tokens. While I'm not sure yet if all component tokens are needed after Amsterdam is removed, I'd assume these we'd want to open up for broader usage due to their potential for shared usages across different components

`104.1.0` ⏩ `105.0.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` #### [`v105.0.0`](https://github.com/elastic/eui/releases/v105.0.0) - Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` ([#8834](elastic/eui#8834)) - Added component tokens: ([#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` - Added `EuiFlyoutChild` and `EuiFlyoutSessionProvider` ([#8771](elastic/eui#8771)) - Added `setListOptionRefs` prop on `EuiComboBoxList` ([#8829](elastic/eui#8829)) **Breaking changes** - Removed `iInCircle` icon (use `info` instead) ([#8841](elastic/eui#8841)) - Removed `questionInCircle` icon (use `question` instead) ([#8841](elastic/eui#8841)) **Accessibility** - Improved the experience of `EuiProgress` by ensuring that determinate updates are read out immediately to screen readers ([#8839](elastic/eui#8839)) - Fixed missing screen reader output for `EuiComboBox` with `options` that have custom `id` attributes ([#8829](elastic/eui#8829)) ### `@elastic/eui-theme-borealis` #### [`v3.2.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v320) - Added component tokens: ([#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` ## Summary - **Marked row styling** for `EuiDataGrid` and `EuiBasicTable`: new CSS classes are available for consistent styling of marked rows (different from selected), including hover and cell outline styles (elastic/eui#8834) - **New flyout component**: `EuiFlyoutChild` allows side-by-side (grouped) flyout panels (elastic/eui#8771) - **Accessibility fixes:** - `EuiComboBox` now supports custom option `id`s (elastic/eui#8829) - Updates on `EuiProgress` are properly announced by screen readers (elastic/eui#8839) - **Icon updates** (breaking change): `iInCircle` and `questionInCircle` icons have been renamed to `info` and `question` respectively (elastic/eui#8841) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

`104.1.0` ⏩ `105.0.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` #### [`v105.0.0`](https://github.com/elastic/eui/releases/v105.0.0) - Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` ([elastic#8834](elastic/eui#8834)) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` - Added `EuiFlyoutChild` and `EuiFlyoutSessionProvider` ([elastic#8771](elastic/eui#8771)) - Added `setListOptionRefs` prop on `EuiComboBoxList` ([elastic#8829](elastic/eui#8829)) **Breaking changes** - Removed `iInCircle` icon (use `info` instead) ([elastic#8841](elastic/eui#8841)) - Removed `questionInCircle` icon (use `question` instead) ([elastic#8841](elastic/eui#8841)) **Accessibility** - Improved the experience of `EuiProgress` by ensuring that determinate updates are read out immediately to screen readers ([elastic#8839](elastic/eui#8839)) - Fixed missing screen reader output for `EuiComboBox` with `options` that have custom `id` attributes ([elastic#8829](elastic/eui#8829)) ### `@elastic/eui-theme-borealis` #### [`v3.2.0`](https://github.com/elastic/eui/blob/main/packages/eui-theme-borealis/changelogs/CHANGELOG_2025.md#v320) - Added component tokens: ([elastic#8834](elastic/eui#8834)) - `dataGridRowBackgroundMarked` - `dataGridRowBackgroundMarkedHover` - `dataGridRowBorderActive` - `dataGridRowBorderHover` - `dataGridRowBorderMarked` - `tableRowBackgroundMarked` - `tableRowBackgroundMarkedHover` ## Summary - **Marked row styling** for `EuiDataGrid` and `EuiBasicTable`: new CSS classes are available for consistent styling of marked rows (different from selected), including hover and cell outline styles (elastic/eui#8834) - **New flyout component**: `EuiFlyoutChild` allows side-by-side (grouped) flyout panels (elastic/eui#8771) - **Accessibility fixes:** - `EuiComboBox` now supports custom option `id`s (elastic/eui#8829) - Updates on `EuiProgress` are properly announced by screen readers (elastic/eui#8839) - **Icon updates** (breaking change): `iInCircle` and `questionInCircle` icons have been renamed to `info` and `question` respectively (elastic/eui#8841) --------- Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

mgadewoll self-assigned this Jul 1, 2025

mgadewoll added the visual refresh label Jul 1, 2025

mgadewoll force-pushed the table/8825-add-marked-row-style branch from fe75ac0 to 28c3640 Compare July 1, 2025 11:31

mgadewoll added 4 commits July 1, 2025 16:46

feat(table, datagrid): support marked styles

ffa3e50

- adds additional tokens to handle marked styles

docs(Storybook): add marked row stories

0e47b26

docs(website): add docs about row highlight utility classes

eb6b4cf

chore: add changelogs

762cf4b

mgadewoll force-pushed the table/8825-add-marked-row-style branch from 28c3640 to 762cf4b Compare July 1, 2025 14:55

mgadewoll requested a review from ek-so July 1, 2025 14:57

mgadewoll marked this pull request as ready for review July 1, 2025 15:38

mgadewoll requested a review from a team as a code owner July 1, 2025 15:38

ek-so approved these changes Jul 2, 2025

View reviewed changes

acstll self-requested a review July 2, 2025 08:19

acstll approved these changes Jul 3, 2025

View reviewed changes

packages/eui/src/components/datagrid/data_grid.styles.ts Show resolved Hide resolved

packages/eui/src/components/datagrid/data_grid.styles.ts Outdated Show resolved Hide resolved

packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts Show resolved Hide resolved

style: add/update comments

92a40ca

mgadewoll merged commit 20162c1 into elastic:main Jul 4, 2025
5 checks passed

acstll mentioned this pull request Jul 7, 2025

Upgrade EUI to v105.0.0 elastic/kibana#226882

Merged

mgadewoll mentioned this pull request Jul 29, 2025

[EuiDataGrid] Fix marked row class hover being applied in striped mode #8925

Merged

15 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiBasicTable][EuiDataGrid] Add marked row styling #8834

[EuiBasicTable][EuiDataGrid] Add marked row styling #8834

Uh oh!

mgadewoll commented Jul 1, 2025 •

edited

Loading

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jul 4, 2025

Uh oh!

elasticmachine commented Jul 4, 2025

Uh oh!

mgadewoll commented Jul 4, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiBasicTable][EuiDataGrid] Add marked row styling #8834

[EuiBasicTable][EuiDataGrid] Add marked row styling #8834

Uh oh!

Conversation

mgadewoll commented Jul 1, 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 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jul 4, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jul 4, 2025

💚 Build Succeeded

History

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Jul 1, 2025 •

edited

Loading

mgadewoll commented Jul 4, 2025 •

edited

Loading