[material-ui] Convert Material UI components to support Pigment CSS #41273

siriwatknp · 2024-02-26T10:00:34Z

The rest of the tasks will be done by a codemod.

Thank you for past contributions

Contribution is welcome

The focus of Material UI v6 is to support static CSS extraction, and we are excited to invite the community to be a part of it!

For short context, the static extraction is done by our in-house styling-engine package, aka Pigment CSS. You can think of it as a replacement for Emotion/Styled-components. We must add an intermediate path to let the components support both Pigment CSS and Emotion.

The goal of this issue is to track the progress of the work with guidance on how to contribute and check the result. Explanation about Pigment CSS is out-of-scope. But you can visit the README for more info.

Contributing

Pick a component from the Ready-to-take section below. Tag @siriwatknp in the comment to assign to you (for example, if you take Accordion, Accordion* must be included in your PR).
Fork the repo (if you are a new contributor, please check the contributing first) and open the component implementation, e.g. packages/mui-material/src/Avatar/Avatar.js.
Change the path import of these APIs, styled, useThemeProps, keyframes to ../zero-styled:
```
…
- import styled from '../styles/styled';
- import useThemeProps from '../styles/useThemeProps';
+ import { styled, createUseThemeProps } from '../zero-styled';
…the rest of the imports

const useThemeProps = createUseThemeProps('MuiAvatar');

…
```
💡 For useThemeProps, replace it with createUseThemeProps and call the function with a string that has the same value as useThemeProps({ props: inProps, name: <string> }) in the component implementation. Take a look at the Alert PR for example.
Ensure that the Component.propTypes is followed by /* remove-proptypes */ directive.

Check the component before attaching properties, e.g. in Divider:

// packages/mui-material/src/Divider/Divider.js:222
- Divider.muiSkipListHighlight = true;
+ if (Divider) {
+   Divider.muiSkipListHighlight = true;
+ }

Update styles implementation, see Converting styles below

Converting styles

Most of the time, you will have to convert styles interpolation to variants.

Move ownerState from the root style argument callback to variants

Before:

const AccordionRoot = styled(Paper, {
 …
})({ theme, ownerState }) => ({
    ...(!ownerState.square && {
      borderRadius: 0,
      '&:first-of-type': {
        borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
        borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
      },
      '&:last-of-type': {
        borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
        borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
        // Fix a rendering issue on Edge
        '@supports (-ms-ime-align: auto)': {
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,
        },
      },
    }),
    ...(!ownerState.disableGutters && {
      [`&.${accordionClasses.expanded}`]: {
        margin: '16px 0',
      },
    }),
  })

After:

const AccordionRoot = styled(Paper, {
 …
})({ theme }) => ({ // there must be NO `ownerState` here.
    variants: [
      {
        props: { square: false },
        style: {
          borderRadius: 0,
          '&:first-of-type': {
            borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
            borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
          },
          '&:last-of-type': {
            borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
            borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
            // Fix a rendering issue on Edge
            '@supports (-ms-ime-align: auto)': {
              borderBottomLeftRadius: 0,
              borderBottomRightRadius: 0,
            },
          },
        },
      },
      {
        props: { disableGutters: false },
        style: {
          [`&.${accordionClasses.expanded}`]: {
            margin: '16px 0',
          }
        }
      }
    ]
  })

Use Object.entries(theme.palette) to populate colors

Before:

