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.

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

See original GitHub issue

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)

Issue Analytics

State:
Created 2 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

1reaction

Katarina-UBCOcommented, Mar 17, 2022

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

1reaction

dexstercommented, Aug 13, 2021

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.

Top Results From Across the Web

ArgsTable - Storybook - JS.ORG

Storybook Docs automatically generates component args tables for components ... customize what is displayed in the ArgsTable by extending the ArgTypes data, ...

storybook/addon-docs - npm

Start using @storybook/addon-docs in your project by running `npm i ... props tables, and code examples into clean, readable pages. MDX.

Docs / ArgsTable - Normal ⋅ Storybook - Chromatic

ArgsTable. Display the props for a component as a props table. Each row is a collection of ArgDefs, ... This story is not...

storybook: Using argtypes in mdx does not have control

That's weird because in our projects we are using this approach and it's working. In this link, I can't see an example with...

Doc Blocks - Storybook

Storybook Docs automatically generates component args tables for ... You can customize what's shown in the ArgsTable by customizing the ArgTypes data.