material-ui
material-ui copied to clipboard
mui
[docs-infra] Support multiple tabs in demos
- Closes #39837
- Closes #38911
- Currently, this only supports editing one file - so all other tabs would be view-only.
Open to suggestions on how to make all files real-time editable, since the option I had in mind (which would require updating the react-runner instance scope Modules every time an import was changed) seems to me a bit too complex to become part of the v1 implementation.
Preview (Autocomplete): https://deploy-preview-40901--material-ui.netlify.app/material-ui/react-autocomplete/ Preview (Transfer List): https://deploy-preview-40901--material-ui.netlify.app/material-ui/react-transfer-list/
| Tab A | Tab B |
|---|---|
Netlify deploy preview
https://deploy-preview-40901--material-ui.netlify.app/
Bundle size report
No bundle size changes (Toolpad) No bundle size changes
Generated by :no_entry_sign: dangerJS against 3f90f795bb3f0824d299d28fa20355bae2844b6e
Okay... might have messed up things a bit... 😅 Ended up forcing pushing it as new commits were added after I had already committed stuff (but before I had pushed them), and it picked up all of the git merge master changes as new changes. Then tried to swap out the base branch to see if it'd have an impact, but nope. Let me know how to fix that later on!
This is so good! Thanks for working on it!
I wonder if we still need the collapse/expand button. Or perhaps it can simply adjust the max height of the code container instead of extracting the return value of the main function. cc @danilo-leal
I've noticed that the JS/TS switch doesn't work. The JS source is always displayed.
I've noticed that the JS/TS switch doesn't work. The JS source is always displayed.
That is probably since the Combo Box demo has identical source for both cases; I've only added this to one demo for a proof of concept. I'll add it to a second with different sources to demonstrate JS/TS source switching working as expected
Just realized that the styles we added to make the tabs fit nicely within a demo container break them when in a standalone tabbed code block. For example, the installation commands one:
Should we make these different components? Or some other strategy for applying the styles depending on the context?
I saw React Runner has a multi file demo at https://react-runner.vercel.app/#multi-files and tests https://github.com/nihgwu/react-runner/blob/974ebc932db7b7c7d59f1b50a79aed705efbf75a/packages/react-runner/src/tests/useRunner.test.tsx#L210, to see if there are things to learn from it.
@bharatkashyap is there anything I can do to help this PR move forward? 😃
@bharatkashyap is there anything I can do to help this PR move forward? 😃
Haha, I guess not 😅 It needs some final work to address review feedback - I've planned to close it this week
nit: I think the underline is not necessary. An active tab should have a background without hover.
In the context of TypeScript support – I recently discovered Shiki Twoslash that handles syntax highlighting and uses the VSCode syntax engine. Not sure what it would take to integrate it into our current solution, but leaving it here for reference.
Happy to see this feature land! Are there blockers to merge this?
Happy to see this feature land! Are there blockers to merge this?
Will rebase once https://github.com/mui/material-ui/pull/41708 lands, and then v1 should be good to go :)
- Added an example to the
/experimentspage:
https://github.com/mui/material-ui/assets/19550456/a9cff100-6bc5-4d18-bf00-e8ffb6d4bb55
The Netlify build does not work because of
2:48:13 PM: > Build optimization failed: found page without a React Component as default export in 2:48:13 PM: pages/experiments/docs/dataset 2:48:13 PM: See https://nextjs.org/docs/messages/page-without-valid-component for more info.
That's because the docs use \data to store md and demos whereas our experiments former put every thing in the /pages folder. I see two options:
- If JSON is supported having the demo importing a json file could potentially do the job (not sure)
- create a
docs/data/experiementsfolder to contain some of the md and demo, to get closer to the actual docs structure
Quick question: Once this PR is merged, can we bring the feature to MUI X directly?
@danilo-leal This is okay to merge as a v1 for me, pending a review from you around how it looks 😅
Looks great to me! I only noticed that the borders on the code block/editor and the demo toolbar are a bit funky—they appear and disappear depending on the mode/tab selected. Check it out:
https://github.com/mui/material-ui/assets/67129314/30ba62a2-54eb-4bdf-9b19-55ae5f096a76
The demo toolbar has a top border in light mode. But, it seems the code block/editor loses its borders on the second tab.
https://github.com/mui/material-ui/assets/67129314/44d04e5d-1ccc-4121-a0bd-b6995a3f3bcc
In dark mode, the demo toolbar doesn't have both a top and bottom border anymore.
I thought I had fixed these things on https://github.com/mui/material-ui/pull/41827 😅 I'll leave you to it as I'm having weird conflicts to pull the latest changes from this PR, so it should be faster if you can tackle it. Later design improvements can come iteratively right after, I think!
@danilo-leal I tried to fix it in https://github.com/mui/material-ui/pull/40901/commits/c43ca52522dba818912e42f68879a47d489dd97a
In light mode, the code has no border because the contrast between code and the background is enough
In dark mode keep the border gray,