[material-ui][AccordionSummary] Add slots and slotProps

docs/pages/material-ui/api/accordion-summary.json

@@ -4,6 +4,20 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "expandIcon": { "type": { "name": "node" } },
     "focusVisibleClassName": { "type": { "name": "string" } },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ content?: func<br>&#124;&nbsp;object, expandIconWrapper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ content?: elementType, expandIconWrapper?: elementType, root?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -17,13 +31,27 @@
     "import AccordionSummary from '@mui/material/AccordionSummary';",
     "import { AccordionSummary } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "content",
-      "className": "MuiAccordionSummary-content",
-      "description": "Styles applied to the children wrapper element.",
-      "isGlobal": false
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "ButtonBase",
+      "class": "MuiAccordionSummary-root"
+    },
+    {
+      "name": "content",
+      "description": "The component that renders the content slot.",
+      "default": "div",
+      "class": "MuiAccordionSummary-content"
     },
+    {
+      "name": "expandIconWrapper",
+      "description": "The component that renders the expand icon wrapper slot.",
+      "default": "div",
+      "class": "MuiAccordionSummary-expandIconWrapper"
+    }
+  ],
+  "classes": [
     {
       "key": "contentGutters",
       "className": "MuiAccordionSummary-contentGutters",
@@ -43,12 +71,6 @@
       "description": "State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`.",
       "isGlobal": true
     },
-    {
-      "key": "expandIconWrapper",
-      "className": "MuiAccordionSummary-expandIconWrapper",
-      "description": "Styles applied to the `expandIcon`'s wrapper element.",
-      "isGlobal": false
-    },
     {
       "key": "focusVisible",
       "className": "Mui-focusVisible",
@@ -60,12 +82,6 @@
       "className": "MuiAccordionSummary-gutters",
       "description": "Styles applied to the root element unless `disableGutters={true}`.",
       "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiAccordionSummary-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/accordion-summary/accordion-summary.json

@@ -7,15 +7,13 @@
     "focusVisibleClassName": {
       "description": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
     },
+    "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": {
-    "content": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the children wrapper element"
-    },
     "contentGutters": {
       "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the children wrapper element",
@@ -32,10 +30,6 @@
       "nodeName": "the root element",
       "conditions": "children wrapper element and <code>IconButton</code> component if <code>expanded={true}</code>"
     },
-    "expandIconWrapper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the <code>expandIcon</code>&#39;s wrapper element"
-    },
     "focusVisible": {
       "description": "State class applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the ButtonBase root element",
@@ -45,7 +39,11 @@
       "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>disableGutters={true}</code>"
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "content": "The component that renders the content slot.",
+    "expandIconWrapper": "The component that renders the expand icon wrapper slot.",
+    "root": "The component that renders the root slot."
   }
 }

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

