[DataGrid] Add `columnHeader`, `row` and `cell` in addition to `root` in classes prop #1660

DanailH · 2021-05-13T06:50:13Z

Not much in terms of the approach. I had to add the classes to the grid options in order to have access to them in the column header, row, and cell components.

BREAKING CHANGES:

-.MuiDataGrid-colCellWrapper
-.MuiDataGrid-colCell
+.MuiDataGrid-columnHeaderWrapper
+.MuiDataGrid-columnHeader

-.MuiDataGrid-colCellCheckbox
+.MuiDataGrid-columnHeaderCheckbox

-.MuiDataGrid-colCellSortable
+.MuiDataGrid-columnHeaderSortable

-.MuiDataGrid-colCellCenter
-.MuiDataGrid-colCellRight
-.MuiDataGrid-colCellTitle
+.MuiDataGrid-columnHeaderCenter
+.MuiDataGrid-columnHeaderRight
+.MuiDataGrid-columnHeaderTitle

Missing:

Update /style page in the docs

https://deploy-preview-1660--material-ui-x.netlify.app/components/data-grid/style/#using-the-classes-object-prop

packages/grid/_modules_/grid/components/GridRow.tsx

packages/grid/_modules_/grid/components/GridViewport.tsx

packages/grid/_modules_/grid/GridComponent.tsx

packages/grid/_modules_/grid/components/cell/GridCell.tsx

packages/grid/_modules_/grid/components/GridRow.tsx

docs/src/pages/components/data-grid/style/style.md

oliviertassinari · 2021-05-14T13:01:28Z

docs/src/pages/components/data-grid/style/style.md

