CODEWITHSUNDEEP
reactjscontrolsstorybookmdxjs
leesgithub2019
leesgithub2019

Reputation: 93

storybook: Using argtypes in mdx does not have control

I edit my storybook with .mdx, but something wrong!

My code is as follows：

<!---Badge.stories.mdx --->

import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import Badge from '../components/Badge';

<Meta
    title="MDX/Badge"
    component={Badge}
    argTypes={{
        size: {
            name: 'size',
            description: 'Badge Size ',
            options: ['large', 'small'],
            control: {type: 'radio'},
            table: {
                type: {summary: 'string'},
                defaultValue: { summary: 'large' }
            }
        }
    }}
/>

export const Template = (args) => <Badge {...args } >信息</Badge>

# Badge

<Canvas>
  <Story name="Example" args={{
    size: 'large',
    dot: false,
    text: '5',
    overflowCount: '99'
  }}>
    {Template.bind({})}
  </Story>
</Canvas>


### API
<ArgsTable of={Badge} />

I can't see control in storybook.

enter image description here But if I write my story in **.stories.js ,anything is ok!

enter image description here

Can somebody help me ? Thanks!

Upvotes: 1

Views: 6067

Answers (1)

Bart Krakowski
Bart Krakowski

Reputation: 1670

You have to add the story prop instead of of with the name of the story.

<Canvas withSource="open">
  <Story name="Basic usage">{Template.bind({})}</Story>
</Canvas>


<ArgsTable story="Basic usage" />

Upvotes: 4

Related Questions