Replace componentsProps with slotProps in all Joy demos

hbjORbj · hbjORbj · commit d759a9a838a6 · 2022-11-07T17:03:29.000-05:00
diff --git a/docs/data/joy/components/autocomplete/CountrySelect.js b/docs/data/joy/components/autocomplete/CountrySelect.js
@@ -37,7 +37,7 @@ export default function CountrySelect() {
         <Input
           {...params}
           placeholder="Choose a country"
-          componentsProps={{
+          slotProps={{
             input: {
               ...params.componentsProps.input,
               autoComplete: 'new-password', // disable autocomplete and autofill
diff --git a/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js b/docs/data/joy/components/checkbox/ExampleButtonCheckbox.js
@@ -53,7 +53,7 @@ export default function ExampleButtonCheckbox() {
                 setValue((val) => val.filter((text) => text !== item));
               }
             }}
-            componentsProps={{
+            slotProps={{
               action: ({ checked }) => ({
                 sx: {
                   bgcolor: checked ? 'background.surface' : 'transparent',
diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -49,7 +49,7 @@ export default function ExampleChoiceChipCheckbox() {
                       setValue((val) => val.filter((text) => text !== item));
                     }
                   }}
-                  componentsProps={{
+                  slotProps={{
                     action: ({ checked }) => ({
                       sx: checked
                         ? {
diff --git a/docs/data/joy/components/checkbox/FocusCheckbox.js b/docs/data/joy/components/checkbox/FocusCheckbox.js
@@ -9,14 +9,14 @@ export default function FocusCheckbox() {
         label="Label"
         defaultChecked
         // to demonstrate the focus outline
-        componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+        slotProps={{ action: { className: checkboxClasses.focusVisible } }}
       />
       <Checkbox
         label="Label"
         defaultChecked
         sx={{ [`& > .${checkboxClasses.checkbox}`]: { position: 'relative' } }}
         // to demonstrate the focus outline
-        componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+        slotProps={{ action: { className: checkboxClasses.focusVisible } }}
       />
     </Box>
   );
diff --git a/docs/data/joy/components/checkbox/HoverCheckbox.js b/docs/data/joy/components/checkbox/HoverCheckbox.js
@@ -7,7 +7,7 @@ export default function HoverCheckbox() {
     <Checkbox
       uncheckedIcon={<Done />}
       label="Label"
-      componentsProps={{
+      slotProps={{
         root: ({ checked, focusVisible }) => ({
           sx: !checked
             ? {
diff --git a/docs/data/joy/components/checkbox/OverlayCheckbox.js b/docs/data/joy/components/checkbox/OverlayCheckbox.js
@@ -22,7 +22,7 @@ export default function OverlayCheckbox() {
           label="Focus outline covers the parent!"
           overlay
           // Force the outline to appear in the demo. Usually, you don't need this in your project.
-          componentsProps={{ action: { className: checkboxClasses.focusVisible } }}
+          slotProps={{ action: { className: checkboxClasses.focusVisible } }}
         />
       </Sheet>
     </Box>
diff --git a/docs/data/joy/components/chip/LinkChip.js b/docs/data/joy/components/chip/LinkChip.js
@@ -3,7 +3,7 @@ import Chip from '@mui/joy/Chip';
 
 export default function ClickableChip() {
   return (
-    <Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+    <Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
       Anchor chip
     </Chip>
   );
diff --git a/docs/data/joy/components/chip/LinkChip.tsx b/docs/data/joy/components/chip/LinkChip.tsx
@@ -3,7 +3,7 @@ import Chip from '@mui/joy/Chip';
 
 export default function ClickableChip() {
   return (
-    <Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+    <Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
       Anchor chip
     </Chip>
   );
diff --git a/docs/data/joy/components/chip/LinkChip.tsx.preview b/docs/data/joy/components/chip/LinkChip.tsx.preview
@@ -1,3 +1,3 @@
-<Chip componentsProps={{ action: { component: 'a', href: '#as-link' } }}>
+<Chip slotProps={{ action: { component: 'a', href: '#as-link' } }}>
   Anchor chip
 </Chip>
diff --git a/docs/data/joy/components/menu/MenuIconSideNavExample.js b/docs/data/joy/components/menu/MenuIconSideNavExample.js
@@ -89,7 +89,7 @@ function MenuButton({ children, menu, open, onOpen, onLeaveMenu, label, ...props
         actions: menuActions,
         anchorEl: buttonRef.current,
         modifiers,
-        componentsProps: {
+        slotProps: {
           listbox: {
             id: `nav-example-menu-${label}`,
             'aria-label': label,
diff --git a/docs/data/joy/components/menu/MenuToolbarExample.js b/docs/data/joy/components/menu/MenuToolbarExample.js
@@ -51,7 +51,7 @@ const MenuButton = React.forwardRef(
           open,
           actions: menuActions,
           anchorEl: buttonRef.current,
-          componentsProps: {
+          slotProps: {
             listbox: {
               id: `toolbar-example-menu-${children}`,
               'aria-label': children,
diff --git a/docs/data/joy/components/menu/MenuUsage.js b/docs/data/joy/components/menu/MenuUsage.js
@@ -78,7 +78,7 @@ export default function MenuUsage() {
             anchorEl={anchorEl}
             open={open}
             onClose={handleClose}
-            componentsProps={{
+            slotProps={{
               listbox: {
                 'aria-labelledby': 'menu-usage-button',
               },
diff --git a/docs/data/joy/components/modal/FadeModalDialog.js b/docs/data/joy/components/modal/FadeModalDialog.js
@@ -18,7 +18,7 @@ export default function FadeModalDialog() {
             keepMounted
             open={!['exited', 'exiting'].includes(state)}
             onClose={() => setOpen(false)}
-            componentsProps={{
+            slotProps={{
               backdrop: {
                 sx: {
                   opacity: 0,
diff --git a/docs/data/joy/components/radio/ExampleAlignmentButtons.js b/docs/data/joy/components/radio/ExampleAlignmentButtons.js
@@ -55,7 +55,7 @@ export default function ExampleAlignmentButtons() {
               }[item]
             }
             variant={alignment === item ? 'solid' : 'plain'}
-            componentsProps={{
+            slotProps={{
               input: { 'aria-label': item },
               action: {
                 sx: { borderRadius: 0, transition: 'none' },
diff --git a/docs/data/joy/components/radio/ExampleProductAttributes.js b/docs/data/joy/components/radio/ExampleProductAttributes.js
@@ -48,7 +48,7 @@ export default function ExampleProductAttributes() {
                 color={color}
                 checkedIcon={<Done fontSize="xl2" />}
                 value={color}
-                componentsProps={{
+                slotProps={{
                   input: { 'aria-label': color },
                   radio: {
                     sx: {
diff --git a/docs/data/joy/components/radio/ExampleSegmentedControls.js b/docs/data/joy/components/radio/ExampleSegmentedControls.js
@@ -38,7 +38,7 @@ export default function ExampleSegmentedControls() {
               px: 2,
               alignItems: 'center',
             }}
-            componentsProps={{
+            slotProps={{
               action: ({ checked }) => ({
                 sx: {
                   ...(checked && {
diff --git a/docs/data/joy/components/radio/IconlessRadio.js b/docs/data/joy/components/radio/IconlessRadio.js
@@ -33,7 +33,7 @@ export default function IconlessRadio() {
               overlay
               disableIcon
               value={value}
-              componentsProps={{
+              slotProps={{
                 label: ({ checked }) => ({
                   sx: {
                     fontWeight: 'lg',
diff --git a/docs/data/joy/components/radio/RadioButtons.js b/docs/data/joy/components/radio/RadioButtons.js
@@ -16,14 +16,14 @@ export default function RadioButtons() {
         onChange={handleChange}
         value="a"
         name="radio-buttons"
-        componentsProps={{ input: { 'aria-label': 'A' } }}
+        slotProps={{ input: { 'aria-label': 'A' } }}
       />
       <Radio
         checked={selectedValue === 'b'}
         onChange={handleChange}
         value="b"
         name="radio-buttons"
-        componentsProps={{ input: { 'aria-label': 'B' } }}
+        slotProps={{ input: { 'aria-label': 'B' } }}
       />
     </Box>
   );
diff --git a/docs/data/joy/components/radio/RadioPositionEnd.js b/docs/data/joy/components/radio/RadioPositionEnd.js
@@ -30,7 +30,7 @@ export default function RadioPositionEnd() {
               value={item}
               label={item}
               sx={{ flexGrow: 1, flexDirection: 'row-reverse' }}
-              componentsProps={{
+              slotProps={{
                 action: ({ checked }) => ({
                   sx: (theme) => ({
                     ...(checked && {
diff --git a/docs/data/joy/components/radio/radio-pt.md b/docs/data/joy/components/radio/radio-pt.md
@@ -98,7 +98,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },
diff --git a/docs/data/joy/components/radio/radio-zh.md b/docs/data/joy/components/radio/radio-zh.md
@@ -98,7 +98,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },
diff --git a/docs/data/joy/components/radio/radio.md b/docs/data/joy/components/radio/radio.md
@@ -119,7 +119,7 @@ Here are a few tips to make sure you have an accessible radio button component:
 ```jsx
 <Radio
   value="radioA"
-  componentsProps={{
+  slotProps={{
     input: {
       'aria-label': 'Radio A',
     },
diff --git a/docs/data/joy/components/select/SelectCustomOption.js b/docs/data/joy/components/select/SelectCustomOption.js
@@ -9,7 +9,7 @@ export default function SelectCustomOption() {
   return (
     <Select
       defaultValue="1"
-      componentsProps={{
+      slotProps={{
         listbox: {
           sx: {
             '--List-decorator-size': '44px',
diff --git a/docs/data/joy/components/select/SelectCustomValueAppearance.js b/docs/data/joy/components/select/SelectCustomValueAppearance.js
@@ -21,7 +21,7 @@ export default function SelectCustomValueAppearance() {
   return (
     <Select
       defaultValue="Eric"
-      componentsProps={{
+      slotProps={{
         listbox: {
           sx: {
             '--List-decorator-size': '48px',
diff --git a/docs/data/joy/components/select/SelectFieldDemo.js b/docs/data/joy/components/select/SelectFieldDemo.js
@@ -13,7 +13,7 @@ export default function SelectFieldDemo() {
       </FormLabel>
       <Select
         defaultValue="dog"
-        componentsProps={{
+        slotProps={{
           button: {
             id: 'select-field-demo-button',
             // TODO: Material UI set aria-labelledby correctly & automatically
diff --git a/docs/data/joy/components/select/SelectFieldDemo.tsx b/docs/data/joy/components/select/SelectFieldDemo.tsx
@@ -13,7 +13,7 @@ export default function SelectFieldDemo() {
       </FormLabel>
       <Select
         defaultValue="dog"
-        componentsProps={{
+        slotProps={{
           button: {
             id: 'select-field-demo-button',
             // TODO: Material UI set aria-labelledby correctly & automatically
diff --git a/docs/data/joy/components/select/SelectGroupedOptions.js b/docs/data/joy/components/select/SelectGroupedOptions.js
@@ -25,7 +25,7 @@ export default function SelectGroupedOptions() {
   return (
     <Select
       placeholder="Choose your animal"
-      componentsProps={{
+      slotProps={{
         listbox: {
           component: 'div',
           sx: {
diff --git a/docs/data/joy/components/select/select-pt.md b/docs/data/joy/components/select/select-pt.md
@@ -109,7 +109,7 @@ To create a [listbox with grouped options](https://www.w3.org/WAI/ARIA/apg/examp
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,
diff --git a/docs/data/joy/components/select/select-zh.md b/docs/data/joy/components/select/select-zh.md
@@ -109,7 +109,7 @@ To create a [listbox with grouped options](https://www.w3.org/WAI/ARIA/apg/examp
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
@@ -113,7 +113,7 @@ That way, you'll have a consistent height and will be able to leverage nested CS
 
 ```jsx
 <Select
-  componentsProps={{
+  slotProps={{
     listbox: {
       sx: {
         maxHeight: 300,
@@ -139,7 +139,7 @@ Alternatively, you can do it manually by targeting the button slot:
 ```jsx
 <label htmlFor="select-button" id="select-label">Label</label>
 <Select
-  componentsProps={{
+  slotProps={{
     button: {
       id: 'select-button',
       'aria-labelledby': 'select-label select-button',
diff --git a/docs/data/joy/components/switch/ExampleThumbChild.js b/docs/data/joy/components/switch/ExampleThumbChild.js
@@ -5,7 +5,7 @@ import DarkMode from '@mui/icons-material/DarkMode';
 export default function ExampleThumbChild() {
   return (
     <Switch
-      componentsProps={{
+      slotProps={{
         input: { 'aria-label': 'Dark mode' },
         thumb: {
           children: <DarkMode />,
diff --git a/docs/data/joy/components/switch/ExampleTrackChild.js b/docs/data/joy/components/switch/ExampleTrackChild.js
@@ -5,7 +5,7 @@ import Typography from '@mui/joy/Typography';
 export default function ExampleTrackChild() {
   return (
     <Switch
-      componentsProps={{
+      slotProps={{
         track: {
           children: (
             <React.Fragment>
diff --git a/docs/data/joy/components/switch/SwitchControl.js b/docs/data/joy/components/switch/SwitchControl.js
@@ -22,7 +22,7 @@ export default function SwitchLabel() {
         color={checked ? 'success' : 'neutral'}
         variant="outlined"
         endDecorator={checked ? 'On' : 'Off'}
-        componentsProps={{
+        slotProps={{
           endDecorator: {
             sx: {
               minWidth: 24,
diff --git a/docs/data/joy/components/switch/SwitchDecorators.js b/docs/data/joy/components/switch/SwitchDecorators.js
@@ -8,7 +8,7 @@ export default function SwitchDecorators() {
   return (
     <Switch
       color={dark ? 'primary' : 'danger'}
-      componentsProps={{ input: { 'aria-label': 'dark mode' } }}
+      slotProps={{ input: { 'aria-label': 'dark mode' } }}
       startDecorator={
         <LocalFireDepartmentRoundedIcon
           sx={{ color: dark ? 'text.tertiary' : 'danger.600' }}
diff --git a/docs/data/joy/components/switch/switch-pt.md b/docs/data/joy/components/switch/switch-pt.md
@@ -49,7 +49,7 @@ To insert icon decorators, use the `startDecorator` and/or `endDecorator` props.
 
 ### Track child
 
-Target the track's children using the `componentsProps` prop to display a text inside of it.
+Target the track's children using the `slotProps` prop to display a text inside of it.
 
 {{"demo": "ExampleTrackChild.js"}}
 
@@ -74,13 +74,13 @@ Here are a few tips to make sure you have an accessible switch component:
 - The `Switch` will render with the `checkbox` role as opposed to `switch`. This is mainly because the latter isn't widely supported yet. However, if you believe your audience will support it, make sure to test with assistive technology. Use the `componentProps` prop to change the role:
 
   ```jsx
-  <Switch componentsProps={{ input: { role: 'switch' } }}>
+  <Switch slotProps={{ input: { role: 'switch' } }}>
   ```
 
 - Every form control component should have proper labels. This includes radio buttons, checkboxes, and switches. In most cases, this is done using the `<label>` element.
   - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `componentProps` prop.
   ```jsx
-  <Switch value="checkedA" componentsProps={{ 'aria-label': 'Switch A' }} />
+  <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
   ```
 
 ## Common examples
diff --git a/docs/data/joy/components/switch/switch-zh.md b/docs/data/joy/components/switch/switch-zh.md
@@ -49,7 +49,7 @@ To insert icon decorators, use the `startDecorator` and/or `endDecorator` props.
 
 ### Track child
 
-Target the track's children using the `componentsProps` prop to display a text inside of it.
+Target the track's children using the `slotProps` prop to display a text inside of it.
 
 {{"demo": "ExampleTrackChild.js"}}
 
@@ -74,13 +74,13 @@ Here are a few tips to make sure you have an accessible switch component:
 - The `Switch` will render with the `checkbox` role as opposed to `switch`. This is mainly because the latter isn't widely supported yet. However, if you believe your audience will support it, make sure to test with assistive technology. Use the `componentProps` prop to change the role:
 
   ```jsx
-  <Switch componentsProps={{ input: { role: 'switch' } }}>
+  <Switch slotProps={{ input: { role: 'switch' } }}>
   ```
 
 - Every form control component should have proper labels. This includes radio buttons, checkboxes, and switches. In most cases, this is done using the `<label>` element.
   - If a label can't be applied, make sure to add an attribute (e.g. `aria-label`, `aria-labelledby`, `title`) to the input slot inside the `componentProps` prop.
   ```jsx
-  <Switch value="checkedA" componentsProps={{ 'aria-label': 'Switch A' }} />
+  <Switch value="checkedA" slotProps={{ 'aria-label': 'Switch A' }} />
   ```
 
 ## Common examples
diff --git a/docs/data/joy/components/switch/switch.md b/docs/data/joy/components/switch/switch.md
diff --git a/docs/data/joy/components/textarea/textarea.md b/docs/data/joy/components/textarea/textarea.md
diff --git a/docs/data/joy/customization/approaches/ButtonThemes.js b/docs/data/joy/customization/approaches/ButtonThemes.js
diff --git a/docs/data/joy/main-features/automatic-adjustment/ListThemes.js b/docs/data/joy/main-features/automatic-adjustment/ListThemes.js

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ export default function ExampleButtonCheckbox() {`
`53`	`53`	`setValue((val) => val.filter((text) => text !== item));`
`54`	`54`	`}`
`55`	`55`	`}}`
`56`		`- componentsProps={{`
	`56`	`+ slotProps={{`
`57`	`57`	`action: ({ checked }) => ({`
`58`	`58`	`sx: {`
`59`	`59`	`bgcolor: checked ? 'background.surface' : 'transparent',`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@ export default function ExampleChoiceChipCheckbox() {`
`49`	`49`	`setValue((val) => val.filter((text) => text !== item));`
`50`	`50`	`}`
`51`	`51`	`}}`
`52`		`- componentsProps={{`
	`52`	`+ slotProps={{`
`53`	`53`	`action: ({ checked }) => ({`
`54`	`54`	`sx: checked`
`55`	`55`	`? {`