[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
• ON HOLD: [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
• Update https://mui.com/material-ui/transitions/#transitioncomponent-prop

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 and TransitionProps 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]

hey @DiegoAndai i've found a bug in accordion-props codemod PR and created a PR for it #40855, can you check that as well.

off-topic: can you add #40687 to this issue description

[DiegoAndai]

Hey everyone! The migration guide is merged 🎉

This means we're ready to move forward with the components, componentsProps, *Component, and *Props props PRs. I'll review the existing PRs and comment on what's missing.

We're missing some codemod details for composed classes. I'll try to have an answer for that this week. I'll keep you updated.

[DiegoAndai]

Hey everyone! The first codemod classes codemod PR is merged 🎉

We can now move forward with the composed classes deprecation. We should update the open composed classes PRs.

[skmanoj322]

Hey @DiegoAndai
I am planning to take up the Autocomplete (taking the reference of Avatar)

Saw the docs/pages/material-ui/api/autocomplete.json I was able to figure out that we have to deprecate the ChipsProps and ComponentsProps (correct me if i am wrong).

Also I am finding difficult to identify the Composed classes. can you give me some more references on this?

cc: @sai6855 and @harry-whorlow feel free to share your thoughts

[harry-whorlow]

Hi @skmanoj322, I thats the general gist of what were doing... although @DiegoAndai is the source of truth when it comes to this.

I wouldn’t worry about composed classes for now, as these are supposed to be deprecated in different PR's, so you could start on the ComponentsProps whilst you wait for a response.

(I should stress that I'm just a code monkey, so please don't take what I've said as fact. Nor am I responsible for organising people, these are just my thoughts.)

But welcome aboard!

[DiegoAndai]

Hey @skmanoj322! thanks for the interest!

The Autocomplete is a complex component, the props to deprecate would be: ChipProps, componentsProps, ListboxComponent, ListboxProps, PaperComponent, and PopperComponent 😅

I would recommend starting with another one so you can get the hang of it. That would also give us time to improve the structure to make the work on the Autocomplete easier. I would recommend starting with the Badge's components and componentsProps props. What do you think?

[DiegoAndai]

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

[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