Skip to content

[docs] Fix theme switcher in docs demos#4864

Merged
apedroferreira merged 17 commits intomui:masterfrom
apedroferreira:fix-theme-switcher-docs
Apr 23, 2025
Merged

[docs] Fix theme switcher in docs demos#4864
apedroferreira merged 17 commits intomui:masterfrom
apedroferreira:fix-theme-switcher-docs

Conversation

@apedroferreira
Copy link
Collaborator

@apedroferreira apedroferreira commented Apr 18, 2025 •
edited
Loading

Since the update to MUI v7, the theme switcher in all demos seems to be broken: https://mui.com/toolpad/core/react-dashboard-layout/

I think I've identified the problem as we need to set a container based on the iframe window in the Emotion cache being used.
Added a new DemoProvider component thats needs to wrap each demo that uses a full application with theme switching. A more hidden alternative could be to again use some specific docs context for this. Not sure which is better...

https://deploy-preview-4864--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout/#demo

@apedroferreira apedroferreira added docs Improvements or additions to the documentation. type: bug It doesn't behave as expected. labels Apr 18, 2025
@apedroferreira apedroferreira self-assigned this Apr 18, 2025
@apedroferreira apedroferreira moved this from Planned to In progress in Toolpad public roadmap Apr 18, 2025
@mui-bot
Copy link

mui-bot commented Apr 18, 2025 •
edited
Loading

Netlify deploy preview

https://deploy-preview-4864--mui-toolpad-docs.netlify.app/

Generated by 🚫 dangerJS against c69fca7

@apedroferreira apedroferreira marked this pull request as ready for review April 21, 2025 11:53
@apedroferreira apedroferreira requested a review from a team April 21, 2025 11:53
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 21, 2025
@bharatkashyap
Copy link
Collaborator

bharatkashyap commented Apr 21, 2025

Does it make sense to show a warning/error in the console/screen when the DemoProvider is used outside by devs in development/production? We use the origin and NODE_ENV to detect this? The value would be to ensure that even if a dev forgets to remove these when copying and pasting, there is a guardrail that prevents from this code making it to production

@apedroferreira
Copy link
Collaborator Author

apedroferreira commented Apr 22, 2025 •
edited
Loading

Does it make sense to show a warning/error in the console/screen when the DemoProvider is used outside by devs in development/production? We use the origin and NODE_ENV to detect this? The value would be to ensure that even if a dev forgets to remove these when copying and pasting, there is a guardrail that prevents from this code making it to production

Sounds good, just added it.

packages/toolpad-core/src/internal/demo.tsx

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 22, 2025
@apedroferreira
Copy link
Collaborator Author

apedroferreira commented Apr 22, 2025 •
edited
Loading

As discussed: we can merge this but a future alternative (very soon ideally) to get rid of this clutter in the demos would be to add a new attribute to documentation demos in MUI infra to set this up for us without showing it to the user.

@apedroferreira apedroferreira merged commit 172248a into mui:master Apr 23, 2025
15 checks passed
@github-project-automation github-project-automation bot moved this from In progress to Completed in Toolpad public roadmap Apr 23, 2025
@apedroferreira apedroferreira deleted the fix-theme-switcher-docs branch April 23, 2025 23:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bharatkashyap bharatkashyap bharatkashyap approved these changes

Assignees

@apedroferreira apedroferreira

Labels

docs Improvements or additions to the documentation. type: bug It doesn't behave as expected.

Projects

Toolpad public roadmap
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@apedroferreira @mui-bot @bharatkashyap