[DataGridPro] Fix double top border in header filters (#14375)

mui · Aug 29, 2024 · d8f1654 · d8f1654
1 parent 4d28c05
commit d8f1654
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 13 deletions.
diff --git a/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx b/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx
@@ -6,16 +6,19 @@ const classes = {
   root: gridClasses.scrollbarFiller,
   header: gridClasses['scrollbarFiller--header'],
   borderTop: gridClasses['scrollbarFiller--borderTop'],
+  borderBottom: gridClasses['scrollbarFiller--borderBottom'],
   pinnedRight: gridClasses['scrollbarFiller--pinnedRight'],
 };
 
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
+  borderBottom,
   pinnedRight,
 }: {
   header?: boolean;
   borderTop?: boolean;
+  borderBottom?: boolean;
   pinnedRight?: boolean;
 }) {
   return (
@@ -25,6 +28,7 @@ function GridScrollbarFillerCell({
         classes.root,
         header && classes.header,
         borderTop && classes.borderTop,
+        borderBottom && classes.borderBottom,
         pinnedRight && classes.pinnedRight,
       )}
     />

diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -429,7 +429,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.headerFilterRow}`]: {
       [`& .${c.columnHeader}`]: {
         boxSizing: 'border-box',
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+        borderBottom: '1px solid var(--DataGrid-rowBorderColor)',
       },
     },
 
@@ -491,6 +491,11 @@ export const GridRootStyles = styled('div', {
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
       borderTopColor: 'transparent',
     },
+    [`& .${c['pinnedRows--top']} :first-of-type`]: {
+      [`& .${c.cell}, .${c.scrollbarFiller}`]: {
+        borderTop: 'none',
+      },
+    },
     [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
       userSelect: 'none',
     },
@@ -674,7 +679,10 @@ export const GridRootStyles = styled('div', {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
       [`&.${c['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--rowBorderColor)',
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+      },
+      [`&.${c['scrollbarFiller--borderBottom']}`]: {
+        borderBottom: '1px solid var(--DataGrid-rowBorderColor)',
       },
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: 'var(--DataGrid-pinnedBackground)',
@@ -686,8 +694,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c.filler}`]: {
       flex: 1,
     },
-    [`& .${c['filler--borderTop']}`]: {
-      borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+    [`& .${c['filler--borderBottom']}`]: {
+      borderBottom: '1px solid var(--DataGrid-rowBorderColor)',
     },
 
     /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */

diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -297,10 +297,10 @@ export interface GridClasses {
    */
   filler: string;
   /**
-   * Styles applied to the filler row with top border.
+   * Styles applied to the filler row with bottom border.
    * @ignore - do not document.
    */
-  'filler--borderTop': string;
+  'filler--borderBottom': string;
   /**
    * Styles applied to the filler row pinned left section.
    * @ignore - do not document.
@@ -546,6 +546,11 @@ export interface GridClasses {
    * Styles applied to the scrollbar filler cell, with a border top.
    */
   'scrollbarFiller--borderTop': string;
+  /**
+   * @ignore - do not document.
+   * Styles applied to the scrollbar filler cell, with a border bottom.
+   */
+  'scrollbarFiller--borderBottom': string;
   /**
    * @ignore - do not document.
    * Styles applied to the scrollbar filler cell.
@@ -709,7 +714,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'editBooleanCell',
   'editInputCell',
   'filler',
-  'filler--borderTop',
+  'filler--borderBottom',
   'filler--pinnedLeft',
   'filler--pinnedRight',
   'filterForm',
@@ -764,6 +769,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'scrollbarFiller',
   'scrollbarFiller--header',
   'scrollbarFiller--borderTop',
+  'scrollbarFiller--borderBottom',
   'scrollbarFiller--pinnedRight',
   'selectedRowCount',
   'sortIcon',

diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -29,7 +29,6 @@ import {
   gridColumnPositionsSelector,
   gridVisiblePinnedColumnDefinitionsSelector,
 } from '../columns';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
 import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
@@ -107,7 +106,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const offsetLeft = computeOffsetLeft(
     columnPositions,
     renderContext,
@@ -184,7 +182,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
     params: GetHeadersParams | undefined,
     children: React.ReactNode,
     leftOverflow: number,
-    borderTop: boolean = false,
+    borderBottom: boolean = false,
   ) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
@@ -202,11 +200,19 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
         {isNotPinned && (
           <div
             role="presentation"
-            className={clsx(gridClasses.filler, borderTop && gridClasses['filler--borderTop'])}
+            className={clsx(
+              gridClasses.filler,
+              borderBottom && gridClasses['filler--borderBottom'],
+            )}
           />
         )}
         {hasScrollbarFiller && (
-          <ScrollbarFiller header borderTop={borderTop} pinnedRight={isPinnedRight} />
+          <ScrollbarFiller
+            header
+            pinnedRight={isPinnedRight}
+            borderBottom={borderBottom}
+            borderTop={false}
+          />
         )}
       </React.Fragment>
     );
@@ -301,7 +307,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
         role="row"
         aria-rowindex={headerGroupingMaxDepth + 1}
         ownerState={rootProps}
-        className={pinnedRows.top.length === 0 ? gridClasses['row--borderBottom'] : undefined}
+        className={gridClasses['row--borderBottom']}
       >
         {leftRenderContext &&
           getColumnHeaders(