Storybook: Addon-docs: Multiple Tab

[tounsoo]

Is your feature request related to a problem? Please describe.
For design system documentation, we have a lot of content per component that is hard to be viewed in a single page format. In a high level, our doc is made up of 3 parts: Component Documentation, Component Guidelines, Pattern Guidelines(optional).

Describe the solution you'd like
With the newest addon/doc that supports MDX, it would be perfect if I can make multiple tabs of mdx with custom title - each tab with its mdx.

Describe alternatives you've considered
Without adding a new feature, alternate solution can be to create 3 stories for each component with each MDX attached.

Are you able to assist bring the feature to reality?
yes and no, I'm a designer who can use but not create code in efficient manner. But I would definitely want to contribute with whatever I can.

[patricklafrance]

A good example of that: https://microsoft.github.io/fluent-ui-react/components/accordion/definition

@domyen

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[just-andy]

We have a similar request for this feature and trying to look through the addon guides and existing docs block to see how this could be put into practice.

[domyen]

This seems possible via MDX (5.3) if you code up your own tab component. iirc I saw an implementation for this somewhere.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[adeelibr]

This seems possible via MDX (5.3) if you code up your own tab component. iirc I saw an implementation for this somewhere.

Can you kindly share the implementation details if possible

[LucasLeandro1204]

I'm waiting for this one too!

[AndreasLoukakis]

I'm using storybook/angular and wanted to implement something similar so I was looking around for other examples. I have a setup that works in a similar way and might be helpful to share, although I'm pretty much sure it's not the best way to do it.

In my docs tab, I need to have let's say Overview - API - Examples - Changelog tabs.
I created a separate .mdx for each tab (which is much easier to work on) and on the story mdx, I used @reach/tabs (some other react tab components didn't work well for me) to setup the content. So my main story looks something like this:

import MyTabMDX from './somefile.mdx'

<Tabs >
      <TabList>
        <Tab>My tab</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <MyTabMDX />
        </TabPanel>
      </TabPanels>
</Tabs>

<Meta title="Tabs" decorators={...} />
<Story name="SimpleTabs">...</Story>

Have in mind you obviously can't use mdx syntax if you write the content inline in-between the TabPanel tags, but external mdx works great.

[shilman]

Nice one @AndreasLoukakis !!!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[andywd7]

I know this is closed but I would like o know how to do this in Vue using Storybook 6? Both the tabs and importing nested mdx files as content.