material-ui icon indicating copy to clipboard operation
material-ui copied to clipboard

Published 20 hours ago • verified publisher icon mui

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

Open siriwatknp opened this issue 1 year ago • 26 comments

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

  1. 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).

  2. 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.

  3. 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.

  4. Ensure that the Component.propTypes is followed by /* remove-proptypes */ directive.

  5. 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;
+ }

  6. 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

  1. pnpm install once
  2. 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/*
  3. 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)
  4. cd apps/pigment-css-next-app && pnpm dev
  5. Open localhost:3000/material-ui/react-<component> to check the result
  6. Attach the screenshot or recording to the PR.
  7. 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

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

Ready-to-take Components

  • [x] Accordion https://github.com/mui/material-ui/pull/41221
    • AccordionActions
    • AccordionDetails
    • AccordionSummary
  • [x] Alert https://github.com/mui/material-ui/pull/41230
    • AlertTitle
  • [x] AppBar https://github.com/mui/material-ui/pull/41247
  • [x] Autocomplete https://github.com/mui/material-ui/pull/40330
  • [x] Avatar https://github.com/mui/material-ui/pull/40324
  • [x] AvatarGroup https://github.com/mui/material-ui/pull/41485
  • [x] Backdrop https://github.com/mui/material-ui/pull/41581
  • [x] Badge https://github.com/mui/material-ui/pull/40213
    • [x] render demos https://github.com/mui/material-ui/pull/41353
  • [x] BottomNavigation https://github.com/mui/material-ui/pull/41612
    • BottomNavigationAction
  • [x] Breadcrumbs (assigned to @aacevski) https://github.com/mui/material-ui/pull/41496
  • [x] Button (assigned to @siriwatknp) https://github.com/mui/material-ui/pull/41378
    • ButtonBase
    • TouchRipple
  • [x] ButtonGroup (assigned to @zanivan) https://github.com/mui/material-ui/pull/41666
  • [x] Card (assigned to @aacevski) https://github.com/mui/material-ui/pull/41580
    • CardActionArea
    • CardActions
    • CardContent
    • CardHeader
    • CardMedia
  • [x] Checkbox (assigned to @lhilgert9) https://github.com/mui/material-ui/pull/41957
  • [x] Chip (assigned to @DiegoAndai) https://github.com/mui/material-ui/pull/41592
  • [x] CircularProgress (assigned to @siriwatknp) https://github.com/mui/material-ui/pull/41776
  • [x] Divider https://github.com/mui/material-ui/pull/41366
  • [x] Fab https://github.com/mui/material-ui/pull/41851
  • [x] FormControl https://github.com/mui/material-ui/pull/41613
    • FormControlLabel
  • [x] FormGroup https://github.com/mui/material-ui/pull/41614
  • [x] IconButton https://github.com/mui/material-ui/pull/41850
  • [x] MobileStepper https://github.com/mui/material-ui/pull/41533
  • [x] Modal https://github.com/mui/material-ui/pull/41483
  • [x] PaginationItem https://github.com/mui/material-ui/pull/41848
  • [x] Radio https://github.com/mui/material-ui/pull/41840
  • [x] Stepper https://github.com/mui/material-ui/pull/41546
    • StepButton
    • StepConnector
    • StepContent
    • StepIcon
    • StepLabel
    • Step
  • [x] SvgIcon https://github.com/mui/material-ui/pull/41779 (@aarongarciah, has .muiName attached)
  • [x] Switch https://github.com/mui/material-ui/pull/41367 (@alexfauquette)
  • [x] ToggleButton (assigned to @lhilgert9) https://github.com/mui/material-ui/pull/41782
    • ToggleButtonGroup

Will be done by a Codemod

https://github.com/mui/material-ui/pull/41743

  • [x] FormHelperText https://github.com/mui/material-ui/pull/41935
  • [x] ImageList https://github.com/mui/material-ui/pull/41935
    • ImageListItem
    • ImageListItemBar
  • [x] ListItem https://github.com/mui/material-ui/pull/41935
    • ListItemAvatar
    • ListItemButton
    • ListItemIcon
    • ListItemSecondaryAction
    • ListItemText
    • ListSubheader
  • [x] Rating https://github.com/mui/material-ui/pull/41935
  • [x] Table https://github.com/mui/material-ui/pull/41935
    • TableBody
    • TableCell
    • TableContainer
    • TableFooter
    • TableHead
    • TablePagination
    • TableRow
    • TableSortLabel
  • [x] Toolbar https://github.com/mui/material-ui/pull/41935

https://github.com/mui/material-ui/pull/42001

  • [x] Icon (has .muiName attached)
  • [x] Dialog (contains useTheme())
    • DialogActions
    • DialogContent
    • DialogContentText
    • DialogTitle
  • [x] Drawer (contains RTL logic)
  • [x] Input (has .muiName attached)
    • InputAdornment
    • InputBase << needs GlobalStyles
      • [x] FilledInput (has .muiName attached) https://github.com/mui/material-ui/pull/41663 @mj12albert
      • [x] OutlinedInput (has .muiName attached)
      • [x] TextField
      • [x] TablePagination
    • InputLabel
  • [x] Menu (contains useTheme())
    • MenuItem
    • MenuList
  • [x] LinearProgress (wait for POC from CircularProgress) https://github.com/mui/material-ui/pull/41816
  • [x] Paper - uses useTheme
  • [x] Skeleton (wait for POC from CircularProgress)
  • [x] Snackbar (contains useTheme())
    • SnackbarContent
  • [x] SpeedDial (contains useTheme())
    • SpeedDialAction
    • SpeedDialIcon
  • [x] Tabs (contains RTL logic)
    • TabScrollButton
    • Tab
  • [x] Tooltip (contains RTL logic)

Waiting for 👍

  • [x] Link
    • Need solution for extendSxProp
  • [x] Typography
    • Need solution for extendSxProp
  • ~Box~
  • [ ] Stack
  • [ ] Container
  • [ ] Grid

siriwatknp avatar Feb 26 '24 10:02 siriwatknp

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?

zanivan avatar Mar 13 '24 18:03 zanivan

@siriwatknp would like to work on Checkbox

cu8code avatar Mar 15 '24 21:03 cu8code

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?

DiegoAndai avatar Mar 18 '24 22:03 DiegoAndai

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

@DiegoAndai the Breadcrumbs was taken by aacevski a while ago https://github.com/mui/material-ui/pull/41496

siriwatknp avatar Mar 19 '24 08:03 siriwatknp

@siriwatknp would like to work on Checkbox

Assigned, thanks!

siriwatknp avatar Mar 19 '24 08:03 siriwatknp

@DiegoAndai the Breadcrumbs was taken by aacevski a while ago https://github.com/mui/material-ui/pull/41496

😅

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

DiegoAndai avatar Mar 19 '24 13:03 DiegoAndai

~~I'd like to take Popover.~~ I have opened a PR: https://github.com/mui/material-ui/pull/41564

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

aacevski avatar Mar 19 '24 21:03 aacevski

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

Assigned.

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

Assigned.

siriwatknp avatar Mar 20 '24 02:03 siriwatknp

@siriwatknp which one can I take next?

zanivan avatar Mar 20 '24 19:03 zanivan

~~I'd like to work on the Backdrop component next. :100:~~ PR has been opened: https://github.com/mui/material-ui/pull/41581

I'd like to take on BottomNavigation please.

aacevski avatar Mar 20 '24 19:03 aacevski

@siriwatknp which one can I take next?

Assigned ButtonGroup to you.

siriwatknp avatar Mar 21 '24 02:03 siriwatknp

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

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

aacevski avatar Mar 23 '24 21:03 aacevski

Can I pick up toolbar? @siriwatknp

pluvio72 avatar Mar 26 '24 13:03 pluvio72

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

mj12albert avatar Mar 26 '24 13:03 mj12albert

Can I pick up toolbar? @siriwatknp

Please do, thanks!

siriwatknp avatar Mar 28 '24 07:03 siriwatknp

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?

piotrkrajewskicn avatar Apr 02 '24 07:04 piotrkrajewskicn

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

lhilgert9 avatar Apr 02 '24 18:04 lhilgert9

@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".

siriwatknp avatar Apr 03 '24 03:04 siriwatknp

@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

lhilgert9 avatar Apr 03 '24 06:04 lhilgert9

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.

siriwatknp avatar Apr 04 '24 02:04 siriwatknp

@siriwatknp I'll work on the ToggleButton component.

lhilgert9 avatar Apr 05 '24 16:04 lhilgert9

@siriwatknp I'll work on the ToggleButton component.

Thanks! assigned.

siriwatknp avatar Apr 08 '24 03:04 siriwatknp

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

lhilgert9 avatar Apr 10 '24 11:04 lhilgert9

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

gijsbotje avatar Apr 10 '24 20:04 gijsbotje

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

lhilgert9 avatar Apr 22 '24 08:04 lhilgert9

@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 avatar Apr 23 '24 07:04 siriwatknp