[material-ui] Introduce the slots API (#34873)

docs/data/material/components/pagination/CustomIcons.js

@@ -12,7 +12,7 @@ export default function CustomIcons() {
         count={10}
         renderItem={(item) => (
           <PaginationItem
-            components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+            slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
             {...item}
           />
         )}

docs/data/material/components/pagination/CustomIcons.tsx

@@ -12,7 +12,7 @@ export default function CustomIcons() {
         count={10}
         renderItem={(item) => (
           <PaginationItem
-            components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+            slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
             {...item}
           />
         )}

docs/data/material/components/pagination/CustomIcons.tsx.preview

@@ -2,7 +2,7 @@
   count={10}
   renderItem={(item) => (
     <PaginationItem
-      components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+      slots={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
       {...item}
     />
   )}

docs/data/material/guides/interoperability/interoperability.md

@@ -134,7 +134,7 @@ export default function PlainCssSliderDeep1() {
 }
 ```
 
-The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `componentsProps` API.
+The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
 **PlainCssSliderDeep2.css**
 
@@ -166,7 +166,7 @@ export default function PlainCssSliderDeep2() {
       <Slider
         defaultValue={30}
         className="slider"
-        componentsProps={{ thumb: { className: 'thumb' } }}
+        slotProps={{ thumb: { className: 'thumb' } }}
       />
     </div>
   );
@@ -334,15 +334,15 @@ The following examples override the slider's `thumb` style in addition to the cu
 
 {{"demo": "StyledComponentsDeep.js", "defaultCodeOpen": true}}
 
-The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `componentsProps` API.
+The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
 ```jsx
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Slider from '@mui/material/Slider';
 
 const CustomizedSlider = styled((props) => (
-  <Slider componentsProps={{ thumb: { className: 'thumb' } }} {...props} />
+  <Slider slotProps={{ thumb: { className: 'thumb' } }} {...props} />
 ))`
   color: #20b2aa;
 
@@ -546,7 +546,7 @@ export default function CssModulesSliderDeep1() {
 }
 ```
 
-The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `componentsProps` API.
+The above demo relies on the [default `className` values](/system/styles/advanced/), but you can provide your own class name with the `slotProps` API.
 
 **CssModulesSliderDeep2.module.css**
 
@@ -579,7 +579,7 @@ export default function CssModulesSliderDeep2() {
       <Slider
         defaultValue={30}
         className={styles.slider}
-        componentsProps={{ thumb: { className: styles.thumb } }}
+        slotProps={{ thumb: { className: styles.thumb } }}
       />
     </div>
   );
@@ -764,7 +764,7 @@ export default function SliderThumbOverrides() {
       <Slider
         defaultValue={30}
         className="text-teal-600"
-        componentsProps={{ thumb: { className: 'rounded-sm' } }}
+        slotProps={{ thumb: { className: 'rounded-sm' } }}
       />
     </div>
   );

docs/pages/blog/2020.md

@@ -104,7 +104,7 @@ It will be built on top of the unstyled components.
 
 While the completion of the unstyled components was originally part of the v5 milestone,
 we will likely finish this effort independently.
-Outside of the requirement to introduce breaking changes on the component customization API, e.g. from `PaperProps` to `componentsProps`, [RFC #20012](https://github.com/mui/material-ui/issues/21453), we can work on unstyled at the same time we make progress with the second theme. The two efforts should go hand in hand.
+Outside of the requirement to introduce breaking changes on the component customization API, e.g. from `PaperProps` to `slotProps`, [RFC #20012](https://github.com/mui/material-ui/issues/21453), we can work on unstyled at the same time we make progress with the second theme. The two efforts should go hand in hand.
 
 ### Scale
 

docs/pages/blog/making-customizable-components.md

@@ -263,8 +263,8 @@ const CustomFilterPanel = (props) => (
 ```
 
 But this strategy of adding props to customize components is a bit verbose.
-So we added a way to pass props to an existing component using `componentsProps`.
-You can pass props to every slot on `components` using `componentsProps`.
+So we added a way to pass props to an existing component using `slotProps`.
+You can pass props to every slot on `slots` using `slotProps`.
 
 Here's how to pass `columnsSort='asc'` to the filter panel slot:
 

docs/pages/material-ui/api/alert.json

@@ -37,6 +37,17 @@
       },
       "default": "'success'"
     },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ closeButton?: object, closeIcon?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ closeButton?: elementType, closeIcon?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/autocomplete.json

@@ -86,6 +86,13 @@
       },
       "default": "'medium'"
     },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/avatar-group.json

@@ -8,6 +8,10 @@
       "default": "{}"
     },
     "max": { "type": { "name": "custom", "description": "number" }, "default": "5" },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
+      "default": "{}"
+    },
     "spacing": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/backdrop.json

@@ -13,6 +13,14 @@
       "default": "{}"
     },
     "invisible": { "type": { "name": "bool" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ root?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ root?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/filled-input.json

@@ -38,6 +38,14 @@
     "readOnly": { "type": { "name": "bool" } },
     "required": { "type": { "name": "bool" } },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ input?: object, root?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ input?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "startAdornment": { "type": { "name": "node" } },
     "sx": {
       "type": {

docs/pages/material-ui/api/form-control-label.json

@@ -19,6 +19,10 @@
       "default": "'end'"
     },
     "onChange": { "type": { "name": "func" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ typography?: object }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/input-base.json

@@ -48,6 +48,14 @@
         "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       }
     },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ input?: object, root?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ input?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "startAdornment": { "type": { "name": "node" } },
     "sx": {
       "type": {

docs/pages/material-ui/api/input.json

@@ -37,6 +37,14 @@
     "readOnly": { "type": { "name": "bool" } },
     "required": { "type": { "name": "bool" } },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ input?: object, root?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ input?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "startAdornment": { "type": { "name": "node" } },
     "sx": {
       "type": {

docs/pages/material-ui/api/list-item.json

@@ -46,6 +46,14 @@
       "deprecated": true,
       "deprecationInfo": "checkout <a href=\"/material-ui/api/list-item-button/\">ListItemButton</a> instead"
     },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ root?: object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ root?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/outlined-input.json

@@ -34,6 +34,10 @@
     "readOnly": { "type": { "name": "bool" } },
     "required": { "type": { "name": "bool" } },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "slots": {
+      "type": { "name": "shape", "description": "{ input?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "startAdornment": { "type": { "name": "node" } },
     "sx": {
       "type": {

docs/pages/material-ui/api/pagination-item.json

@@ -14,7 +14,7 @@
         "name": "shape",
         "description": "{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }"
       },
-      "default": "{\n  first: FirstPageIcon,\n  last: LastPageIcon,\n  next: NavigateNextIcon,\n  previous: NavigateBeforeIcon,\n}"
+      "default": "{}"
     },
     "disabled": { "type": { "name": "bool" } },
     "page": { "type": { "name": "node" } },
@@ -30,6 +30,13 @@
       },
       "default": "'medium'"
     },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/pages/material-ui/api/slider.json

@@ -18,6 +18,13 @@
       },
       "default": "{}"
     },
+    "componentsProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ input?: func<br>&#124;&nbsp;object, mark?: func<br>&#124;&nbsp;object, markLabel?: func<br>&#124;&nbsp;object, rail?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, thumb?: func<br>&#124;&nbsp;object, track?: func<br>&#124;&nbsp;object, valueLabel?: func<br>&#124;&nbsp;{ children?: element, className?: string, open?: bool, style?: object, value?: number, valueLabelDisplay?: 'auto'<br>&#124;&nbsp;'off'<br>&#124;&nbsp;'on' } }"
+      },
+      "default": "{}"
+    },
     "defaultValue": {
       "type": { "name": "union", "description": "Array&lt;number&gt;<br>&#124;&nbsp;number" }
     },

docs/pages/material-ui/api/step-label.json

@@ -9,6 +9,10 @@
     "error": { "type": { "name": "bool" } },
     "icon": { "type": { "name": "node" } },
     "optional": { "type": { "name": "node" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ label?: object }" },
+      "default": "{}"
+    },
     "StepIconComponent": { "type": { "name": "elementType" } },
     "StepIconProps": { "type": { "name": "object" } },
     "sx": {

docs/pages/material-ui/api/tooltip.json

@@ -41,6 +41,20 @@
     },
     "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" },
     "PopperProps": { "type": { "name": "object" }, "default": "{}" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ arrow?: object, popper?: object, tooltip?: object, transition?: object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ arrow?: elementType, popper?: elementType, tooltip?: elementType, transition?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",

docs/translations/api-docs/alert/alert.json

@@ -6,13 +6,15 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "closeText": "Override the default label for the <em>close popup</em> icon button.<br>For localization purposes, you can use the provided <a href=\"/material-ui/guides/localization/\">translations</a>.",
     "color": "The color of the component. Unless provided, the value is taken from the <code>severity</code> prop. It supports both default and custom theme colors, which can be added as shown in the <a href=\"https://mui.com/material-ui/customization/palette/#adding-new-colors\">palette customization guide</a>.",
-    "components": "The components used for each slot inside the Alert. Either a string to use a HTML element or a component.",
-    "componentsProps": "The props used for each slot inside.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "icon": "Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the <code>severity</code> prop. Set to <code>false</code> to remove the <code>icon</code>.",
     "iconMapping": "The component maps the <code>severity</code> prop to a range of different icons, for instance success to <code>&lt;SuccessOutlined&gt;</code>. If you wish to change this mapping, you can provide your own. Alternatively, you can use the <code>icon</code> prop to override the icon displayed.",
     "onClose": "Callback fired when the component requests to be closed. When provided and no <code>action</code> prop is set, a close icon button is displayed that triggers the callback when clicked.<br><br><strong>Signature:</strong><br><code>function(event: React.SyntheticEvent) =&gt; void</code><br><em>event:</em> The event source of the callback.",
     "role": "The ARIA role attribute of the element.",
     "severity": "The severity of the alert. This defines the color and icon used.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
+    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "variant": "The variant to use."
   },

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -60,6 +60,7 @@
     "renderTags": "Render the selected value.<br><br><strong>Signature:</strong><br><code>function(value: Array&lt;T&gt;, getTagProps: function, ownerState: object) =&gt; ReactNode</code><br><em>value:</em> The <code>value</code> provided to the component.<br><em>getTagProps:</em> A tag props getter.<br><em>ownerState:</em> The state of the Autocomplete component.",
     "selectOnFocus": "If <code>true</code>, the input&#39;s text is selected on focus. It helps the user clear the selected value.",
     "size": "The size of the component.",
+    "slotProps": "The props used for each slot inside.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "value": "The value of the autocomplete.<br>The value must have reference equality with the option in order to be selected. You can customize the equality behavior with the <code>isOptionEqualToValue</code> prop."
   },

docs/translations/api-docs/avatar-group/avatar-group.json

@@ -4,8 +4,9 @@
     "children": "The avatars to stack.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "componentsProps": "The props used for each slot inside the AvatarGroup.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "max": "Max avatars to show before +x.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
     "spacing": "Spacing between avatars.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "total": "The total number of avatars. Used for calculating the number of extra avatars.",

docs/translations/api-docs/backdrop/backdrop.json

@@ -4,10 +4,12 @@
     "children": "The content of the component.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
-    "components": "The components used for each slot inside the Backdrop. Either a string to use a HTML element or a component.",
-    "componentsProps": "The props used for each slot inside the Backdrop.",
+    "components": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead.",
+    "componentsProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future.",
     "invisible": "If <code>true</code>, the backdrop is invisible. It can be used when rendering a popover or a custom select component.",
     "open": "If <code>true</code>, the component is shown.",
+    "slotProps": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>componentsProps</code> prop, which will be deprecated in the future.",
+    "slots": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future.",
     "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
     "transitionDuration": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
   },