storybookjs/storybook

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

Fermée

#30 142 ouverte le 26 déc. 2024

 (6 commentaires) (1 réaction) (0 personne assignée)TypeScript (10 058 forks)batch import
argtypesbughelp wanted

Métriques du dépôt

Stars
 (89 909 étoiles)
Métriques de merge PR
 (Merge moyen 7j 22h) (184 PRs mergées en 30 j)

Description

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

Guide contributeur