Hide separators and show on columnHeaders' hover

mui · Dec 19, 2022 · ea20b88 · ea20b88
1 parent 3f247e5
commit ea20b88
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx
@@ -191,7 +191,6 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
       aria-colspan={fields.length}
       // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
       data-fields={`|-${fields.join('-|-')}-|`}
-      disableHeaderSeparator
       {...mouseEventsHandlers}
     />
   );

diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridGenericColumnHeaderItem.tsx
@@ -39,7 +39,6 @@ interface GridGenericColumnHeaderItemProps
   label: string;
   draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
   columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;
-  disableHeaderSeparator?: boolean;
 }
 
 const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnHeaderItem(
@@ -69,7 +68,6 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH
     resizable,
     draggableContainerProps,
     columnHeaderSeparatorProps,
-    disableHeaderSeparator,
     ...other
   } = props;
 
@@ -135,15 +133,13 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH
         </div>
         {columnMenuIconButton}
       </div>
-      {!disableHeaderSeparator && (
-        <GridColumnHeaderSeparator
-          resizable={!rootProps.disableColumnResize && !!resizable}
-          resizing={isResizing}
-          height={height}
-          side={separatorSide}
-          {...columnHeaderSeparatorProps}
-        />
-      )}
+      <GridColumnHeaderSeparator
+        resizable={!rootProps.disableColumnResize && !!resizable}
+        resizing={isResizing}
+        height={height}
+        side={separatorSide}
+        {...columnHeaderSeparatorProps}
+      />
       {columnMenu}
     </div>
   );

diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -217,13 +217,19 @@ export const GridRootStyles = styled('div', {
       backgroundColor: (theme.vars || theme).palette.action.hover,
     },
     [`& .${gridClasses.columnSeparator}`]: {
+      visibility: 'hidden',
       position: 'absolute',
       zIndex: 100,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
       color: borderColor,
     },
+    [`& .${gridClasses.columnHeaders}:hover .${gridClasses.columnSeparator}, .${gridClasses['columnSeparator--resizing']}`]:
+      {
+        visibility: 'visible',
+        width: 'auto',
+      },
     [`& .${gridClasses['columnSeparator--sideLeft']}`]: {
       left: -12,
     },