storybook
storybook copied to clipboard
storybookjs
Vue ArgsTable missing prop if slot with same name
Describe the bug
If I define a prop and a slot with the same name, ArgsTable only displays the slot
To Reproduce Create a vue component with a prop and slot using the same name. See component example below.
Screenshots
Using the same name
Changing the prop name
Code snippets
<template>
<span>
<!-- @slot Pass a custom title -->
<slot name="title">
{{ title }}
</slot>
</span>
</template>
<script>
import Vue from 'vue';
export default {
name: 'Title',
props: {
/** Title */
title: {
type: String,
default: null,
},
},
};
</script>
System
Environment Info:
System:
OS: macOS 10.15.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
Browsers:
Chrome: 86.0.4240.80
Firefox: 79.0
Safari: 13.1.2
npmPackages:
@storybook/addon-a11y: ^6.0.26 => 6.0.26
@storybook/addon-essentials: ^6.0.26 => 6.0.26
@storybook/vue: 6.0.26 => 6.0.26
I am getting this also. Slot and prop with the same name is a valid case in vue.
Seems this is the same issue as this https://github.com/storybookjs/storybook/issues/12224
I think I prefer grouping props and slots, perhaps in the second parameter passed to the template.
It will be awesome to see it happening in 6.3.
This has big implications for most vue design systems, since usually slots and props have the same name.
Hacky workaround:
This gets both the fields prop and fields slot to show in the args table. Unfortunately it seems the slot fields is bound to the actual prop, so maybe you'd need to overwrite both in your story to get it to work in the argstable. For mine it's an array of objects so not worth getting it to work.
update, that does work:
I think it's better to write this way, but the best solution is to modify the source code, otherwise you won't be able to enjoy the benefits of automatic generation.
const argTypes = {
"slot:fields": {
name: "fields",
table: {
category: "slots",
},
},
fields: {
table: {
category: "props",
},
},
};
Version 6.5.13
I too have encountered this issue, wondering why my props are missing from the table. I'd prefer not having to maintain storybook manually to keep it in sync with my components.
