[BadgeUnstyled] Accept callbacks in componentsProps (#33176)

mui · Jun 16, 2022 · 67186bf · 67186bf
1 parent 20f0069
commit 67186bf
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 72 deletions.
diff --git a/docs/pages/base/api/badge-unstyled.json b/docs/pages/base/api/badge-unstyled.json
@@ -8,7 +8,10 @@
       "default": "{}"
     },
     "componentsProps": {
-      "type": { "name": "shape", "description": "{ badge?: object, root?: object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ badge?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "invisible": { "type": { "name": "bool" } },

diff --git a/docs/pages/material-ui/api/badge.json b/docs/pages/material-ui/api/badge.json
@@ -23,7 +23,10 @@
       "default": "{}"
     },
     "componentsProps": {
-      "type": { "name": "shape", "description": "{ badge?: object, root?: object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ badge?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
       "default": "{}"
     },
     "invisible": { "type": { "name": "bool" } },

diff --git a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.test.tsx b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.test.tsx
@@ -26,7 +26,6 @@ describe('<BadgeUnstyled />', () => {
           expectedClassName: classes.badge,
         },
       },
-      skip: ['componentsPropsCallbacks'], // not implemented yet
     }),
   );
 });
diff --git a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.tsx b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { OverridableComponent } from '@mui/types';
 import composeClasses from '../composeClasses';
