Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Mar 6, 2024

Conversation

alexfauquette
Copy link
Member

@alexfauquette alexfauquette commented Mar 5, 2024

Part of #41273

The customization demo is broken, because styles does not apply on the root component.

For example in the ios switch example, the width, height and padding are not applied. But other classes are working fine 🤔

const IOSSwitch = styled((props: SwitchProps) => (
  <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
))(({ theme }) => ({
  width: 42,
  height: 26,
  padding: 0,
  ...

image

About the overridesResolver I'm not sure about how the new styled react to it. It's the first time I see it used with an array

 overridesResolver: (props, styles) => {
    const { ownerState } = props;
    return [
      styles.switchBase,
      { [`& .${switchClasses.input}`]: styles.input },
      ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
    ];
  },

@mui-bot
Copy link

mui-bot commented Mar 5, 2024

Netlify deploy preview

https://deploy-preview-41367--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 5596f3f

@siriwatknp
Copy link
Member

Argos is failing, the variants conversion is somehow wrong.

@alexfauquette
Copy link
Member Author

Argos is failing, the variants conversion is somehow wrong.

Struggled a bit to find why it's failing in the docs and not in the app.

Seems it's because I verified that mainChannel exist but it's only here if you use CSS vars

- .filter(([, value]) => value.main && value.mainChannel && value.light) // check all the used fields in the style below
+ .filter(([, value]) => value.main && value.light) // check all the used fields in the style below

@siriwatknp siriwatknp added component: switch This is the name of the generic UI component, not the React module! package: pigment-css Specific to @pigment-css/* labels Mar 5, 2024
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styles for disabled looks wrong from argos.

Comment on lines 167 to 168
},
[`&.${switchClasses.disabled}`]: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
},
[`&.${switchClasses.disabled}`]: {
[`&.${switchClasses.disabled}`]: {
},

disabled style should be in checked to fix this:

image

@@ -224,6 +237,7 @@ const Switch = React.forwardRef(function Switch(inProps, ref) {
checkedIcon={icon}
ref={ref}
ownerState={ownerState}
color={color}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
color={color}

No need to pass color as a prop here, the ownerState is enough.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

legacy of the debug session 🙈

packages/mui-material/src/Switch/Switch.js Show resolved Hide resolved
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Nice!

@alexfauquette alexfauquette merged commit 1249a37 into mui:master Mar 6, 2024
19 checks passed
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Mar 8, 2024
backgroundColor: 'transparent',
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.light) // check all the used fields in the style below
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line broke our production code. We have an entry in the theme object that is sometimes undefined. This code doesn't handle that and assumes all values should be an object (which they are typically), but can also be numbers and strings. It doesn't fail there, but when the value is undefined.

Suggested change
.filter(([, value]) => value.main && value.light) // check all the used fields in the style below
.filter(([, value]) => value?.main && value?.light) // check all the used fields in the style below

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted. will fix it soon.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you create a new issue so that I can assign to myself?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: switch This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material package: pigment-css Specific to @pigment-css/*
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants