storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.6k stars 9.31k forks source link

Boolean argument defined with "control" gets incorrectly parsed as string on page refresh #18796

Closed federico-terzi-anima closed 1 year ago

federico-terzi-anima commented 2 years ago

First of all, thank you for your hard work! Storybook is amazing

Describe the bug Arguments defined with control: boolean gets incorrectly parsed as string instead of boolean on page refresh, unless also type: boolean is specified

Many storybooks I've encountered define a boolean argument as follows:

disabled: {
  control: {
    type: "boolean"
  }
}

While this works correctly when changing the values using the control panel, it misbehave on page refresh. In such cases, an arg type like disabled:false gets incorrectly parsed as "false" string instead of false boolean value, which makes a lot of components misbehave

Here's a short recording of it happening: https://www.loom.com/share/97d1374096e84de2a202cab89c4d4781

To Reproduce I've created a repository for reproduction: https://github.com/federico-terzi-anima/storybook-boolean-parsing-bug Here's an overview of what happens: https://www.loom.com/share/97d1374096e84de2a202cab89c4d4781

System

Environment Info:

  System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.0/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 102.0.1
    Safari: 15.3
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-interactions: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9 
    @storybook/builder-webpack4: ^6.5.9 => 6.5.9 
    @storybook/manager-webpack4: ^6.5.9 => 6.5.9 
    @storybook/react: ^6.5.9 => 6.5.9 
    @storybook/testing-library: ^0.0.13 => 0.0.13 

Thanks!

hrmcdonald commented 1 year ago

Any update on this? Does this just always happen when there is some kind of invalid control configuration?

shilman commented 1 year ago

Pretty sure this is fixed in 7.0. Please try upgrading to the latest prerelease.

Migration guide: https://storybook.js.org/migration-guides/7.0