Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
[test] Fix broken master branch #35446
[test] Fix broken master branch #35446
Changes from 1 commit
bd62693
19d4260
d204d4e
File filter
Filter by extension
Conversations
Jump to
There are no files selected for viewing
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This probably fails because it is not used inside
CssVarsProvider
. TheCssVarsProvider
is required when using @mui/joy: https://mui.com/joy-ui/getting-started/usage/#quickstart. cc @siriwatknp is this correct?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, you are correct.
The
theme
output fromextendTheme()
does not havetheme.vars
andtheme.palette.*
yet. That's whytheme.unstable_sx
returnsprimary.500
because it could not find the palette.Using ThemeProvider should be enough because it attaches
vars
and uselight
color scheme as a palette.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All other tests already use the
CssVarsProvider
, I'd suggest adding it to this test too.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I push a change, I moved these tests to
extendTheme
, as it looked more related to it. I also wrap the tests withCssVarsProvider
and the results look as expected now.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahhh. I have been confused about this a couple of times. Sometimes
.vars
was defined sometimes not. I couldn't really pinpoint what was happening. Now I get it, it's about either accessing the theme with the context or accessing the theme with a direct import.Why is
CssVarsProvider
mutating the theme to add the vars? I mean, why is this logic not insideextendTheme
? Looking at the code, It seems that we could move this logic up in the chain.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would expect that the theme would add
vars
and maybe point them to the plain values before the CssVarsProvider is used. This would be safest. The palette could be generated the same way too. I know we have it fordefaultTheme
, maybe we can just add this logic toextendTheme
too. I was thinking about this when creating the theme for Material You, but for now used the same approach in Joy UI.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In the code:
material-ui/packages/mui-system/src/cssVars/createCssVarsProvider.js
Lines 154 to 158 in 33a0e1c
It seems that
theme.vars
is defined with params that aren't specific to the theme provider. This is what put me on the track of, we should be able to do:Pretty much like https://vanilla-extract.style/documentation/api/create-theme/.
👍 to keep these in sync
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I will draft a PR for this to see what the changes would look like.