[DataGrid] Improve column header separators

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

@@ -445,7 +445,6 @@
       "columnHeaders",
       "columnHeadersInner",
       "columnHeadersInner--scrollable",
-      "columnSeparator--resizable",
       "columnSeparator--resizing",
       "columnSeparator--sideLeft",
       "columnSeparator--sideRight",

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

@@ -409,7 +409,6 @@
       "columnHeaders",
       "columnHeadersInner",
       "columnHeadersInner--scrollable",
-      "columnSeparator--resizable",
       "columnSeparator--resizing",
       "columnSeparator--sideLeft",
       "columnSeparator--sideRight",

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

@@ -336,7 +336,6 @@
       "columnHeaders",
       "columnHeadersInner",
       "columnHeadersInner--scrollable",
-      "columnSeparator--resizable",
       "columnSeparator--resizing",
       "columnSeparator--sideLeft",
       "columnSeparator--sideRight",

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

@@ -365,11 +365,6 @@
       "nodeName": "the column headers's inner element",
       "conditions": "there is a horizontal scrollbar"
     },
-    "columnSeparator--resizable": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the column header separator",
-      "conditions": "the column is resizable"
-    },
     "columnSeparator--resizing": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header separator",

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

@@ -347,11 +347,6 @@
       "nodeName": "the column headers's inner element",
       "conditions": "there is a horizontal scrollbar"
     },
-    "columnSeparator--resizable": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the column header separator",
-      "conditions": "the column is resizable"
-    },
     "columnSeparator--resizing": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header separator",

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

@@ -314,11 +314,6 @@
       "nodeName": "the column headers's inner element",
       "conditions": "there is a horizontal scrollbar"
     },
-    "columnSeparator--resizable": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the column header separator",
-      "conditions": "the column is resizable"
-    },
     "columnSeparator--resizing": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header separator",

packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx

@@ -250,7 +250,7 @@ export const useGridColumnResize = (
       }
 
       // Skip if the column isn't resizable
