storybook: Controls: subcomponents doesn't show controls column in prop tables.

Describe the bug subcomponents doesn’t show controls column in prop tables.

To Reproduce my component is like this, it has a father component ConditionPanel, and a child component Item which would be passed into ConditionPanel as children props. While the father component is showing the controls column, the subcomponent isn’t.

Expected behavior show all the subcomponents controls, and be able to control the main story.

Screenshots

Code snippets my x.story.jsfile

import React from 'react'
import ConditionPanel, { Item } from "../components/ConditionPanel/index";
import { Input } from 'antd'
export default {
  title: 'UI/ConditionPanel',
  component: ConditionPanel,
  subcomponents: { 'ConditionPanel.Item': Item }
};
export const Main = (args) => (
  <ConditionPanel {...args} >
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
    <Item label="test101">
      <Input placeholder="asdsad" style={{width: '100%'}}/>
    </Item>
  </ConditionPanel>
);

System:

"@babel/core": "^7.10.5",
    "@storybook/addon-actions": "^6.0.0-rc.29",
    "@storybook/addon-controls": "^6.0.3",
    "@storybook/addon-docs": "^6.0.3",
    "@storybook/addon-knobs": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addon-notes": "^5.3.19",
    "@storybook/addon-viewport": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^6.0.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-react-docgen": "^4.1.0",
    "storybook-addon-jsx": "^7.3.3",
    "storybook-addon-react-live-edit": "^2.0.4",
    "storybook-addon-smart-knobs": "^6.0.2",
    "storybook-host": "^5.1.0",
    "storybook-readme": "^5.0.8"

Additional context None

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 20
Comments: 18 (2 by maintainers)

Most upvoted comments

I wonder if an API like the below could work to automate this? 🤔

code

+16

sami616 on Aug 15, 2020

Having the same issue. I have Card component, which I’ll use as a wrapper. I have a few other components - CardActions, CardImage, CardText and CardTitle, which I’ll use as children. I’d like to be able to use the Controls pannel to change the children’s args. The approach from the docs didn’t work for me. When I try to use the subcomponents field in the Card’s story, I see the Args unsupported. See Args documentation for your framework. in the Docs panel.

card.stories.jsx (removed business logic for simplicity)

export default {
  title: "Components / Card",
  component: Card,
  subcomponents: {
    CardActions,
    CardImage,
    CardText,
    CardTitle
  },
  argTypes: { 
    children: {
      description: "The content of the component.",
      type: "node"
    }
 }
};

export const Example = (args) => <Card {...args} />;

Example.args = {
  children: (
    <>
      <CardTitle>Lorem Ipsum</CardTitle>
      <CardImage src="https://picsum.photos/536/354" alt="lorem ipsum" />
      <CardText>
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry&apos;s standard dummy text
        ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
      </CardText>
      <CardActions>lorem ipsum</CardActions>
    </>
  )
};

Canvas panel:

Screenshot 2022-03-09 at 11 44 49

Docs panel: Screenshot 2022-03-09 at 11 45 16

I tried to describe each subcomponent, like this:

export default {
  title: "Components / Card",
  component: CustomCard,
  subcomponents: {
    CardActions: {
      component: CardActions,
      argTypes: {
        children: {
          description: "The content of the component.",
          type: "node"
        }
      }
    }
  },
  ...
}

The result was the same. Any with ideas are welcome

+10

mayyamark on Mar 9, 2022

To achieve this you’ll need to customize the args for your story by hand: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args

+10

shilman on Aug 12, 2020

Any update on this? My company uses subcomponents.

semmerich-fliptrx on Feb 28, 2022

ScorpAL on Nov 29, 2022

Any updates ?

LukyVj on Nov 8, 2022

fs-innonova on Oct 21, 2022