Storybook: ArgsTable won't display info properly

[darklight9811]

Describe the bug
If I define a meta that contains the argTypes info about the component, it will only display inside canvas controls, but not inside of the docs tab using MDX.

To Reproduce
Steps to reproduce the behavior:

1. Create a component
2. Add *.stories.mdx file for it
3. Create a Meta component describing a argType: name, description, table, etc...
4. Add a ArgsTable of the type of the component
5. Run storybook

Expected behavior
It should display all the info about the args.

Screenshots

System

  System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
  Binaries:
    Node: 14.3.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.14.0 - D:\programas\laragon\bin\yarn\bin\yarn.CMD
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 87.0.4280.66
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @storybook/addon-a11y: ^6.1.1 => 6.1.1 
    @storybook/addon-essentials: ^6.1.1 => 6.1.1 
    @storybook/addon-links: ^6.1.1 => 6.1.1
    @storybook/addons: ^6.1.1 => 6.1.1
    @storybook/react: ^6.1.1 => 6.1.1
    @storybook/theming: ^6.1.1 => 6.1.1

[darklight9811]

As a bonus, if you update the comments inside of a typescript file, it will only update if you restart the storybook server.

[shilman]

@darklight9811 Do you have a repro repo you can share?

[darklight9811]

@shilman
https://github.com/darklight9811/storybook-bug

[darklight9811]

@shilman Any updates to this?

[patrickalima98]

Hello every one! Same problem here, @shilman any news about this?

[shilman]

To get controls you need to target a specific Story ID. Updating your example fixes it:

<ArgsTable story="." />

<ArgsTable story="components-layout-card--card" />

@jonniebigodes we probably need to update the example to distinguish between the two use cases https://storybook.js.org/docs/react/writing-docs/doc-blocks#mdx

As for the HMR refresh bug, I've filed a separate issue and will track it there.

[darklight9811]

@shilman shouldn't be the prop of be enough for that?

[shilman]

What would it control?

[darklight9811]

The component to watch the props, because what other use would it have?

[shilman]

A component instance doesn't exist without getting instantiated. A story is what instantiates it. Thus ArgsTable can control component instances (stories) but can only display the props for a component.

[jonniebigodes]

@darklight9811 i'm going to clone the repository you included (thank you very much for that 👍 ) and factor in the comment @shilman mentioned to adjust the docs. I'll let you know once the pull request is up.

Stay safe