[material-ui][BottomNavigationAction] Add slots and slotProps (@sai6855) (#45875)

Co-authored-by: sai chand <[email protected]>

Author: github-actions[bot]

docs/pages/material-ui/api/bottom-navigation-action.json

@@ -5,6 +5,17 @@
     "icon": { "type": { "name": "node" } },
     "label": { "type": { "name": "node" } },
     "showLabel": { "type": { "name": "bool" } },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ label?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ label?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -19,25 +30,27 @@
     "import BottomNavigationAction from '@mui/material/BottomNavigationAction';",
     "import { BottomNavigationAction } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "ButtonBase",
+      "class": "MuiBottomNavigationAction-root"
+    },
+    {
+      "name": "label",
+      "description": "The component that renders the label.",
+      "default": "span",
+      "class": "MuiBottomNavigationAction-label"
+    }
+  ],
   "classes": [
     {
       "key": "iconOnly",
       "className": "MuiBottomNavigationAction-iconOnly",
       "description": "State class applied to the root element if `showLabel={false}` and not selected.",
       "isGlobal": false
     },
-    {
-      "key": "label",
-      "className": "MuiBottomNavigationAction-label",
-      "description": "Styles applied to the label's span element.",
-      "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiBottomNavigationAction-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "selected",
       "className": "Mui-selected",

docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json

@@ -10,6 +10,8 @@
     "showLabel": {
       "description": "If <code>true</code>, the <code>BottomNavigationAction</code> will show its label. By default, only the selected <code>BottomNavigationAction</code> inside <code>BottomNavigation</code> will show its label.<br>The prop defaults to the value (<code>false</code>) inherited from the parent BottomNavigation component."
     },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -23,15 +25,14 @@
       "nodeName": "the root element",
       "conditions": "<code>showLabel={false}</code> and not selected"
     },
-    "label": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the label&#39;s span element"
-    },
-    "root": { "description": "Styles applied to the root element." },
     "selected": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "selected"
     }
+  },
+  "slotDescriptions": {
+    "label": "The component that renders the label.",
+    "root": "The component that renders the root."
   }
 }

packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -1,11 +1,45 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from '..';
-import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { CreateSlotsAndSlotProps, SlotProps, Theme } from '..';
+import {
+  ButtonBaseProps,
+  ButtonBaseTypeMap,
+  ExtendButtonBase,
+  ExtendButtonBaseTypeMap,
+} from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { BottomNavigationActionClasses } from './bottomNavigationActionClasses';
 
-export interface BottomNavigationActionOwnProps {
+export interface BottomNavigationActionSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label: React.ElementType;
+}
+
+export type BottomNavigationActionSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  BottomNavigationActionSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the ButtonBase element.
+     */
+    root: SlotProps<React.ElementType<ButtonBaseProps>, {}, BottomNavigationActionOwnerState>;
+    /**
+     * Props forwarded to the label slot.
+     * By default, the avaible props are based on the span element.
+     */
+    label: SlotProps<'span', {}, BottomNavigationActionOwnerState>;
+  }
+>;
+
+export interface BottomNavigationActionOwnProps extends BottomNavigationActionSlotsAndSlotProps {
   /**
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
@@ -71,4 +105,7 @@ export type BottomNavigationActionProps<
   component?: React.ElementType;
 };
 
+export interface BottomNavigationActionOwnerState
+  extends Omit<BottomNavigationActionProps, 'slots' | 'slotProps'> {}
+
 export default BottomNavigationAction;

packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js

@@ -11,6 +11,7 @@ import unsupportedProp from '../utils/unsupportedProp';
 import bottomNavigationActionClasses, {
   getBottomNavigationActionUtilityClass,
 } from './bottomNavigationActionClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, showLabel, selected } = ownerState;
@@ -100,6 +101,8 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(
     selected,
     showLabel,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -116,20 +119,45 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(
     }
   };
 
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BottomNavigationActionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
+    className: clsx(classes.root, className),
+    additionalProps: {
+      focusRipple: true,
+    },
+    getSlotProps: (handlers) => ({
+      ...handlers,
+      onClick: (event) => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      },
+    }),
+  });
+
+  const [LabelSlot, labelProps] = useSlot('label', {
+    elementType: BottomNavigationActionLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label,
+  });
+
   return (
-    <BottomNavigationActionRoot
-      ref={ref}
-      className={clsx(classes.root, className)}
-      focusRipple
-      onClick={handleChange}
-      ownerState={ownerState}
-      {...other}
-    >
+    <RootSlot {...rootProps}>
       {icon}
-      <BottomNavigationActionLabel className={classes.label} ownerState={ownerState}>
-        {label}
-      </BottomNavigationActionLabel>
-    </BottomNavigationActionRoot>
+      <LabelSlot {...labelProps}>{label}</LabelSlot>
+    </RootSlot>
   );
 });
 
@@ -175,6 +203,22 @@ BottomNavigationAction.propTypes /* remove-proptypes */ = {
    * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
    */
   showLabel: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.test.js

@@ -8,6 +8,10 @@ import BottomNavigationAction, {
 import ButtonBase from '@mui/material/ButtonBase';
 import describeConformance from '../../test/describeConformance';
 
+const CustomButtonBase = React.forwardRef(({ focusRipple, ...props }, ref) => (
+  <ButtonBase ref={ref} {...props} />
+));
+
 describe('<BottomNavigationAction />', () => {
   const { render } = createRenderer();
 
@@ -20,6 +24,15 @@ describe('<BottomNavigationAction />', () => {
     testVariantProps: { showLabel: true },
     testDeepOverrides: { slotName: 'label', slotClassName: classes.label },
     skip: ['componentProp', 'componentsProp'],
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+        testWithElement: CustomButtonBase,
+      },
+      label: {
+        expectedClassName: classes.label,
+      },
+    },
   }));
 
   it('adds a `selected` class when selected', () => {