Skip to content

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

New issue
New issue
Closed
#42693
Closed
[material-ui] Convert Material UI components to support Pigment CSS#41273
#42693
Assignees
siriwatknp
Labels
umbrellaFor grouping multiple issues to provide a holistic viewv6.x
Milestone
v6.0.0
@siriwatknp

Description

@siriwatknp
siriwatknp
opened on Feb 26, 2024

Left over components

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

Will be done by a Codemod

#41743

#42001

  • Icon (has .muiName attached)
  • Dialog (contains useTheme())
    • DialogActions
    • DialogContent
    • DialogContentText
    • DialogTitle
  • Drawer (contains RTL logic)
  • Input (has .muiName attached)
  • Menu (contains useTheme())
    • MenuItem
    • MenuList
  • LinearProgress (wait for POC from CircularProgress) [material-ui] Convert LinearProgress to support Pigment CSS #41816
  • Paper - uses useTheme
  • Skeleton (wait for POC from CircularProgress)
  • Snackbar (contains useTheme())
    • SnackbarContent
  • SpeedDial (contains useTheme())
    • SpeedDialAction
    • SpeedDialIcon
  • Tabs (contains RTL logic)
    • TabScrollButton
    • Tab
  • Tooltip (contains RTL logic)

Waiting for 👍

  • Link
    • Need solution for extendSxProp
  • Typography
    • Need solution for extendSxProp
  • Box
  • SwipeableDrawer

Metadata

Metadata

Assignees

Labels

umbrellaFor grouping multiple issues to provide a holistic viewv6.x

Projects

Material UI public roadmap

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions