Storybook: Addon Docs subcomponents support for sub element components

[blind76]

Is your feature request related to a problem? Please describe.
I use Component.SubComponent for my components and I want to show prop tables for subcomponents and as far as I can see that is not supported

Describe the solution you'd like
I would suggest supporting something like:
subcomponents: {'Component.SubComponent': Component.SubComponent}

Are you able to assist bring the feature to reality?
I can...

[shilman]

@blind76 This is already supported, e.g.

https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/addon-docs/subcomponents.stories.js

[blind76]

@shilman It is but for exported regular Components and not for sub-components.
In my case that would be something like:

import Component from '../Component';

export default {
    component: Component,
    subcomponents: Component.SubComponent
};

export const someStory = () => (
<Component>
     <Component.SubComponent>Content of subcomponent</Component.SubComponent>
</Component>
);

[shilman]

@blind76 this doesn't work?

import Component from '../Component';

export default {
    component: Component,
    subcomponents: { SubComponent: Component.SubComponent },
};

export const someStory = () => (
<Component>
     <Component.SubComponent>Content of subcomponent</Component.SubComponent>
</Component>
);

[blind76]

@shilman no it's not.
I get the tabs and subcomponents have correct tab titles but the primary component has title "Undefined".

Primary component (tab Undefined) has correct props table but other tabs just say "No props found for this component"

[shilman]

Ah, add a default.title to the previous example to get a tab title for the main component. You need that anyway in CSF.

As for the prop support for subcomponents, can you share the source of Component + Component.SubComponent?

[blind76]

@shilman

something like this: https://github.com/koldy/ui/blob/master/src/components/Table/Table.js

[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!

[Smolations]

@shilman I am _so_ psyched this is a feature! However, I don't think the main component's tab (the first one) actually keys off the title. For me, it seems to be keying off the functional component name or the Component.displayName (which matches the component function name). My "pseudo-main" component is a state container for the main component, so I have:

// MainComponent/index.js

// MainComponentContainer.displayName = 'MainComponentContainer'
import MainComponentContainer from './MainComponentContainer'; 
import SubComponent from './SubComponent';
// ...other subcomponents...

const MainComponent = MainComponentContainer;

MainComponent.SubComponent = SubComponent;
// ...

export {
  MainComponent,
};

And then my story file:

export default {
  title: 'Components|MainComponent',
  component: MainComponent,
  subcomponents: {
    'MainComponent.SubComponent': MainComponent.SubComponent,
    // ...
};

The subcomponent tab renders according to the key I set as expected, but the first tab ends up being "MainComponentContainer." Is the title the only way to affect that first tab's name or is there another way?

EDIT: Just confirmed the tab name _is_ coming from MainComponentContainer.displayName. I could lie to the code and finagle the names, but I would much prefer to have the option to override the tab title. 😁

Also, is there any way to get a subcomponent's description to show up above the props table when its tab is selected? Would be a nice-to-have...

[shilman]

@Smolations Yeah this looks like a bug. I'd rather not introduce another parameter for naming the component tab -- if the bug was fixed would that be sufficient for your use case?

[blind76]

@Smolations do you have props table for subcomponents or it says: "No props found for this component
"?

[Smolations]

if the bug was fixed would that be sufficient for your use case?

@shilman if that would cause the first tab to be named MainComponent, then absolutely! 😁

@blind76 My props tables are showing up as expected. Are yours not?

Also, I'm on 5.3.12 and looking forward to 6.0.0. 😋

[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!

[Pete-Robelou]

@shilman Should this also work when writing stories in MDX?

I've tried this but it's not working

<Meta title="Components/Label" component={Label} subcomponents={LabelCaption} />

[shilman]

@Pete-Robelou should work with:

<Meta title="Components/Label" component={Label} subcomponents={{LabelCaption}} />

Note the extra pair of braces. what version are you on? possibly broken in 6.0-alpha since it was massively rewritten.

[Pete-Robelou]

The extra pair of braces didn't work. I'm on 5.3.18.

I assume this is correct for the props table?

```

[shilman]

Yes or tabs with:

<Props components={{Label, LabelCaption}} />

[Pete-Robelou]

👍 That works.

I've removed subcomponents={{LabelCaption}} from <Meta> as this doesn't appear to have an impact.

[trumbitta]

Hi, it seems subcomponents is not a valid prop of Meta?

https://github.com/storybookjs/storybook/blob/next/addons/docs/src/blocks/Meta.tsx

[shilman]

This is fixed in 6.0, closing. Either:

import { Meta, ArgsTable } from '@storybook/addon-docs/blocks';

<Meta component={Foo} subcomponents={{ Bar: Baz }} />

OR:

<ArgsTable components={{ A: Apple, B: Banana, Cherry }} />