ArgTypes defaultValue displaying as blank in preview.

[SamSverko]

Describe the bug
Providing a value for the defaultValue key in the ArgType object results in nothing being displayed on preview.

To Reproduce
Steps to reproduce the behavior:

1. Create a new story with a similar structure as the code snippet below.
2. Build storybook and view the component.

Expected behavior
The value of devaultValue would appear under the Default section of the Controls addon.

Screenshots

Code snippets

import { action } from '@storybook/addon-actions'
import { Button } from '../src/button'

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    type: {
      defaultValue: 'primary', // does not display on preview
      description: 'type description',
      control: {
        type: 'select',
        options: ['primary', 'secondary', 'tertiary'],
      },
    },
    children: {
      defaultValue: 'Button text', // does not display on preview
      description: 'children description',
    },
  },
}

const Template = (args) => <Button onClick={action('onClick')} {...args} />

export const Default = Template.bind({})
Default.args = {
  type: 'primary',
  children: 'Button text',
}

System:

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 14.0.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 78.0.2
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.5 => 6.0.5 
    @storybook/addon-essentials: ^6.0.5 => 6.0.5 
    @storybook/addon-knobs: ^6.0.5 => 6.0.5 
    @storybook/addon-links: ^6.0.5 => 6.0.5 
    @storybook/addon-storysource: ^6.0.5 => 6.0.5 
    @storybook/addons: ^6.0.5 => 6.0.5 
    @storybook/react: ^6.0.5 => 6.0.5 
    @storybook/storybook-deployer: ^2.8.6 => 2.8.6 
    @storybook/theming: ^6.0.5 => 6.0.5 

[marie-maxime]

Not sure if this is a bug, but I had to add a table property for it to works on my storybook.

Here's an example:

export default {
  title: 'Accordion',
  component: Accordion,
  argTypes: {
    isExpanded: {
      control: "boolean",
      defaultValue: false,
      description: "if true, acoordion is expanded on render",
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: false },
      }
    },
  },
}

[shilman]

@marie-maxime What you've pasted is correct. However, the ArgsTable should probably also use the argType.defaultValue field if argType.table.defaultValue is not specified, so I plan to fix that in a patch release.

[SamSverko]

Thank you for the alternative @marie-maxime , I'm using that for now until I figure out what I'm doing wrong. The summary does have different styling than description.

I found this helpful table that details the argTypes values. It includes the table portion. I see that description is provided, but not defaultValue.

The summary is styled to look like code, or some form of highlighting.

[feerzlay]

Having the same issue with angular and compodoc when using ArgsTable block.

[anna-tsukanova]

The same problem. When I'm using

Component.argTypes = {
  someProp: {
    defaultValue: 'm', // does not display in Controls panel
    description:
      'Some text', // works
  }
}

[Magador]

Hey !

This problem is maybe caused by an early return in the AppSummary component.

ArgSummary expects that the provided value prop is a object { summary, detail } but since we directly pass defaultValue in the value prop of ArgValue in the ArgRow component (ArgValue calls ArgSummary), summary is undefined and nothing is rendered

Should ArgSummary check the shape (object, string, ...) of the value prop before destructuring it ?

[shilman]

To affect the Default column in the ArgsTable, you should set the argTypes.<field>.table.defaultValue field. The value should be an object with the keys summary and optionally details, which are both strings.

For example:

export default {
  component: MyComponent,
  argTypes: {
    argName: {
      table: { defaultValue: { summary: 'SomeType<T>' } },
    },
  },
};

For the current state of argTypes.<field>.defaultValue see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-longer-inferring-default-values-of-args

Closing this as not a bug!

[dexster]

@shilman Just to confirm, we will always have to use table: { defaultValue ... whenever we want to see default values as there is no auto generation / population for this at all (at least in Angular)?

Also, it still does not show in MDX as per this issue, #12644.

[shilman]

@dexster I think #12644 is saying that there is a bug for Angular's default value extraction. I think it's an easy fix and then it will show up in both MDX and DocsPage.

[michaelfaith]

@shilman I'm still seeing it as an issue in React with MDX, but only for the ArgsTable element in docs view. On the Canvas view, it shows the default.

Docs

Canvas

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

[shilman]

@michaelfaith Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro.

[dexster]

Check my comment about this in #12644 (comment)

[michaelfaith]

@shilman I just created this repo demonstrating the bug https://github.com/michaelfaith/storybook-mdx-argtype-bug
Should I open a new bug, or should it stay in this context? Whatever you prefer.

[michaelfaith]

Went ahead and opened a new issue here: #15838

[JRRS1982]

Same issue here, but not on tables, the defaultValue under a prop is not populating the children field (have tried at one level higher)... react mdx. When i manually enter text to the children field in the addons section it populates the canvas with the mapping i.e. a reactNode, but i was / am hoping to have the node declared in the stories.mdx file and have a default mapping applied.

  argTypes={{
    linkVariant: {
      options: ['text', 'button'],
      control: { type: 'radio' },
    },
    children: {
      options: ['Default'],
      control: { type: 'text', defaultValue: 'ExampleReactNode'},
      mapping: {

[sai-github]

For anyone visiting this page, this is now possible with args along with argTypes
Check this comment #21016 (comment)

[MichaelJHaywood]

For anyone visiting this page, this is now possible with args along with argTypes Check this comment #21016 (comment)

@sai-github Does this solve it? args will populate the control but it doesn't populate the Default column from what I can tell.

  args: {
        gap: 4
    },
    argTypes: {
        gap: {
            description: "Letter type unit distance between left and right sides",
            control: {
              type: "number"
            },
            defaultValue: 4
        }
}