storybook: [Bug]: Args applied also to html/decorators, not only to the component itself
Describe the bug
I am using Storyboook 7 beta for my Vue 3 component library. The story is written in CSF 3 format. My component is CgsNumLocaleInput
and my story looks like:
export const Test = {
render: (args) => ({
components: { CgsNumLocaleInput },
data() {
return { firstValue: 13};
},
setup() {
return { args };
},
template: `
<CgsNumLocaleInput v-bind="args" v-model="firstValue"></CgsNumLocaleInput>
`,
}),
decorators: [
() => ({
template: `
<div class="input-group">
<span class="input-group-text">firstValue</span>
<story />
</div>
`,
}),
],
args: {
min: 1,
max: 20,
step: 1,
class: "form-control"
}
};
I need to apply args to the component CgsNumLocaleInput
only. Unfortunatelly, generated code looks like:
<div id="storybook-root" data-v-app="">
<!-- HERE IS THE PROBLEM: args are also applied on the following div -->
<div class="input-group form-control" min="1" max="20" step="1">
<!--
Should be: <div class="input-group">
-->
<span class="input-group-text">firstValue</span
>
<!-- Begin of code of the component CgsNumLocaleInput. Args are applied here, too, as intended -->
<input
type="text"
min="1"
max="20"
step="1"
class="form-control bg-danger"
readonly=""
/><input
type="number"
min="1"
max="20"
step="1"
class="form-control bg-danger"
style="display: none"
/>
<!-- End of code of the component CgsNumLocaleInput -->
</div>
</div>
How could I prevent applying args to html code in decorators? The same problem occurs if I use html directly in the story template (without decorators).
To Reproduce
No response
System
System:
OS: Windows 10 10.0.19044
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Binaries:
Node: 16.17.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.57)
npmPackages:
@storybook/addon-essentials: ^7.0.0-beta.4 => 7.0.0-beta.60
@storybook/addon-interactions: ^7.0.0-beta.4 => 7.0.0-beta.60
@storybook/addon-links: ^7.0.0-beta.4 => 7.0.0-beta.60
@storybook/blocks: ^7.0.0-beta.4 => 7.0.0-beta.60
@storybook/testing-library: ^0.0.14-next.0 => 0.0.14-next.1
@storybook/vue3: ^7.0.0-beta.4 => 7.0.0-beta.60
@storybook/vue3-vite: ^7.0.0-beta.4 => 7.0.0-beta.60
Additional context
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 2
- Comments: 16 (14 by maintainers)
Thanks @bodograumann 🙏 Closing this for now. Please let me know if there’s more to be done here!
So I finally managed to try the update and can confirm that the bug has been fixed in storybook 7.0.18. Will you close this issue, @Radouch ?
As a follow-up, there is a proposal by @shilman about making vue stories easier to write, if anybody is interested: https://www.notion.so/chromatic-ui/RFC-Vue-story-components-9dc085671df34e12901b48fcba4b491d
Simple solution to this:
I don’t think it would be fixable under the hood, as there’s hardly a way to know where the original root of the component is located in the template being given to the story renderer. The documentation could be updated to include
inheritAttrs
by default. Thoughts?I don’t understand why
inheritAttrs: false
should be necessary now, when it was working fine before.We are having the same problem. This causes breaking tests, because we add e.g.
placeholder
text and select the DOM Node by it in our play function withgetByPlaceholderText
. This fails, because now there are two nodes with this exact text.Will now just add another sibling node to the top-level to workaround the problem, but it is definitely a bug.