Storybook: Props in a story are not passed if they're named the same way as in the Vue component

[tzhelyazkova]

Describe the bug
Naming a prop in a story the same way the component's prop is named leads to a broken state where the property value is not passed to the component.
Both the story and the vue component use TypeScript.

Workaround
Naming the prop in the story differently from the respective prop in the component works.

To Reproduce

1. Create a story in TypeScript for a Vue component that has properties.
2. Define the property name in the story to be the same as the prop name in the component
3. Pass the property in the template like template: '<Button :type="type" />'

Expected behavior
The prop value is passed to the component.

Code snippets

// Button.vue
<template>
    <button :class="[ 'wikit', 'wikit-Button', `wikit-Button--${ type }` ]">
        <slot />
    </button>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend( {
    name: 'Button',
    props: {
        /**
         * The type of the button
         */
        type: {
            type: String,
            validator( value: string ): boolean {
                return [ 'neutral', 'progressive', 'destructive' ].includes( value );
            },
            default: 'neutral',
        },
    },
} );
</script>

// Button.stories.ts
import Button from '@/components/Button';
import { select } from '@storybook/addon-knobs';
import { Component } from 'vue';

export default {
    component: Button,
    title: 'Button',
};

export function normal(): Component {
    return {
        components: { Button },
        props: {
            // naming a prop the same way the component's prop is named leads to
            // a broken state where the property value is not passed to the component
            type: {
                default: select(
                    'Type',
                    [ 'neutral', 'progressive', 'destructive' ],
                    'neutral',
                ),
            },
        },
        template: '<Button v-html="content" :disabled="disabled" :type="type" />',
    };
}

System:

  System:
    OS: Linux 5.4 Ubuntu 18.04.4 LTS (Bionic Beaver)

  Binaries:
    Node: 12.17.0
    npm: 6.14.4



md5-8186192d32c1bf4637ef1b5897766bda



  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 79.0



md5-8186192d32c1bf4637ef1b5897766bda



  npmPackages:
    @storybook/addon-a11y: ^6.0.4 => 6.0.4 
    @storybook/addon-docs: ^6.0.4 => 6.0.4 
    @storybook/addon-knobs: ^6.0.4 => 6.0.4 
    @storybook/vue: ^6.0.4 => 6.0.4 

I cannot think of anything wrong with either the Vue component or the story itself.

[github-actions[bot]]

Automention: Hey @Armanio @backbone87 @elevatebart @leoyli @pksunkara @pocka, you've been tagged! Can you give a hand here?

[Aaron-Pool]

Any chance you could set up a codepen, or a repo with a minimal reproduction of this behavior?

[HerrBertling]

I'm running into this right now – checking within the next days :)

[HerrBertling]

I've reproduced this here: https://github.com/HerrBertling/nuxt-ts-storybook-docs-issue – although I'm not using addon-knobs but out of the box controls. The deployed Storybook can be found here: https://competent-beaver-af1f48.netlify.app/

All buttons have the same (default) values, although I've added specific variants via Template.bind({…}).

My issue might be different since it's using controls, but it seems to me that this is the same root issue (since controls should™ use the exact same naming convention)

EDIT: @tzhelyazkova I've added your case to the repo, it's also within the deployed storybook within the next minutes :blush:

[HerrBertling]

Turns out: If I actually use the correct setup for the controls/args stuff, it works as expected (=> https://github.com/HerrBertling/nuxt-ts-storybook-docs-issue/commit/7dd04d84eca339b2d8b6df1f262e46bb876d2759 ) – the knobs issue remains, though.

I'll check that next since I'll most certainly run into this as well.

[shilman]

@HerrBertling i'd recommend using controls/args instead of knobs

[HerrBertling]

@HerrBertling i'd recommend using controls/args instead of knobs

That would definitely solve the problem and also solve this issue @tzhelyazkova – maybe it's a solution for you as well? You can see the correct usage here: https://github.com/HerrBertling/nuxt-ts-storybook-docs-issue/blob/main/components/MyButton/MyButton.stories.js

[adrianosmond]

I'm also experiencing this issue. I only see the behaviour occurring on the select knob - text, number, boolean and object are working fine for me.

After a little investigation it looks to me like knobs and docs are conflicting with each other in some way, as either removing the component: MyComponent from the story's default export or removing the docs addon entirely seems to make the select knob work again. This is obviously not a solution but might be useful info?

[stale[bot]]

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!