[base] components -> slots API rename (#34693)

mui · Oct 19, 2022 · 9f2711b · 9f2711b
1 parent 95d1707
commit 9f2711b
Show file tree

Hide file tree

Showing 235 changed files with 2,235 additions and 1,748 deletions.
diff --git a/docs/data/base/components/badge/badge.md b/docs/data/base/components/badge/badge.md
@@ -71,27 +71,23 @@ Use the `component` prop to override the root slot with a custom element:
 <BadgeUnstyled component="div" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<BadgeUnstyled components={{ Root: 'div', Badge: 'div' }} />
+<BadgeUnstyled slots={{ root: 'div', badge: 'div' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-badge` to the badge slot:
 
 ```jsx
-<BadgeUnstyled componentsProps={{ badge: { className: 'my-badge' } }} />
+<BadgeUnstyled slotProps={{ badge: { className: 'my-badge' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```jsx

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
@@ -66,27 +66,23 @@ Use the `component` prop to override the root slot with a custom element:
 
 If you provide a non-interactive element such as a `<span>`, the `ButtonUnstyled` component will automatically add the necessary accessibility attributes.
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<ButtonUnstyled components={{ Root: 'div' }} />
+<ButtonUnstyled slots={{ root: 'div' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-button` to the root slot:
 
 ```jsx
-<ButtonUnstyled componentsProps={{ root: { className: 'my-button' } }} />
+<ButtonUnstyled slotProps={{ root: { className: 'my-button' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 Compare the attributes on the `<span>` in this demo with the `ButtonUnstyled` from the previous demo:
 
 {{"demo": "UnstyledButtonsSpan.js"}}

diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js
@@ -89,13 +89,13 @@ const InputAdornment = styled('div')`
 `;
 
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
-  const { components, ...other } = props;
+  const { slots, ...other } = props;
   return (
     <InputUnstyled
-      components={{
-        Root: StyledInputRoot,
-        Input: StyledInputElement,
-        ...components,
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInputElement,
+        ...slots,
       }}
       {...other}
       ref={ref}
@@ -109,10 +109,10 @@ CustomInput.propTypes = {
    * Either a string to use a HTML element or a component.
    * @default {}
    */
-  components: PropTypes.shape({
-    Input: PropTypes.elementType,
-    Root: PropTypes.elementType,
-    Textarea: PropTypes.elementType,
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    root: PropTypes.elementType,
+    textarea: PropTypes.elementType,
   }),
 };
 

diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx
@@ -94,13 +94,13 @@ const CustomInput = React.forwardRef(function CustomInput(
   props: InputUnstyledProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { components, ...other } = props;
+  const { slots, ...other } = props;
   return (
     <InputUnstyled
-      components={{
-        Root: StyledInputRoot,
-        Input: StyledInputElement,
-        ...components,
+      slots={{
+        root: StyledInputRoot,
+        input: StyledInputElement,
+        ...slots,
       }}
       {...other}
       ref={ref}

diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js
@@ -79,7 +79,7 @@ const StyledTextareaElement = styled('textarea', {
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
     <InputUnstyled
-      components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
       {...props}
       ref={ref}
     />

diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx
@@ -82,7 +82,7 @@ const CustomInput = React.forwardRef(function CustomInput(
 ) {
   return (
     <InputUnstyled
-      components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
       {...props}
       ref={ref}
     />

diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js
@@ -77,7 +77,7 @@ const StyledTextareaElement = styled(TextareaAutosize)(
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
     <InputUnstyled
-      components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
       {...props}
       ref={ref}
     />

diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx
@@ -80,7 +80,7 @@ const CustomInput = React.forwardRef(function CustomInput(
 ) {
   return (
     <InputUnstyled
-      components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
+      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
       {...props}
       ref={ref}
     />

diff --git a/docs/data/base/components/input/UnstyledInputBasic.js b/docs/data/base/components/input/UnstyledInputBasic.js
@@ -50,7 +50,7 @@ const StyledInputElement = styled('input')(
 
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
-    <InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
   );
 });
 

diff --git a/docs/data/base/components/input/UnstyledInputBasic.tsx b/docs/data/base/components/input/UnstyledInputBasic.tsx
@@ -53,7 +53,7 @@ const CustomInput = React.forwardRef(function CustomInput(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
   );
 });
 

diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.js b/docs/data/base/components/input/UnstyledInputIntroduction.js
@@ -50,7 +50,7 @@ const StyledInputElement = styled('input')(
 
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
-    <InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
   );
 });
 

diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.tsx b/docs/data/base/components/input/UnstyledInputIntroduction.tsx
@@ -53,7 +53,7 @@ const CustomInput = React.forwardRef(function CustomInput(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
+    <InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
   );
 });
 

diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md
@@ -69,27 +69,23 @@ Use the `component` prop to override the root slot with a custom element:
 <InputUnstyled component="aside" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<InputUnstyled components={{ Root: 'aside' }} />
+<InputUnstyled slots={{ root: 'aside' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-input` to the input slot:
 
 ```jsx
-<InputUnstyled componentsProps={{ input: { className: 'my-input' } }} />
+<InputUnstyled slotProps={{ input: { className: 'my-input' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ## Hook
 
 ```js

diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js
@@ -179,8 +179,8 @@ export default function UnstyledMenuSimple() {
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        components={{ Root: Popper, Listbox: StyledListbox }}
-        componentsProps={{ listbox: { id: 'simple-menu' } }}
+        slots={{ root: Popper, listbox: StyledListbox }}
+        slotProps={{ listbox: { id: 'simple-menu' } }}
       >
         <StyledMenuItem onClick={createHandleMenuClick('Profile')}>
           Profile

diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx
@@ -179,8 +179,8 @@ export default function UnstyledMenuSimple() {
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        components={{ Root: Popper, Listbox: StyledListbox }}
-        componentsProps={{ listbox: { id: 'simple-menu' } }}
+        slots={{ root: Popper, listbox: StyledListbox }}
+        slotProps={{ listbox: { id: 'simple-menu' } }}
       >
         <StyledMenuItem onClick={createHandleMenuClick('Profile')}>
           Profile

diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.js b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
@@ -162,8 +162,8 @@ export default function UnstyledMenuIntroduction() {
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        components={{ Root: Popper, Listbox: StyledListbox }}
-        componentsProps={{ listbox: { id: 'simple-menu' } }}
+        slots={{ root: Popper, listbox: StyledListbox }}
+        slotProps={{ listbox: { id: 'simple-menu' } }}
       >
         <StyledMenuItem onClick={createHandleMenuClick('Profile')}>
           Profile

diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
@@ -162,8 +162,8 @@ export default function UnstyledMenuIntroduction() {
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        components={{ Root: Popper, Listbox: StyledListbox }}
-        componentsProps={{ listbox: { id: 'simple-menu' } }}
+        slots={{ root: Popper, listbox: StyledListbox }}
+        slotProps={{ listbox: { id: 'simple-menu' } }}
       >
         <StyledMenuItem onClick={createHandleMenuClick('Profile')}>
           Profile

diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -212,8 +212,8 @@ export default function WrappedMenuItems() {
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        components={{ Root: Popper, Listbox: StyledListbox }}
-        componentsProps={{ listbox: { id: 'simple-menu' } }}
+        slots={{ root: Popper, listbox: StyledListbox }}
+        slotProps={{ listbox: { id: 'simple-menu' } }}
       >
         <MenuSection label="Navigation">
           <StyledMenuItem onClick={createHandleMenuClick('Back')}>

diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -211,8 +211,8 @@ export default function WrappedMenuItems() {
         open={isOpen}
         onClose={close}
         anchorEl={anchorEl}
-        components={{ Root: Popper, Listbox: StyledListbox }}
-        componentsProps={{ listbox: { id: 'simple-menu' } }}
+        slots={{ root: Popper, listbox: StyledListbox }}
+        slotProps={{ listbox: { id: 'simple-menu' } }}
       >
         <MenuSection label="Navigation">
           <StyledMenuItem onClick={createHandleMenuClick('Back')}>

diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md
@@ -78,27 +78,23 @@ Use the `component` prop to override the root slot with a custom element:
 <MenuItemUnstyled component="span" />
 ```
 
-Use the `components` prop to override any interior slots in addition to the root:
+Use the `slots` prop to override any interior slots in addition to the root:
 
 ```jsx
-<MenuUnstyled components={{ Root: 'nav', Listbox: 'ol' }} />
+<MenuUnstyled slots={{ root: 'nav', listbox: 'ol' }} />
 ```
 
 :::warning
-If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
+If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
 :::
 
-Use the `componentsProps` prop to pass custom props to internal slots.
+Use the `slotProps` prop to pass custom props to internal slots.
 The following code snippet applies a CSS class called `my-listbox` to the listbox slot:
 
 ```jsx
-<MenuUnstyled componentsProps={{ listbox: { className: 'my-listbox' } }} />
+<MenuUnstyled slotProps={{ listbox: { className: 'my-listbox' } }} />
 ```
 
-:::warning
-Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
-:::
-
 ### CSS classes
 
 `MenuUnstyled` can set the following class:

diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
@@ -68,7 +68,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="keep-mounted-modal-description"
         open={open}
         onClose={handleClose}
-        components={{ Backdrop }}
+        slots={{ backdrop: Backdrop }}
         keepMounted
       >
         <Box sx={style}>

diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -65,7 +65,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="keep-mounted-modal-description"
         open={open}
         onClose={handleClose}
-        components={{ Backdrop }}
+        slots={{ backdrop: Backdrop }}
         keepMounted
       >
         <Box sx={style}>

diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx.preview b/docs/data/base/components/modal/KeepMountedModal.tsx.preview
@@ -6,7 +6,7 @@
   aria-describedby="keep-mounted-modal-description"
   open={open}
   onClose={handleClose}
-  components={{ Backdrop }}
+  slots={{ backdrop: Backdrop }}
   keepMounted
 >
   <Box sx={style}>

diff --git a/docs/data/base/components/modal/ModalUnstyled.js b/docs/data/base/components/modal/ModalUnstyled.js
@@ -65,7 +65,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="unstyled-modal-description"
         open={open}
         onClose={handleClose}
-        components={{ Backdrop }}
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={style}>
           <h2 id="unstyled-modal-title">Text in a modal</h2>

diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -62,7 +62,7 @@ export default function ModalUnstyledDemo() {
         aria-describedby="unstyled-modal-description"
         open={open}
         onClose={handleClose}
-        components={{ Backdrop }}
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={style}>
           <h2 id="unstyled-modal-title">Text in a modal</h2>

diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx.preview b/docs/data/base/components/modal/ModalUnstyled.tsx.preview
@@ -6,7 +6,7 @@
   aria-describedby="unstyled-modal-description"
   open={open}
   onClose={handleClose}
-  components={{ Backdrop }}
+  slots={{ backdrop: Backdrop }}
 >
   <Box sx={style}>
     <h2 id="unstyled-modal-title">Text in a modal</h2>

diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
@@ -103,7 +103,7 @@ export default function NestedModal() {
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
         aria-describedby="parent-modal-description"
-        components={{ Backdrop }}
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={style}>
           <h2 id="parent-modal-title">Text in a modal</h2>

diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
@@ -100,7 +100,7 @@ export default function NestedModal() {
         onClose={handleClose}
         aria-labelledby="parent-modal-title"
         aria-describedby="parent-modal-description"
-        components={{ Backdrop }}
+        slots={{ backdrop: Backdrop }}
       >
         <Box sx={style}>
           <h2 id="parent-modal-title">Text in a modal</h2>