[DataGrid] Column header design updates (#14293)

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

@@ -620,10 +620,10 @@
       "description": "Set the area in <code>px</code> at the bottom of the grid viewport where onRowsScrollEnd is called."
     },
     "showCellVerticalBorder": {
-      "description": "If <code>true</code>, the vertical borders of the cells are displayed."
+      "description": "If <code>true</code>, vertical borders will be displayed between cells."
     },
     "showColumnVerticalBorder": {
-      "description": "If <code>true</code>, the right border of the column headers are displayed."
+      "description": "If <code>true</code>, vertical borders will be displayed between column header items."
     },
     "slotProps": {
       "description": "Overridable components props dynamically passed to the component at rendering."

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

@@ -562,10 +562,10 @@
       "description": "Set the area in <code>px</code> at the bottom of the grid viewport where onRowsScrollEnd is called."
     },
     "showCellVerticalBorder": {
-      "description": "If <code>true</code>, the vertical borders of the cells are displayed."
+      "description": "If <code>true</code>, vertical borders will be displayed between cells."
     },
     "showColumnVerticalBorder": {
-      "description": "If <code>true</code>, the right border of the column headers are displayed."
+      "description": "If <code>true</code>, vertical borders will be displayed between column header items."
     },
     "slotProps": {
       "description": "Overridable components props dynamically passed to the component at rendering."

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

@@ -457,10 +457,10 @@
       "description": "Override the height/width of the Data Grid inner scrollbar."
     },
     "showCellVerticalBorder": {
-      "description": "If <code>true</code>, the vertical borders of the cells are displayed."
+      "description": "If <code>true</code>, vertical borders will be displayed between cells."
     },
     "showColumnVerticalBorder": {
-      "description": "If <code>true</code>, the right border of the column headers are displayed."
+      "description": "If <code>true</code>, vertical borders will be displayed between column header items."
     },
     "slotProps": {
       "description": "Overridable components props dynamically passed to the component at rendering."

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -997,12 +997,12 @@ DataGridPremiumRaw.propTypes = {
    */
   scrollEndThreshold: PropTypes.number,
   /**
-   * If `true`, the vertical borders of the cells are displayed.
+   * If `true`, vertical borders will be displayed between cells.
    * @default false
    */
   showCellVerticalBorder: PropTypes.bool,
   /**
-   * If `true`, the right border of the column headers are displayed.
+   * If `true`, vertical borders will be displayed between column header items.
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,

packages/x-data-grid-premium/src/components/GridAggregationHeader.tsx

@@ -41,12 +41,9 @@ const GridAggregationFunctionLabel = styled('div', {
 })<{ ownerState: OwnerState }>(({ theme }) => {
   return {
     fontSize: theme.typography.caption.fontSize,
-    lineHeight: theme.typography.caption.fontSize,
-    position: 'absolute',
-    bottom: 4,
-    fontWeight: theme.typography.fontWeightMedium,
-    color: (theme.vars || theme).palette.primary.dark,
-    textTransform: 'uppercase',
+    lineHeight: 'normal',
+    color: theme.palette.text.secondary,
+    marginTop: -1,
   };
 });
 

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -903,12 +903,12 @@ DataGridProRaw.propTypes = {
    */
   scrollEndThreshold: PropTypes.number,
   /**
-   * If `true`, the vertical borders of the cells are displayed.
+   * If `true`, vertical borders will be displayed between cells.
    * @default false
    */
   showCellVerticalBorder: PropTypes.bool,
   /**
-   * If `true`, the right border of the column headers are displayed.
+   * If `true`, vertical borders will be displayed between column header items.
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,

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

@@ -166,11 +166,11 @@ describe('<DataGridPro /> - Columns', () => {
       await microtasks();
       expect(onColumnWidthChange.callCount).to.be.at.least(2);
       const widthArgs = onColumnWidthChange.args.map((arg) => arg[0].width);
-      const isWidth116Present = widthArgs.some((width) => width === 116);
-      expect(isWidth116Present).to.equal(true);
+      const isWidth114Present = widthArgs.some((width) => width === 114);
+      expect(isWidth114Present).to.equal(true);
       const colDefWidthArgs = onColumnWidthChange.args.map((arg) => arg[0].colDef.width);
-      const isColDefWidth116Present = colDefWidthArgs.some((width) => width === 116);
-      expect(isColDefWidth116Present).to.equal(true);
+      const isColDefWidth114Present = colDefWidthArgs.some((width) => width === 114);
+      expect(isColDefWidth114Present).to.equal(true);
     });
 
     it('should not affect other cell elements that are not part of the main DataGrid instance', () => {
@@ -473,7 +473,7 @@ describe('<DataGridPro /> - Columns', () => {
       render(<Test rows={rows} columns={columns} />);
       await apiRef.current.autosizeColumns();
       await microtasks();
-      expect(getWidths()).to.deep.equal([213, 235]);
+      expect(getWidths()).to.deep.equal([211, 233]);
     });
 
     it('should work through double-clicking the separator', async () => {
@@ -483,14 +483,14 @@ describe('<DataGridPro /> - Columns', () => {
       )[1];
       fireEvent.doubleClick(separator);
       await microtasks();
-      expect(getWidths()).to.deep.equal([100, 235]);
+      expect(getWidths()).to.deep.equal([100, 233]);
     });
 
     it('should work on mount', async () => {
       render(<Test rows={rows} columns={columns} autosizeOnMount />);
       await microtasks(); /* first effect after render */
       await microtasks(); /* async autosize operation */
-      expect(getWidths()).to.deep.equal([213, 235]);
+      expect(getWidths()).to.deep.equal([211, 233]);
     });
 
     describe('options', () => {
@@ -506,7 +506,7 @@ describe('<DataGridPro /> - Columns', () => {
       });
 
       it('.includeHeaders works', async () => {
-        await autosize({ includeHeaders: true }, [213, 235]);
+        await autosize({ includeHeaders: true }, [211, 233]);
       });
 
       it('.includeOutliers works', async () => {

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -752,12 +752,12 @@ DataGridRaw.propTypes = {
    */
   scrollbarSize: PropTypes.number,
   /**
-   * If `true`, the vertical borders of the cells are displayed.
+   * If `true`, vertical borders will be displayed between cells.
    * @default false
    */
   showCellVerticalBorder: PropTypes.bool,
   /**
-   * If `true`, the right border of the column headers are displayed.
+   * If `true`, vertical borders will be displayed between column header items.
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,

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

@@ -65,7 +65,7 @@ export const ColumnHeaderMenuIcon = React.memo((props: ColumnHeaderMenuIconProps
           id={columnMenuButtonId}
           {...rootProps.slotProps?.baseIconButton}
         >
-          <rootProps.slots.columnMenuIcon fontSize="small" />
+          <rootProps.slots.columnMenuIcon fontSize="inherit" />
         </rootProps.slots.baseIconButton>
       </rootProps.slots.baseTooltip>
     </div>

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

@@ -133,7 +133,7 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
     pinnedPosition,
     indexInSection,
     sectionLength,
-    rootProps.showCellVerticalBorder,
+    rootProps.showColumnVerticalBorder,
     gridHasFiller,
   );
 

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

@@ -132,7 +132,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     pinnedPosition,
     indexInSection,
     sectionLength,
-    rootProps.showCellVerticalBorder,
+    rootProps.showColumnVerticalBorder,
     gridHasFiller,
   );
 

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

@@ -59,12 +59,7 @@ function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps) {
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    <div
-      className={classes.root}
-      style={{ minHeight: height, opacity: rootProps.showColumnVerticalBorder ? 0 : 1 }}
-      {...other}
-      onClick={stopClick}
-    >
+    <div className={classes.root} style={{ minHeight: height }} {...other} onClick={stopClick}>
       <rootProps.slots.columnResizeIcon className={classes.icon} />
     </div>
   );

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

@@ -29,6 +29,7 @@ const GridColumnHeaderTitleRoot = styled('div', {
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   fontWeight: 'var(--unstable_DataGrid-headWeight)',
+  lineHeight: 'normal',
 });
 
 const ColumnHeaderInnerTitle = React.forwardRef<