search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.94k stars 32.27k forks source link

Migrate all components to emotion #24405

Closed mnajdova closed 3 years ago

mnajdova commented 3 years ago

As decided in https://github.com/mui-org/material-ui/issues/22342 we need to migrate all the components to the @mateiral-ui/styled-engine (emotion by default) API. We've already converted a dozen components. We are now confident with the approach. We have fixed most of the challenges it creates. This issue will help track the progress of the migration.

For converting a component, you can use as a template any of the already converted components, e.g #24397. We have also this migration guide in case you want to prepare yourself before starting, or in case if something is not working as expected.

This is a useful checklist to have when migrating a component:

General checklist:

Component checklist:

Here is a list of all components with their status:

Note: if you see that the components depends on some other components, then those components need to be converted first, before the component itself can be migrated.

@material-ui/core

@material-ui/lab

Once the migration of the core components is done, we can then migrate all the demos of the documentation to the sx prop (preferred) and styled API, removing all imports of withStyles and makeStyles.

Current progress 169/169 ```jsx Array.from(document.querySelectorAll('.contains-task-list')[2].children) .concat(Array.from(document.querySelectorAll('.contains-task-list')[3].children)).reduce((acc, item) => { if (item.querySelector('input[type="checkbox"]:checked')) { acc.done += 1; } acc.total += 1; return acc; }, { total: 0, done: 0 }); ```
natac13 commented 3 years ago

Let's get it done! I am really excited for V5 and craving the sx prop

ConAntonakos commented 3 years ago

I didn't get to work on one due to time (and I was slow to jump on it 😅). Would love to contribute!

I am happy to take Tabs if no one minds.

natac13 commented 3 years ago

TableSortLabel coming up.

natac13 commented 3 years ago

Alright going to try Select for my next one My mistake I think I need to do NativeInput first. Which maybe over my head... see https://github.com/mui-org/material-ui/pull/24698#issuecomment-813652968

tomasznguyen commented 3 years ago

Alright, I'll take TabPanel

tomasznguyen commented 3 years ago

I'll go with TreeView and TreeItem next.

mnajdova commented 3 years ago

FYI, I've just merged https://github.com/mui-org/material-ui/pull/25748, let's keep an eye on it when converting the rest of the components :)

vicasas commented 3 years ago

@mnajdova Does this make global classes like for example .Mui-selected stop working? I understand that now each component will have its class by name of type .Mui[Component]-selected

mnajdova commented 3 years ago

@vicasas no, global classes still work, there are no changes in the public API, we are just unifying the way of how we access the classes in the styles. See #25659 for more info

ConAntonakos commented 3 years ago

I didn't get to work on one due to time (and I was slow to jump on it 😅). Would love to contribute!

I am happy to take Tabs if no one minds.

Finally got around to migrating Tabs. And I believe I am almost done. I am confused about overrideResolver (what to pass to deepmerge) and useUtilityClasses (what to pass as slots).

siriwatknp commented 3 years ago

I didn't get to work on one due to time (and I was slow to jump on it 😅). Would love to contribute! I am happy to take Tabs if no one minds.

Finally got around to migrating Tabs. And I believe I am almost done. I am confused about overrideResolver (what to pass to deepmerge) and useUtilityClasses (what to pass as slots).

@ConAntonakos Oh no, just saw your comment that the Tabs migration is almost done 😢

vicasas commented 3 years ago

The components we have in the lab written with Typescript should they be migrated using Typescript or should they pass to JavaScript like all other components?

oliviertassinari commented 3 years ago

TypeScript, unless there is a good reason not too.

mnajdova commented 3 years ago

Looks like we finished the migration of all core components 🥳 We have around 2/3 left in the lab and we will be done with those too ✔️ Thanks a lot to everyone that contributed 🙏

siriwatknp commented 3 years ago

@mnajdova are the pickers ready to be picked up?

oliviertassinari commented 3 years ago

are the pickers ready to be picked up?

This sounds like a question for @eps1lon. Without the context, I would assume the answer is yes (so we only bundle one CSS-in-JS engine) unless there is a planned change that could happen before, making the migration to emotion more efficient?

eps1lon commented 3 years ago

Pickers should be good to go.

vicasas commented 3 years ago

For some unknown reason, some Backdrop component files were lost post-migration (#24523).

The files are:

[component]Classes.d.ts [component]Classes.js

mnajdova commented 3 years ago

@vicasas they were moved to the @material-ui/unstyled package

anurodhmohapatra commented 3 years ago

I have one query. I was reading v5 beta documentation and was looking at some code. As MUI migrating to emotion. In documentation are you going to use backticks or object method for styling?

const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }) => ({
    flexGrow: 1,
    padding: theme.spacing(3),
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    marginLeft: `-${drawerWidth}px`,
    ...(open && {
      transition: theme.transitions.create('margin', {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen,
      }),
      marginLeft: 0,
    }),
  }),
);
oliviertassinari commented 3 years ago

In documentation are you going to use backticks or object method for styling?

@anurodhmohapatra We use the JavaScript object syntax to one exception. We use the CSS template for the customization demos with the unstyled components.

natac13 commented 3 years ago

In documentation are you going to use backticks or object method for styling?

@anurodhmohapatra We use the JavaScript object syntax to one exception. We use the CSS template for the customization demos with the unstyled components.

And correct me if I am wrong but when there are key frames involved? Such as circular progress?

anurodhmohapatra commented 3 years ago

In documentation are you going to use backticks or object method for styling?

@anurodhmohapatra We use the JavaScript object syntax to one exception. We use the CSS template for the customization demos with the unstyled components.

@oliviertassinari This means we will be getting JavaScript object syntax out of the box which we can modify to customise it. If there is any element which is unstyled we will use tagged template literals(backticks) for styling. Am I right? Or is there any other best practice?

oliviertassinari commented 3 years ago

Well done everybody in the migration! 👏