Skip to content

[system] Fix mode blink when open multiple sessions#33877

Merged
siriwatknp merged 10 commits intomui:masterfrom
siriwatknp:system/fix-css-vars-provider
Aug 24, 2022
Merged

[system] Fix mode blink when open multiple sessions#33877
siriwatknp merged 10 commits intomui:masterfrom
siriwatknp:system/fix-css-vars-provider

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Aug 9, 2022

Before

There is a flaw in using React.useEffect in the code which causes the mode to switch back and forth between sessions.

Screen.Recording.2565-08-15.at.12.47.33.mov

After

Screen.Recording.2565-08-15.at.12.53.10.mov

The tests already covered the common scenarios. This bug is a very edge case due to our documentation requirement.


@siriwatknp siriwatknp added type: bug It doesn't behave as expected. scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI labels Aug 9, 2022
@siriwatknp siriwatknp changed the title [system] Fix color scheme blink when open multiple sessions [system] Fix mode blink when open multiple sessions Aug 9, 2022
@mui-bot
Copy link

mui-bot commented Aug 9, 2022

Details of bundle changes

Generated by 🚫 dangerJS against 8847f8f

@siriwatknp siriwatknp marked this pull request as ready for review August 15, 2022 07:17
@siriwatknp siriwatknp requested a review from mnajdova August 15, 2022 07:17
);

expect(screen.getByTestId('current-mode').textContent).to.equal('dark');
expect(global.localStorage.setItem.calledWith(customModeStorageKey, 'dark')).to.equal(true);
Copy link
Member Author

@siriwatknp siriwatknp Aug 15, 2022

Choose a reason for hiding this comment

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

This is not necessary because the value is already dark.

export default function DarkModeSpecificity() {
export default function ColorSchemeSelector() {
return (
<CssVarsProvider modeStorageKey="dark-mode-specificity">
Copy link
Member Author

@siriwatknp siriwatknp Aug 15, 2022

Choose a reason for hiding this comment

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

no need to use a custom key because the storage is cleared between tests in test/regressions/index.test.js

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Aug 22, 2022
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Aug 22, 2022
@siriwatknp siriwatknp merged commit 4fad139 into mui:master Aug 24, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: system The system, the design tokens / styling foundations used across components. eg. @mui/system with MUI type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants