[DataGridPro] Improve compact density UI for header filters

docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js

@@ -89,7 +89,7 @@ function CustomHeaderFilter(props) {
       {...mouseEventsHandlers}
     >
       <Button
-        centerRipple={false}
+        disableRipple
         onClick={() => apiRef.current.showFilterPanel(colDef.field)}
       >
         {activeFiltersCount > 0 ? `${activeFiltersCount} active` : 'Add'} filters

docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx

@@ -96,7 +96,7 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
       {...mouseEventsHandlers}
     >
       <Button
-        centerRipple={false}
+        disableRipple
         onClick={() => apiRef.current.showFilterPanel(colDef.field)}
       >
         {activeFiltersCount > 0 ? `${activeFiltersCount} active` : 'Add'} filters

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

@@ -1538,6 +1538,12 @@
       "description": "Styles applied to the toggle of the grouping criteria cell",
       "isGlobal": false
     },
+    {
+      "key": "headerFilterInput--compact",
+      "className": "MuiDataGridPremium-headerFilterInput--compact",
+      "description": "Styles applied the form control of the header filter cell with density=\"compact\".",
+      "isGlobal": false
+    },
     {
       "key": "headerFilterRow",
       "className": "MuiDataGridPremium-headerFilterRow",

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

@@ -1452,6 +1452,12 @@
       "description": "Styles applied to the toggle of the grouping criteria cell",
       "isGlobal": false
     },
+    {
+      "key": "headerFilterInput--compact",
+      "className": "MuiDataGridPro-headerFilterInput--compact",
+      "description": "Styles applied the form control of the header filter cell with density=\"compact\".",
+      "isGlobal": false
+    },
     {
       "key": "headerFilterRow",
       "className": "MuiDataGridPro-headerFilterRow",

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

@@ -1338,6 +1338,12 @@
       "description": "Styles applied to the toggle of the grouping criteria cell",
       "isGlobal": false
     },
