apply border color using withBorderColor class

mui · Dec 6, 2022 · 96a23a7 · 96a23a7
1 parent ccf5cdb
commit 96a23a7
Show file tree

Hide file tree

Showing 26 changed files with 76 additions and 81 deletions.
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -441,7 +441,7 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder",
+      "withBorderColor",
       "cell--withRightBorder",
       "columnHeader--withRightBorder",
       "treeDataGroupingCell",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -419,7 +419,7 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder",
+      "withBorderColor",
       "cell--withRightBorder",
       "columnHeader--withRightBorder",
       "treeDataGroupingCell",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -363,7 +363,7 @@
       "sortIcon",
       "toolbarContainer",
       "toolbarFilterList",
-      "withBorder",
+      "withBorderColor",
       "cell--withRightBorder",
       "columnHeader--withRightBorder",
       "treeDataGroupingCell",

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
@@ -622,10 +622,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

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
@@ -622,10 +622,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -622,10 +622,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

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
@@ -612,10 +612,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

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
@@ -612,10 +612,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -612,10 +612,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -579,10 +579,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -579,10 +579,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
@@ -579,10 +579,10 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the toolbar filter list element"
     },
-    "withBorder": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.\nSets border color only.",
-      "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 `showColumnRightBorder={true}`."

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx
@@ -44,6 +44,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
     rightPinnedColumns: [
       'pinnedColumnHeaders',
       rightPinnedColumns && rightPinnedColumns.length > 0 && `pinnedColumnHeaders--right`,
+      'withBorderColor',
     ],
   };
 

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
@@ -72,11 +72,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 
   const slots = {
     leftPinnedColumns: ['pinnedColumns', 'pinnedColumns--left'],
-    rightPinnedColumns: [
-      'pinnedColumns',
-      'pinnedColumns--right',
-      showCellRightBorder && 'withBorder',
-    ],
+    rightPinnedColumns: ['pinnedColumns', 'pinnedColumns--right', 'withBorderColor'],
     topPinnedRows: ['pinnedRows', 'pinnedRows--top'],
     bottomPinnedRows: ['pinnedRows', 'pinnedRows--bottom'],
     pinnedRowsRenderZone: ['pinnedRowsRenderZone'],

diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -91,7 +91,7 @@ function EmptyCell({ width }: { width: number }) {
 
   const style = { width };
 
-  return <div className="MuiDataGrid-cell" style={style} />; // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+  return <div className="MuiDataGrid-cell MuiDataGrid-withBorderColor" style={style} />; // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }
 
 const GridRow = React.forwardRef<

diff --git a/packages/grid/x-data-grid/src/components/cell/GridCell.tsx b/packages/grid/x-data-grid/src/components/cell/GridCell.tsx
@@ -78,6 +78,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       isEditable && 'cell--editable',
       showRightBorder && 'withBorder',
       showRightBorder && 'cell--withRightBorder',
+      'withBorderColor',
     ],
     content: ['cellContent'],
   };

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx
@@ -48,6 +48,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       isDragging && 'columnHeader--moving',
       showRightBorder && 'withBorder',
       showColumnBorder && 'columnHeader--showColumnBorder',
+      'withBorderColor',
       groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup',
     ],
     draggableContainer: ['columnHeaderDraggableContainer'],

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -57,7 +57,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       isColumnSorted && 'columnHeader--sorted',
       isColumnFiltered && 'columnHeader--filtered',
       isColumnNumeric && 'columnHeader--numeric',
