[DataGrid] Fix order of spread props on toolbar items (@KenanYusuf) (#…

…15595) Co-authored-by: Kenan Yusuf <[email protected]>
mui · Nov 28, 2024 · f812e20 · f812e20
1 parent 798336b
commit f812e20
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarColumnsButton.tsx
@@ -57,8 +57,8 @@ const GridToolbarColumnsButton = React.forwardRef<HTMLButtonElement, GridToolbar
       <rootProps.slots.baseTooltip
         title={apiRef.current.getLocaleText('toolbarColumnsLabel')}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={ref}
@@ -69,9 +69,9 @@ const GridToolbarColumnsButton = React.forwardRef<HTMLButtonElement, GridToolbar
           aria-expanded={isOpen}
           aria-controls={isOpen ? columnPanelId : undefined}
           startIcon={<rootProps.slots.columnSelectorIcon />}
-          {...buttonProps}
           onClick={showColumns}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarColumns')}
         </rootProps.slots.baseButton>

diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarDensitySelector.tsx
@@ -112,8 +112,8 @@ const GridToolbarDensitySelector = React.forwardRef<
       <rootProps.slots.baseTooltip
         title={apiRef.current.getLocaleText('toolbarDensityLabel')}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={handleRef}
@@ -124,9 +124,9 @@ const GridToolbarDensitySelector = React.forwardRef<
           aria-expanded={open}
           aria-controls={open ? densityMenuId : undefined}
           id={densityButtonId}
-          {...buttonProps}
           onClick={handleDensitySelectorOpen}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarDensity')}
         </rootProps.slots.baseButton>

diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarExportContainer.tsx
@@ -60,8 +60,8 @@ const GridToolbarExportContainer = React.forwardRef<
       <rootProps.slots.baseTooltip
         title={apiRef.current.getLocaleText('toolbarExportLabel')}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={handleRef}
@@ -72,9 +72,9 @@ const GridToolbarExportContainer = React.forwardRef<
           aria-haspopup="menu"
           aria-controls={open ? exportMenuId : undefined}
           id={exportButtonId}
-          {...buttonProps}
           onClick={handleMenuOpen}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarExport')}
         </rootProps.slots.baseButton>

diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx
@@ -8,6 +8,7 @@ import {
 } from '@mui/utils';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
+import { BadgeProps } from '@mui/material/Badge';
 import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
@@ -46,14 +47,19 @@ export interface GridToolbarFilterButtonProps {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps?: { button?: Partial<ButtonProps>; tooltip?: Partial<TooltipProps> };
+  slotProps?: {
+    button?: Partial<ButtonProps>;
+    tooltip?: Partial<TooltipProps>;
+    badge?: Partial<BadgeProps>;
+  };
 }
 
 const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarFilterButtonProps>(
   function GridToolbarFilterButton(props, ref) {
     const { slotProps = {} } = props;
     const buttonProps = slotProps.button || {};
     const tooltipProps = slotProps.tooltip || {};
+    const badgeProps = slotProps.badge || {};
     const apiRef = useGridApiContext();
     const rootProps = useGridRootProps();
     const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -131,8 +137,8 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
       <rootProps.slots.baseTooltip
         title={tooltipContentNode}
         enterDelay={1000}
-        {...tooltipProps}
         {...rootProps.slotProps?.baseTooltip}
+        {...tooltipProps}
       >
         <rootProps.slots.baseButton
           ref={ref}
@@ -143,13 +149,18 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           aria-expanded={isOpen}
           aria-haspopup
           startIcon={
-            <rootProps.slots.baseBadge badgeContent={activeFilters.length} color="primary">
+            <rootProps.slots.baseBadge
+              badgeContent={activeFilters.length}
+              color="primary"
+              {...rootProps.slotProps?.baseBadge}
+              {...badgeProps}
+            >
               <rootProps.slots.openFilterButtonIcon />
             </rootProps.slots.baseBadge>
           }
-          {...buttonProps}
           onClick={toggleFilter}
           {...rootProps.slotProps?.baseButton}
+          {...buttonProps}
         >
           {apiRef.current.getLocaleText('toolbarFilters')}
         </rootProps.slots.baseButton>