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][material-ui] Add script to generate template screenshots #42903

Merged
merged 13 commits into from
Jul 15, 2024

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jul 11, 2024

Part of #41469

Motivation

Reduce manual work to update the screenshots when code changes.

pnpm template:screenshot material-ui
pnpm template:screenshot joy-ui

The script is for local use, not intend to run on CI.

Further improvements

  • Add image optimization
  • Thumbnail generation

@siriwatknp siriwatknp added docs Improvements or additions to the documentation package: material-ui Specific to @mui/material labels Jul 11, 2024
@siriwatknp siriwatknp requested review from zanivan and a team July 11, 2024 04:20
@mui-bot
Copy link

mui-bot commented Jul 11, 2024

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 73e5138

Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

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

Looks good. I just left few questions because I'm not familiar with this part of the codebase.

@@ -60,7 +60,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
<AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
Custom theme
</ToggleButton>
<ToggleButton value={false}>Material Design 2</ToggleButton>
<ToggleButton id="toggle-default-theme" value={false}>
Copy link
Member

Choose a reason for hiding this comment

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

I'm wondering if id="toggle-default-theme" could confuse new user, thinking this id has an impact on the theme

Suggested change
<ToggleButton id="toggle-default-theme" value={false}>
<ToggleButton data-screen-shots="toggle-default-theme" value={false}>

Copy link
Member Author

@siriwatknp siriwatknp Jul 15, 2024

Choose a reason for hiding this comment

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

That's a lot better. I changed to data-screenshot="toggle-mode" and data-screenshot="toggle-default-theme".

Comment on lines 117 to 119
// eslint-disable-next-line no-console
console.log(error);
}
Copy link
Member

Choose a reason for hiding this comment

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

Not sure it changes something

Suggested change
// eslint-disable-next-line no-console
console.log(error);
}
// eslint-disable-next-line no-console
console.error(error);
}

href: '/material-ui/getting-started/templates/dashboard/',
source: `${sourcePrefix}/docs/data/material/getting-started/templates/dashboard`,
hasDarkMode: true,
Copy link
Member

Choose a reason for hiding this comment

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

Should it also get a hasDefault to allow showing images with -default.jpg and -default-dark.jpg ?

Copy link
Member Author

Choose a reason for hiding this comment

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

I think that'd be overkill for now. It can be a separate PR but need help from @zanivan to find a good DX to show between custom/default with light/dark.

Copy link
Member Author

Choose a reason for hiding this comment

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

I plan to use the default image in a blog post (separate PR), that's the reason I added it.

Copy link
Contributor

@zanivan zanivan left a comment

Choose a reason for hiding this comment

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

Design-wise, it looks great—Thanks for tackling this!

Leaving my approval here for you to merge after addressing Alex's feedback :)

@siriwatknp siriwatknp enabled auto-merge (squash) July 15, 2024 10:12
@siriwatknp siriwatknp merged commit cea9671 into mui:next Jul 15, 2024
18 checks passed
joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024
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 package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants