Bump @mui/monorepo and MUI Core packages

[siriwatknp]

This bump fixes the dark mode flicker for MUI X docs.
All MUI X pages now use CSS theme variables.

• I have followed (at least) the PR section of the contributing guide.

[github-actions]

Thanks for adding a type label to the PR! 👍

[mui-bot]

Deploy preview: https://deploy-preview-17062--material-ui-x.netlify.app/

Updated pages:

• docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md

Generated by 🚫 dangerJS against d70ed0f

[siriwatknp]

🤔 Not sure why argos is failing. I don't think it's related to the monorepo?

[alexfauquette]

🤔 Not sure why argos is failing. I don't think it's related to the monorepo?

It's just flaky CI 👍

[LukasTy]

Nice work, thanks for addressing the theme and RTL switching performance and issues. 🙌 💯

[alexfauquette]

I added a fix for this demo. It's the only one I found with dark theme issue

https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/features/

[alexfauquette]

Thanks for taking care of it

I noticed some theme.applyStyle('dark', { ... }) and theme.applyDarkStyle({ ... }) is their one to prefer compare to the other?

[LukasTy]

Good spot @alexfauquette! 👍
Here are some other problematic cases after a thorough checking:

• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/row-height/#row-spacing
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/editing/#apiref
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/components/toolbar/#custom-elements
• opening https://deploy-preview-17062--material-ui-x.netlify.app/x/react-date-pickers/custom-field/ forces a light theme
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-date-pickers/custom-field/#using-joy-ui
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-charts/styling/#overlay (both section demos)
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-charts/styling/#css
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-tree-view/simple-tree-view/customization/#gmail-clone
• All inputs are white when edit mode is triggered: https://deploy-preview-17062--material-ui-x.netlify.app/x/react-tree-view/rich-tree-view/editing/
• Borked theme: https://deploy-preview-17062--material-ui-x.netlify.app/x/react-date-pickers/date-picker/#customization

This demo in general needs dark theme adjustments: https://next.mui.com/x/react-data-grid/style/#striped-rows

@siriwatknp do you have time to fix these or should we split the fixes among the team? 🤔

[alexfauquette]

Thanks for your laser vision scan ;)

The same list with checkboxes to know which are done

• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/row-height/#row-spacing
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/editing/#apiref
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/components/toolbar/#custom-elements
• opening https://deploy-preview-17062--material-ui-x.netlify.app/x/react-date-pickers/custom-field/ forces a light theme
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-date-pickers/custom-field/#using-joy-ui
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-charts/styling/#overlay (both section demos)
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-charts/styling/#css
• https://deploy-preview-17062--material-ui-x.netlify.app/x/react-tree-view/simple-tree-view/customization/#gmail-clone
• All inputs are white when edit mode is triggered: https://deploy-preview-17062--material-ui-x.netlify.app/x/react-tree-view/rich-tree-view/editing/
• Borked theme: https://deploy-preview-17062--material-ui-x.netlify.app/x/react-date-pickers/date-picker/#customization

For the tree view, I don't know what the CSS var approach is to switch light/dark theme. Cause currently, the switch is done by

const style = {
    '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode,
    '--tree-view-bg-color':
      theme.palette.mode !== 'dark' ? bgColor : bgColorForDarkMode,
};

For the pickers custom field, I did not understand why it's not working.

[LukasTy]

This is not the first time we have had dark theme visual regressions, which need manual checking. 🙈
WDYT, would it make sense to run screenshot tests for both light and dark themes? 🤔

[alexfauquette]

This is not the first time we have had dark theme visual regressions, which need manual checking. 🙈

We would need to check if it's ok to double the price with @oliviertassinari

Those error only occurs in specific PR (like this one) when we impact how the light/dark mode is handled by the docs.

If it was possible to manually trigger a screenshot from master and the current branch to compare them in dark mode, I would do it. But doing that for all PRs looks overkill

[siriwatknp]

@siriwatknp do you have time to fix these or should we split the fixes among the team? 🤔

I can fix it one by one, thank you so much for the list @alexfauquette @LukasTy

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[LukasTy]

The root cause seems to be the fact that theme.palette.mode resolves to light regardless of the selected mode. 🙈
Is it expected after the latest changes @siriwatknp?

[LukasTy]

@siriwatknp do you know what could be causing RTL direction regressions? 🤔

[siriwatknp]

@siriwatknp do you know what could be causing RTL direction regressions? 🤔

It might be the package mismatch. Difference instance of @mui/system from the codesandbox package.

I am verifying if my assumption is correct.

[LukasTy]

@siriwatknp do you know what could be causing RTL direction regressions? 🤔

It might be the package mismatch. Difference instance of @mui/system from the codesandbox package.

I am verifying if my assumption is correct.

Nice spot. 👍
yes, your assumption was completely correct. 💯
I tested that it works correctly locally. 👌

[LukasTy]

Thank you and everyone involved for the effort! 🙏
LGTM. 👌

[LukasTy]

After the latest changes, the previous solution still works, but given this comment, I suggest keeping the updated solution for performance reasons. 👍

[siriwatknp]

Thank you and everyone involved for the effort! 🙏 LGTM. 👌

Feel free to merge it.