Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mgadewoll merged 4 commits into from
Jul 30, 2025
Merged

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

mgadewoll merged 4 commits into from
Jul 30, 2025

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Jul 29, 2025 •
edited
Loading

Summary

This PR is a follow-up to #8834. It adds small updates to how the row class euiDataGridRow--marked applies.

The previous PR did not correctly apply marked rows nor disable the hover styling for selected and marked rows in EuiDataGrid with stripes={true}.

Why are we making this change?

Fixing unexpected visual output.

Screenshots

before after
Screen.Recording.2025-07-29.at.17.10.02.mov
Screen.Recording.2025-07-29.at.17.08.37.mov

Impact to users

QA

  • compare production and staging and verify that with the update:
    • marked rows have yellow backgrounds in striped mode
    • marked and selected rows don't have background hover in striped mode

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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)

@mgadewoll mgadewoll self-assigned this Jul 29, 2025
@elasticmachine
Copy link
Collaborator

elasticmachine commented Jul 29, 2025

💚 Build Succeeded

cc @mgadewoll

@elasticmachine
Copy link
Collaborator

elasticmachine commented Jul 29, 2025

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review July 29, 2025 16:02
@mgadewoll mgadewoll requested a review from a team as a code owner July 29, 2025 16:02
@acstll acstll self-requested a review July 29, 2025 16:09
acstll
acstll approved these changes Jul 30, 2025
View reviewed changes
Copy link
Contributor

@acstll acstll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Changes look good, working as expected. Thanks for the VRT update and updating the story!

@mgadewoll mgadewoll merged commit bb52cb6 into elastic:main Jul 30, 2025
6 checks passed
@weronikaolejniczak weronikaolejniczak mentioned this pull request Aug 11, 2025
Merged
weronikaolejniczak added a commit to elastic/kibana that referenced this pull request Aug 13, 2025
@weronikaolejniczak
Upgrade EUI to v106.3.0 (#231288)
2a7bdb5 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.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.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([#8920](elastic/eui#8920))
fkanout pushed a commit to fkanout/kibana that referenced this pull request Aug 14, 2025
@weronikaolejniczak @fkanout
Upgrade EUI to v106.3.0 (elastic#231288)
725bce7 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.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.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([elastic#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([elastic#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([elastic#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([elastic#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([elastic#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([elastic#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([elastic#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([elastic#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([elastic#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([elastic#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([elastic#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([elastic#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([elastic#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([elastic#8920](elastic/eui#8920))
NicholasPeretti pushed a commit to NicholasPeretti/kibana that referenced this pull request Aug 18, 2025
@weronikaolejniczak @NicholasPeretti
Upgrade EUI to v106.3.0 (elastic#231288)
4ef09e7 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.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.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([elastic#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([elastic#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([elastic#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([elastic#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([elastic#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([elastic#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([elastic#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([elastic#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([elastic#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([elastic#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([elastic#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([elastic#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([elastic#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([elastic#8920](elastic/eui#8920))
qn895 pushed a commit to qn895/kibana that referenced this pull request Aug 26, 2025
@weronikaolejniczak @qn895
Upgrade EUI to v106.3.0 (elastic#231288)
7ae9dbf 
- `@elastic/eui`: `v106.2.0` ⏩ `v106.3.0`
- `@elastic/eui-theme-borealis`: `v3.3.0` ⏩ `v3.3.1`
- `@elastic/eslint-plugin-eui`: `v2.2.1` ⏩ `v2.3.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.3.0`](https://github.com/elastic/eui/releases/v106.3.0)

- Added thumbUp and thumbDown icons
([elastic#8937](elastic/eui#8937))
- Removed obsolete IE-specific CSS properties
([elastic#8940](elastic/eui#8940))
- Updated `EuiComboBox` to allow multiline options by disabling
virtualization (`rowHeight="auto"`)
([elastic#8934](elastic/eui#8934))

**Bug fixes**

- Fixed interactive content in header cells on `EuiDataGrid` not being
correctly removed from the tab order
([elastic#8938](elastic/eui#8938))
- Fixed an issue where the validity state of `EuiFieldNumber` did not
update when the `isInvalid` prop value changed
([elastic#8952](elastic/eui#8952))
- Reverted a font-size change for `xs` buttons back to `12px`
([elastic#8930](elastic/eui#8930))
- Fixed unexpected results for the SCSS function
`lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))
- Fixed `euiDataGridRow--selected` not applying on `EuiDataGrid` whith
`stripes={true}` ([elastic#8925](elastic/eui#8925))
- Fixed `euiDataGridRow--marked` and `euiDataGridRow--selected` applying
hover styling on `EuiDataGrid` when `stripes={true}`
([elastic#8925](elastic/eui#8925))

**Accessibility**

- Added a screen reader help text for entered interactive cells of
`EuiDataGrid` to provide information about exiting cells
([elastic#8938](elastic/eui#8938))
- Added a new beta `EuiLiveAnnouncer` component which supports
`aria-live` announcements on mount
([elastic#8916](elastic/eui#8916))
- Added `announceOnMount` prop on `EuiCallOut` to support announcing its
content on mount ([elastic#8916](elastic/eui#8916))

### `@elastic/eui-theme-borealis`

####
[`v3.3.1`](https://www.npmjs.com/package/@elastic/eui-theme-borealis/v/3.3.1)

**Bug fixes**

- Updated shared theme SCSS imports to ensure expected results for the
SCSS function `lineHeightFromBaseline`
([elastic#8922](elastic/eui#8922))

### `@elastic/eslint-plugin-eui`

####
[`v2.3.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.3.0)

- Added `EuiFlyoutResizable` to `require-aria-label-for-modals` check
([elastic#8946](elastic/eui#8946))
- Added new `no-unnamed-radio-group` rule.
([elastic#8929](elastic/eui#8929))
- Fixed attributes comparison issue in the `consistent-is-invalid-props`
rule. ([elastic#8920](elastic/eui#8920))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@acstll acstll acstll approved these changes

Assignees

@mgadewoll mgadewoll

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mgadewoll @elasticmachine @acstll