question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addon-docs: Allow setting `argTypes` for `subcomponents`

See original GitHub issue

Is your feature request related to a problem? Please describe I have a situation where I want to use subcomponents but I need to be able to customize some of the values displayed in the generated table. As far as I can tell, I can only apply argTypes customization to the main component, not the subcomponent.

Describe the solution you’d like A method of setting argTypes for subcomponents. I’m not sure what the best config structure would be for this, and am open to suggestions.

Describe alternatives you’ve considered N/A

Are you able to assist to bring the feature to reality? Yes, with pointers on where the relevant code is.

Additional context N/A

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:22
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

13reactions
AmirTugicommented, Nov 7, 2021

How about

export default {
  title: 'Components/Calendar',
  component: Calendar,
  subcomponents: { 
    CalendarLegend: {
      component: CalendarLegend,
      argTypes: {
        label: { control: 'input' },
      },
    },
  },
  argTypes: {
    onSelect: { action: 'selected' },
  }
};

And in case we don’t want to add manual argTypes it will be left as in today -

export default {
  title: 'Components/Calendar',
  component: Calendar,
  subcomponents: { CalendarLegend },
  argTypes: {
    onSelect: { action: 'selected' },
  }
};
7reactions
Fernkercommented, May 23, 2022

Anyone know of a workaround for this? I find it incredible that argTables is considered a first-class citizen but there’s no support for it on subcomponents.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ArgTypes - Storybook - JS.ORG
By specifying the type of an arg, you constrain the values that it can take and provide information about args that are not...
Read more >
Addon Docs subcomponents support for sub ... - Issuehunt
What I really fail now to figure out, is where am I supposed to get the argTypes for the sub components to render...
Read more >
@storybook/addon-controls - npm
module.exports = { addons: [ '@storybook/addon-docs' ... Note: If you set a component for your stories, these argTypes will always be added ...
Read more >
storybook: Using argtypes in mdx does not have control
Badge.stories.mdx ---> import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; import Badge from '.
Read more >
Documenting design systems with Storybook Docs
With that, let's dive in to some basic terminology and examples on ... import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks' ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found