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.

@storybook/addon-controls: argTypes in MDX

See original GitHub issue

How does one provide argTypes for a given component story in MDX file, with @storybook/addon-controls?

Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.20.1/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.37 => 6.0.0-beta.37 
    @storybook/addon-controls: ^6.0.0-beta.37 => 6.0.0-beta.37 
    @storybook/addon-docs: ^6.0.0-beta.37 => 6.0.0-beta.37 
    @storybook/addon-knobs: ^6.0.0-beta.37 => 6.0.0-beta.37 
    @storybook/addon-links: ^6.0.0-beta.37 => 6.0.0-beta.37 
    @storybook/addons: ^6.0.0-beta.37 => 6.0.0-beta.37 
    @storybook/preset-create-react-app: ^2.1.2 => 2.1.2 
    @storybook/react: ^6.0.0-beta.37 => 6.0.0-beta.37 
    @storybook/theming: ^6.0.0-beta.37 => 6.0.0-beta.37

Issue Analytics

State:
Created 3 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

6reactions

maggiewachscommented, Jul 1, 2020

@jayarjo This is how I’ve got it working in my local build (6.0.0-beta.31).

At the top of my .mdx file, I defined a variable with my argTypes configuration:

export const buttonArgTypes = {
  buttontype: {
    description: 'Button Type',
    table: {
      type: {
        summary: 'something short',
        detail: 'something really really long'
      },
    },
    control: {
      type: 'select',
      options: ['primary', 'secondary', 'purchase']
    }
  }
};

And then referenced that variable in the Story tag’s argTypes attribute:

<Story name="Primary" args={{ buttontype: 'primary', textval: 'Primary' }} argTypes={buttonArgTypes}>

My result:

This documentation helped, too: https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/props-tables.md#customizing-argtypes

HTH!

1reaction

shilmancommented, Nov 13, 2020

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-rc.2 containing PR #13101 that references this issue. Upgrade today to the @next NPM tag to try it out!