@@ -1,14 +1,66 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { ButtonBaseProps, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
-import { Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps, Theme } from '..';
 import { AccordionSummaryClasses } from './accordionSummaryClasses';
 
-export interface AccordionSummaryOwnProps {
+export interface AccordionSummarySlots {
   /**
-   * The content of the component.
+   * The component that renders the root slot.
+   * @default ButtonBase
    */
+  root: React.ElementType;
+  /**
+   * The component that renders the content slot.
+   * @default div
+   */
+  content: React.ElementType;
+  /**
+   * The component that renders the expand icon wrapper slot.
+   * @default div
+   */
+  expandIconWrapper: React.ElementType;
+}
+
+export interface AccordionSummaryRootSlotPropsOverrides {}
+export interface AccordionSummaryContentSlotPropsOverrides {}
+export interface AccordionSummaryExpandIconWrapperSlotPropsOverrides {}
+
+export type AccordionSummarySlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AccordionSummarySlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
+     */
+    root: SlotProps<
+      React.ElementType<ButtonBaseProps>,
+      AccordionSummaryRootSlotPropsOverrides,
+      AccordionSummaryOwnerState
+    >;
+    /**
+     * Props forwarded to the content slot.
+     * By default, the avaible props are based on a div element.
+     */
+    content: SlotProps<
+      'div',
+      AccordionSummaryContentSlotPropsOverrides,
+      AccordionSummaryOwnerState
+    >;
+    /**
+     * Props forwarded to the expand icon wrapper slot.
+     * By default, the avaible props are based on a div element.
+     */
+    expandIconWrapper: SlotProps<
+      'div',
+      AccordionSummaryExpandIconWrapperSlotPropsOverrides,
+      AccordionSummaryOwnerState
+    >;
+  }
+>;
+
+export interface AccordionSummaryOwnProps extends AccordionSummarySlotsAndSlotProps {
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
@@ -32,6 +84,9 @@ export type AccordionSummaryTypeMap<
   defaultComponent: RootComponent;
 }>;
 
+export interface AccordionSummaryOwnerState
+  extends Omit<AccordionSummaryProps, 'slots' | 'slotProps'> {}
+
 /**
  *
  * Demos:

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

@@ -11,6 +11,7 @@ import AccordionContext from '../Accordion/AccordionContext';
 import accordionSummaryClasses, {
   getAccordionSummaryUtilityClass,
 } from './accordionSummaryClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, expanded, disabled, disableGutters } = ownerState;
@@ -110,7 +111,16 @@ const AccordionSummaryExpandIconWrapper = styled('span', {
 
 const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiAccordionSummary' });
-  const { children, className, expandIcon, focusVisibleClassName, onClick, ...other } = props;
+  const {
+    children,
+    className,
+    expandIcon,
+    focusVisibleClassName,
+    onClick,
+    slots,
+    slotProps,
+    ...other
+  } = props;
 
   const { disabled = false, disableGutters, expanded, toggle } = React.useContext(AccordionContext);
   const handleChange = (event) => {
@@ -131,31 +141,58 @@ const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref
 
   const classes = useUtilityClasses(ownerState);
 
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    shouldForwardComponentProp: true,
+    className: clsx(classes.root, className),
+    elementType: AccordionSummaryRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    ownerState,
+    additionalProps: {
+      focusRipple: false,
+      disableRipple: true,
+      disabled,
+      'aria-expanded': expanded,
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+    },
+    getSlotProps: (handlers) => ({
+      ...handlers,
+      onClick: (event) => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      },
+    }),
+  });
+
+  const [ContentSlot, contentSlotProps] = useSlot('content', {
+    className: classes.content,
+    elementType: AccordionSummaryContent,
+    externalForwardedProps,
+    ownerState,
+  });
+
+  const [ExpandIconWrapperSlot, expandIconWrapperSlotProps] = useSlot('expandIconWrapper', {
+    className: classes.expandIconWrapper,
+    elementType: AccordionSummaryExpandIconWrapper,
+    externalForwardedProps,
+    ownerState,
+  });
+
   return (
-    <AccordionSummaryRoot
-      focusRipple={false}
-      disableRipple
-      disabled={disabled}
-      aria-expanded={expanded}
-      className={clsx(classes.root, className)}
-      focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
-      onClick={handleChange}
-      ref={ref}
-      ownerState={ownerState}
-      {...other}
-    >
-      <AccordionSummaryContent className={classes.content} ownerState={ownerState}>
-        {children}
-      </AccordionSummaryContent>
+    <RootSlot {...rootSlotProps}>
+      <ContentSlot {...contentSlotProps}>{children}</ContentSlot>
       {expandIcon && (
-        <AccordionSummaryExpandIconWrapper
-          className={classes.expandIconWrapper}
-          ownerState={ownerState}
-        >
-          {expandIcon}
-        </AccordionSummaryExpandIconWrapper>
+        <ExpandIconWrapperSlot {...expandIconWrapperSlotProps}>{expandIcon}</ExpandIconWrapperSlot>
       )}
-    </AccordionSummaryRoot>
+    </RootSlot>
   );
 });
 
@@ -193,6 +230,24 @@ AccordionSummary.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   onClick: PropTypes.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    expandIconWrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    content: PropTypes.elementType,
+    expandIconWrapper: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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

@@ -9,10 +9,14 @@ import Accordion from '@mui/material/Accordion';
 import ButtonBase from '@mui/material/ButtonBase';
 import describeConformance from '../../test/describeConformance';
 
+const CustomButtonBase = React.forwardRef(({ focusVisible, ...props }, ref) => (
+  <ButtonBase ref={ref} {...props} />
+));
+
 describe('<AccordionSummary />', () => {
   const { render } = createRenderer();
 
-  describeConformance(<AccordionSummary />, () => ({
+  describeConformance(<AccordionSummary expandIcon="expand" />, () => ({
     classes,
     inheritComponent: ButtonBase,
     render,
@@ -21,6 +25,18 @@ describe('<AccordionSummary />', () => {
     testVariantProps: { disabled: true },
     testDeepOverrides: { slotName: 'content', slotClassName: classes.content },
     skip: ['componentProp', 'componentsProp'],
+    slots: {
+      root: {
+        expectedClassName: classes.root,
+        testWithElement: CustomButtonBase,
+      },
+      content: {
+        expectedClassName: classes.content,
+      },
+      expandIconWrapper: {
+        expectedClassName: classes.expandIconWrapper,
+      },
+    },
   }));
 
   it('renders the children inside the .content element', () => {