[DataGrid] Display column's filter icon if a filter is applied (mui#4120)

DanailH · web-flow · commit d7daee6243c3 · 2022-03-09T11:49:38.000+01:00
diff --git a/docs/pages/api-docs/data-grid/data-grid-pro.json b/docs/pages/api-docs/data-grid/data-grid-pro.json
@@ -306,6 +306,7 @@
       "columnHeader--numeric",
       "columnHeader--sortable",
       "columnHeader--sorted",
+      "columnHeader--filtered",
       "columnHeader",
       "columnHeaderCheckbox",
       "columnHeaderDraggableContainer",
diff --git a/docs/pages/api-docs/data-grid/data-grid.json b/docs/pages/api-docs/data-grid/data-grid.json
@@ -253,6 +253,7 @@
       "columnHeader--numeric",
       "columnHeader--sortable",
       "columnHeader--sorted",
+      "columnHeader--filtered",
       "columnHeader",
       "columnHeaderCheckbox",
       "columnHeaderDraggableContainer",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -306,6 +306,7 @@
       "columnHeader--numeric",
       "columnHeader--sortable",
       "columnHeader--sorted",
+      "columnHeader--filtered",
       "columnHeader",
       "columnHeaderCheckbox",
       "columnHeaderDraggableContainer",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -253,6 +253,7 @@
       "columnHeader--numeric",
       "columnHeader--sortable",
       "columnHeader--sorted",
+      "columnHeader--filtered",
       "columnHeader",
       "columnHeaderCheckbox",
       "columnHeaderDraggableContainer",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -218,6 +218,11 @@
       "nodeName": "the column header",
       "conditions": "the column is sorted"
     },
+    "columnHeader--filtered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column header",
+      "conditions": "the column has a filter applied to it"
+    },
     "columnHeader": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header element"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -218,6 +218,11 @@
       "nodeName": "the column header",
       "conditions": "the column is sorted"
     },
+    "columnHeader--filtered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column header",
+      "conditions": "the column has a filter applied to it"
+    },
     "columnHeader": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header element"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -218,6 +218,11 @@
       "nodeName": "the column header",
       "conditions": "the column is sorted"
     },
+    "columnHeader--filtered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column header",
+      "conditions": "the column has a filter applied to it"
+    },
     "columnHeader": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header element"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -187,6 +187,11 @@
       "nodeName": "the column header",
       "conditions": "the column is sorted"
     },
+    "columnHeader--filtered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column header",
+      "conditions": "the column has a filter applied to it"
+    },
     "columnHeader": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header element"
diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -187,6 +187,11 @@
       "nodeName": "the column header",
       "conditions": "the column is sorted"
     },
+    "columnHeader--filtered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column header",
+      "conditions": "the column has a filter applied to it"
+    },
     "columnHeader": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header element"
diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
@@ -187,6 +187,11 @@
       "nodeName": "the column header",
       "conditions": "the column is sorted"
     },
+    "columnHeader--filtered": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column header",
+      "conditions": "the column has a filter applied to it"
+    },
     "columnHeader": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header element"
diff --git a/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx b/packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx
@@ -44,9 +44,11 @@ type OwnerState = GridColumnHeaderItemProps & {
 };
 
 const useUtilityClasses = (ownerState: OwnerState) => {
-  const { column, classes, isDragging, sortDirection, showRightBorder } = ownerState;
+  const { column, classes, isDragging, sortDirection, showRightBorder, filterItemsCounter } =
+    ownerState;
 
   const isColumnSorted = sortDirection != null;
+  const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = column.type === 'number';
 
@@ -59,6 +61,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       column.sortable && 'columnHeader--sortable',
       isDragging && 'columnHeader--moving',
       isColumnSorted && 'columnHeader--sorted',
+      isColumnFiltered && 'columnHeader--filtered',
       isColumnNumeric && 'columnHeader--numeric',
       showRightBorder && 'withBorder',
     ],
diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -105,10 +105,11 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center',
     },
-    [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}`]: {
-      visibility: 'visible',
-      width: 'auto',
-    },
+    [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}, & .${gridClasses['columnHeader--filtered']} .${gridClasses.iconButtonContainer}`]:
+      {
+        visibility: 'visible',
+        width: 'auto',
+      },
     [`& .${gridClasses.columnHeader}:not(.${gridClasses['columnHeader--sorted']}) .${gridClasses.sortIcon}`]:
       {
         opacity: 0,
diff --git a/packages/grid/x-data-grid/src/constants/gridClasses.ts b/packages/grid/x-data-grid/src/constants/gridClasses.ts
@@ -81,6 +81,10 @@ export interface GridClasses {
    * Styles applied to the column header if the column is sorted.
    */
   'columnHeader--sorted': string;
+  /**
+   * Styles applied to the column header if the column has a filter applied to it.
+   */
+  'columnHeader--filtered': string;
   /**
    * Styles applied to the column header element.
    */
@@ -400,6 +404,7 @@ export const gridClasses = generateUtilityClasses('MuiDataGrid', [
   'columnHeader--numeric',
   'columnHeader--sortable',
   'columnHeader--sorted',
+  'columnHeader--filtered',
   'columnHeader',
   'columnHeaderCheckbox',
   'columnHeaderDraggableContainer',