+    {
+      "key": "headerFilterInput--compact",
+      "className": "MuiDataGrid-headerFilterInput--compact",
+      "description": "Styles applied the form control of the header filter cell with density=\"compact\".",
+      "isGlobal": false
+    },
     {
       "key": "headerFilterRow",
       "className": "MuiDataGrid-headerFilterRow",

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

@@ -977,6 +977,9 @@
     "groupingCriteriaCellToggle": {
       "description": "Styles applied to the toggle of the grouping criteria cell"
     },
+    "headerFilterInput--compact": {
+      "description": "Styles applied the form control of the header filter cell with density="compact"."
+    },
     "headerFilterRow": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header filter row"

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

@@ -915,6 +915,9 @@
     "groupingCriteriaCellToggle": {
       "description": "Styles applied to the toggle of the grouping criteria cell"
     },
+    "headerFilterInput--compact": {
+      "description": "Styles applied the form control of the header filter cell with density="compact"."
+    },
     "headerFilterRow": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header filter row"

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

@@ -804,6 +804,9 @@
     "groupingCriteriaCellToggle": {
       "description": "Styles applied to the toggle of the grouping criteria cell"
     },
+    "headerFilterInput--compact": {
+      "description": "Styles applied the form control of the header filter cell with density="compact"."
+    },
     "headerFilterRow": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header filter row"

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

@@ -23,6 +23,8 @@ import {
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
   GridPinnedColumnPosition,
+  gridDensitySelector,
+  GridDensity,
 } from '@mui/x-data-grid';
 import {
   GridStateColDef,
@@ -66,10 +68,11 @@ type OwnerState = DataGridProProcessedProps & {
   pinnedPosition?: GridPinnedColumnPosition;
   showRightBorder: boolean;
   showLeftBorder: boolean;
+  density: GridDensity;
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { colDef, classes, showRightBorder, showLeftBorder, pinnedPosition } = ownerState;
+  const { colDef, classes, showRightBorder, showLeftBorder, pinnedPosition, density } = ownerState;
 
   const slots = {
     root: [
@@ -83,6 +86,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       pinnedPosition === 'left' && 'columnHeader--pinnedLeft',
       pinnedPosition === 'right' && 'columnHeader--pinnedRight',
     ],
+    formControl: [density === 'compact' && 'headerFilterInput--compact'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -136,6 +140,8 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
     const menuOpenField = useGridSelector(apiRef, gridHeaderFilteringMenuSelector);
     const isMenuOpen = menuOpenField === colDef.field;
 
+    const density = useGridSelector(apiRef, gridDensitySelector);
+
     // TODO: Support for `isAnyOf` operator
     const filterOperators = React.useMemo(() => {
       if (!colDef.filterOperators) {
@@ -306,6 +312,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
       colDef,
       showLeftBorder,
       showRightBorder,
+      density,
     };
 
     const classes = useUtilityClasses(ownerState as OwnerState);
@@ -376,6 +383,7 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
               tabIndex={-1}
               InputLabelProps={null}
               sx={colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined}
+              formControlClassName={classes.formControl}
               {...(isNoInputOperator ? { value: '' } : {})}
               {...currentOperator?.InputComponentProps}
               {...InputComponentProps}

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

@@ -406,6 +406,23 @@ export const GridRootStyles = styled('div', {
       zIndex: 4, // Should be above the column separator
       background: 'var(--DataGrid-pinnedBackground)',
     },
+    [`& .${c['headerFilterInput--compact']}`]: {
+      [`& input`]: {
+        fontSize: 14,
+        marginTop: '-4px',
+        paddingTop: 3,
+        paddingBottom: 3,
+        height: 20,
+      },
+      [`& label[data-shrink="false"]`]: {
+        fontSize: 14,
+        marginTop: '-8px',
+      },
+      [`& div[role="combobox"]`]: {
+        fontSize: 14,
+        padding: 0,
+      },
+    },
     [`& .${c.columnSeparator}`]: {
       position: 'absolute',
       overflow: 'hidden',

packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx

@@ -14,6 +14,7 @@ export type GridFilterInputBooleanProps = GridFilterInputValueProps &
      * required is selected (for example `isEmpty`)
      */
     isFilterActive?: boolean;
+    formControlClassName?: string;
   };
 
 const BooleanOperatorContainer = styled('div')({
@@ -37,6 +38,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     label: labelProp,
     variant = 'standard',
     InputLabelProps,
+    formControlClassName,
     ...others
   } = props;
   const [filterValueState, setFilterValueState] = React.useState(item.value || '');
@@ -67,7 +69,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
 
   return (
     <BooleanOperatorContainer>
-      <rootProps.slots.baseFormControl fullWidth>
+      <rootProps.slots.baseFormControl fullWidth className={formControlClassName}>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
@@ -131,6 +133,7 @@ GridFilterInputBoolean.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: refType,
+  formControlClassName: PropTypes.string,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx

@@ -16,6 +16,7 @@ export type GridFilterInputDateProps = GridFilterInputValueProps &
      * required is selected (for example `isEmpty`)
      */
     isFilterActive?: boolean;
+    formControlClassName?: string;
   };
 
 function convertFilterItemValueToInputValue(
@@ -54,6 +55,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
     clearButton,
     tabIndex,
     disabled,
+    formControlClassName,
     ...other
   } = props;
   const filterTimeout = useTimeout();
@@ -98,6 +100,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
       InputLabelProps={{
         shrink: true,
       }}
+      className={formControlClassName}
       inputRef={focusElementRef}
       InputProps={{
         ...(applying || clearButton
@@ -137,6 +140,7 @@ GridFilterInputDate.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  formControlClassName: PropTypes.string,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx

@@ -64,6 +64,7 @@ export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
      */
     isFilterActive?: boolean;
     type?: 'singleSelect';
+    formControlClassName?: string;
   };
 
 function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
@@ -80,6 +81,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     isFilterActive,
     clearButton,
     InputLabelProps,
+    formControlClassName,
     ...others
   } = props;
   const filterValue = item.value ?? '';
@@ -123,7 +125,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
 
   return (
     <SingleSelectOperatorContainer>
-      <rootProps.slots.baseFormControl fullWidth>
+      <rootProps.slots.baseFormControl fullWidth className={formControlClassName}>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
@@ -182,6 +184,7 @@ GridFilterInputSingleSelect.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  formControlClassName: PropTypes.string,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx

@@ -16,6 +16,7 @@ export type GridTypeFilterInputValueProps = GridFilterInputValueProps &
      * required is selected (for example `isEmpty`)
      */
     isFilterActive?: boolean;
+    formControlClassName?: string;
   };
 
 type ItemPlusTag = GridFilterItem & { fromInput?: string };
@@ -32,6 +33,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
     isFilterActive,
     clearButton,
     InputProps,
+    formControlClassName,
     variant = 'standard',
     ...others
   } = props;
@@ -72,6 +74,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
       onChange={onFilterChange}
       variant={variant}
       type={type || 'text'}
+      className={formControlClassName}
       InputProps={{
         ...(applying || clearButton
           ? {
@@ -113,6 +116,7 @@ GridFilterInputValue.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  formControlClassName: PropTypes.string,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)

packages/x-data-grid/src/constants/gridClasses.ts

@@ -610,6 +610,10 @@ export interface GridClasses {
    */
   'columnHeader--withRightBorder': string;
   'columnHeader--withLeftBorder': string;
+  /**
+   * Styles applied the form control of the header filter cell with density="compact".
+   */
+  'headerFilterInput--compact': string;
   /**
    * Styles applied to the root of the grouping column of the tree data.
    */
@@ -696,6 +700,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'columnHeader--filtered',
   'columnHeader--pinnedLeft',
   'columnHeader--pinnedRight',
+  'headerFilterInput--compact',
   'columnHeader--last',
   'columnHeader--lastUnpinned',
   'columnHeader--siblingFocused',