From e4989bd3021d8fe82af3976f81e8d772ac63a1f7 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 16 Apr 2024 02:40:59 -0400 Subject: [PATCH 1/4] doc: add grid cell styling note --- .../migration-data-grid-v6.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 6f52bc1d05abd..bcedfb98e289f 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -509,8 +509,18 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) - You can now style a row's hover state using just `:hover` instead of `.Mui-hovered`. - The `.MuiDataGrid--pinnedColumns-(left\|right)` class for pinned columns has been removed. - The `.MuiDataGrid-cell--withRenderer` class has been removed. -- The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior. - NOTE: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis;`. +- The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior. + **NOTE**: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis`. + ```tsx + { + display: "flex", + renderCell: ({ value }) => ( +
+ {value} +
+ ), + }, + ``` - The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`. - The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility. - The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to. From 130c014399e7a6a3c4f82697145d1e6c4e6d1623 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 16 Apr 2024 02:42:45 -0400 Subject: [PATCH 2/4] lint --- .../migration-data-grid-v6/migration-data-grid-v6.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index bcedfb98e289f..36456bd3f3d48 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -513,9 +513,9 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) **NOTE**: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis`. ```tsx { - display: "flex", + display: 'flex', renderCell: ({ value }) => ( -
+
{value}
), From 3efe5f9a4c2254cc32b18d5d0709b4afb60ea12b Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 16 Apr 2024 03:03:33 -0400 Subject: [PATCH 3/4] lint --- .../migration/migration-data-grid-v6/migration-data-grid-v6.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 36456bd3f3d48..48e2e2db7da93 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -509,7 +509,8 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) - You can now style a row's hover state using just `:hover` instead of `.Mui-hovered`. - The `.MuiDataGrid--pinnedColumns-(left\|right)` class for pinned columns has been removed. - The `.MuiDataGrid-cell--withRenderer` class has been removed. -- The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior. +- The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior. + **NOTE**: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis`. ```tsx { From 1c7e3997bfb01b41d51fdb1491f0ae2dfa12ca86 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Tue, 16 Apr 2024 03:09:42 -0400 Subject: [PATCH 4/4] lint --- .../migration/migration-data-grid-v6/migration-data-grid-v6.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md index 48e2e2db7da93..cdfd95277d1f5 100644 --- a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -512,6 +512,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) - The cell element isn't `display: flex` by default. You can add `display: 'flex'` on the column definition to restore the behavior. **NOTE**: If you're using **dynamic row height**, this also means cells aren't vertically centered by default anymore, you might want to set the `display: 'flex'` for all non-dynamic columns. This may also affect text-ellipsis, which you can restore by adding your own wrapper with `text-overflow: ellipsis`. + ```tsx { display: 'flex', @@ -522,6 +523,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access) ), }, ``` + - The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`. - The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility. - The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.