Giters

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

Home Page:https://storybook.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

federico-terzi-anima opened this issue · comments

commented

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!

commented

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

commented

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