ArgTypes table.defaultValue not showing in MDX ArgsTable on Docs Tab

[michaelfaith]

Describe the bug
Defining a default value and description manually using argTypes on the Meta element of an MDX-based Story isn't showing in the ArgsTable on the Docs tab. It shows both in the control panel of the Canvas tag, but not Docs.

Example

<Meta
  title="Theme/QtmThemeProvider"
  component={QtmThemeProvider}
  argTypes={{
    themeSetting: {
      type: 'QtmThemeSetting',
      description: 'Determines what theme should be applied to the application.',
      table: {
        defaultValue: { summary: 'light' }
      },
    }
  }}
/>

Docs

Canvas

To Reproduce
Reproduction repo: https://github.com/michaelfaith/storybook-mdx-argtype-bug

System

System:
  OS: Windows 10 10.0.19041
  CPU: (4) x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
Binaries:
  Node: 14.17.5 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 6.14.14 - C:\Program Files\nodejs\npm.CMD
Browsers:
  Chrome: 92.0.4515.131
  Edge: Spartan (44.19041.1023.0), Chromium (92.0.902.67)

[dexster]

In the doc-blocks docs it says you cannot use <ArgsTable of={component} /> to customize what's shown in ArgsTable

Docs

So I tried the <ArgsTable story="xxx"> but could not get that working either. I've asked about this on the addon-docs Discord channel.

[michaelfaith]

@dexster thanks for checking on discord. But also worth mentioning, I'm not trying to customize it via the ArgsTable element. I'm defining the ArgTypes in the Meta element, which according to the documentation should work with MDX docs the same as with regular tsx/jsx stories. And @shilman seemed to indicate in the linked issue, that it should work.

[dexster]

Hey. I understand your issue. It's exactly the same as mine. I'm just interpreting the docs as saying that anything you define with ArgTypes won't work when using <ArgsTable of={component} />. And your repro uses an ArgsTable.

[shilman]

@dexster is right on both counts. you should use story="..." if you are customizing the ArgTypes and three is a bug in the code that makes the auto-extracted values completely override the user-specified values (it should be the opposite). The ArgsTable code is unnecessarily complex because it tries to handle some legacy usage, and needs to be rethought.

In the meantime, as a workaround you can remove the component={ThemeName} in the Meta and completely specify the table in the argTypes annotation and this is working even though it's an unsatisfying workaround.

[michaelfaith]

@shilman @dexster thanks for helping me understand the issue and for the workaround. Definitely going to be inconvenient to have to go that route, but I guess it can work for now, until the issue is resolved.

[dexster]

In the meantime, as a workaround you can remove the component={ThemeName} in the Meta and completely specify the table in the argTypes annotation and this is working even though it's an unsatisfying workaround.

@shilman I'm still confused as to how to do this. I have specified the table in Meta argTypes and removed the component property but what must the ArgsTable look like in the MDX file? When I use the story link like this, <ArgsTable story="sbg-components-sbgbutton--primary"/>, I get "Cannot read property 'id' of undefined"

[shilman]

I think in the current state of things it works like this:

<Story name="Foo">...</Story>

<ArgsTable story="Foo" />

As I said before this needs some work 😭

[GreLI]

Seems like, there is no need in table. Configuration like this works as well:

themeSetting: {
  defaultValue: { summary: 'light' }

(just use it instead of defaultValue: 'light')

[GreLI]

Seems like, there is no need in table. Configuration like this works as well:

  defaultValue: { summary: 'light' }

Seems like it's bugged though. { summary: 'light' } goes to component as prop value (I'm using react).

[Katarina-UBCO]

Ok, here is what has worked for me:

// No need to change 👇
<Meta
  title="Theme/QtmThemeProvider"
  component={QtmThemeProvider}
  argTypes={{
    themeSetting: {
      type: 'QtmThemeSetting',
      description: 'Determines what theme should be applied to the application.',
      table: {
        defaultValue: { summary: 'light' }
      },
    }
  }}
/>


// The crucial part 👇
<ArgsTable story="." />

Storybook version: 6.4.19

[peterctct]

Experiencing the same issue here on 6.5.8, though not using MDX. Defining a default value like so in tsx:

const AlertMeta: ComponentMeta<typeof Alert> = {
  component: Alert,
  title: 'Components/Alert',
  argTypes: {
    kind: {
      table: {
        defaultValue: {
          summary: 'info',
        },
      },
    },
  },
};

In the Canvas view, the table will correctly show info in the Default column, but it is missing in the Docs view.

The proposed workaround of removing component: Alert and redefining the argTypes works but is not a tenable solution.

@Katarina-UBCO's alternative isn't applicable for us since we aren't using MDX.

We default to the Docs tab, so would really like to see this addressed as it makes discovery of the default values more difficult for our users.

[Alxandr]

This seems to have gotten even worse in v7 beta. I have the following in my Button docs (MDX):

import * as ButtonStories from './Button.stories.tsx';
import { Button } from './Button.tsx';

<Meta of={ButtonStories} />

# Button

## Arguments

<ArgsTable of={Button} />

And in Button.stories.tsx I have:

export default {
	title: 'Atoms/Button',
	component: Button,
	argTypes: {
		onClick: { action: 'clicked', table: { disable: true } },
		variant: { table: { defaultValue: { summary: `"primary"` } } },
		size: { table: { defaultValue: { summary: `"large"` } } },
	},
};

This results in the args table being completely different in the docs and in the stories. However, if I change the ArgsTable to point to a story, I suddenly also get controls that I can change that affect the story, which is not what I want.