Skip to content

Commit 9f2711b

Browse files
michaldudakmichaldudak
authored
[base] components -> slots API rename (#34693)
1 parent 95d1707 commit 9f2711b

File tree

235 files changed

+2235
-1748
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

235 files changed

+2235
-1748
lines changed

‎docs/data/base/components/badge/badge.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -71,27 +71,23 @@ Use the `component` prop to override the root slot with a custom element:
7171
<BadgeUnstyled component="div" />
7272
```
7373

74-
Use the `components` prop to override any interior slots in addition to the root:
74+
Use the `slots` prop to override any interior slots in addition to the root:
7575

7676
```jsx
77-
<BadgeUnstyled components={{ Root: 'div', Badge: 'div' }} />
77+
<BadgeUnstyled slots={{ root: 'div', badge: 'div' }} />
7878
```
7979

8080
:::warning
81-
If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
81+
If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
8282
:::
8383

84-
Use the `componentsProps` prop to pass custom props to internal slots.
84+
Use the `slotProps` prop to pass custom props to internal slots.
8585
The following code snippet applies a CSS class called `my-badge` to the badge slot:
8686

8787
```jsx
88-
<BadgeUnstyled componentsProps={{ badge: { className: 'my-badge' } }} />
88+
<BadgeUnstyled slotProps={{ badge: { className: 'my-badge' } }} />
8989
```
9090

91-
:::warning
92-
Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
93-
:::
94-
9591
## Hook
9692

9793
```jsx

‎docs/data/base/components/button/button.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,27 +66,23 @@ Use the `component` prop to override the root slot with a custom element:
6666

6767
If you provide a non-interactive element such as a `<span>`, the `ButtonUnstyled` component will automatically add the necessary accessibility attributes.
6868

69-
Use the `components` prop to override any interior slots in addition to the root:
69+
Use the `slots` prop to override any interior slots in addition to the root:
7070

7171
```jsx
72-
<ButtonUnstyled components={{ Root: 'div' }} />
72+
<ButtonUnstyled slots={{ root: 'div' }} />
7373
```
7474

7575
:::warning
76-
If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
76+
If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
7777
:::
7878

79-
Use the `componentsProps` prop to pass custom props to internal slots.
79+
Use the `slotProps` prop to pass custom props to internal slots.
8080
The following code snippet applies a CSS class called `my-button` to the root slot:
8181

8282
```jsx
83-
<ButtonUnstyled componentsProps={{ root: { className: 'my-button' } }} />
83+
<ButtonUnstyled slotProps={{ root: { className: 'my-button' } }} />
8484
```
8585

86-
:::warning
87-
Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
88-
:::
89-
9086
Compare the attributes on the `<span>` in this demo with the `ButtonUnstyled` from the previous demo:
9187

9288
{{"demo": "UnstyledButtonsSpan.js"}}

‎docs/data/base/components/input/InputAdornments.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,13 @@ const InputAdornment = styled('div')`
8989
`;
9090

9191
const CustomInput = React.forwardRef(function CustomInput(props, ref) {
92-
const { components, ...other } = props;
92+
const { slots, ...other } = props;
9393
return (
9494
<InputUnstyled
95-
components={{
96-
Root: StyledInputRoot,
97-
Input: StyledInputElement,
98-
...components,
95+
slots={{
96+
root: StyledInputRoot,
97+
input: StyledInputElement,
98+
...slots,
9999
}}
100100
{...other}
101101
ref={ref}
@@ -109,10 +109,10 @@ CustomInput.propTypes = {
109109
* Either a string to use a HTML element or a component.
110110
* @default {}
111111
*/
112-
components: PropTypes.shape({
113-
Input: PropTypes.elementType,
114-
Root: PropTypes.elementType,
115-
Textarea: PropTypes.elementType,
112+
slots: PropTypes.shape({
113+
input: PropTypes.elementType,
114+
root: PropTypes.elementType,
115+
textarea: PropTypes.elementType,
116116
}),
117117
};
118118

‎docs/data/base/components/input/InputAdornments.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,13 @@ const CustomInput = React.forwardRef(function CustomInput(
9494
props: InputUnstyledProps,
9595
ref: React.ForwardedRef<HTMLDivElement>,
9696
) {
97-
const { components, ...other } = props;
97+
const { slots, ...other } = props;
9898
return (
9999
<InputUnstyled
100-
components={{
101-
Root: StyledInputRoot,
102-
Input: StyledInputElement,
103-
...components,
100+
slots={{
101+
root: StyledInputRoot,
102+
input: StyledInputElement,
103+
...slots,
104104
}}
105105
{...other}
106106
ref={ref}

‎docs/data/base/components/input/InputMultiline.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const StyledTextareaElement = styled('textarea', {
7979
const CustomInput = React.forwardRef(function CustomInput(props, ref) {
8080
return (
8181
<InputUnstyled
82-
components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
82+
slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
8383
{...props}
8484
ref={ref}
8585
/>

‎docs/data/base/components/input/InputMultiline.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const CustomInput = React.forwardRef(function CustomInput(
8282
) {
8383
return (
8484
<InputUnstyled
85-
components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
85+
slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
8686
{...props}
8787
ref={ref}
8888
/>

‎docs/data/base/components/input/InputMultilineAutosize.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const StyledTextareaElement = styled(TextareaAutosize)(
7777
const CustomInput = React.forwardRef(function CustomInput(props, ref) {
7878
return (
7979
<InputUnstyled
80-
components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
80+
slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
8181
{...props}
8282
ref={ref}
8383
/>

‎docs/data/base/components/input/InputMultilineAutosize.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const CustomInput = React.forwardRef(function CustomInput(
8080
) {
8181
return (
8282
<InputUnstyled
83-
components={{ Input: StyledInputElement, Textarea: StyledTextareaElement }}
83+
slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
8484
{...props}
8585
ref={ref}
8686
/>

‎docs/data/base/components/input/UnstyledInputBasic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const StyledInputElement = styled('input')(
5050

5151
const CustomInput = React.forwardRef(function CustomInput(props, ref) {
5252
return (
53-
<InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
53+
<InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
5454
);
5555
});
5656

‎docs/data/base/components/input/UnstyledInputBasic.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const CustomInput = React.forwardRef(function CustomInput(
5353
ref: React.ForwardedRef<HTMLDivElement>,
5454
) {
5555
return (
56-
<InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
56+
<InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
5757
);
5858
});
5959

‎docs/data/base/components/input/UnstyledInputIntroduction.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const StyledInputElement = styled('input')(
5050

5151
const CustomInput = React.forwardRef(function CustomInput(props, ref) {
5252
return (
53-
<InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
53+
<InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
5454
);
5555
});
5656

‎docs/data/base/components/input/UnstyledInputIntroduction.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const CustomInput = React.forwardRef(function CustomInput(
5353
ref: React.ForwardedRef<HTMLDivElement>,
5454
) {
5555
return (
56-
<InputUnstyled components={{ Input: StyledInputElement }} {...props} ref={ref} />
56+
<InputUnstyled slots={{ input: StyledInputElement }} {...props} ref={ref} />
5757
);
5858
});
5959

‎docs/data/base/components/input/input.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,27 +69,23 @@ Use the `component` prop to override the root slot with a custom element:
6969
<InputUnstyled component="aside" />
7070
```
7171

72-
Use the `components` prop to override any interior slots in addition to the root:
72+
Use the `slots` prop to override any interior slots in addition to the root:
7373

7474
```jsx
75-
<InputUnstyled components={{ Root: 'aside' }} />
75+
<InputUnstyled slots={{ root: 'aside' }} />
7676
```
7777

7878
:::warning
79-
If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
79+
If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
8080
:::
8181

82-
Use the `componentsProps` prop to pass custom props to internal slots.
82+
Use the `slotProps` prop to pass custom props to internal slots.
8383
The following code snippet applies a CSS class called `my-input` to the input slot:
8484

8585
```jsx
86-
<InputUnstyled componentsProps={{ input: { className: 'my-input' } }} />
86+
<InputUnstyled slotProps={{ input: { className: 'my-input' } }} />
8787
```
8888

89-
:::warning
90-
Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
91-
:::
92-
9389
## Hook
9490

9591
```js

‎docs/data/base/components/menu/MenuSimple.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,8 @@ export default function UnstyledMenuSimple() {
179179
open={isOpen}
180180
onClose={close}
181181
anchorEl={anchorEl}
182-
components={{ Root: Popper, Listbox: StyledListbox }}
183-
componentsProps={{ listbox: { id: 'simple-menu' } }}
182+
slots={{ root: Popper, listbox: StyledListbox }}
183+
slotProps={{ listbox: { id: 'simple-menu' } }}
184184
>
185185
<StyledMenuItem onClick={createHandleMenuClick('Profile')}>
186186
Profile

‎docs/data/base/components/menu/MenuSimple.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,8 @@ export default function UnstyledMenuSimple() {
179179
open={isOpen}
180180
onClose={close}
181181
anchorEl={anchorEl}
182-
components={{ Root: Popper, Listbox: StyledListbox }}
183-
componentsProps={{ listbox: { id: 'simple-menu' } }}
182+
slots={{ root: Popper, listbox: StyledListbox }}
183+
slotProps={{ listbox: { id: 'simple-menu' } }}
184184
>
185185
<StyledMenuItem onClick={createHandleMenuClick('Profile')}>
186186
Profile

‎docs/data/base/components/menu/UnstyledMenuIntroduction.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,8 @@ export default function UnstyledMenuIntroduction() {
162162
open={isOpen}
163163
onClose={close}
164164
anchorEl={anchorEl}
165-
components={{ Root: Popper, Listbox: StyledListbox }}
166-
componentsProps={{ listbox: { id: 'simple-menu' } }}
165+
slots={{ root: Popper, listbox: StyledListbox }}
166+
slotProps={{ listbox: { id: 'simple-menu' } }}
167167
>
168168
<StyledMenuItem onClick={createHandleMenuClick('Profile')}>
169169
Profile

‎docs/data/base/components/menu/UnstyledMenuIntroduction.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,8 +162,8 @@ export default function UnstyledMenuIntroduction() {
162162
open={isOpen}
163163
onClose={close}
164164
anchorEl={anchorEl}
165-
components={{ Root: Popper, Listbox: StyledListbox }}
166-
componentsProps={{ listbox: { id: 'simple-menu' } }}
165+
slots={{ root: Popper, listbox: StyledListbox }}
166+
slotProps={{ listbox: { id: 'simple-menu' } }}
167167
>
168168
<StyledMenuItem onClick={createHandleMenuClick('Profile')}>
169169
Profile

‎docs/data/base/components/menu/WrappedMenuItems.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -212,8 +212,8 @@ export default function WrappedMenuItems() {
212212
open={isOpen}
213213
onClose={close}
214214
anchorEl={anchorEl}
215-
components={{ Root: Popper, Listbox: StyledListbox }}
216-
componentsProps={{ listbox: { id: 'simple-menu' } }}
215+
slots={{ root: Popper, listbox: StyledListbox }}
216+
slotProps={{ listbox: { id: 'simple-menu' } }}
217217
>
218218
<MenuSection label="Navigation">
219219
<StyledMenuItem onClick={createHandleMenuClick('Back')}>

‎docs/data/base/components/menu/WrappedMenuItems.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,8 @@ export default function WrappedMenuItems() {
211211
open={isOpen}
212212
onClose={close}
213213
anchorEl={anchorEl}
214-
components={{ Root: Popper, Listbox: StyledListbox }}
215-
componentsProps={{ listbox: { id: 'simple-menu' } }}
214+
slots={{ root: Popper, listbox: StyledListbox }}
215+
slotProps={{ listbox: { id: 'simple-menu' } }}
216216
>
217217
<MenuSection label="Navigation">
218218
<StyledMenuItem onClick={createHandleMenuClick('Back')}>

‎docs/data/base/components/menu/menu.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,27 +78,23 @@ Use the `component` prop to override the root slot with a custom element:
7878
<MenuItemUnstyled component="span" />
7979
```
8080

81-
Use the `components` prop to override any interior slots in addition to the root:
81+
Use the `slots` prop to override any interior slots in addition to the root:
8282

8383
```jsx
84-
<MenuUnstyled components={{ Root: 'nav', Listbox: 'ol' }} />
84+
<MenuUnstyled slots={{ root: 'nav', listbox: 'ol' }} />
8585
```
8686

8787
:::warning
88-
If the root element is customized with both the `component` and `components` props, then `component` will take precedence.
88+
If the root element is customized with both the `component` and `slots` props, then `component` will take precedence.
8989
:::
9090

91-
Use the `componentsProps` prop to pass custom props to internal slots.
91+
Use the `slotProps` prop to pass custom props to internal slots.
9292
The following code snippet applies a CSS class called `my-listbox` to the listbox slot:
9393

9494
```jsx
95-
<MenuUnstyled componentsProps={{ listbox: { className: 'my-listbox' } }} />
95+
<MenuUnstyled slotProps={{ listbox: { className: 'my-listbox' } }} />
9696
```
9797

98-
:::warning
99-
Note that `componentsProps` slot names are written in lowercase (`root`) while `components` slot names are capitalized (`Root`).
100-
:::
101-
10298
### CSS classes
10399

104100
`MenuUnstyled` can set the following class:

‎docs/data/base/components/modal/KeepMountedModal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default function ModalUnstyledDemo() {
6868
aria-describedby="keep-mounted-modal-description"
6969
open={open}
7070
onClose={handleClose}
71-
components={{ Backdrop }}
71+
slots={{ backdrop: Backdrop }}
7272
keepMounted
7373
>
7474
<Box sx={style}>

‎docs/data/base/components/modal/KeepMountedModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function ModalUnstyledDemo() {
6565
aria-describedby="keep-mounted-modal-description"
6666
open={open}
6767
onClose={handleClose}
68-
components={{ Backdrop }}
68+
slots={{ backdrop: Backdrop }}
6969
keepMounted
7070
>
7171
<Box sx={style}>

‎docs/data/base/components/modal/KeepMountedModal.tsx.preview

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
aria-describedby="keep-mounted-modal-description"
77
open={open}
88
onClose={handleClose}
9-
components={{ Backdrop }}
9+
slots={{ backdrop: Backdrop }}
1010
keepMounted
1111
>
1212
<Box sx={style}>

‎docs/data/base/components/modal/ModalUnstyled.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function ModalUnstyledDemo() {
6565
aria-describedby="unstyled-modal-description"
6666
open={open}
6767
onClose={handleClose}
68-
components={{ Backdrop }}
68+
slots={{ backdrop: Backdrop }}
6969
>
7070
<Box sx={style}>
7171
<h2 id="unstyled-modal-title">Text in a modal</h2>

‎docs/data/base/components/modal/ModalUnstyled.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default function ModalUnstyledDemo() {
6262
aria-describedby="unstyled-modal-description"
6363
open={open}
6464
onClose={handleClose}
65-
components={{ Backdrop }}
65+
slots={{ backdrop: Backdrop }}
6666
>
6767
<Box sx={style}>
6868
<h2 id="unstyled-modal-title">Text in a modal</h2>

‎docs/data/base/components/modal/ModalUnstyled.tsx.preview

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
aria-describedby="unstyled-modal-description"
77
open={open}
88
onClose={handleClose}
9-
components={{ Backdrop }}
9+
slots={{ backdrop: Backdrop }}
1010
>
1111
<Box sx={style}>
1212
<h2 id="unstyled-modal-title">Text in a modal</h2>

‎docs/data/base/components/modal/NestedModal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export default function NestedModal() {
103103
onClose={handleClose}
104104
aria-labelledby="parent-modal-title"
105105
aria-describedby="parent-modal-description"
106-
components={{ Backdrop }}
106+
slots={{ backdrop: Backdrop }}
107107
>
108108
<Box sx={style}>
109109
<h2 id="parent-modal-title">Text in a modal</h2>

‎docs/data/base/components/modal/NestedModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export default function NestedModal() {
100100
onClose={handleClose}
101101
aria-labelledby="parent-modal-title"
102102
aria-describedby="parent-modal-description"
103-
components={{ Backdrop }}
103+
slots={{ backdrop: Backdrop }}
104104
>
105105
<Box sx={style}>
106106
<h2 id="parent-modal-title">Text in a modal</h2>

0 commit comments

Comments
 (0)