[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!

[DiegoAndai]

Hi @harry-whorlow! Sorry for not replying earlier, I saw your comment, but I missed the edit.

Is that correct? Or have I gone off on a tangent?

Correct, that's the general idea 🙌🏼. Regarding the details, I'll review the Backdrop PR now and we can continue the discussion there 😊.

I updated the description to move the Backdrop component to in progress.

[DiegoAndai]

I updated the description to add another deprecation case: components and componentsProps. These should be addressed in a separate PR.

[harry-whorlow]

@DiegoAndai I would like to pick up speedDial, with regards to the deprecations of components and componentsProps, since I've gotten the gist of what to do.

If you can mark it that would be awesome!🫡

[DiegoAndai]

Hey @sai6855, @harry-whorlow

We decided that alongside the deprecations, we'll also add:

• Codemods for switching to the new APIs
• Migration guide for switching to the new APIs

This is so users can immediately deal with the deprecations when they appear. It will also help avoid users getting nervous with so many deprecations.

We already started working on this. This is the plan:

• @siriwatknp will set up the codemods and add the initial codemod for the Accordion's TransitionComponent and TransitionProps
• @DiegoAndai will set up the migration guide in the docs and add the initial documentation for the Accordion's TransitionComponent and TransitionProps
• After that, each deprecation PR should add their respective codemods and documentation

Does that sound good to you? We'll put the current PRs on hold while we set up the codemods and migration guide. We hope to do this quickly so we can unblock the PRs.

[sai6855]

@DiegoAndai Sounds good !! I'll wait for codemods and migration guide and update PRs accordingly

[sai6855]

@sai6855, what are we missing for the Pagination components? Are we done after #41145?

sorry missed this, PaginationItem does have components prop that needs to be deprecated. it also has slots prop but doesn't have componentProps and slotProps.

where as Pagination component doesn't have composed classes and *ComponentProps *Component, so i think we can mark Pagination as done but not PaginationItem

[DiegoAndai]

Hey everyone! This issue was getting too big and hard to track, so I converted it into an umbrella issue and split the different deprecation initiatives into their own separate issues.

[harry-whorlow]

To be honest, it's now easier to understand whats going on, and what is still required... Thanks!

[skmanoj322]

@sai6855 @harry-whorlow @DiegoAndai i have opened pr for Badge #41364 please provide the feedback

[DiegoAndai]

I'm closing this issue. It is no longer helpful as an umbrella: the sub-issues diverged in scope and outgrew this issue. You can follow each sub-issues' progress independently, they're all listed in the description.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.