question-mark
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.

Boolean default value not showing up in Addon-docs prop table

See original GitHub issue

Describe the bug When using addon:docs prop table for React tsx components the boolean default values don’t show up in the table.

To Reproduce

  1. Follow this guide
  2. Add some boolean prop like this:
import React, { FC } from "react";

interface ButtonProps {
  /**
   * Simple click handler
   */
  onClick?: () => void;
  /**
   * Is primary?
   */
  primary: boolean;
}

/**
 * The world's most _basic_ button
 */
export const Button: FC<ButtonProps> = ({ children, onClick }) => (
  <button onClick={onClick} type="button">
    {children}
  </button>
);

Button.defaultProps = {
  primary: true
};
  1. Run yarn storybook and see the result.

72208407-20e97480-349a-11ea-9255-647840810252

Expected behavior Default values showing up.

System: System: OS: Linux 5.0 Ubuntu 18.04.3 LTS (Bionic Beaver) CPU: (8) x64 Intel® Core™ i7-8550U CPU @ 1.80GHz Binaries: Node: 10.18.0 - /usr/bin/node Yarn: 1.21.1 - /usr/bin/yarn npm: 6.13.4 - /usr/bin/npm Browsers: Chrome: 79.0.3945.88 Firefox: 71.0 npmPackages: @storybook/cli: ^5.3.0 => 5.3.0

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
shilmancommented, Jan 21, 2020

Jiminy cricket!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.8 containing PR #9560 that references this issue. Upgrade today to try it out!

2reactions
LeandrodeLimaCcommented, Nov 17, 2022

Using “@storybook/react”: “^6.5.13” and ran into the same issue 😅

args: {
    defaultChecked: false,
    checked: false,
  },
  argTypes: {
    checked: {
      defaultValue: 'indeterminate',
      options: [false, true, 'indeterminate'],
      control: { type: 'inline-radio' },
    },
    defaultChecked: {
      defaultValue: false,
    },
  }

I had to display those as inline radio so at least it shows wich option is select by default image

Read more comments on GitHub >

github_iconTop Results From Across the Web

@component-controls/storybook - npm
Storybook Addon For live editing of component controls. ... by default will show both controls and props tables user setting can display ...
Read more >
Args - Storybook - JS.ORG
Args can be used to dynamically change props, slots, styles, inputs, etc. It allows Storybook and its addons to live edit components. You...
Read more >
Storybook - An alternative approach - Paul Scanlon
Prop tables can of course be used to document props in this format too. ... The Storybook default install npx sb init comes...
Read more >
Storybook Docs with mdx support and addon knobs - Medium
name: '@storybook/addon-docs', // new addon for docs ... a comment above each propType to add a description that will show up in the...
Read more >
vue.js - Storybook is displaying everything in Show Code
As you can see in the source code of the docs add-on for Storybook, there is a ... case 'boolean': return value ?...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found