({ theme, ownerState }) => {
  return {
    ...theme.typography.body2,
    backgroundColor: 'transparent',
    display: 'flex',
    padding: '6px 16px',
    ...(ownerState.color &&
      ownerState.variant === 'standard' && {
        color: theme.vars
          ? theme.vars.palette.Alert[`${color}Color`]
          : getColor(theme.palette[color].light, 0.6),
        backgroundColor: theme.vars
          ? theme.vars.palette.Alert[`${color}StandardBg`]
          : getBackgroundColor(theme.palette[color].light, 0.9),
        [`& .${alertClasses.icon}`]: theme.vars
          ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
          : {
              color: theme.palette[color].main,
            },
      }),
}

After:

({ theme }) => {
  return {
    ...theme.typography.body2,
    backgroundColor: 'transparent',
    display: 'flex',
    padding: '6px 16px',
    variants: [
      ...Object.entries(theme.palette)
        .filter(([, value]) => value.main && value.light) // check all the used fields in the style below
        .map(([color]) => ({
          props: { colorSeverity: color, variant: 'standard' },
          style: {
            color: theme.vars
              ? theme.vars.palette.Alert[`${color}Color`]
              : getColor(theme.palette[color].light, 0.6),
            backgroundColor: theme.vars
              ? theme.vars.palette.Alert[`${color}StandardBg`]
              : getBackgroundColor(theme.palette[color].light, 0.9),
            [`& .${alertClasses.icon}`]: theme.vars
              ? { color: theme.vars.palette.Alert[`${color}IconColor`] }
              : {
                  color: theme.palette[color].main,
                },
          },
        })),
    ]
}

Example: https://github.com/mui/material-ui/pull/41230/files?diff=unified&w=0#diff-c2a97485bf897f10a4ae2116d86ea7d6eaed078be9781d4181b1a5bbf02ae170R60-R77

Render demos

pnpm install once
Run the script using node scripts/pigmentcss-render-mui-demos.mjs react-alert (replace react-alert with the component you are working on; the react-* must be one of https://mui.com/material-ui/*
Update the component and build all packages once with pnpm build. (If you update the component again, you only need to build mui-material package with pnpm --filter @mui/material run build)
cd apps/pigment-css-next-app && pnpm dev
Open localhost:3000/material-ui/react-<component> to check the result
Attach the screenshot or recording to the PR.
If you encounter any errors, please attach a screenshot of the error in the PR comment. (Feel free to open the PR even if you got an error)

Open a PR

using a title [material-ui][<Component>] Convert to support CSS extraction
Tag @siriwatknp to review
The argos CI should be green (this ensures that it still works with emotion/styled-components)

Ready-to-take Components

Will be done by a Codemod

#41743

FormHelperText [material-ui] Support CSS Extraction using codemod #41935
ImageList [material-ui] Support CSS Extraction using codemod #41935
- ImageListItem
- ImageListItemBar
ListItem [material-ui] Support CSS Extraction using codemod #41935
- ListItemAvatar
- ListItemButton
- ListItemIcon
- ListItemSecondaryAction
- ListItemText
- ListSubheader
Rating [material-ui] Support CSS Extraction using codemod #41935
Table [material-ui] Support CSS Extraction using codemod #41935
- TableBody
- TableCell
- TableContainer
- TableFooter
- TableHead
- TablePagination
- TableRow
- TableSortLabel
Toolbar [material-ui] Support CSS Extraction using codemod #41935

#42001

Waiting for 👍

The text was updated successfully, but these errors were encountered:

zanivan · 2024-03-13T18:34:05Z

Hey @siriwatknp on step 4 of Render demos, shouldn't it be cd apps/pigment-css-next-app && pnpm install && pnpm dev instead of cd apps/pigment-next-app && pnpm install && pnpm dev?

cu8code · 2024-03-15T21:00:34Z

@siriwatknp would like to work on Checkbox

DiegoAndai · 2024-03-18T22:37:07Z

I assigned the Breadcrumbs component to myself to work on them this week 👍🏼

It uses Typography though 🤔

const BreadcrumbsRoot = styled(Typography, {
  name: 'MuiBreadcrumbs',
  slot: 'Root',
  overridesResolver: (props, styles) => {
    return [{ [`& .${breadcrumbsClasses.li}`]: styles.li }, styles.root];
  },
})({});

Is that a blocker given that the Typography component is on hold?

siriwatknp · 2024-03-19T08:02:08Z

I assigned the Breadcrumbs component to myself to work on them this week 👍🏼

@DiegoAndai the Breadcrumbs was taken by aacevski a while ago #41496

siriwatknp · 2024-03-19T08:04:15Z

@siriwatknp would like to work on Checkbox

Assigned, thanks!

DiegoAndai · 2024-03-19T13:49:21Z

@DiegoAndai the Breadcrumbs was taken by aacevski a while ago #41496

😅

@siriwatknp is the Chip taken? If not, I can take it.

aacevski · 2024-03-19T21:39:45Z

~~I'd like to take Popover.~~ I have opened a PR: #41564

Next up, I'd like to work on the Card component.

siriwatknp · 2024-03-20T02:20:28Z

is the Chip taken? If not, I can take it.

Assigned.

Next up, I'd like to work on the Card component.

Assigned.

zanivan · 2024-03-20T19:18:09Z

@siriwatknp which one can I take next?

aacevski · 2024-03-20T19:25:07Z

~~I'd like to work on the Backdrop component next. 💯~~ PR has been opened: #41581

I'd like to take on BottomNavigation please.

siriwatknp · 2024-03-21T02:33:16Z

@siriwatknp which one can I take next?

Assigned ButtonGroup to you.

aacevski · 2024-03-23T21:03:53Z

~~I'd like to work on FormControl next up. 🙌🏼~~ PR opened.

~~Next I'd like to take on FormGroup.~~ PR opened.

pluvio72 · 2024-03-26T13:11:02Z

Can I pick up toolbar? @siriwatknp

mj12albert · 2024-03-26T13:21:57Z

For FilledInput (PR), we don't have a dedicated docs page/demo, how can we progress this? @siriwatknp

siriwatknp · 2024-03-28T07:15:30Z

Can I pick up toolbar? @siriwatknp

Please do, thanks!

piotrkrajewskicn · 2024-04-02T07:29:36Z

Hi @siriwatknp
I'm working on a project dependent on MUI and we would need the zero runtime CSS for a next step in the project.
We're happy to contribute with our time to the MUI repo with the rewrite if it can help to speed up the works and the new version release.
But basically wondering if us spending some extra time will actually make things faster or is there a fixed release schedule anyway?

lhilgert9 · 2024-04-02T18:42:29Z

@siriwatknp I'll take the Select-component. Should I also change the NativeSelectInput or is that something for the Input-component.

siriwatknp · 2024-04-03T03:06:26Z

@siriwatknp I'll take the Select-component. Should I also change the NativeSelectInput or is that something for the Input-component.

The Input needs a GlobalStyles (not done yet). Can you pick one from the "Ready-to-take Component".

lhilgert9 · 2024-04-03T06:55:32Z

@siriwatknp I was wondering myself why the Select component was in the ready to take section. Then just assign me a component and I can work through it. Thanks

siriwatknp · 2024-04-04T02:59:17Z

Hi @siriwatknp I'm working on a project dependent on MUI and we would need the zero runtime CSS for a next step in the project. We're happy to contribute with our time to the MUI repo with the rewrite if it can help to speed up the works and the new version release. But basically wondering if us spending some extra time will actually make things faster or is there a fixed release schedule anyway?

Thanks! We aim for May but it's not a fixed schedule. The faster we finish this issue, the faster we can do the stable release.

lhilgert9 · 2024-04-05T16:08:34Z

@siriwatknp I'll work on the ToggleButton component.

siriwatknp · 2024-04-08T03:59:08Z

@siriwatknp I'll work on the ToggleButton component.

Thanks! assigned.

lhilgert9 · 2024-04-10T11:01:15Z

@siriwatknp I would like to work on the Radio next.

gijsbotje · 2024-04-10T20:32:19Z

@siriwatknp I've taken the liberty of converting the PaginationItem (#41848), IconButton (#41850) and Fab (#41851)

lhilgert9 · 2024-04-22T08:32:31Z

@siriwatknp I would like to work on the Icon next.

siriwatknp · 2024-04-23T07:03:12Z

@siriwatknp I would like to work on the Icon next.

Hey, thanks for asking but the rest will be done by the codemod. Thank you so much!

siriwatknp added umbrella For grouping multiple issues to provide a holistic view package: material-ui Specific to @mui/material v6.x labels Feb 26, 2024

siriwatknp added this to the Material UI: v6 milestone Feb 26, 2024

siriwatknp changed the title ~~[WIP][material-ui][zero] Convert Material UI components to support Zero~~ [material-ui][zero] Convert Material UI components to support Zero Mar 1, 2024

siriwatknp changed the title ~~[material-ui][zero] Convert Material UI components to support Zero~~ [material-ui][zero] Convert Material UI to support static CSS extraction Mar 2, 2024

siriwatknp changed the title ~~[material-ui][zero] Convert Material UI to support static CSS extraction~~ [material-ui][zero] Convert Material UI to support CSS extraction Mar 2, 2024

siriwatknp mentioned this issue Mar 4, 2024

[pigment-css][material-ui] Render badge demos #41353

Merged

1 task

sai6855 mentioned this issue Mar 5, 2024

[material-ui][Divider] Convert to support CSS extraction #41366

Merged

1 task

alexfauquette mentioned this issue Mar 5, 2024

[material-ui][Switch] Convert to support CSS extraction #41367

Merged

danilo-leal changed the title ~~[material-ui][zero] Convert Material UI to support CSS extraction~~ [material-ui] Convert Material UI to support CSS extraction Mar 5, 2024

danilo-leal changed the title ~~[material-ui] Convert Material UI to support CSS extraction~~ [material-ui] Convert Material UI components to support CSS extraction Mar 5, 2024

sai6855 mentioned this issue Mar 13, 2024

[material-ui][Modal] Support CSS extraction #41483

Merged

1 task

zanivan mentioned this issue Mar 13, 2024

[material-ui][AvatarGroup] Convert to support CSS extraction #41485

Merged

1 task

siriwatknp added the on hold There is a blocker, we need to wait label Mar 14, 2024

mnajdova mentioned this issue Mar 14, 2024

[joy-ui][ButtonGroup] Using css pseudo selectors for button group styles #41456

Closed

1 task

o-alexandrov mentioned this issue Mar 20, 2024

[RFC] Zero-runtime CSS-in-JS implementation #38137

Open

siriwatknp removed the on hold There is a blocker, we need to wait label Mar 25, 2024

zanivan mentioned this issue Mar 26, 2024

[material-ui][ButtonGroup] Convert to support CSS extraction #41666

Merged

1 task

siriwatknp mentioned this issue Apr 2, 2024

[codemod] Add styled v6 transformation #41743

Merged

1 task

danilo-leal changed the title ~~[material-ui] Convert Material UI components to support CSS extraction~~ [material-ui] Convert Material UI components to support Pigment CSS Apr 4, 2024

siriwatknp mentioned this issue Apr 5, 2024

[material-ui] Convert CircularProgress to support Pigment CSS #41776

Merged

1 task

aarongarciah mentioned this issue Apr 5, 2024

[material-ui][SvgIcon] Convert to support CSS extraction #41779

Merged

lhilgert9 mentioned this issue Apr 5, 2024

[material-ui][ToggleButton] Convert to support CSS extraction #41782

Merged

1 task

siriwatknp mentioned this issue Apr 9, 2024

[material-ui] Convert LinearProgress to support Pigment CSS #41816

Merged

1 task

lhilgert9 mentioned this issue Apr 10, 2024

[material-ui][Radio] Convert to support CSS extraction #41840

Merged

1 task

This was referenced Apr 11, 2024

[material-ui][FloatingActionButton] Convert to support CSS extraction #41851

Merged

[material-ui][PaginationItem] Convert to support CSS extraction #41848

Merged

[material-ui][IconButton] Convert to support CSS extraction #41850

Merged

mirus-ua mentioned this issue Apr 15, 2024

add types Hacker0x01/react-datepicker#4592

Closed

3 tasks

lhilgert9 mentioned this issue Apr 18, 2024

[material-ui][Checkbox] Convert to support CSS extraction #41957

Merged

1 task

siriwatknp self-assigned this Apr 22, 2024

siriwatknp mentioned this issue Apr 22, 2024

[material-ui] Migrate components to support CSS extraction #42001

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui] Convert Material UI components to support Pigment CSS #41273

[material-ui] Convert Material UI components to support Pigment CSS #41273

siriwatknp commented Feb 26, 2024 •

edited

Contribution is welcome

Contributing

Converting styles

Render demos

Open a PR

zanivan commented Mar 13, 2024 •

edited

cu8code commented Mar 15, 2024 •

edited

DiegoAndai commented Mar 18, 2024 •

edited

siriwatknp commented Mar 19, 2024

siriwatknp commented Mar 19, 2024

DiegoAndai commented Mar 19, 2024

aacevski commented Mar 19, 2024 •

edited

siriwatknp commented Mar 20, 2024

zanivan commented Mar 20, 2024

aacevski commented Mar 20, 2024 •

edited

siriwatknp commented Mar 21, 2024

aacevski commented Mar 23, 2024 •

edited

pluvio72 commented Mar 26, 2024 •

edited

mj12albert commented Mar 26, 2024 •

edited

siriwatknp commented Mar 28, 2024

piotrkrajewskicn commented Apr 2, 2024

lhilgert9 commented Apr 2, 2024 •

edited

siriwatknp commented Apr 3, 2024

lhilgert9 commented Apr 3, 2024

siriwatknp commented Apr 4, 2024

lhilgert9 commented Apr 5, 2024

siriwatknp commented Apr 8, 2024

lhilgert9 commented Apr 10, 2024

gijsbotje commented Apr 10, 2024 •

edited

lhilgert9 commented Apr 22, 2024

siriwatknp commented Apr 23, 2024

[material-ui] Convert Material UI components to support Pigment CSS #41273

[material-ui] Convert Material UI components to support Pigment CSS #41273

Comments

siriwatknp commented Feb 26, 2024 • edited

Contribution is welcome

Contributing

Converting styles

Render demos

Open a PR

Ready-to-take Components

Will be done by a Codemod

Waiting for 👍

zanivan commented Mar 13, 2024 • edited

cu8code commented Mar 15, 2024 • edited

DiegoAndai commented Mar 18, 2024 • edited

siriwatknp commented Mar 19, 2024

siriwatknp commented Mar 19, 2024

DiegoAndai commented Mar 19, 2024

aacevski commented Mar 19, 2024 • edited

siriwatknp commented Mar 20, 2024

zanivan commented Mar 20, 2024

aacevski commented Mar 20, 2024 • edited

siriwatknp commented Mar 21, 2024

aacevski commented Mar 23, 2024 • edited

pluvio72 commented Mar 26, 2024 • edited

mj12albert commented Mar 26, 2024 • edited

siriwatknp commented Mar 28, 2024

piotrkrajewskicn commented Apr 2, 2024

lhilgert9 commented Apr 2, 2024 • edited

siriwatknp commented Apr 3, 2024

lhilgert9 commented Apr 3, 2024

siriwatknp commented Apr 4, 2024

lhilgert9 commented Apr 5, 2024

siriwatknp commented Apr 8, 2024

lhilgert9 commented Apr 10, 2024

gijsbotje commented Apr 10, 2024 • edited

lhilgert9 commented Apr 22, 2024

siriwatknp commented Apr 23, 2024

siriwatknp commented Feb 26, 2024 •

edited

zanivan commented Mar 13, 2024 •

edited

cu8code commented Mar 15, 2024 •

edited

DiegoAndai commented Mar 18, 2024 •

edited

aacevski commented Mar 19, 2024 •

edited

aacevski commented Mar 20, 2024 •

edited

aacevski commented Mar 23, 2024 •

edited

pluvio72 commented Mar 26, 2024 •

edited

mj12albert commented Mar 26, 2024 •

edited

lhilgert9 commented Apr 2, 2024 •

edited

gijsbotje commented Apr 10, 2024 •

edited