Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[addon-knobs]: options knob with display: multi-select inferring wrong type info #20

Open
t-moennich opened this issue Nov 30, 2020 · 2 comments

Comments

@t-moennich
Copy link

Just copied from this very nice detailed explanation in storybookjs/storybook#10692

Until storybookjs/storybook#12561 is resolved, a fix for the type error should be added to v5 🙏


Describe the bug
When using the options knob with {display: multi-select}, it is inferring the return type from the values of the valuesObj, which need to be strings in order for the multi-select to work. The return type is being inferred as string when the multi-select actually returns an array of strings, so string[].

To Reproduce
Steps to reproduce the behavior:

  1. Create a optionsKnob with the display set to multi-select
  2. pass in a values object with the labels and values you expect to see in the dropdown.
  3. pass in a default value, an array of the values you expect to be auto-selected.
  4. check the return value that optionsKnob returns

Expected behavior
Given that the optionsKnob returns an array of strings when it is being used as a multi-select, it should return the correct type information: string[]

Screenshots
The implementation:
Screen Shot 2020-05-08 at 11 46 18 AM

The resulting console log of what options is returning:
Screen Shot 2020-05-08 at 11 58 25 AM

The type error:
Screen Shot 2020-05-08 at 11 47 03 AM

The knob used in the UI is correct:
Screen Shot 2020-05-08 at 12 05 21 PM

Code snippets

      const valueOptions = {
        facebook: "facebook",
        twitter: "twitter",
        email: "email",
        link: "link"
      };
      const defaultNetworks: string[] = [
        "facebook",
        "twitter",
        "email",
        "link"
      ];

      const networks: string[] = options( //should return an array of strings
        "Networks",
        valueOptions,
        defaultNetworks,
        {
          display: "multi-select"
        }
      );

System:

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 10.16.3 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 81.0.4044.138
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: 5.3.10 => 5.3.10 
    @storybook/addon-docs: 5.3.10 => 5.3.10 
    @storybook/addon-info: 5.3.10 => 5.3.10 
    @storybook/addon-knobs: 5.3.10 => 5.3.10 
    @storybook/addon-links: 5.3.10 => 5.3.10 
    @storybook/addon-options: 5.3.10 => 5.3.10 
    @storybook/addon-storysource: ^5.3.13 => 5.3.18 
    @storybook/addons: 5.3.10 => 5.3.10 
    @storybook/react: 5.3.10 => 5.3.10 
@shilman
Copy link
Member

shilman commented Nov 30, 2020

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

Please upgrade and try them out today!

@stale
Copy link

stale bot commented Dec 25, 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@shilman shilman transferred this issue from storybookjs/storybook May 10, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants