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)

Most upvoted comments

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:

function withRootClass(story, context) {
  return {
    components: { story },
    inheritAttrs: false,
    template: `<span class="theme-whatever"><story v-bind="$attrs" /></span>`,
  }
}

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 with getByPlaceholderText. 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.