[material-ui] Standardize slots pattern and composed classes

[DiegoAndai]

Contributing

Feel free to take any components that are not done or in progress. Please mention this issue in your PR so we can link it in the description and keep it up to date.

Issues

• [material-ui] Deprecate components and componentsProps props #41279
• [material-ui] Deprecate *Component and *Props props #41281
• [material-ui] Deprecate composed CSS classes #41282
• [docs-infra] JSDoc links are broken #42361
• [Popover] function for slotProps.paper isn't working #42310
• [material-ui] Fix slotProps.transition types #45214

Follow-up work:

• [docs][material-ui] Improve documentation regarding slot pattern #42183
• [material-ui] Avoid ownerState silent propagation #42184
• [material-ui] Restructure so nested slots are not needed #41374
• [material-next][Chip] Implement slots pattern and improve focus state #39171
• [material-ui] Improve slot.transition types #40650

[harry-whorlow]

@DiegoAndai, can I help out with this task? if so where can I find the replacement documentation?

[DiegoAndai]

Hey @harry-whorlow, thanks for the interest!

I've just started working on this initiative, so I can't share documentation yet. When I do, I'll share it here and add the ready-to-take label 😊 That should come in the following weeks.

If you're eager to help, I recommend looking for issues with the ready-to-take label.

[DiegoAndai]

Hey @harry-whorlow, I added contributing instructions in the description 😊

If you're still interested, feel free to take any of the components that are not done or in progress.

cc: @sai6855 for the updated contributing guide 😊

[harry-whorlow]

Hi @DiegoAndai, awesome man thanks for the heads up... I'll get right onto it

I would like to take backdrop, as it seems like a good first one to pick up? I can't edit your list to mark it as "in progress" though, so perhaps you can mark it when you get the chance. Thanks!

[edit]:
just so I understand the objective here (we'll use my backdrop as an example).

Backdrop has a prop of "TransitionComponent" as shown in the Backdrop.d.ts, this is going to be replaced by the "slot.transition". Now, backdrop doesn’t have as You put it "*props prop" or would it be considered transitionDuration? so I don't need to worry about that. Correct so far?

The rest of it is is as follows
-updating the component to make it work with the new "slot.transition"
-add some backward compatibility like you did on line 177-183 in packages/mui-material/src/Accordion/Accordion.js
-update the d.ts for backdrops
-update the docs to reflect new slot prop
-add and fix test

Is that correct? Or have I gone off on a tangent?
Either way, thanks for any advice in advance!