Addon Docs subcomponents support for sub element components

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…

[norcino]

@bnannierI love the innerText of the SubComponent…

I am using this code:

import React from "react";
import Accordion from "./Accordion";
import documentation from "./Accordion.docs.json";
import design from "./Accordion.fig.json"; // This just contains { }
import './Accordion.scss';

const docs = {
    title: "Components/Accordion",
    component: Accordion,
    subcomponents: {
      'Accordion.Item': Accordion.Item,
      'Accordion.Header': Accordion.Header,
      'Accordion.Body': Accordion.Body
    },
    parameters: { },
    argTypes: {...documentation, design}
  };
export default docs;

const Template = (args) => {
    return (
      <Accordion  {...args} defaultActiveKey="0">
          <Accordion.Item eventKey="0">
              <Accordion.Header>Accordion Item #1</Accordion.Header>
              <Accordion.Body>
                  Lorem ipsum.
              </Accordion.Body>
          </Accordion.Item>
          <Accordion.Item eventKey="1">
              <Accordion.Header>Accordion Item #2</Accordion.Header>
              <Accordion.Body>
                  Lorem ipsum.
              </Accordion.Body>
          </Accordion.Item>
      </Accordion>
  );
};

export const Default = Template.bind({});

and this renders (I think) correctly, or at least it is showing what I wanted:

The Accordion.doc.json file just contains the definition fo the argTypes:

{
    "activeKey": {
        "type": {
            "name": "string"
        },
        "description": "<p>The current active key that corresponds to the currently expanded card</p>"
    },
    "defaultActiveKey": {
        "type": {
            "name": "string"
        },
        "description": "<p>The default active key that is expanded on start</p>"
    },
    "flush": {
        "type": {
            "name": "boolean"
        },
        "defaultValue": false,
        "description": "<p>Renders accordion edge-to-edge with its parent container</p>"
    }
}

What I really fail now to figure out, is where am I supposed to get the argTypes for the sub components to render the controls correctly, can you give me any clue?

Edit: forgot to mention, I did not use the displayName property, I didn’t set anything for the purpose.

[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 }} />