Skip to content

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

Open

Description

@t-moennich

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 

Activity

  1. shilman commented on Nov 30, 2020

    @shilman
    Contributor

    FYI, we鈥檝e 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!

  2. stale commented on Dec 25, 2020

    @stale

    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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions