add className to allow experiment with styling

mui · Jun 8, 2022 · 51ff034 · 51ff034
1 parent be7b21c
commit 51ff034
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/grid/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -18,7 +18,7 @@ import {
   gridDensityHeaderHeightSelector,
   gridDensityHeaderGroupingMaxDepthSelector,
   gridDensityHeaderGroupingRowHeightSelector,
-  gridDensityTotalHeaderHeightSelector
+  gridDensityTotalHeaderHeightSelector,
 } from '../density/densitySelector';
 import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
 import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
@@ -42,6 +42,16 @@ const GridColumnHeaderRow = styled('div', {
 
 // Dummy component to make experiments
 type HeaderDepthProp = { depthInfo: HeaderInfo[]; headerGroupingRowHeight: number };
+
+const GridColumnHeaderColumnGroup = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderColumnGroup',
+  overridesResolver: (props, styles) => styles.columnHeaderColumnGroup,
+})<{ ownerState: { name: string | null } }>(({ ownerState }) => ({
+  display: 'flex',
+  border: ownerState.name ? 'solid lightgray 1px' : undefined,
+}));
+
 const HeaderDepth = (props: HeaderDepthProp) => {
   const { depthInfo, headerGroupingRowHeight, ...other } = props;
   return (
@@ -50,12 +60,14 @@ const HeaderDepth = (props: HeaderDepthProp) => {
       {...other}
     >
       {depthInfo.map(({ name, width }, index) => (
-        <div
+        <GridColumnHeaderColumnGroup
           key={index}
-          style={{ width: `${width}px`, border: name ? 'solid lightgray 1px' : undefined }}
+          className={`groupingHeader groupingHeader-${name ? 'withName' : 'without name'}`}
+          style={{ width: `${width}px` }}
+          ownerState={{ name }}
         >
           {name}
-        </div>
+        </GridColumnHeaderColumnGroup>
       ))}
     </GridColumnHeaderRow>
   );
@@ -286,7 +298,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       const hasTabbableElement = !(tabIndexState === null && cellTabIndexState === null);
       const tabIndex =
         (tabIndexState !== null && tabIndexState.field === column.field) ||
-          (isFirstColumn && !hasTabbableElement)
+        (isFirstColumn && !hasTabbableElement)
           ? 0
           : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === column.field;

diff --git a/packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts b/packages/grid/x-data-grid/src/hooks/features/density/densitySelector.ts
@@ -35,5 +35,6 @@ export const gridDensityFactorSelector = createSelector(
 
 export const gridDensityTotalHeaderHeightSelector = createSelector(
   gridDensitySelector,
-  (density) => density.headerHeight + density.headerGroupingMaxDepth * density.headerGroupingRowHeight,
+  (density) =>
+    density.headerHeight + density.headerGroupingMaxDepth * density.headerGroupingRowHeight,
 );
diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx
@@ -152,11 +152,12 @@ export const useGridPrintExport = (
       }
 
       // Expand container height to accommodate all rows
-      gridClone.style.height = `${rowsMeta.currentPageTotalHeight +
+      gridClone.style.height = `${
+        rowsMeta.currentPageTotalHeight +
         totalHeaderHeight +
         gridToolbarElementHeight +
         gridFooterElementHeight
-        }px`;
+      }px`;
 
       // Remove all loaded elements from the current host
       printDoc.body.innerHTML = '';

diff --git a/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts b/packages/grid/x-data-grid/src/hooks/features/focus/gridFocusStateSelector.ts
@@ -25,4 +25,3 @@ export const gridTabIndexColumnHeaderSelector = createSelector(
   gridTabIndexStateSelector,
   (state: GridTabIndexState) => state.columnHeader,
 );
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,4 +25,3 @@ export const gridTabIndexColumnHeaderSelector = createSelector(
		gridTabIndexStateSelector,
		(state: GridTabIndexState) => state.columnHeader,
		);