DataGrid/TreeList: Split basic cell styles by Alyar666 · Pull Request #32694 · DevExpress/DevExtreme

Alyar666 · 2026-02-25T17:04:31Z

No description provided.

Copilot

Pull request overview

This PR refactors the base Grid (DataGrid/TreeList) SCSS by extracting “basic cell styles” from gridBase/_index.scss into a new gridBase/layout/cell.scss mixin, then including that mixin from grid-base($widget-name).

Changes:

Added grid-base-cell($widget-name) mixin in layout/cell.scss and moved core cell-related rules into it.
Updated gridBase/_index.scss to @use the new layout module and @include grid-base-cell($widget-name).
Removed large inlined cell-style blocks from gridBase/_index.scss and adjusted a few selectors accordingly.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
`packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss`	New extracted mixin with core cell styles (positioning, overflow, sizing, borders, padding, etc.).
`packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss`	Imports and includes the new mixin; deletes/rewires the previously inlined rules.

Comments suppressed due to low confidence (1)

packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss:75

grid-base-cell already defines the “last-row-border” behavior for cells (layout/cell.scss sets … > td { border-bottom-width: 0; }). Keeping this additional rule here is redundant, and as written it targets .dx-data-row rather than the tds (which is typically where the border is applied). Consider removing this block from _index.scss and keeping the single > td rule in layout/cell.scss.

packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Copilot · 2026-03-01T20:44:47Z

packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss

@@ -0,0 +1,341 @@
+/* stylelint-disable no-duplicate-selectors */


The file disables no-duplicate-selectors for the entire stylesheet. This makes it easy for future changes to introduce accidental duplicates (including duplicates with conflicting properties) without lint feedback. Consider either consolidating the repeated selectors into single blocks (e.g. .dx-header-row > td, .dx-... .dx-command-expand) or scoping the suppression to the minimum necessary range (disable-next-line / disable + enable around specific blocks).

Suggested change

/* stylelint-disable no-duplicate-selectors */

packages/devextreme-scss/scss/widgets/base/gridBase/layout/cell.scss

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss:63

border-bottom-width: 0; is now applied to the .dx-data-row element instead of its cells. In this codebase the row borders are applied to > td, so this selector likely no longer removes the last-row border (and it also duplicates the correct > td rule that already exists in layout/cell.scss). Update this block to target > td (or remove it entirely and rely on the layout/cell.scss implementation).

packages/devextreme-scss/scss/widgets/generic/treeList/layout/cell.scss

Copilot

Pull request overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss:63

The selector under .dx-last-row-border now sets border-bottom-width: 0 on .dx-data-row (the <tr>). In this codebase the last-row-border fix targets table cells (> td) (now implemented in layout/cell.scss), so keeping the <tr> rule here is redundant and likely has no effect. Consider removing this rule from _index.scss and relying on the > td rule in layout/cell.scss to avoid confusion/duplicate maintenance.

packages/devextreme-scss/scss/widgets/material/dataGrid/layout/cell.scss

Copilot

Pull request overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated 1 comment.

packages/devextreme-scss/scss/widgets/material/gridBase/layout/cell.scss

Raushen · 2026-03-04T10:43:59Z

packages/devextreme-scss/scss/widgets/base/dataGrid/layout/cell.scss

+.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines > td.dx-datagrid-first-header.dx-datagrid-sticky-column-border-left {
+  border-left: 2px solid;
+  border-left-color: $datagrid-border-color;
+}


Why we do not use scss? These rules can be refactored, now they are too heavy. There is the style duplication everywhere:
.dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines...

Why we do not use scss? These rules can be refactored, now they are too heavy. There is the style duplication everywhere: .dx-rtl .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-content .dx-datagrid-table .dx-row.dx-column-lines...

I agree that we can combine styles into shared selectors in some places. But let's do that later. I’ve added it to my to-do list.

Alyar666 self-assigned this Feb 25, 2026

Alyar666 requested a review from a team as a code owner February 25, 2026 17:04

Copilot AI review requested due to automatic review settings February 25, 2026 17:04

Alyar666 added skip-cache 26_1 labels Feb 25, 2026

Copilot started reviewing on behalf of Alyar666 February 25, 2026 17:05 View session

Copilot AI reviewed Feb 25, 2026

View reviewed changes

Alyar666 force-pushed the datagrid_scss_refactoring_26_1 branch from 975ba39 to da15869 Compare March 1, 2026 18:35

Alyar666 added the force all tests label Mar 1, 2026

Copilot AI review requested due to automatic review settings March 1, 2026 20:39

Copilot started reviewing on behalf of Alyar666 March 1, 2026 20:39 View session

Copilot AI reviewed Mar 1, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings March 1, 2026 23:57

Copilot started reviewing on behalf of Alyar666 March 1, 2026 23:58 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings March 2, 2026 11:47

Alyar added 14 commits March 2, 2026 15:47

DataGrid/TreeList: Split basic cell styles

bcaa1ef

update comments

36a4802

Sort selectors by weight

2b1abdc

fix lint

154c09c

Move variables to a separate file

6af6895

DataGrid: Split basic cell styles

7c15e3c

TreeList: Split basic cell styles

46907b6

DataGrid/TreeList - fluent theme: Split basic cell styles

c3a83d9

DataGrid - fluent theme: Split cell styles

641c5e0

TreeList - fluent theme: Split cell styles

115fb28

DataGrid/TreeList - generic theme: Split basic cell styles

9b52b37

DataGrid - generic theme: Split cell styles

169ca5f

TreeList - generic theme: Split cell styles

f20494a

DataGrid/TreeList - material theme: Split basic cell styles

49a088e

Alyar added 2 commits March 2, 2026 15:47

DataGrid - material theme: Split cell styles

2d61500

TreeList - material theme: Split cell styles

99429ea

Alyar666 force-pushed the datagrid_scss_refactoring_26_1 branch from 1571277 to 99429ea Compare March 2, 2026 11:47

Copilot started reviewing on behalf of Alyar666 March 2, 2026 11:47 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

packages/devextreme-scss/scss/widgets/generic/treeList/layout/cell.scss Outdated Show resolved Hide resolved

Alyar added 3 commits March 2, 2026 15:56

fix lint

8fd94bc

Fix copilot comments

41a37b8

Base cell styles: Add comments for selectors

7c1bfe2

Copilot AI review requested due to automatic review settings March 2, 2026 17:37

Copilot started reviewing on behalf of Alyar666 March 2, 2026 17:37 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

packages/devextreme-scss/scss/widgets/material/dataGrid/layout/cell.scss Outdated Show resolved Hide resolved

Alyar added 2 commits March 2, 2026 21:55

Fix tests

8350271

Fix copilot comments (part 2)

e33c2e2

Copilot AI review requested due to automatic review settings March 2, 2026 17:58

Copilot started reviewing on behalf of Alyar666 March 2, 2026 17:59 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

packages/devextreme-scss/scss/widgets/material/gridBase/layout/cell.scss Show resolved Hide resolved

Raushen reviewed Mar 4, 2026

View reviewed changes

Raushen approved these changes Mar 4, 2026

View reviewed changes

Alyar666 merged commit dde7931 into DevExpress:26_1 Mar 4, 2026
163 of 167 checks passed

		@@ -0,0 +1,341 @@
		/* stylelint-disable no-duplicate-selectors */

Conversation

Alyar666 commented Feb 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Raushen Mar 4, 2026 • 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!

Alyar666 Mar 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Raushen Mar 4, 2026 •

edited

Loading