[DataGridPro] Fix missing border in right-pinned columns (#4197)

Fixes #4194
mui · Dec 13, 2022 · 1ec26eb · 1ec26eb
1 parent 3edbf9c
commit 1ec26eb
Show file tree

Hide file tree

Showing 40 changed files with 321 additions and 179 deletions.
diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.js
@@ -176,8 +176,8 @@ export default function ColumnSpanningDerived() {
         disableExtendRowFullWidth
         disableRowSelectionOnClick
         hideFooter
-        showCellRightBorder
-        showColumnRightBorder
+        showCellVerticalBorder
+        showColumnVerticalBorder
         disableColumnReorder
       />
     </Box>

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx
@@ -185,8 +185,8 @@ export default function ColumnSpanningDerived() {
         disableExtendRowFullWidth
         disableRowSelectionOnClick
         hideFooter
-        showCellRightBorder
-        showColumnRightBorder
+        showCellVerticalBorder
+        showColumnVerticalBorder
         disableColumnReorder
       />
     </Box>

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx.preview b/docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx.preview
@@ -10,7 +10,7 @@
   disableExtendRowFullWidth
   disableRowSelectionOnClick
   hideFooter
-  showCellRightBorder
-  showColumnRightBorder
+  showCellVerticalBorder
+  showColumnVerticalBorder
   disableColumnReorder
 />
diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.js
@@ -107,8 +107,8 @@ export default function ColumnSpanningFunction() {
         disableColumnFilter
         disableRowSelectionOnClick
         hideFooter
-        showCellRightBorder
-        showColumnRightBorder
+        showCellVerticalBorder
+        showColumnVerticalBorder
         getCellClassName={getCellClassName}
         columns={columns}
         rows={rows}

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx
@@ -130,8 +130,8 @@ export default function ColumnSpanningFunction() {
         disableColumnFilter
         disableRowSelectionOnClick
         hideFooter
-        showCellRightBorder
-        showColumnRightBorder
+        showCellVerticalBorder
+        showColumnVerticalBorder
         getCellClassName={getCellClassName}
         columns={columns}
         rows={rows}

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx.preview b/docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx.preview
@@ -4,8 +4,8 @@
   disableColumnFilter
   disableRowSelectionOnClick
   hideFooter
-  showCellRightBorder
-  showColumnRightBorder
+  showCellVerticalBorder
+  showColumnVerticalBorder
   getCellClassName={getCellClassName}
   columns={columns}
   rows={rows}

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningNumber.js b/docs/data/data-grid/column-spanning/ColumnSpanningNumber.js
@@ -3,8 +3,8 @@ import { DataGrid } from '@mui/x-data-grid';
 
 const other = {
   autoHeight: true,
-  showCellRightBorder: true,
-  showColumnRightBorder: true,
+  showCellVerticalBorder: true,
+  showColumnVerticalBorder: true,
 };
 
 const rows = [

diff --git a/docs/data/data-grid/column-spanning/ColumnSpanningNumber.tsx b/docs/data/data-grid/column-spanning/ColumnSpanningNumber.tsx
@@ -3,8 +3,8 @@ import { DataGrid } from '@mui/x-data-grid';
 
 const other = {
   autoHeight: true,
-  showCellRightBorder: true,
-  showColumnRightBorder: true,
+  showCellVerticalBorder: true,
+  showColumnVerticalBorder: true,
 };
 
 const rows = [

diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
@@ -33,6 +33,8 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
   | `onSelectionModelChange`   | `onRowSelectionModelChange`   |
   | `disableSelectionOnClick`  | `disableRowSelectionOnClick`  |
   | `disableMultipleSelection` | `disableMultipleRowSelection` |
+  | `showCellRightBorder`      | `showCellVerticalBorder`      |
+  | `showColumnRightBorder`    | `showColumnVerticalBorder`    |
 
 ### Removed props
 
@@ -154,11 +156,15 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
 - The `GridRowData` type was removed. Use `GridRowModel` instead.
 - The `filterPanelOperators` translation key was renamed to `filterPanelOperator`
 
-<!--
 ### CSS classes
 
-TBD
+- Some CSS classes were removed or renamed
 
+  | MUI X v5 classes          | MUI X v6 classes               | Note                                            |
+  | ------------------------- | ------------------------------ | ----------------------------------------------- |
+  | `.MuiDataGrid-withBorder` | `.MuiDataGrid-withBorderColor` | The class only sets `border-color` CSS property |
+
+<!--
 ### Virtualization
 
 TBD

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -224,8 +224,8 @@
     "rowThreshold": { "type": { "name": "number" }, "default": "3" },
     "scrollbarSize": { "type": { "name": "number" } },
     "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" },
-    "showCellRightBorder": { "type": { "name": "bool" } },
-    "showColumnRightBorder": { "type": { "name": "bool" } },
+    "showCellVerticalBorder": { "type": { "name": "bool" } },
+    "showColumnVerticalBorder": { "type": { "name": "bool" } },
     "sortingMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""
@@ -441,7 +441,9 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder",
+      "withBorderColor",
+      "cell--withRightBorder",
+      "columnHeader--withRightBorder",
       "treeDataGroupingCell",
       "treeDataGroupingCellToggle",
       "groupingCriteriaCell",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -202,8 +202,8 @@
     "rowThreshold": { "type": { "name": "number" }, "default": "3" },
     "scrollbarSize": { "type": { "name": "number" } },
     "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" },
-    "showCellRightBorder": { "type": { "name": "bool" } },
-    "showColumnRightBorder": { "type": { "name": "bool" } },
+    "showCellVerticalBorder": { "type": { "name": "bool" } },
+    "showColumnVerticalBorder": { "type": { "name": "bool" } },
     "sortingMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""
@@ -419,7 +419,9 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder",
+      "withBorderColor",
+      "cell--withRightBorder",
+      "columnHeader--withRightBorder",
       "treeDataGroupingCell",
       "treeDataGroupingCellToggle",
       "groupingCriteriaCell",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -148,8 +148,8 @@
     },
     "rowThreshold": { "type": { "name": "number" }, "default": "3" },
     "scrollbarSize": { "type": { "name": "number" } },
-    "showCellRightBorder": { "type": { "name": "bool" } },
-    "showColumnRightBorder": { "type": { "name": "bool" } },
+    "showCellVerticalBorder": { "type": { "name": "bool" } },
+    "showColumnVerticalBorder": { "type": { "name": "bool" } },
     "sortingMode": {
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""
@@ -363,7 +363,9 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder",
+      "withBorderColor",
+      "cell--withRightBorder",
+      "columnHeader--withRightBorder",
       "treeDataGroupingCell",
       "treeDataGroupingCellToggle",
       "groupingCriteriaCell",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json
@@ -139,8 +139,8 @@
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
     "scrollEndThreshold": "Set the area in <code>px</code> at the bottom of the grid viewport where onRowsScrollEnd is called.",
-    "showCellRightBorder": "If <code>true</code>, the right border of the cells are displayed.",
-    "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
+    "showCellVerticalBorder": "If <code>true</code>, the vertical borders of the cells are displayed.",
+    "showColumnVerticalBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
@@ -622,14 +622,20 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "both the cell and the column header",
-      "conditions": "<code>showColumnRightBorder={true}</code>"
+    "withBorderColor": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.\nSets border color only.",
+      "nodeName": "cells",
+      "conditions": "column header and other elements that have border"
+    },
+    "cell--withRightBorder": {
+      "description": "Styles applied the cell if `showColumnVerticalBorder={true}`."
+    },
+    "columnHeader--withRightBorder": {
+      "description": "Styles applied the column header if `showColumnVerticalBorder={true}`."
     },
     "treeDataGroupingCell": {
       "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the root of the grouping cell of the tree data"
+      "nodeName": "the root of the grouping column of the tree data"
     },
     "treeDataGroupingCellToggle": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json
@@ -139,8 +139,8 @@
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
     "scrollEndThreshold": "Set the area in <code>px</code> at the bottom of the grid viewport where onRowsScrollEnd is called.",
-    "showCellRightBorder": "If <code>true</code>, the right border of the cells are displayed.",
-    "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
+    "showCellVerticalBorder": "If <code>true</code>, the vertical borders of the cells are displayed.",
+    "showColumnVerticalBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
@@ -622,14 +622,20 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "both the cell and the column header",
-      "conditions": "<code>showColumnRightBorder={true}</code>"
+    "withBorderColor": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.\nSets border color only.",
+      "nodeName": "cells",
+      "conditions": "column header and other elements that have border"
+    },
+    "cell--withRightBorder": {
+      "description": "Styles applied the cell if `showColumnVerticalBorder={true}`."
+    },
+    "columnHeader--withRightBorder": {
+      "description": "Styles applied the column header if `showColumnVerticalBorder={true}`."
     },
     "treeDataGroupingCell": {
       "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the root of the grouping cell of the tree data"
+      "nodeName": "the root of the grouping column of the tree data"
     },
     "treeDataGroupingCellToggle": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -139,8 +139,8 @@
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
     "scrollEndThreshold": "Set the area in <code>px</code> at the bottom of the grid viewport where onRowsScrollEnd is called.",
-    "showCellRightBorder": "If <code>true</code>, the right border of the cells are displayed.",
-    "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
+    "showCellVerticalBorder": "If <code>true</code>, the vertical borders of the cells are displayed.",
+    "showColumnVerticalBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
@@ -622,14 +622,20 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "both the cell and the column header",
-      "conditions": "<code>showColumnRightBorder={true}</code>"
+    "withBorderColor": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.\nSets border color only.",
+      "nodeName": "cells",
+      "conditions": "column header and other elements that have border"
+    },
+    "cell--withRightBorder": {
+      "description": "Styles applied the cell if `showColumnVerticalBorder={true}`."
+    },
+    "columnHeader--withRightBorder": {
+      "description": "Styles applied the column header if `showColumnVerticalBorder={true}`."
     },
     "treeDataGroupingCell": {
       "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the root of the grouping cell of the tree data"
+      "nodeName": "the root of the grouping column of the tree data"
     },
     "treeDataGroupingCellToggle": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -129,8 +129,8 @@
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
     "scrollEndThreshold": "Set the area in <code>px</code> at the bottom of the grid viewport where onRowsScrollEnd is called.",
-    "showCellRightBorder": "If <code>true</code>, the right border of the cells are displayed.",
-    "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
+    "showCellVerticalBorder": "If <code>true</code>, the vertical borders of the cells are displayed.",
+    "showColumnVerticalBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
@@ -612,14 +612,20 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "both the cell and the column header",
-      "conditions": "<code>showColumnRightBorder={true}</code>"
+    "withBorderColor": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.\nSets border color only.",
+      "nodeName": "cells",
+      "conditions": "column header and other elements that have border"
+    },
+    "cell--withRightBorder": {
+      "description": "Styles applied the cell if `showColumnVerticalBorder={true}`."
+    },
+    "columnHeader--withRightBorder": {
+      "description": "Styles applied the column header if `showColumnVerticalBorder={true}`."
     },
     "treeDataGroupingCell": {
       "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the root of the grouping cell of the tree data"
+      "nodeName": "the root of the grouping column of the tree data"
     },
     "treeDataGroupingCellToggle": {
       "description": "Styles applied to {{nodeName}}.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -129,8 +129,8 @@
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
     "scrollEndThreshold": "Set the area in <code>px</code> at the bottom of the grid viewport where onRowsScrollEnd is called.",
-    "showCellRightBorder": "If <code>true</code>, the right border of the cells are displayed.",
-    "showColumnRightBorder": "If <code>true</code>, the right border of the column headers are displayed.",
+    "showCellVerticalBorder": "If <code>true</code>, the vertical borders of the cells are displayed.",
+    "showColumnVerticalBorder": "If <code>true</code>, the right border of the column headers are displayed.",
     "sortingMode": "Sorting can be processed on the server or client-side. Set it to &#39;client&#39; if you would like to handle sorting on the client-side. Set it to &#39;server&#39; if you would like to handle sorting on the server-side.",
     "sortingOrder": "The order of the sorting sequence.",
     "sortModel": "Set the sort model of the grid.",
@@ -612,14 +612,20 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "both the cell and the column header",
-      "conditions": "<code>showColumnRightBorder={true}</code>"
+    "withBorderColor": {
+      "description": "Styles applied to {{nodeName}}, {{conditions}}.\nSets border color only.",
+      "nodeName": "cells",
+      "conditions": "column header and other elements that have border"
+    },
+    "cell--withRightBorder": {
+      "description": "Styles applied the cell if `showColumnVerticalBorder={true}`."
+    },
+    "columnHeader--withRightBorder": {
+      "description": "Styles applied the column header if `showColumnVerticalBorder={true}`."
     },
     "treeDataGroupingCell": {
       "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the root of the grouping cell of the tree data"
+      "nodeName": "the root of the grouping column of the tree data"
     },
     "treeDataGroupingCellToggle": {
       "description": "Styles applied to {{nodeName}}.",