Skip to content

[docs][POC] Allow full screen demos #45785

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

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Conversation

Janpot
Copy link
Member

@Janpot Janpot commented Apr 1, 2025

Experimenting with adding a mode to the docs demo pages to display a specific demo in full screen. This is just a POC.

example: https://deploy-preview-45785--material-ui.netlify.app/material-ui/react-button/?scopedDemo=BasicButtons.js

cc @cherniavskii

@Janpot Janpot added the docs Improvements or additions to the documentation label Apr 1, 2025
@mui-bot
Copy link

mui-bot commented Apr 1, 2025

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against b5418ad

@Janpot Janpot changed the title [docs][experiment] Allow full screen demos [docs][POC] Allow full screen demos Apr 1, 2025
const scopedDemo = router.query.scopedDemo;
if (scopedDemo) {
return (
<AppFrame disableDrawer>
Copy link
Member

Choose a reason for hiding this comment

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

Thank you, that was quick! 😅

Do we need the AppFrame for full-screen demos, though?
How about having a dedicated empty page, e.g. https://mui.com/playground?demo=material/components/buttons/BasicButtons.js
And a button in the toolbar that opens the playground url in a new tab?

Copy link
Member Author

Choose a reason for hiding this comment

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

That would be harder to achieve but not impossible. in this PR we can basically surf on the existing generated infra for markdown demos.

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants