[material-ui][CardActionArea] Add slots and slotProps (#45866)

Signed-off-by: sai chand <60743144+sai6855@users.noreply.github.com>
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>

Author: sai6855

docs/pages/material-ui/api/card-action-area.json

@@ -2,6 +2,20 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ focusHighlight?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ focusHighlight?: elementType, root?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -15,24 +29,26 @@
     "import CardActionArea from '@mui/material/CardActionArea';",
     "import { CardActionArea } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "focusHighlight",
-      "className": "MuiCardActionArea-focusHighlight",
-      "description": "Styles applied to the overlay that covers the action area when it is keyboard focused.",
-      "isGlobal": false
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "ButtonBase",
+      "class": "MuiCardActionArea-root"
     },
+    {
+      "name": "focusHighlight",
+      "description": "The component that renders the focusHighlight.",
+      "default": "span",
+      "class": "MuiCardActionArea-focusHighlight"
+    }
+  ],
+  "classes": [
     {
       "key": "focusVisible",
       "className": "Mui-focusVisible",
       "description": "State class applied to the ButtonBase root element if the action area is keyboard focused.",
       "isGlobal": true
-    },
-    {
-      "key": "root",
-      "className": "MuiCardActionArea-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/card-action-area/card-action-area.json

@@ -3,21 +3,21 @@
   "propDescriptions": {
     "children": { "description": "The content of the component." },
     "classes": { "description": "Override or extend the styles applied to the 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."
     }
   },
   "classDescriptions": {
-    "focusHighlight": {
-      "description": "Styles applied to {{nodeName}} when {{conditions}}.",
-      "nodeName": "the overlay that covers the action area",
-      "conditions": "it is keyboard focused"
-    },
     "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the ButtonBase root element",
       "conditions": "the action area is keyboard focused"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "focusHighlight": "The component that renders the focusHighlight.",
+    "root": "The component that renders the root."
   }
 }

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

@@ -1,10 +1,47 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from '..';
-import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { SlotProps, CreateSlotsAndSlotProps, Theme } from '..';
+import {
+  ButtonBaseProps,
+  ButtonBaseTypeMap,
+  ExtendButtonBase,
+  ExtendButtonBaseTypeMap,
+} from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { CardActionAreaClasses } from './cardActionAreaClasses';
 
+export interface CardActionAreaSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the focusHighlight.
+   * @default span
+   */
+  focusHighlight: React.ElementType;
+}
+
+export type CardActionAreaSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CardActionAreaSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the span element.
+     */
+    root: SlotProps<React.ElementType<ButtonBaseProps>, {}, CardActionAreaOwnerState>;
+    /**
+     * Props forwarded to the focusHighlight slot.
+     * By default, the avaible props are based on the span element.
+     */
+    focusHighlight: SlotProps<'span', {}, CardActionAreaOwnerState>;
+  }
+>;
+
+export interface CardActionAreaOwnerState
+  extends Omit<CardActionAreaProps, 'slots' | 'slotProps'> {}
+
 export interface CardActionAreaOwnProps {
   /**
    * Override or extend the styles applied to the component.
@@ -21,7 +58,7 @@ export type CardActionAreaTypeMap<
   AdditionalProps,
   RootComponent extends React.ElementType,
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & CardActionAreaOwnProps;
+  props: AdditionalProps & CardActionAreaOwnProps & CardActionAreaSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }>;
 

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

@@ -8,6 +8,7 @@ import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from './cardActionAreaClasses';
 import ButtonBase from '../ButtonBase';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
@@ -66,22 +67,51 @@ const CardActionAreaFocusHighlight = styled('span', {
 
 const CardActionArea = React.forwardRef(function CardActionArea(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiCardActionArea' });
-  const { children, className, focusVisibleClassName, ...other } = props;
+  const {
+    children,
+    className,
+    focusVisibleClassName,
+    slots = {},
+    slotProps = {},
+    ...other
+  } = props;
 
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
 
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: CardActionAreaRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
+    className: clsx(classes.root, className),
+    additionalProps: {
+      focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
+    },
+  });
+
+  const [FocusHighlightSlot, focusHighlightProps] = useSlot('focusHighlight', {
+    elementType: CardActionAreaFocusHighlight,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.focusHighlight,
+  });
+
   return (
-    <CardActionAreaRoot
-      className={clsx(classes.root, className)}
-      focusVisibleClassName={clsx(focusVisibleClassName, classes.focusVisible)}
-      ref={ref}
-      ownerState={ownerState}
-      {...other}
-    >
+    <RootSlot {...rootProps}>
       {children}
-      <CardActionAreaFocusHighlight className={classes.focusHighlight} ownerState={ownerState} />
-    </CardActionAreaRoot>
+      <FocusHighlightSlot {...focusHighlightProps} />
+    </RootSlot>
   );
 });
 
@@ -106,6 +136,22 @@ CardActionArea.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    focusHighlight: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    focusHighlight: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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

@@ -4,6 +4,10 @@ import CardActionArea, { cardActionAreaClasses as classes } from '@mui/material/
 import ButtonBase from '@mui/material/ButtonBase';
 import describeConformance from '../../test/describeConformance';
 
+const CustomButtonBase = React.forwardRef(({ focusVisibleClassName, ...props }, ref) => {
+  return <ButtonBase {...props} ref={ref} />;
+});
+
 describe('<CardActionArea />', () => {
   const { render } = createRenderer();
 
@@ -16,5 +20,14 @@ describe('<CardActionArea />', () => {
     testVariantProps: { variant: 'foo' },
     refInstanceof: window.HTMLButtonElement,
     skip: ['componentProp', 'componentsProp'],
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+        testWithElement: CustomButtonBase,
+      },
+      focusHighlight: {
+        expectedClassName: classes.focusHighlight,
+      },
+    },
   }));
 });