search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.22k stars 31.73k forks source link

[material-ui] Standardize slots pattern and composed classes #40417

Open DiegoAndai opened 5 months ago

DiegoAndai commented 5 months ago

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

Follow-up work:

harry-whorlow commented 5 months ago

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

DiegoAndai commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

harry-whorlow commented 5 months ago

@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 commented 4 months ago

Hey @sai6855, @harry-whorlow

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

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:

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 commented 4 months ago

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

DiegoAndai commented 4 months ago

Hey @sai6855 @harry-whorlow @lhilgert9! The initial codemods PR is merged 🎉

You should be able to follow that PR to update your PRs accordingly and add codemods for

Feel free to let us know if you need guidance for the codemods, and again, thanks a lot for working on this.

The migration guide PR is also up but has not been merged yet. When we merge that, we'll also have to update the PRs accordingly.

For composed classes, we'll have to wait a bit; I'm working on a POC for that, as I want to cover both style overrides and CSS files. I'll keep you updated.

Thanks @siriwatknp!

sai6855 commented 4 months ago

hey @DiegoAndai i've found a bug in accordion-props codemod PR and created a PR for it https://github.com/mui/material-ui/pull/40855, can you check that as well.

off-topic: can you add https://github.com/mui/material-ui/pull/40687 to this issue description

DiegoAndai commented 4 months ago

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 commented 4 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

@sai6855, what are we missing for the Pagination components? Are we done after https://github.com/mui/material-ui/pull/41145?

sai6855 commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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

skmanoj322 commented 3 months ago

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