Skip to content

Document grid row state styling change (26.3.8) in breaking changes #1319

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

Merged
mstijak merged 1 commit into from
Aug 10, 2026
Merged

Document grid row state styling change (26.3.8) in breaking changes #1319

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions homedocs/src/pages/docs/intro/breaking-changes.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,57 @@ Sometimes we are forced to introduce breaking changes to the framework.
This page will provide information about breaking changes and how to migrate your applications to the latest
versions of the framework.

## 26.3.8

### Grid row states are now styled from `$cx-grid-data-state-style-map`

Interactive row states of selectable grids — `hover`, `cursor`, `selected`, and `selected-cursor` — were
previously styled through the `$cx-list-item` map, shared with the `List` widget. Starting with 26.3.8,
`Grid` reads these states from `$cx-grid-data-state-style-map`, so grids and lists can be styled independently.

Two things to watch for when upgrading:

- If your project customizes row hover/selection appearance through `$cx-list-item`, grid rows will
silently fall back to the default appearance — `List` widgets keep your styling, grids no longer do.
- Any `hover`/`cursor`/`selected` entries already present in your `$cx-grid-data-state-style-map`
overrides were ignored by grids before 26.3.8 and will start to apply.

**Before (grid rows inherited these from `$cx-list-item`):**
```scss
$cx-list-item: cx-deep-map-merge(
$cx-list-item,
(
hover: (
background-color: #f3f4f6,
),
selected: (
background-color: rgb(219, 234, 254),
),
)
);
```

**After (style grid rows explicitly; keep `$cx-list-item` for `List` widgets):**
```scss
$cx-grid-data-state-style-map: cx-deep-map-merge(
$cx-grid-data-state-style-map,
(
hover: (
background-color: #f3f4f6,
),
cursor: (
background-color: #f3f4f6,
),
selected: (
background-color: rgb(219, 234, 254),
),
selected-cursor: (
background-color: rgb(191, 219, 254),
),
)
);
```

## 26.3.1 - Modern Sass Modules

CxJS 26.3.1 migrates all SCSS files from the deprecated `@import` syntax to modern Sass modules (`@use` and `@forward`).
Expand Down
Loading