[DataGridPro] Fix missing border in right-pinned columns

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

@@ -17,6 +17,7 @@ import {
   GridVirtualScrollerContent,
   GridVirtualScrollerRenderZone,
   useGridVirtualScroller,
+  getBorderColor,
 } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -84,6 +85,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 +138,10 @@ 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 && {
+      borderLeft: `1px solid ${getBorderColor(theme)}`,
+    }),
 }));
 
 interface DataGridProVirtualScrollerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -287,7 +293,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({
@@ -301,7 +310,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/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,

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

@@ -86,3 +86,4 @@ 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';

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,
+    },
+  },
+};

packages/storybook/src/stories/grid-columns.stories.tsx

@@ -448,3 +448,24 @@ export function PinnedColumnWithCheckboxSelectionSnap() {
     </div>
   );
 }
+
+export function PinnedColumnsWithCellRightBorder() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 15,
+    maxColumns: 6,
+  });
+
+  const columns = data.columns.map((column) => ({ ...column, width: 150 }));
+
+  return (
+    <div style={{ height: 400, width: 600 }}>
+      <DataGridPro
+        {...data}
+        columns={columns}
+        initialState={{ pinnedColumns: { left: ['desk'], right: ['quantity'] } }}
+        showCellRightBorder
+      />
+    </div>
+  );
+}