[docs] Full screen demos in new tab #46088
Conversation
cherniavskii
added
docs
Netlify deploy previewhttps://deploy-preview-46088--material-ui.netlify.app/ Bundle size report |
| @@ -127,6 +127,7 @@ export default withDocsInfra({ | |||
| { | |||
| loader: require.resolve('@mui/internal-markdown/loader'), | |||
| options: { | |||
| enableOpenInNewTab: true, | |||
There was a problem hiding this comment.
I made it opt-in; the "Open in new tab" button in the demo toolbar is not shown by default.
But the ?scopedDemo URL is supported regardless of this setting.
I don't know if the Core wants to have this enabled for the whole repo.
You can disable enableOpenInNewTab and enable it for specific pages like this:
import * as pageProps from 'docs/data/material/components/drawers/drawers.md?muiMarkdown';
export default function Page() {
return <MarkdownDocs {...pageProps} enableOpenInNewTab />;
}This could be particularly useful for pages like https://mui.com/material-ui/react-drawer/
Let me know if you have a preference for this setting, and I'll update the PR accordingly.
There was a problem hiding this comment.
I assume it's a question for @DiegoAndai
There was a problem hiding this comment.
Sorry for the delay. Let's not enable this on the Core's demos for now. I agree its useful, but we're stretched a bit thin with other projects' development and I'm not keen in receiving issues because some demo doesn't work on the "new tab mode". Just trying to keep things with as few changes as possible for now.
There was a problem hiding this comment.
I kind of remember that the getLayout was for some performances improvement when moving from one page to another.
The NextJS.render takes +100ms after this PR
@siriwatknp do you have more insight on this aspect?
@alexfauquette Where did you get this information from? 🤔 |
The Chrome performance measures when I click on another page
|
|
Ok, I suppose we could bring it back and instead position the demo fixed, over the whole page. |
|
Was also wondering, would it make sense to not automatically open full screen demos in a new tab and leave that choice to the user? i.e. It's a fullscreen button instead of "new tab" button, and let them use Cmd+click to open fullscreen in new tab. Not that this should block this PR. |
| {enableOpenInNewTab && ( | ||
| <DemoTooltip title={t('openInNewTab')} placement="bottom"> | ||
| <IconButton | ||
| data-ga-event-category="demo" | ||
| data-ga-event-label={demo.gaLabel} | ||
| data-ga-event-action="openInNewTab" | ||
| onClick={() => { | ||
| const url = new URL(window.location.href); | ||
| url.hash = ''; | ||
| url.searchParams.set('scopedDemo', demoOptions.demo); | ||
| window.open(url.toString(), '_blank'); | ||
| }} | ||
| {...getControlProps(6)} | ||
| sx={{ borderRadius: 1 }} | ||
| > | ||
| <OpenInNewIcon /> | ||
| </IconButton> | ||
| </DemoTooltip> | ||
| )} |
There was a problem hiding this comment.
I think it would be better to use label "Open standalone demo".
When I first see "Open in new tab", I have no clue on what to expect and not sure why should I open a new tab.
Based on #45785
I opened a separate PR, because I was suddenly unable to push to Jan's branch anymore 🤷♂️
https://deploy-preview-46088--material-ui.netlify.app/material-ui/react-button/?scopedDemo=BasicButtons.js
https://deploy-preview-46088--material-ui.netlify.app/material-ui/react-table/?scopedDemo=DataTable.js