Storybook: Add control column to props table

[hmajid2301]

I was looking at this Design System Website. I noticed that the prop tables have a control column, where the user can adjust the props and the components changes as well.

I found the source code here. But I don't understand how they've managed to do this. Can anyone explain what I need to do add the control column to my storybook components. I looked into addon-knobs but I don't think this quite does the same thing.

Currently I am able to get a prop tables to load using the addon-docs in a simple mdx file shown below.

import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

import Logo from './Logo';

<Meta
  title="Logo"
  subtitle="The logo component"
  description="A customisable logo component."
  component={Logo}
/>

# Logo

<Props of={Logo} />

Any help would be greatly appreciated thanks

[matheo]

@hmajid2301 addon-controls is the new addon-knobs and you just need to setup your stories to receive (args) => {... to show the column with the controls.

Jus follow the docs and you'll be ready to go!

PS/. You will need the latest v6.0.0-beta to play with it.

[hmajid2301]

@matheo If I have an .mdx file like so:

## Accent

You can adjust the accent (tags) color by passing the `accent` prop.

<Preview>
  <Story name="Accent Colour">
    <div>
      <Logo accent="gray-500" color="blue-500" text="Haseeb" />
    </div>
  </Story>
</Preview>

How can I pass the arg to that ?

[matheo]

@hmajid2301 woops, I haven't seen how to manipulate that kind of stories tho
it's clearer with the MDX flavored CSF stories

@shilman is there a way to manipulate the args in pure MDX Stories?

[shilman]

<Preview>
  <Story
    name="ArgTypes"
    args={{
      boolArg: true,
      stringArg: 'overwritten',
      arrayArg: ['a', 'b'],
    }}
  >
    {(args) => <Comp {...args} />}
  </Story>
</Preview>

[hmajid2301]

I can see the control tab in the canvas panel.

However I cannot get it show up in the docs panel in the props table. Is this because I am using the Props component ?

<Props of={Logo} />

<Preview>
  <Story
    name="Basic"
    args={{
      text: "Haseeb",
      color: 'gray-500',
    }}
  >
    {(args) => <Logo {...args} />}
  </Story>
</Preview>

Thanks

[shilman]

You need <Props story=“Basic” />

[hmajid2301]

Thank you very much thats fixed it, is this documented somewhere ?

[shilman]

@hmajid2301 Yep it's here: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/props-tables.md#controls

Probably need to clean up the docs 🙈