[DataGridPro] Fix missing border in right-pinned columns

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -383,6 +383,7 @@
       "toolbarContainer",
       "toolbarFilterList",
       "withBorder",
+      "withRightBorder",
       "treeDataGroupingCell",
       "treeDataGroupingCellToggle"
     ],

docs/pages/api-docs/data-grid/data-grid.json

@@ -333,6 +333,7 @@
       "toolbarContainer",
       "toolbarFilterList",
       "withBorder",
+      "withRightBorder",
       "treeDataGroupingCell",
       "treeDataGroupingCellToggle"
     ],

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -383,6 +383,7 @@
       "toolbarContainer",
       "toolbarFilterList",
       "withBorder",
+      "withRightBorder",
       "treeDataGroupingCell",
       "treeDataGroupingCellToggle"
     ],

docs/pages/x/api/data-grid/data-grid.json

@@ -333,6 +333,7 @@
       "toolbarContainer",
       "toolbarFilterList",
       "withBorder",
+      "withRightBorder",
       "treeDataGroupingCell",
       "treeDataGroupingCellToggle"
     ],

docs/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -496,6 +496,11 @@
       "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>"
+    },
+    "withRightBorder": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "both the cell and the column header",
       "conditions": "<code>showColumnRightBorder={true}</code>"

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -496,6 +496,11 @@
       "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>"
+    },
+    "withRightBorder": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "both the cell and the column header",
       "conditions": "<code>showColumnRightBorder={true}</code>"

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -496,6 +496,11 @@
       "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>"
+    },
+    "withRightBorder": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "both the cell and the column header",
       "conditions": "<code>showColumnRightBorder={true}</code>"

docs/translations/api-docs/data-grid/data-grid-pt.json

@@ -465,6 +465,11 @@
       "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>"
+    },
+    "withRightBorder": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "both the cell and the column header",
       "conditions": "<code>showColumnRightBorder={true}</code>"

docs/translations/api-docs/data-grid/data-grid-zh.json

@@ -465,6 +465,11 @@
       "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>"
+    },
+    "withRightBorder": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "both the cell and the column header",
       "conditions": "<code>showColumnRightBorder={true}</code>"

docs/translations/api-docs/data-grid/data-grid.json

@@ -465,6 +465,11 @@
       "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>"
+    },
+    "withRightBorder": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "both the cell and the column header",
       "conditions": "<code>showColumnRightBorder={true}</code>"

packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx

@@ -61,10 +61,11 @@ type OwnerState = {
   classes: DataGridProProcessedProps['classes'];
   leftPinnedColumns: GridPinnedColumns['left'];
   rightPinnedColumns: GridPinnedColumns['right'];
+  showCellRightBorder: boolean;
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { classes, leftPinnedColumns, rightPinnedColumns } = ownerState;
+  const { classes, leftPinnedColumns, rightPinnedColumns, showCellRightBorder } = ownerState;
 
   const slots = {
     leftPinnedColumns: [
@@ -74,6 +75,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
     rightPinnedColumns: [
       'pinnedColumns',
       rightPinnedColumns && rightPinnedColumns.length > 0 && 'pinnedColumns--right',
+      showCellRightBorder && 'withBorder',
     ],
     detailPanels: ['detailPanels'],
     detailPanel: ['detailPanel'],
@@ -84,6 +86,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 
 interface VirtualScrollerPinnedColumnsProps {
   side: GridPinnedPosition;
+  showCellRightBorder: boolean;
 }
 
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
@@ -136,6 +139,11 @@ const VirtualScrollerPinnedColumns = styled('div', {
   }),
   ...(ownerState.side === GridPinnedPosition.left && { left: 0, float: 'left' }),
   ...(ownerState.side === GridPinnedPosition.right && { right: 0, float: 'right' }),
+  ...(ownerState.side === GridPinnedPosition.right &&
+    ownerState.showCellRightBorder && {
+      borderLeftWidth: '1px',
+      borderLeftStyle: 'solid',
+    }),
 }));
 
 interface DataGridProVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -182,7 +190,12 @@ const DataGridProVirtualScroller = React.forwardRef<
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
 
