Storybook: @storybook/addon-controls: argTypes in MDX

Created on 29 Jun 2020 · 6Comments · Source: storybookjs/storybook

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

args documentation mdx question / support

Source

jayarjo

Most helpful comment

@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!

maggiewachs on 1 Jul 2020

❤3 🎉1

All 6 comments

@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!

maggiewachs on 1 Jul 2020

❤3 🎉1

Thanks @maggiewachs, that worked! :rocket:

jayarjo on 2 Jul 2020

@shilman Can this be referenced in the documentation (either on the https://storybook.js.org/docs/react/api/argtypes or the https://storybook.js.org/docs/react/writing-docs/mdx)?

jjoselv on 16 Oct 2020

👍1

@maggiewachs, could you provide a full example of your mdx file?

monolithed on 25 Oct 2020

I could not find that option in the latest releases:

interface MetaProps {
    title: string;
    component?: Component;
    subcomponents?: Record<string, Component>;
    decorators?: [Decorator];
    parameters?: any;
}

monolithed on 12 Nov 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!