-      showRightBorder && 'withBorder',
+      'withBorderColor',
       showRightBorder && 'columnHeader--withRightBorder',
     ],
     draggableContainer: ['columnHeaderDraggableContainer'],

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx
@@ -5,7 +5,6 @@ import { styled, SxProps, Theme } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { getBorderColor } from '../../utils/styleUtils';
 
 type OwnerState = {
   classes?: DataGridProcessedProps['classes'];
@@ -15,7 +14,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
   const slots = {
-    root: ['columnHeaders'],
+    root: ['columnHeaders', 'withBorderColor'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -26,8 +25,6 @@ const GridColumnHeadersRoot = styled('div', {
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders,
 })(({ theme }) => {
-  const borderColor = getBorderColor(theme);
-
   return {
     position: 'absolute',
     top: 0,
@@ -36,7 +33,7 @@ const GridColumnHeadersRoot = styled('div', {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center',
-    borderBottom: `1px solid ${borderColor}`,
+    borderBottom: '1px solid',
     borderTopLeftRadius: theme.shape.borderRadius,
     borderTopRightRadius: theme.shape.borderRadius,
   };

diff --git a/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx b/packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx
@@ -6,7 +6,6 @@ import { styled, SxProps, Theme } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import { getBorderColor } from '../../utils/styleUtils';
 
 export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
@@ -18,7 +17,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
   const slots = {
-    root: ['footerContainer'],
+    root: ['footerContainer', 'withBorderColor'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -28,15 +27,13 @@ const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
   slot: 'FooterContainer',
   overridesResolver: (props, styles) => styles.footerContainer,
-})(({ theme }) => {
-  const borderColor = getBorderColor(theme);
-
+})(() => {
   return {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
     minHeight: 52, // Match TablePagination min height
-    borderTop: `1px solid ${borderColor}`,
+    borderTop: '1px solid',
   };
 });
 

diff --git a/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx b/packages/grid/x-data-grid/src/components/containers/GridRoot.tsx
@@ -42,7 +42,12 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { autoHeight, density, classes } = ownerState;
 
   const slots = {
-    root: ['root', autoHeight && 'autoHeight', `root--density${capitalize(density)}`],
+    root: [
+      'root',
+      autoHeight && 'autoHeight',
+      `root--density${capitalize(density)}`,
+      'withBorderColor',
+    ],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);

diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -1,7 +1,16 @@
 import { CSSInterpolation } from '@mui/system';
-import { alpha, styled } from '@mui/material/styles';
+import { alpha, styled, darken, lighten, Theme } from '@mui/material/styles';
 import { gridClasses } from '../../constants/gridClasses';
-import { getBorderColor } from '../../utils/styleUtils';
+
+function getBorderColor(theme: Theme) {
+  if (theme.vars) {
+    return theme.vars.palette.TableCell.border;
+  }
+  if (theme.palette.mode === 'light') {
+    return lighten(alpha(theme.palette.divider, 1), 0.88);
+  }
+  return darken(alpha(theme.palette.divider, 1), 0.68);
+}
 
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
@@ -63,7 +72,7 @@ export const GridRootStyles = styled('div', {
     { [`& .${gridClasses.rowReorderCell}`]: styles.rowReorderCell },
     { [`& .${gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable'] },
     { [`& .${gridClasses.sortIcon}`]: styles.sortIcon },
-    { [`& .${gridClasses.withBorder}`]: styles.withBorder },
+    { [`& .${gridClasses.withBorderColor}`]: styles.withBorderColor },
     { [`& .${gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell },
     { [`& .${gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle },
     { [`& .${gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell },
@@ -80,7 +89,9 @@ export const GridRootStyles = styled('div', {
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
-    border: `1px solid ${borderColor}`,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor,
     borderRadius: theme.shape.borderRadius,
     color: (theme.vars || theme).palette.text.primary,
     ...theme.typography.body2,
@@ -347,7 +358,7 @@ export const GridRootStyles = styled('div', {
       padding: 0,
       alignItems: 'stretch',
     },
-    [`& .${gridClasses.withBorder}`]: {
+    [`.${gridClasses.withBorderColor}`]: {
       borderColor,
     },
     [`& .${gridClasses['cell--withRightBorder']}`]: {

diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/grid/x-data-grid/src/constants/gridClasses.ts
@@ -462,10 +462,10 @@ export interface GridClasses {
    */
   toolbarFilterList: string;
   /**
-   * Styles applied to both the cell and the column header if `showColumnRightBorder={true}`.
+   * Styles applied to cells, column header and other elements that have border.
    * Sets border color only.
    */
-  withBorder: string;
+  withBorderColor: string;
   /**
    * Styles applied the cell if `showColumnRightBorder={true}`.
    */
@@ -626,7 +626,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'pinnedColumnHeaders',
   'pinnedColumnHeaders--left',
   'pinnedColumnHeaders--right',
-  'withBorder',
+  'withBorderColor',
   'cell--withRightBorder',
   'columnHeader--withRightBorder',
   'treeDataGroupingCell',

diff --git a/packages/grid/x-data-grid/src/internals/index.ts b/packages/grid/x-data-grid/src/internals/index.ts
@@ -107,7 +107,6 @@ export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export type { GridPrivateOnlyApiCommon } from '../models/api/gridApiCommon';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
-export { getBorderColor } from '../utils/styleUtils';
 
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';
 export type { GridApiCaches } from '../models/gridApiCaches';
diff --git a/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/cells.DataGrid.test.tsx
@@ -3,7 +3,7 @@ import { spy } from 'sinon';
 // @ts-ignore Remove once the test utils are typed
 import { createRenderer, userEvent } from '@mui/monorepo/test/utils';
 import { expect } from 'chai';
-import { DataGrid, gridClasses } from '@mui/x-data-grid';
+import { DataGrid } from '@mui/x-data-grid';
 import { getCell } from 'test/utils/helperFn';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -54,8 +54,6 @@ describe('<DataGrid /> - Cells', () => {
 
   describe('prop: showCellRightBorder', () => {
     function expectRightBorder(element: HTMLElement) {
-      expect(element).to.have.class(gridClasses.withBorder);
-
       const computedStyle = window.getComputedStyle(element);
       const color = computedStyle.getPropertyValue('border-right-color');
       const width = computedStyle.getPropertyValue('border-right-width');