controls: Boolean props interpreted as strings for radio control

Describe the bug After upgrade to v6.2 I started to see warnings in the console Received illegal value for '{{propName}}'. Supported options: 'false', 'true'. I was used to that boolean props are interpreted as radio control type, but it was using at least real true and false values (not strings).

To Reproduce Steps to reproduce the behavior:

1. Clone https://github.com/securityscorecard/design-system
2. Run storybook with yarn storybook
3. Open storybook in browser and console
4. Navigate to http://localhost:8008/?path=/story/components-datatable-internalcomponents-table--with-disabled-selection

Expected behavior Boolean prop should be interpreted as values not as strings. Also would be nice that boolean props are interpreted as boolean control type instead of radio.

Screenshots

System

Environment Info:

  System:
    OS: macOS 11.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.8.0 - ~/Downloads/design-system/node_modules/.bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-a11y: ^6.2.3 => 6.2.3 
    @storybook/addon-actions: ^6.2.3 => 6.2.3 
    @storybook/addon-backgrounds: ^6.2.3 => 6.2.3 
    @storybook/addon-controls: ^6.2.3 => 6.2.3 
    @storybook/addon-docs: ^6.2.3 => 6.2.3 
    @storybook/react: ^6.2.3 => 6.2.3 
    @storybook/theming: ^6.2.3 => 6.2.3 

┆Issue is synchronized with this Asana task by Unito

[shilman]

I think what’s going on here is an unintentional breaking change in the way argTypes are extracted for React/Typescript. Specifically, there are changes to the default reactDocgenTypescriptOptions configuration:

    // NOTE: this default cannot be changed
    savePropValueAsString: true,

In your repo, you’re overriding the settings so the new 6.2 config changes are not getting applied, and downstream 6.2 code is breaking because of it.

I think we should:

• Update MIGRATION.md
• Update the docs with the new defaults

@tmeasday WDYT

UPDATE: Oof no I’m wrong, this always gets set here:

https://github.com/storybookjs/storybook/blob/next/app/react/src/server/framework-preset-react-docgen.ts#L49

[Loic57]

Same here, all my bools props are shown like this in the browser <my-button disabled="false" /> whereas I would like something like <my-button disabled />