-      if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) {
+      if (!event.currentTarget.classList.contains(gridClasses.columnSeparator)) {
         return;
       }
 
@@ -363,10 +363,7 @@ export const useGridColumnResize = (
   });
 
   const handleTouchStart = useEventCallback((event: any) => {
-    const cellSeparator = findParentElementFromClassName(
-      event.target,
-      gridClasses['columnSeparator--resizable'],
-    );
+    const cellSeparator = findParentElementFromClassName(event.target, gridClasses.columnSeparator);
     // Let the event bubble if the target is not a col separator
     if (!cellSeparator) {
       return;

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

@@ -170,9 +170,7 @@ describe('<DataGridPro /> - Column Headers', () => {
       clock.runToLast();
       expect(screen.queryByRole('menu')).not.to.equal(null);
 
-      const separator = columnToResizeCell.querySelector(
-        `.${gridClasses['columnSeparator--resizable']}`,
-      )!;
+      const separator = columnToResizeCell.querySelector(`.${gridClasses.columnSeparator}`)!;
       fireEvent.mouseDown(separator);
       clock.runToLast();
       expect(screen.queryByRole('menu')).to.equal(null);

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

@@ -153,7 +153,7 @@ describe('<DataGridPro /> - Column pinning', () => {
     )!;
     expect(renderZone).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' });
     const columnHeader = getColumnHeaderCell(0);
-    const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+    const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!;
     fireEvent.mouseDown(separator, { clientX: 100 });
     fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
     fireEvent.mouseUp(separator);
@@ -172,7 +172,7 @@ describe('<DataGridPro /> - Column pinning', () => {
     )!;
     expect(columnHeadersInner).toHaveInlineStyle({ transform: 'translate3d(100px, 0px, 0px)' });
     const columnHeader = getColumnHeaderCell(0);
-    const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+    const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!;
     fireEvent.mouseDown(separator, { clientX: 100 });
     fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
     fireEvent.mouseUp(separator);
@@ -203,7 +203,7 @@ describe('<DataGridPro /> - Column pinning', () => {
     const columnHeader = getColumnHeaderCell(2);
     expect(columnHeader).toHaveInlineStyle({ width: '100px' });
 
-    const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+    const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!;
     fireEvent.mouseDown(separator, { clientX: 200 });
     fireEvent.mouseMove(separator, { clientX: 190, buttons: 1 });
     fireEvent.mouseUp(separator);
@@ -221,7 +221,7 @@ describe('<DataGridPro /> - Column pinning', () => {
     const columnHeader = getColumnHeaderCell(2);
     expect(columnHeader).toHaveInlineStyle({ width: '100px' });
 
-    const separator = columnHeader.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+    const separator = columnHeader.querySelector(`.${gridClasses.columnSeparator}`)!;
     fireEvent.mouseDown(separator, { clientX: 200 });
     fireEvent.mouseMove(separator, { clientX: 210, buttons: 1 });
     fireEvent.mouseUp(separator);

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

@@ -172,7 +172,7 @@ describe('<DataGridPro /> - Column Spanning', () => {
     expect(getColumnHeaderCell(1).offsetWidth).to.equal(100);
     expect(getCell(0, 0).offsetWidth).to.equal(200);
 
-    const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+    const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!;
     fireEvent.mouseDown(separator, { clientX: 100 });
     fireEvent.mouseMove(separator, { clientX: 200, buttons: 1 });
     fireEvent.mouseUp(separator);

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

@@ -93,7 +93,7 @@ describe('<DataGridPro /> - Columns', () => {
 
     it('should allow to resize columns with the mouse', () => {
       render(<Test columns={columns} />);
-      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+      const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!;
       fireEvent.mouseDown(separator, { clientX: 100 });
       fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
       fireEvent.mouseUp(separator);
@@ -107,7 +107,7 @@ describe('<DataGridPro /> - Columns', () => {
         this.skip();
       }
       render(<Test columns={columns} />);
-      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+      const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!;
       const now = Date.now();
       fireEvent.touchStart(separator, {
         changedTouches: [new Touch({ identifier: now, target: separator, clientX: 100 })],
@@ -125,7 +125,7 @@ describe('<DataGridPro /> - Columns', () => {
     it('should call onColumnResize during resizing', () => {
       const onColumnResize = spy();
       render(<Test onColumnResize={onColumnResize} columns={columns} />);
-      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+      const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!;
       fireEvent.mouseDown(separator, { clientX: 100 });
       fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
       fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 });
@@ -138,7 +138,7 @@ describe('<DataGridPro /> - Columns', () => {
     it('should call onColumnWidthChange after resizing', () => {
       const onColumnWidthChange = spy();
       render(<Test onColumnWidthChange={onColumnWidthChange} columns={columns} />);
-      const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+      const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!;
       fireEvent.mouseDown(separator, { clientX: 100 });
       fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
       fireEvent.mouseMove(separator, { clientX: 120, buttons: 1 });
@@ -185,9 +185,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
         expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
 
-        const separator = getColumnHeaderCell(1).querySelector(
-          `.${gridClasses['columnSeparator--resizable']}`,
-        )!;
+        const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!;
 
         fireEvent.mouseDown(separator, { clientX: 100 });
         fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 });
@@ -242,9 +240,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
         expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
 
-        const separator = getColumnHeaderCell(1).querySelector(
-          `.${gridClasses['columnSeparator--resizable']}`,
-        )!;
+        const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!;
 
         fireEvent.mouseDown(separator, { clientX: 100 });
         fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 });
@@ -265,9 +261,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '98px' });
         expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '200px' });
 
-        const separator = getColumnHeaderCell(1).querySelector(
-          `.${gridClasses['columnSeparator--resizable']}`,
-        )!;
+        const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!;
 
         fireEvent.mouseDown(separator, { clientX: 100 });
         fireEvent.mouseMove(separator, { clientX: 50, buttons: 1 });
@@ -305,9 +299,7 @@ describe('<DataGridPro /> - Columns', () => {
         expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
         expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' });
 
-        const separator = getColumnHeaderCell(1).querySelector(
-          `.${gridClasses['columnSeparator--resizable']}`,
-        )!;
+        const separator = getColumnHeaderCell(1).querySelector(`.${gridClasses.columnSeparator}`)!;
 
         fireEvent.mouseDown(separator, { clientX: 100 });
         fireEvent.mouseMove(separator, { clientX: 150, buttons: 1 });
@@ -327,9 +319,7 @@ describe('<DataGridPro /> - Columns', () => {
 
         expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' });
 
-        const separator = getColumnHeaderCell(0).querySelector(
-          `.${gridClasses['columnSeparator--resizable']}`,
-        )!;
+        const separator = getColumnHeaderCell(0).querySelector(`.${gridClasses.columnSeparator}`)!;
 
         fireEvent.mouseDown(separator, { clientX: 200 });
         fireEvent.mouseMove(separator, { clientX: 100, buttons: 1 });

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

@@ -135,7 +135,7 @@ describe('<DataGridPro /> - Columns Visibility', () => {
     fireEvent.click(document.querySelector('[role="tooltip"] [name="id"]')!);
     expect(getColumnHeadersTextContent()).to.deep.equal(['id']);
 
-    const separator = document.querySelector(`.${gridClasses['columnSeparator--resizable']}`)!;
+    const separator = document.querySelector(`.${gridClasses.columnSeparator}`)!;
     fireEvent.mouseDown(separator, { clientX: 100 });
     fireEvent.mouseMove(separator, { clientX: 110, buttons: 1 });
     fireEvent.mouseUp(separator);

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

@@ -14,7 +14,6 @@ enum GridColumnHeaderSeparatorSides {
 }
 
 export interface GridColumnHeaderSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
-  resizable: boolean;
   resizing: boolean;
   height: number;
   side?: GridColumnHeaderSeparatorSides;
@@ -25,12 +24,11 @@ type OwnerState = GridColumnHeaderSeparatorProps & {
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { resizable, resizing, classes, side } = ownerState;
+  const { resizing, classes, side } = ownerState;
 
   const slots = {
     root: [
       'columnSeparator',
-      resizable && 'columnSeparator--resizable',
       resizing && 'columnSeparator--resizing',
       side && `columnSeparator--side${capitalize(side)}`,
     ],
@@ -41,13 +39,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
 };
 
 function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps) {
-  const {
-    resizable,
-    resizing,
-    height,
-    side = GridColumnHeaderSeparatorSides.Right,
-    ...other
-  } = props;
+  const { resizing, height, side = GridColumnHeaderSeparatorSides.Right, ...other } = props;
   const rootProps = useGridRootProps();
   const ownerState = { ...props, side, classes: rootProps.classes };
   const classes = useUtilityClasses(ownerState);
@@ -78,7 +70,6 @@ GridColumnHeaderSeparatorRaw.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   height: PropTypes.number.isRequired,
-  resizable: PropTypes.bool.isRequired,
   resizing: PropTypes.bool.isRequired,
   side: PropTypes.oneOf(['left', 'right']),
 } as any;

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

@@ -99,6 +99,7 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH
     }
   }, [apiRef, hasFocus]);
 
+  const showColumnHeaderSeparator = !rootProps.disableColumnResize && !!resizable;
   return (
     <div
       ref={handleRef}
@@ -133,13 +134,14 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH
         </div>
         {columnMenuIconButton}
       </div>
-      <GridColumnHeaderSeparator
-        resizable={!rootProps.disableColumnResize && !!resizable}
-        resizing={isResizing}
-        height={height}
-        side={separatorSide}
-        {...columnHeaderSeparatorProps}
-      />
+      {showColumnHeaderSeparator ? (
+        <GridColumnHeaderSeparator
+          resizing={isResizing}
+          height={height}
+          side={separatorSide}
+          {...columnHeaderSeparatorProps}
+        />
+      ) : null}
       {columnMenu}
     </div>
   );

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

@@ -66,7 +66,6 @@ export const GridRootStyles = styled('div', {
     { [`& .${gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox },
     { [`& .${gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer },
     { [`& .${gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer },
-    { [`& .${gridClasses['columnSeparator--resizable']}`]: styles['columnSeparator--resizable'] },
     { [`& .${gridClasses['columnSeparator--resizing']}`]: styles['columnSeparator--resizing'] },
     { [`& .${gridClasses.columnSeparator}`]: styles.columnSeparator },
     { [`& .${gridClasses.filterIcon}`]: styles.filterIcon },
@@ -155,6 +154,7 @@ export const GridRootStyles = styled('div', {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
+      borderRight: '1px solid transparent',
     },
     [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}, & .${gridClasses['columnHeader--filtered']} .${gridClasses.iconButtonContainer}`]:
       {
@@ -236,19 +236,6 @@ export const GridRootStyles = styled('div', {
       flexDirection: 'column',
       justifyContent: 'center',
       color: borderColor,
-    },
-    [`& .${gridClasses.columnHeaders}:hover .${gridClasses.columnSeparator}, .${gridClasses['columnSeparator--resizing']}`]:
-      {
-        visibility: 'visible',
-        width: 'auto',
-      },
-    [`& .${gridClasses['columnSeparator--sideLeft']}`]: {
-      left: -12,
-    },
-    [`& .${gridClasses['columnSeparator--sideRight']}`]: {
-      right: -12,
-    },
-    [`& .${gridClasses['columnSeparator--resizable']}`]: {
       cursor: 'col-resize',
       touchAction: 'none',
       '&:hover': {
@@ -265,6 +252,21 @@ export const GridRootStyles = styled('div', {
         pointerEvents: 'none',
       },
     },
+    [`& .${gridClasses.columnHeaders}:hover`]: {
+      [`&  .${gridClasses.columnSeparator}, .${gridClasses['columnSeparator--resizing']}`]: {
+        visibility: 'visible',
+        width: 'auto',
+      },
+      [`& .${gridClasses.columnHeader}`]: {
+        borderRightColor: `${borderColor}`,
+      },
+    },
+    [`& .${gridClasses['columnSeparator--sideLeft']}`]: {
+      left: -12,
+    },
+    [`& .${gridClasses['columnSeparator--sideRight']}`]: {
+      right: -12,
+    },
     [`& .${gridClasses.iconSeparator}`]: {
       color: 'inherit',
     },
@@ -412,14 +414,17 @@ export const GridRootStyles = styled('div', {
     },
     [`.${gridClasses.withBorderColor}`]: {
       borderColor,
+      borderRightColor: 'transparent',
     },
     [`& .${gridClasses['cell--withRightBorder']}`]: {
       borderRightWidth: '1px',
       borderRightStyle: 'solid',
+      borderRightColor: borderColor,
     },
     [`& .${gridClasses['columnHeader--withRightBorder']}`]: {
       borderRightWidth: '1px',
       borderRightStyle: 'solid',
+      borderRightColor: borderColor,
     },
     [`& .${gridClasses['cell--textLeft']}`]: {
       justifyContent: 'flex-start',