Skip to content
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

[docs] Fix joy templates error #45715

Merged
merged 1 commit into from
Mar 27, 2025

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Mar 27, 2025

Fixes #45707

Currently, all joy templates throw error.

Root cause

The NProgressBar is used in all of the joy templates. It try to access theme.applyDarkStyles but the branding theme was removed from the global _app.js so the error appear.

Fixed by replacing applyDarkStyles (was internal for docs) with official applyStyles that comes with the default theme.
I took an extra step to replace all occurrences of applyDarkStyles because it's no longer needed. (split to another PR)

Next step:

  • create another PR to replace all occurrences and do the same for MUI X repo
  • remove applyDarkStyles from the core docs

@siriwatknp siriwatknp added docs Improvements or additions to the documentation regression A bug, but worse labels Mar 27, 2025
@siriwatknp siriwatknp requested a review from DiegoAndai March 27, 2025 14:05
@mui-bot
Copy link

mui-bot commented Mar 27, 2025

Netlify deploy preview

https://deploy-preview-45715--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against ea70379

@siriwatknp siriwatknp force-pushed the docs/joy-template-clash2 branch from 355ff90 to 53cbcab Compare March 27, 2025 15:01
@siriwatknp
Copy link
Member Author

@DiegoAndai I think the applyDarkStyles will need to be removed in favor of the official applyStyles anyway.

@siriwatknp siriwatknp changed the title [docs] Fix order dashboard template error [docs] Fix joy templates error Mar 27, 2025
@@ -50,7 +50,7 @@ function NProgressBar(props) {
height: 2,
zIndex: (theme.vars || theme).zIndex.tooltip,
backgroundColor: (theme.vars || theme).palette.primary[200],
...theme.applyDarkStyles({
Copy link
Member Author

@siriwatknp siriwatknp Mar 27, 2025

Choose a reason for hiding this comment

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

@DiegoAndai The root cause of the template error comes from this component.

The NProgressBar is used in all of the joy templates. It try to access theme.applyDarkStyles but the branding theme was removed from the global _app.js so the error appear.

@DiegoAndai
Copy link
Member

Can we split it in two? 😅
One to fix the templates, the other to cleanup?
The fix is urgent as the templates are crashing, but I don't want to rush a review of this many files

@siriwatknp siriwatknp force-pushed the docs/joy-template-clash2 branch from 53cbcab to ea70379 Compare March 27, 2025 15:48
aarongarciah
aarongarciah previously approved these changes Mar 27, 2025
@aarongarciah aarongarciah dismissed their stale review March 27, 2025 16:32

I didn't see Diego's comment

@DiegoAndai DiegoAndai merged commit e51df23 into mui:master Mar 27, 2025
19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation regression A bug, but worse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[joy-ui] Templates crash https://mui.com/joy-ui/getting-started/templates/order-dashboard/
4 participants