Bump @mui/monorepo digest to 61c3cc9 #17062

siriwatknp · 2025-03-21T06:40:59Z

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 · 2025-03-21T06:41:12Z

Thanks for adding a type label to the PR! 👍

mui-bot · 2025-03-21T06:44:38Z

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

Generated by 🚫 dangerJS against d07dd42

siriwatknp · 2025-03-21T08:04:42Z

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

alexfauquette · 2025-03-21T08:11:04Z

🤔 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 · 2025-03-21T08:36:06Z

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:

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 · 2025-03-21T10:08:07Z

LukasTy · 2025-03-21T10:17:06Z

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 · 2025-03-21T10:52:10Z

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 · 2025-03-21T12:27:20Z

@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 · 2025-03-21T13:52:55Z

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

LukasTy · 2025-03-21T14:23:48Z

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 · 2025-03-21T15:13:11Z

docs/data/tree-view/simple-tree-view/customization/GmailTreeView.js

@@ -77,15 +82,19 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(props, ref) {
    status,
  } = useTreeItem({ id, itemId, children, label, disabled, rootRef: ref });

-  const style = {
-    '--tree-view-color': theme.palette.mode !== 'dark' ? color : colorForDarkMode,


This solution could still work if theme.palette.mode returned the actual mode set on docs... 🙈 🤷

The idea is to delegate the light/dark to CSS only. Otherwise, when you update the theme mode all the Demo ThemeProvider will re-render.

The new Demo theme provider that erase custom theme tokens:

https://github.com/mui/material-ui/pull/45386/files#diff-7527a515d20eff239825c53744ce9602043624db93e0a7275943c9fa95256bfbR32-R45

If some packages plan to have demo that do not support CSS-vars we could have a dedicated Demo wrapper that pass the mode token with something like

{{"demo": "NeedThemeToken.js", "notCSSVarsCompatible": true }}

oliviertassinari · 2025-03-23T17:08:33Z

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

Yeah, let's not check all the images, this sounds really slow for the CI time to complete. Actually, thinking about it, we might as well consider how to be more efficient: mui/mui-public#290.

We could have one dark mode test, one that makes sure that the dark/light mode integration is not all broken.
To mind that this was not needed before, I think because when we change dark mode logic, we test it on the docs, and X is supposed to fully integrate with Material UI, so not diverge in any meaningful way that could create bugs.

siriwatknp · 2025-03-24T03:10:13Z

@LukasTy @alexfauquette 2 things that are not working

theme.palette.mode does not change within the demo (PR to fix [system] Fix palette mode does not change when not use CSS vars material-ui#45660)
iframe does not have CSS variables attached to inner html.

I'm fixing both from the core side. I think ideally, there should be no change in this PR, if you are okay I would like to revert the changes after fixing the code side.

alexfauquette · 2025-03-24T07:41:39Z

if you are okay I would like to revert the changes after fixing the code side.

I'm ok. I extracted the olny modification that is not docs only related #17106

But we will need to find a solution to those issues if we want to remove the forceThemeRerender fro X docs

github-actions · 2025-03-24T13:39:37Z

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

siriwatknp · 2025-03-24T14:22:04Z

@LukasTy @alexfauquette Updated the monorepo with mui/material-ui#45661 and the fix on MUI System, both of these are fixed!

Let me refine a bit and add visual regression tests in mui/material-ui#45661, will let you know when this PR is ready for the final review.

LukasTy · 2025-03-25T12:08:13Z

https://deploy-preview-17062--material-ui-x.netlify.app/x/react-data-grid/components/toolbar/#custom-elements looks problematic again after the latest changes.

LukasTy · 2025-03-25T19:15:38Z

docs/.link-check-errors.txt

+- https://mui.com/system/styles/advanced/
+- https://mui.com/system/styles/advanced/#class-names
+- https://mui.com/system/styles/advanced/#server-side-rendering
+- https://mui.com/system/styles/advanced/#theme-nesting
+- https://mui.com/system/styles/api/#creategenerateclassname-options-class-name-generator
+- https://mui.com/system/styles/api/#stylesprovider
+- https://mui.com/system/styles/api/#themeprovider
+- https://mui.com/system/styles/basics/


These probably need updating on the mui/material-ui repo side. 🤔

cc @mui/core

already on it mui/material-ui#45677

bump monorepo

b5f6ce1

siriwatknp added the dependencies Update of dependencies label Mar 21, 2025

siriwatknp requested review from LukasTy and cherniavskii March 21, 2025 06:43

siriwatknp added 2 commits March 21, 2025 13:54

fix wrong usage

1b031f1

add fg-loadcss types

7a2e947

siriwatknp requested a review from alexfauquette March 21, 2025 08:04

LukasTy approved these changes Mar 21, 2025

View reviewed changes

Fix data grid dark theme

58667b6

alexfauquette approved these changes Mar 21, 2025

View reviewed changes

LukasTy requested changes Mar 21, 2025

View reviewed changes

alexfauquette added 2 commits March 21, 2025 11:02

simple-fixes

8aff3d3

scripts

de381f1

LukasTy mentioned this pull request Mar 21, 2025

[core] Remove @mui/styles dependency & patches #17071

Open

1 task

Fix custom field Joy UI demos

83aca63

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 21, 2025

Merge branch 'master' into deps/monorepo-doc

59beee0

LukasTy added 2 commits March 21, 2025 16:25

Fix gmail customization demo

6caa41d

Fix tree view demos

e6e0058

Fix date calendar week number

2c00145

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 21, 2025

LukasTy reviewed Mar 21, 2025

View reviewed changes

alexfauquette mentioned this pull request Mar 24, 2025

[charts] Fix CSS vars support for dark theme #17106

Merged

LukasTy mentioned this pull request Mar 24, 2025

Bump @mui/monorepo digest to 19852f8 #17084

Closed

1 task

tested the fixes

00d80f2

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 24, 2025

Merge branch 'master' into deps/monorepo-doc

8f134e7

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 24, 2025

siriwatknp added 2 commits March 25, 2025 16:48

fix Joy custom fields

6ade378

update packages

3d482b2

LukasTy mentioned this pull request Mar 25, 2025

[ignore] Canary monorepo #17132

Closed

1 task

LukasTy added 3 commits March 25, 2025 17:54

Fix demos

1f5bbf9

docs:typescript:formatted

7e90a84

docs:link-check

d07dd42

LukasTy reviewed Mar 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bump @mui/monorepo digest to 61c3cc9 #17062

Bump @mui/monorepo digest to 61c3cc9 #17062

siriwatknp commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025

mui-bot commented Mar 21, 2025 •

edited

Loading

siriwatknp commented Mar 21, 2025

alexfauquette commented Mar 21, 2025

LukasTy left a comment

alexfauquette commented Mar 21, 2025

alexfauquette left a comment

LukasTy left a comment •

edited

Loading

alexfauquette commented Mar 21, 2025 •

edited by LukasTy

Loading

LukasTy commented Mar 21, 2025

alexfauquette commented Mar 21, 2025

siriwatknp commented Mar 21, 2025

github-actions bot commented Mar 21, 2025

LukasTy commented Mar 21, 2025

LukasTy Mar 21, 2025

alexfauquette Mar 21, 2025

oliviertassinari commented Mar 23, 2025 •

edited

Loading

siriwatknp commented Mar 24, 2025 •

edited

Loading

alexfauquette commented Mar 24, 2025

github-actions bot commented Mar 24, 2025

siriwatknp commented Mar 24, 2025

LukasTy commented Mar 25, 2025

LukasTy Mar 25, 2025

Janpot Mar 25, 2025

Bump @mui/monorepo digest to 61c3cc9 #17062

Are you sure you want to change the base?

Bump @mui/monorepo digest to 61c3cc9 #17062

Conversation

siriwatknp commented Mar 21, 2025 • edited Loading

github-actions bot commented Mar 21, 2025

mui-bot commented Mar 21, 2025 • edited Loading

siriwatknp commented Mar 21, 2025

alexfauquette commented Mar 21, 2025

LukasTy left a comment

Choose a reason for hiding this comment

alexfauquette commented Mar 21, 2025

alexfauquette left a comment

Choose a reason for hiding this comment

LukasTy left a comment • edited Loading

Choose a reason for hiding this comment

alexfauquette commented Mar 21, 2025 • edited by LukasTy Loading

LukasTy commented Mar 21, 2025

alexfauquette commented Mar 21, 2025

siriwatknp commented Mar 21, 2025

github-actions bot commented Mar 21, 2025

LukasTy commented Mar 21, 2025

LukasTy Mar 21, 2025

Choose a reason for hiding this comment

alexfauquette Mar 21, 2025

Choose a reason for hiding this comment

oliviertassinari commented Mar 23, 2025 • edited Loading

siriwatknp commented Mar 24, 2025 • edited Loading

alexfauquette commented Mar 24, 2025

github-actions bot commented Mar 24, 2025

siriwatknp commented Mar 24, 2025

LukasTy commented Mar 25, 2025

LukasTy Mar 25, 2025

Choose a reason for hiding this comment

Janpot Mar 25, 2025

Choose a reason for hiding this comment

siriwatknp commented Mar 21, 2025 •

edited

Loading

mui-bot commented Mar 21, 2025 •

edited

Loading

LukasTy left a comment •

edited

Loading

alexfauquette commented Mar 21, 2025 •

edited by LukasTy

Loading

oliviertassinari commented Mar 23, 2025 •

edited

Loading

siriwatknp commented Mar 24, 2025 •

edited

Loading