apply border color using withBorderColor class

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

Hide file tree

Showing 12 changed files with 25 additions and 21 deletions.
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
@@ -15,7 +15,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
   const slots = {
-    root: ['columnHeaders'],
+    root: ['columnHeaders', 'withBorderColor'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -36,7 +36,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
@@ -18,7 +18,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const { classes } = ownerState;
 
   const slots = {
-    root: ['footerContainer'],
+    root: ['footerContainer', 'withBorderColor'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -36,7 +36,7 @@ const GridFooterContainerRoot = styled('div', {
     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
@@ -63,7 +63,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 +80,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 +349,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/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');