Skip to content
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

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

Merged
merged 29 commits into from
Dec 13, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
efd8aed
fix showCellRightBorder with columns pinned to the right
cherniavskii Mar 15, 2022
adae7ba
extract getBorderColor to styleUtils
cherniavskii Mar 15, 2022
7d9b595
add global theme control to storybook
cherniavskii Mar 15, 2022
5829054
add story
cherniavskii Mar 15, 2022
b9322f9
add unit test
cherniavskii Mar 15, 2022
744ffe3
empty commit to trigger codesandbox ci
cherniavskii Mar 15, 2022
73c8eaa
Merge branch 'master' into showCellRightBorder-right-pinned-columns
cherniavskii Mar 16, 2022
c5ba561
Merge branch 'master' into showCellRightBorder-right-pinned-columns
cherniavskii Mar 22, 2022
f0c1a47
Merge branch 'master' into showCellRightBorder-right-pinned-columns
cherniavskii Mar 22, 2022
e8d4e08
make `withBorder` only set border color
cherniavskii Mar 22, 2022
4a80b54
update api docs
cherniavskii Mar 22, 2022
ef756e4
Merge branch 'master' into showCellRightBorder-right-pinned-columns
cherniavskii Apr 4, 2022
2794e4f
Merge branch 'master' into showCellRightBorder-right-pinned-columns
cherniavskii Apr 4, 2022
c4aebba
split withRightBorder class into 2 separate classes
cherniavskii Apr 4, 2022
bed8f3b
build api docs
cherniavskii Apr 4, 2022
e3a1f3d
Merge branch 'master' into showCellRightBorder-right-pinned-columns
cherniavskii Apr 7, 2022
65a56cb
Merge branch 'next' into showCellRightBorder-right-pinned-columns
cherniavskii Dec 5, 2022
9677dab
eslint
cherniavskii Dec 5, 2022
ccf5cdb
add border to the right-pinned columns when showCellRightBorder=true
cherniavskii Dec 5, 2022
96a23a7
apply border color using `withBorderColor` class
cherniavskii Dec 6, 2022
2545feb
remove unused ownerState
cherniavskii Dec 6, 2022
9b287b9
rename `showCellRightBorder` prop
cherniavskii Dec 8, 2022
9f0a370
Merge branch 'next' into showCellRightBorder-right-pinned-columns
cherniavskii Dec 8, 2022
d9537fb
rename `showColumnRightBorder` prop
cherniavskii Dec 8, 2022
709a2e9
document renamed CSS class
cherniavskii Dec 8, 2022
8b5131e
remove 'withBorder' class usages
cherniavskii Dec 12, 2022
4f14f00
avoid using borderColor
cherniavskii Dec 12, 2022
938da8e
Merge branch 'next' into showCellRightBorder-right-pinned-columns
cherniavskii Dec 12, 2022
09856d8
fix visual regressions
cherniavskii Dec 12, 2022
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
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningDerived.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,8 @@ export default function ColumnSpanningDerived() {
disableExtendRowFullWidth
disableRowSelectionOnClick
hideFooter
showCellRightBorder
showColumnRightBorder
showCellVerticalBorder
showColumnVerticalBorder
disableColumnReorder
/>
</Box>
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,8 +185,8 @@ export default function ColumnSpanningDerived() {
disableExtendRowFullWidth
disableRowSelectionOnClick
hideFooter
showCellRightBorder
showColumnRightBorder
showCellVerticalBorder
showColumnVerticalBorder
disableColumnReorder
/>
</Box>
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
disableExtendRowFullWidth
disableRowSelectionOnClick
hideFooter
showCellRightBorder
showColumnRightBorder
showCellVerticalBorder
showColumnVerticalBorder
disableColumnReorder
/>
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningFunction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,8 @@ export default function ColumnSpanningFunction() {
disableColumnFilter
disableRowSelectionOnClick
hideFooter
showCellRightBorder
showColumnRightBorder
showCellVerticalBorder
showColumnVerticalBorder
getCellClassName={getCellClassName}
columns={columns}
rows={rows}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@ export default function ColumnSpanningFunction() {
disableColumnFilter
disableRowSelectionOnClick
hideFooter
showCellRightBorder
showColumnRightBorder
showCellVerticalBorder
showColumnVerticalBorder
getCellClassName={getCellClassName}
columns={columns}
rows={rows}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningFunction.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
disableColumnFilter
disableRowSelectionOnClick
hideFooter
showCellRightBorder
showColumnRightBorder
showCellVerticalBorder
showColumnVerticalBorder
getCellClassName={getCellClassName}
columns={columns}
rows={rows}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningNumber.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
4 changes: 2 additions & 2 deletions docs/data/data-grid/column-spanning/ColumnSpanningNumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
10 changes: 8 additions & 2 deletions docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand Down
8 changes: 5 additions & 3 deletions docs/pages/x/api/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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\""
Expand Down Expand Up @@ -441,7 +441,9 @@
"sortIcon",
"toolbarContainer",
"toolbarFilterList",
"withBorder",
"withBorderColor",
"cell--withRightBorder",
"columnHeader--withRightBorder",
"treeDataGroupingCell",
"treeDataGroupingCellToggle",
"groupingCriteriaCell",
Expand Down
8 changes: 5 additions & 3 deletions docs/pages/x/api/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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\""
Expand Down Expand Up @@ -419,7 +419,9 @@
"sortIcon",
"toolbarContainer",
"toolbarFilterList",
"withBorder",
"withBorderColor",
"cell--withRightBorder",
"columnHeader--withRightBorder",
"treeDataGroupingCell",
"treeDataGroupingCellToggle",
"groupingCriteriaCell",
Expand Down
8 changes: 5 additions & 3 deletions docs/pages/x/api/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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\""
Expand Down Expand Up @@ -363,7 +363,9 @@
"sortIcon",
"toolbarContainer",
"toolbarFilterList",
"withBorder",
"withBorderColor",
"cell--withRightBorder",
"columnHeader--withRightBorder",
"treeDataGroupingCell",
"treeDataGroupingCellToggle",
"groupingCriteriaCell",
Expand Down
20 changes: 13 additions & 7 deletions docs/translations/api-docs/data-grid/data-grid-premium-pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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}}.",
Expand Down
20 changes: 13 additions & 7 deletions docs/translations/api-docs/data-grid/data-grid-premium-zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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}}.",
Expand Down
20 changes: 13 additions & 7 deletions docs/translations/api-docs/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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}}.",
Expand Down
20 changes: 13 additions & 7 deletions docs/translations/api-docs/data-grid/data-grid-pro-pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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}}.",
Expand Down
20 changes: 13 additions & 7 deletions docs/translations/api-docs/data-grid/data-grid-pro-zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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}}.",
Expand Down
Loading