storybookjs/storybook

[Bug]: if a control option includes 'reverse' , `function reverse() { [native code] }` is displayed

Chiusa

#30.142 aperta il 26 dic 2024

 (6 commenti) (1 reazione) (0 assegnatari)TypeScript (10.058 fork)batch import
argtypesbughelp wanted

Metriche repository

Star
 (89.909 stelle)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

Describe the bug

If a story control type contains the word 'reverse' among its options, the control value in the UI for this option will display the text function reverse() { [native code] } instead of "reverse".

I've provided the StackBlitz reproduction link below, however it is from an anonymous fork, so it might get wiped after a while. In that case, the story setup is quite straightforward:

<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import SomeComponentComponent from './SomeComponent.svelte';

  const { Story } = defineMeta({
    title: 'Example/SomeComponent',
    component: SomeComponentComponent,
    tags: ['autodocs'],
    argTypes: {
      option: {
        control: "inline-radio",
        options: ['normal', 'reverse',],
      },
    },
    
  });
</script>

<Story name="SomeComponent" args={{ option:'normal' }} />

Reproduction link

https://stackblitz.com/edit/github-yndwrtai?file=src%2Fstories%2FSomeComponent.stories.svelte

Reproduction steps

  1. Create a component that accepts a string output
  2. In the component's story, specify the argType as {control: "inline-radio", options: ["normal", "reverse"]}
  3. Run Storybook and navigate to the component story. For the specified control, you will see the following options displayed:
• normal 
• function reverse() { [native code] }

System

torybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-essentials: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/addon-interactions: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/addon-svelte-csf: ^5.0.0-next.21 => 5.0.0-next.21 
    @storybook/blocks: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/svelte: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/svelte-vite: ^8.5.0-beta.6 => 8.5.0-beta.6 
    @storybook/test: ^8.5.0-beta.6 => 8.5.0-beta.6 
    storybook: ^8.5.0-beta.6 => 8.5.0-beta.6

Additional context

No response

Guida contributor