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.

ArgsTable won't display info properly

See original GitHub issue

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:

Create a component
Add *.stories.mdx file for it
Create a Meta component describing a argType: name, description, table, etc…
Add a ArgsTable of the type of the component
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

Issue Analytics

State:
Created 3 years ago
Comments:12 (5 by maintainers)

Top GitHub Comments

2reactions

shilmancommented, Nov 27, 2020

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.

0reactions

adityaphilipscommented, Mar 31, 2022

@shilman I used (ArgsTable story=“specific-story-id”) in angular bracket in my mdx file and am working on lit element ,but after adding story id it throws error like cannot read properties of undefined (reading id) in my storybook ,I added some dummy set of code here please take a look and tell me how to resolve it.

import {Meta,Description,Canvas,Story, ArgsTable,} from ‘@storybook/addon-docs’; import {html} from ‘lit’; <Meta title=“XYZ” argTypes={{ label: { name: 'ABXDE ', description: ‘XYZ Label’, control: { type: ‘text’ }, table: { type: { summary: ‘The label contents’, } } } }} />

(ArgsTable story=“basic-components-xyz–xyz” /) used angular bracket here also

Top Results From Across the Web

ArgsTable - Storybook - JS.ORG

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...

Storybook (with Vite / Typescript / MDX) doesn't show ArgsTable

Show activity on this post. New versions of the vite builder should handle this correctly now. Try upgrading with npx sb@next automigrate ....

Next-level component showcasing with Storybook controls

Learn about controls, a new Storybook addon that lets you dynamically interact with your React components for demo and testing purposes.

Contributing - Page ⋅ Storybook - Akeneo Design System

Before adding a new Component, please see if the Component does not already exist, ... import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs'; ...

Setup CSF + MDX stories with @storybook/addon-docs - GitLab

It can't include more than one story in a docs page. ... that @storybook/addon-docs provides is ArgsTable which seems to be knobs for...