-import appendOwnerState from '../utils/appendOwnerState';
 import useBadge from './useBadge';
 import { getBadgeUnstyledUtilityClass } from './badgeUnstyledClasses';
 import {
@@ -13,7 +11,7 @@ import {
   BadgeUnstyledRootSlotProps,
   BadgeUnstyledBadgeSlotProps,
 } from './BadgeUnstyled.types';
-import { WithOptionalOwnerState } from '../utils';
+import { WithOptionalOwnerState, useSlotProps } from '../utils';
 
 const useUtilityClasses = (ownerState: BadgeUnstyledOwnerState) => {
   const { invisible } = ownerState;
@@ -43,7 +41,6 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(
     badgeContent: badgeContentProp,
     component,
     children,
-    className,
     components = {},
     componentsProps = {},
     invisible: invisibleProp,
@@ -68,23 +65,24 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(
   const classes = useUtilityClasses(ownerState);
 
   const Root = component || components.Root || 'span';
-  const rootProps: WithOptionalOwnerState<BadgeUnstyledRootSlotProps> = appendOwnerState(
-    Root,
-    {
-      ...other,
-      ...componentsProps.root,
+  const rootProps: WithOptionalOwnerState<BadgeUnstyledRootSlotProps> = useSlotProps({
+    elementType: Root,
+    externalSlotProps: componentsProps.root,
+    externalForwardedProps: other,
+    additionalProps: {
       ref,
-      className: clsx(classes.root, componentsProps.root?.className, className),
     },
     ownerState,
-  );
+    className: classes.root,
+  });
 
   const Badge = components.Badge || 'span';
-  const badgeProps: WithOptionalOwnerState<BadgeUnstyledBadgeSlotProps> = appendOwnerState(
-    Badge,
-    { ...componentsProps.badge, className: clsx(classes.badge, componentsProps.badge?.className) },
+  const badgeProps: WithOptionalOwnerState<BadgeUnstyledBadgeSlotProps> = useSlotProps({
+    elementType: Badge,
+    externalSlotProps: componentsProps.badge,
     ownerState,
-  );
+    className: classes.badge,
+  });
 
   return (
     <Root {...rootProps}>
@@ -107,10 +105,6 @@ BadgeUnstyled.propTypes /* remove-proptypes */ = {
    * The badge will be added relative to this node.
    */
   children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -130,8 +124,8 @@ BadgeUnstyled.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    badge: PropTypes.object,
-    root: PropTypes.object,
+    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
    * If `true`, the badge is invisible.

diff --git a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.types.ts b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.types.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { OverrideProps, OverridableTypeMap, OverridableComponent } from '@mui/types';
+import { SlotComponentProps } from '../utils';
 
 export interface BadgeUnstyledComponentsPropsOverrides {}
 
@@ -10,49 +11,59 @@ export type BadgeUnstyledOwnerState = BadgeUnstyledProps & {
   showZero: boolean;
 };
 
-export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'span'> {
-  props: P & {
-    /**
-     * The components used for each slot inside the Badge.
-     * Either a string to use a HTML element or a component.
-     * @default {}
-     */
-    components?: {
-      Root?: React.ElementType;
-      Badge?: React.ElementType;
-    };
-    /**
-     * The props used for each slot inside the Badge.
-     * @default {}
-     */
-    componentsProps?: {
-      root?: React.HTMLAttributes<HTMLSpanElement> & BadgeUnstyledComponentsPropsOverrides;
-      badge?: React.HTMLAttributes<HTMLSpanElement> & BadgeUnstyledComponentsPropsOverrides;
-    };
-    /**
-     * The content rendered within the badge.
-     */
-    badgeContent?: React.ReactNode;
-    /**
-     * The badge will be added relative to this node.
-     */
-    children?: React.ReactNode;
-    /**
-     * If `true`, the badge is invisible.
-     * @default false
-     */
-    invisible?: boolean;
-    /**
-     * Max count to show.
-     * @default 99
-     */
-    max?: number;
-    /**
-     * Controls whether the badge is hidden when `badgeContent` is zero.
-     * @default false
-     */
-    showZero?: boolean;
+interface BadgeUnstyledOwnProps {
+  /**
+   * The components used for each slot inside the Badge.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+    Badge?: React.ElementType;
+  };
+  /**
+   * The props used for each slot inside the Badge.
+   * @default {}
+   */
+  componentsProps?: {
+    root?: SlotComponentProps<
+      'span',
+      BadgeUnstyledComponentsPropsOverrides,
+      BadgeUnstyledOwnerState
+    >;
+    badge?: SlotComponentProps<
+      'span',
+      BadgeUnstyledComponentsPropsOverrides,
+      BadgeUnstyledOwnerState
+    >;
   };
+  /**
+   * The content rendered within the badge.
+   */
+  badgeContent?: React.ReactNode;
+  /**
+   * The badge will be added relative to this node.
+   */
+  children?: React.ReactNode;
+  /**
+   * If `true`, the badge is invisible.
+   * @default false
+   */
+  invisible?: boolean;
+  /**
+   * Max count to show.
+   * @default 99
+   */
+  max?: number;
+  /**
+   * Controls whether the badge is hidden when `badgeContent` is zero.
+   * @default false
+   */
+  showZero?: boolean;
+}
+
+export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'span'> {
+  props: P & BadgeUnstyledOwnProps;
   defaultComponent: D;
 }
 

diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
@@ -216,7 +216,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
         Badge: BadgeBadge,
         ...components,
       }}
-      className={clsx(className, classes.root, componentsProps.root?.className)}
+      className={clsx(className, classes.root)}
       componentsProps={{
         root: {
           ...componentsProps.root,
@@ -233,7 +233,7 @@ const Badge = React.forwardRef(function Badge(inProps, ref) {
         },
         badge: {
           ...componentsProps.badge,
-          className: clsx(classes.badge, componentsProps.badge?.className),
+          className: clsx(classes.badge),
           ...(shouldSpreadAdditionalProps(components.Badge) && {
             ownerState: {
               anchorOrigin,
@@ -309,8 +309,8 @@ Badge.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    badge: PropTypes.object,
-    root: PropTypes.object,
+    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
    * If `true`, the badge is invisible.

diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
@@ -353,8 +353,8 @@ Badge.propTypes /* remove-proptypes */ = {
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    badge: PropTypes.object,
-    root: PropTypes.object,
+    badge: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
    * If `true`, the badge is invisible.