-  const ownerState = { classes: rootProps.classes, leftPinnedColumns, rightPinnedColumns };
+  const ownerState = {
+    classes: rootProps.classes,
+    leftPinnedColumns,
+    rightPinnedColumns,
+    showCellRightBorder: rootProps.showCellRightBorder,
+  };
   const classes = useUtilityClasses(ownerState);
 
   const {
@@ -287,7 +300,10 @@ const DataGridProVirtualScroller = React.forwardRef<
           <VirtualScrollerPinnedColumns
             ref={leftColumns}
             className={classes.leftPinnedColumns}
-            ownerState={{ side: GridPinnedPosition.left }}
+            ownerState={{
+              side: GridPinnedPosition.left,
+              showCellRightBorder: rootProps.showCellRightBorder,
+            }}
             style={pinnedColumnsStyle}
           >
             {getRows({
@@ -304,7 +320,10 @@ const DataGridProVirtualScroller = React.forwardRef<
         {rightRenderContext && (
           <VirtualScrollerPinnedColumns
             ref={rightColumns}
-            ownerState={{ side: GridPinnedPosition.right }}
+            ownerState={{
+              side: GridPinnedPosition.right,
+              showCellRightBorder: rootProps.showCellRightBorder,
+            }}
             className={classes.rightPinnedColumns}
             style={pinnedColumnsStyle}
           >

packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx

@@ -220,6 +220,28 @@ describe('<DataGridPro /> - Column pinning', () => {
     expect(getColumnHeadersTextContent()).to.deep.equal(['id', '', 'Currency Pair']);
   });
 
+  it('should add border to right pinned columns section when `showCellRightBorder={true}`', function test() {
+    if (isJSDOM) {
+      // Doesn't work with mocked window.getComputedStyle
+      this.skip();
+    }
+
+    render(
+      <div style={{ width: 300, height: 500 }}>
+        <TestCase showCellRightBorder initialState={{ pinnedColumns: { right: ['id'] } }} />
+      </div>,
+    );
+
+    const computedStyle = window.getComputedStyle(
+      document.querySelector('.MuiDataGrid-pinnedColumns--right') as HTMLElement,
+    );
+    const borderLeftColor = computedStyle.getPropertyValue('border-left-color');
+    const borderLeftWidth = computedStyle.getPropertyValue('border-left-width');
+    expect(borderLeftWidth).to.equal('1px');
+    // should not be transparent
+    expect(borderLeftColor).to.not.equal('rgba(0, 0, 0, 0)');
+  });
+
   describe('props: onPinnedColumnsChange', () => {
     it('should call when a column is pinned', () => {
       const handlePinnedColumnsChange = spy();

packages/grid/x-data-grid/src/components/cell/GridCell.tsx

@@ -72,6 +72,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       `cell--text${capitalize(align)}`,
       isEditable && 'cell--editable',
       showRightBorder && 'withBorder',
+      showRightBorder && 'withRightBorder',
     ],
     content: ['cellContent'],
   };

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -64,6 +64,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       isColumnFiltered && 'columnHeader--filtered',
       isColumnNumeric && 'columnHeader--numeric',
       showRightBorder && 'withBorder',
+      showRightBorder && 'withRightBorder',
     ],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer'],

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaders.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { styled, alpha, lighten, darken } from '@mui/material/styles';
+import { styled } 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'];
@@ -25,10 +26,7 @@ const GridColumnHeadersRoot = styled('div', {
   slot: 'ColumnHeaders',
   overridesResolver: (props, styles) => styles.columnHeaders,
 })(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  const borderColor = getBorderColor(theme);
 
   return {
     position: 'absolute',

packages/grid/x-data-grid/src/components/containers/GridFooterContainer.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { styled, alpha, lighten, darken } from '@mui/material/styles';
+import { styled } 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>;
 
@@ -25,10 +26,7 @@ const GridFooterContainerRoot = styled('div', {
   slot: 'FooterContainer',
   overridesResolver: (props, styles) => styles.footerContainer,
 })(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  const borderColor = getBorderColor(theme);
 
   return {
     display: 'flex',

packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -1,6 +1,7 @@
 import { CSSInterpolation } from '@mui/system';
-import { darken, lighten, alpha, styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { gridClasses } from '../../constants/gridClasses';
+import { getBorderColor } from '../../utils/styleUtils';
 
 export const GridRootStyles = styled('div', {
   name: 'MuiDataGrid',
@@ -54,10 +55,7 @@ export const GridRootStyles = styled('div', {
     styles.root,
   ],
 })(({ theme }) => {
-  const borderColor =
-    theme.palette.mode === 'light'
-      ? lighten(alpha(theme.palette.divider, 1), 0.88)
-      : darken(alpha(theme.palette.divider, 1), 0.68);
+  const borderColor = getBorderColor(theme);
 
   const gridStyle: CSSInterpolation = {
     flex: 1,
@@ -288,7 +286,11 @@ export const GridRootStyles = styled('div', {
       gridGap: theme.spacing(1),
     },
     [`& .${gridClasses.withBorder}`]: {
-      borderRight: `1px solid ${borderColor}`,
+      borderColor,
+    },
+    [`& .${gridClasses.withRightBorder}`]: {
+      borderRightWidth: '1px',
+      borderRightStyle: 'solid',
     },
     [`& .${gridClasses['cell--textLeft']}`]: {
       justifyContent: 'flex-start',

packages/grid/x-data-grid/src/constants/gridClasses.ts

@@ -364,8 +364,13 @@ export interface GridClasses {
   toolbarFilterList: string;
   /**
    * Styles applied to both the cell and the column header if `showColumnRightBorder={true}`.
+   * Sets border color only.
    */
   withBorder: string;
+  /**
+   * Styles applied to both the cell and the column header if `showColumnRightBorder={true}`.
+   */
+  withRightBorder: string;
   /**
    * Styles applied to the root of the grouping column of the tree data.
    */
@@ -475,6 +480,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [
   'pinnedColumnHeaders--left',
   'pinnedColumnHeaders--right',
   'withBorder',
+  'withRightBorder',
   'treeDataGroupingCell',
   'treeDataGroupingCellToggle',
   'groupingCriteriaCell',

packages/grid/x-data-grid/src/internals/index.ts

@@ -88,5 +88,6 @@ export { createSelector } from '../utils/createSelector';
 export { findParentElementFromClassName } from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual } from '../utils/utils';
+export { getBorderColor } from '../utils/styleUtils';
 
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';

packages/grid/x-data-grid/src/utils/styleUtils.ts

@@ -0,0 +1,7 @@
+import { darken, lighten, alpha, Theme } from '@mui/material/styles';
+
+export function getBorderColor(theme: Theme) {
+  return theme.palette.mode === 'light'
+    ? lighten(alpha(theme.palette.divider, 1), 0.88)
+    : darken(alpha(theme.palette.divider, 1), 0.68);
+}

packages/storybook/.storybook/preview.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import { createTheme, ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
+import { ThemeProvider } from 'emotion-theming';
 import { LicenseInfo } from '@mui/x-data-grid-pro';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { configureActions } from '@storybook/addon-actions';
@@ -44,9 +47,37 @@ export const parameters = {
 };
 
 export const decorators = [
-  (Story) => (
-    <React.StrictMode>
-      <Story />
-    </React.StrictMode>
-  ),
+  (Story, context) => {
+    const theme = createTheme({
+      palette: {
+        mode: context.globals.theme,
+      },
+    });
+    return (
+      <React.StrictMode>
+        <MUIThemeProvider theme={theme}>
+          {/* See https://github.com/mui/material-ui/issues/24282#issuecomment-952211989 */}
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Story />
+          </ThemeProvider>
+        </MUIThemeProvider>
+      </React.StrictMode>
+    );
+  },
 ];
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'MUI theme',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      // Array of plain string values or MenuItem shape (see below)
+      items: ['light', 'dark'],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+    },
+  },
+};