[base] components -> slots API rename

[michaldudak]

As discussed in #33416 and #34080, this PR:

• renames the components prop to slots
• renames the componentsProps prop to slotProps
• changes casing in slots' fields from Pascal-case to camelCase (Root -> root)

The above changes were implemented only in MUI Base.
In cases where a Base component is used in a Material UI component (Badge, Modal, Popper, Slider), the new props were added to the Material UI code and alongside the old ones, so that there are no breaking changes in the stable package.

Breaking change

• Change all occurrences of components and componentsProps props in Base components to slots and slotProps, respectively.
• Change casing of slots' fields to camelCase

-<SwitchUnstyled components={{Root: CustomRoot}} componentsProps={{rail: { className: 'custom-rail' }}} />
+<SwitchUnstyled slots={{root: CustomRoot}} slotProps={{rail: { className: 'custom-rail' }}} />

There is a codemod that can help to deal with the breaking changes.
It will rename the props of unstyled components. However, if there are any custom components wrapping the Base ones, their props won't be affected by the codemod and must by renamed manually.

Run the following command to execute the codemod:

npx @mui/codemod v5.0.0/base-rename-components-to-slots <path>

---

cc @flaviendelangle

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: +0.24% , gzip: +0.38%
@material-ui/unstyled: parsed: -0.39% 😍, gzip: +0.06%
@mui/material-next: parsed: -0.04% 😍, gzip: +0.21%

Generated by 🚫 dangerJS against babd354

[mnajdova]

@michaldudak what do you think about accompanying this change with a codemod? It shouldn't be complicated to be written considering we have similar codemods. We could target all imports in @mui/base for the components.

Another idea for making the transition easier will be to warn in the components if some of the old props are used.

[michaldudak]

what do you think about accompanying this change with a codemod? It shouldn't be complicated to be written considering we have similar codemods. We could target all imports in @mui/base for the components.

Sure, I can try writing one. However, it won't cover (userland) components built on top of Base components, so it may give a false sense of security.

Another idea for making the transition easier will be to warn in the components if some of the old props are used.

We can do this in Material UI as both old and new APIs will be used in parallel. I wouldn't do this immediately after introducing the new API, though. Let's create a gentler introduction in the docs first and then, closer to deprecation we can have a warning.

[siriwatknp]

The overall changes look good to me. Are you going to add the codemod in this PR or in a separate one?

[michaldudak]

I'll create it in this PR.

[samuelsycamore]

This name change makes statements like this so much easier to understand! 🙌

[samuelsycamore]

Docs look great! I think these concepts are much easier to grasp as a result of these changes, and it's clear right away when you see the differences in the docs.

[siriwatknp]

👍 The codemod looks good to me.