@@ -98,6 +98,14 @@ const columns: GridColumns = [

 {{"demo": "pages/components/data-grid/style/StylingCellsGrid.js", "bg": "inline"}}

+## Using the `classes` object prop


I don't think that we should document the classes. This is most often a foot-gun, here is an example why:

Or maybe we should only add a strong warning about it

Well what's the point of doing the feature if we don't want to show it to the users?

The main value I think is about having the same API as in the core components. It's only a foot gun because we increase specificity for performance. This mean that developers will lose specificity over the default styles of the grid.

Maybe a warning about this, to prefix the demo would be enough?

When doing the demo it felt like a duplicate. I can remove the demo and just add a link to the page that explains how to use classes?

docs/src/pages/components/data-grid/style/style.md

packages/grid/_modules_/grid/components/GridViewport.tsx

packages/grid/_modules_/grid/components/cell/GridRowCells.tsx

packages/grid/_modules_/grid/models/gridClasses.ts

dtassone · 2021-05-14T13:50:38Z

packages/grid/_modules_/grid/utils/utils.ts

@@ -82,3 +84,7 @@ export function mapColDefTypeToInputType(type: string) {

 // Util to make specific interface properties optional
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export function getButtonBaseUtilityClass(slot) {
+  return generateUtilityClass(GRID_CSS_CLASS_PREFIX, slot);


what is this one? What issue does it solve?

This one is used to generate the class names. We didn't complete the migration, we are not supposed to have GRID_HEADER_CELL_CSS_CLASS variables like with the approach of v5 in the core. Instead, we would read the global gridClasses.headerCell.

oliviertassinari · 2021-05-14T15:52:25Z

docs/src/pages/components/data-grid/style/style.md

@@ -98,6 +98,14 @@ const columns: GridColumns = [

 {{"demo": "pages/components/data-grid/style/StylingCellsGrid.js", "bg": "inline"}}

+## Using the `classes` object prop


Maybe a warning about this, to prefix the demo would be enough?

packages/grid/_modules_/grid/components/GridViewport.tsx

packages/grid/_modules_/grid/utils/utils.ts

oliviertassinari · 2021-05-14T20:03:38Z

packages/grid/_modules_/grid/utils/utils.ts

@@ -82,3 +84,7 @@ export function mapColDefTypeToInputType(type: string) {

 // Util to make specific interface properties optional
 export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+export function getButtonBaseUtilityClass(slot) {
+  return generateUtilityClass(GRID_CSS_CLASS_PREFIX, slot);


This one is used to generate the class names. We didn't complete the migration, we are not supposed to have GRID_HEADER_CELL_CSS_CLASS variables like with the approach of v5 in the core. Instead, we would read the global gridClasses.headerCell.

DanailH · 2021-05-17T07:50:02Z

Ok, I've renamed the classes from colCell to columnHeader for consistency and removing the use of abbreviation. This is now a breaking change PR, I'll list what those changes are in the PR description.

docs/src/pages/components/data-grid/style/style.md

oliviertassinari · 2021-05-17T18:01:54Z

packages/grid/_modules_/grid/constants/cssClassesConstants.ts

+export const GRID_COLUMN_HEADER_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX}`;
+export const GRID_ROW_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_ROW_CSS_CLASS_SUFFIX}`;
+export const GRID_CELL_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_CELL_CSS_CLASS_SUFFIX}`;
+export const GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS = `${GRID_ROOT_CSS_CLASS_SUFFIX}-columnSeparatorResizable`;
+export const GRID_COLUMN_HEADER_TITLE_CSS_CLASS = `${GRID_ROOT_CSS_CLASS_SUFFIX}-columnHeaderTitleContainer`;


I believe we will need to move the logic into a plain dataGridClasses file, as in the core.

Suggested change

export const GRID_COLUMN_HEADER_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_COLUMN_HEADER_CSS_CLASS_SUFFIX}`;

export const GRID_ROW_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_ROW_CSS_CLASS_SUFFIX}`;

export const GRID_CELL_CSS_CLASS = `${GRID_CSS_CLASS_PREFIX}-${GRID_CELL_CSS_CLASS_SUFFIX}`;

export const GRID_COLUMN_HEADER_SEPARATOR_RESIZABLE_CSS_CLASS = `${GRID_ROOT_CSS_CLASS_SUFFIX}-columnSeparatorResizable`;

export const GRID_COLUMN_HEADER_TITLE_CSS_CLASS = `${GRID_ROOT_CSS_CLASS_SUFFIX}-columnHeaderTitleContainer`;

oliviertassinari · 2021-05-18T14:31:47Z

Related to #408

Added columnHeader, row and cell in addition to root in classes prop

b752a59

DanailH added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels May 13, 2021

DanailH requested review from dtassone, oliviertassinari and m4theushw May 13, 2021 06:50

DanailH self-assigned this May 13, 2021

oliviertassinari reviewed May 13, 2021

View reviewed changes

packages/grid/_modules_/grid/components/GridRow.tsx Outdated Show resolved Hide resolved

packages/grid/_modules_/grid/components/GridViewport.tsx Outdated Show resolved Hide resolved

Rename viewport prop to className

eebaa38

oliviertassinari reviewed May 13, 2021

View reviewed changes

packages/grid/_modules_/grid/GridComponent.tsx Outdated Show resolved Hide resolved

packages/grid/_modules_/grid/components/cell/GridCell.tsx Outdated Show resolved Hide resolved

DanailH added 2 commits May 14, 2021 12:27

Resolve conflicts

6ac595a

Order props ASC

8d041d4

dtassone reviewed May 14, 2021

View reviewed changes

packages/grid/_modules_/grid/components/GridRow.tsx Outdated Show resolved Hide resolved

DanailH added 3 commits May 14, 2021 13:50

Rework the classes to match what is in the core

42bab4d

Select only what is needed from the options in GridRow

d7c54fd

Add demo in the docs

dc1d76c

oliviertassinari changed the title ~~[DataGrid] Added columnHeader, row and cell in addition to root in classes prop~~ [DataGrid] Add columnHeader, row and cell in addition to root in classes prop May 14, 2021

oliviertassinari reviewed May 14, 2021

View reviewed changes

m4theushw reviewed May 14, 2021

View reviewed changes

dtassone reviewed May 14, 2021

View reviewed changes

oliviertassinari reviewed May 14, 2021

View reviewed changes

Batch comments

583dabb

DanailH added the breaking change label May 17, 2021

DanailH commented May 17, 2021

View reviewed changes

docs/src/pages/components/data-grid/style/style.md Outdated Show resolved Hide resolved

DanailH requested review from dtassone, m4theushw and oliviertassinari May 17, 2021 07:59

Remove classes section

66f23fb

dtassone approved these changes May 17, 2021

View reviewed changes

m4theushw approved these changes May 17, 2021

View reviewed changes

DanailH merged commit 6878633 into mui:master May 17, 2021

ZeeshanTamboli mentioned this pull request May 18, 2021

[docs] Add missing CSS rules #1694

Merged

oliviertassinari reviewed May 18, 2021

View reviewed changes

oliviertassinari mentioned this pull request May 18, 2021

[DataGrid] Fix CSS classes prefix #1693

Merged

ZeeshanTamboli mentioned this pull request Jul 7, 2021

[DataGrid] Allow theme customizations #1755

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add `columnHeader`, `row` and `cell` in addition to `root` in classes prop #1660

[DataGrid] Add `columnHeader`, `row` and `cell` in addition to `root` in classes prop #1660

DanailH commented May 13, 2021 •

edited by oliviertassinari

oliviertassinari May 14, 2021 •

edited

dtassone May 14, 2021

oliviertassinari May 14, 2021

oliviertassinari May 14, 2021

DanailH May 17, 2021

dtassone May 14, 2021

oliviertassinari May 14, 2021

oliviertassinari May 14, 2021

oliviertassinari May 14, 2021

DanailH commented May 17, 2021

oliviertassinari May 17, 2021

oliviertassinari commented May 18, 2021 •

edited

		@@ -98,6 +98,14 @@ const columns: GridColumns = [

		{{"demo": "pages/components/data-grid/style/StylingCellsGrid.js", "bg": "inline"}}

		## Using the `classes` object prop

[DataGrid] Add columnHeader, row and cell in addition to root in classes prop #1660

[DataGrid] Add columnHeader, row and cell in addition to root in classes prop #1660

Conversation

DanailH commented May 13, 2021 • edited by oliviertassinari

oliviertassinari May 14, 2021 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanailH commented May 17, 2021

Choose a reason for hiding this comment

oliviertassinari commented May 18, 2021 • edited

[DataGrid] Add `columnHeader`, `row` and `cell` in addition to `root` in classes prop #1660

[DataGrid] Add `columnHeader`, `row` and `cell` in addition to `root` in classes prop #1660

DanailH commented May 13, 2021 •

edited by oliviertassinari

oliviertassinari May 14, 2021 •

edited

oliviertassinari commented May 18, 2021 •

edited