[docs-infra] Support code tabs

oliviertassinari commented 11 months ago

Summary 💡

A quick placeholder issue for the need to support tabs in the demos. (I couldn't find another issue).

Examples 🌈

https://nivo.rocks/sunburst/

https://www.radix-ui.com/primitives/docs/components/avatar

Motivation 🔦

This could allow us to solve a few problems at once:

In the Base UI docs, isolate the source of the component and its uses.
In the Material UI Autocomplete demos, moving the long list of countries to a side tab to not clutter the view
In the MUI X Data Grid demos, in the cases where we can't use useDemoData because it's key to understand the demo but at the same time there is soo much data that it's hard to follow, we could move that to a side code tab.

A note on the copy button behavior. I would be in favor of having the main one:

to combine the files together when possible

danilo-leal commented 11 months ago

Heya — how's this different from the one you opened (https://github.com/mui/material-ui/issues/38911) a while ago? We're aware of this and may prioritize it very soon within the docs-infra roadmap!

oliviertassinari commented 11 months ago

@danilo-leal Great point. I think we can treat these two as different issues:

39837 about the ability to have code tabs. Could be used as is in Autocomplete, Charts, Data Grid.
38911 about sharing the same source between demos, using code tabs, so depending on #39837.

mui / material-ui