[addon-controls] Story canvas isn't updated on Controls prop change for Vue component #11051

kvas-damian · 2020-06-05T09:49:27Z

Describe the bug
@[email protected] with docs and controls addons.
Story canvas isn't updated when I change prop value in Controls tab. Story uses correct prop value after manually re-rendering Canvas tab (change story in left menu or change tab to Docs and back).

To Reproduce
In vue-kitchen-sink:

Install @storybook/[email protected]
Run yarn storybook
Go to Button > Rounded
Change rounded prop in Controls tabs

No effect.

Change tab to Docs and back to Canvas
Component is rendered with selected prop values

Expected behavior
Component should be updated immediately

Screenshots

Code snippets

import MyButton from '../Button.vue';

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

export const Rounded = (args) => ({
  components: { MyButton },
  template: '<my-button :color="color" :rounded="rounded">A Button with rounded edges</my-button>',
  data() {
    return args;
  },
});
Rounded.argTypes = {
  rounded: { defaultValue: true },
  color: { control: { type: 'color' }, defaultValue: '#f00' },
};

The same happens for MDX <Story> component:

<Story name='args'
    args={{rounded: false}}
>
    {(args) => {
        console.log(args);
        // works on args change
        return {
            components: { MyButton },
            data() {
                console.log('data', args);
                // works only on component render
                return args;
            },
            template: '<my-button :rounded="rounded">A Button with rounded edges</my-button>',
        };
    }}
</Story>

System:

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 13.13.0 - ~/.nvm/versions/node/v13.13.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v13.13.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.13.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 76.0.1
  npmPackages:
    @storybook/addon-a11y: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-actions: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-backgrounds: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-controls: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-docs: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-knobs: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-links: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-storyshots: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-storysource: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addon-viewport: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/addons: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/source-loader: 6.0.0-beta.21 => 6.0.0-beta.21 
    @storybook/vue: 6.0.0-beta.21 => 6.0.0-beta.21

The text was updated successfully, but these errors were encountered:

matheo · 2020-06-05T15:58:06Z

@kvas-damian I'm not sure if the argTypes.defaultValue has the desired effect here,
I think you need to setup your default values following the docs:

Rounded.args = {
  rounded: true,
  color: '#f00',
};

your MDX seems to do that, but with rounded: false :-?

Martskin · 2020-06-05T22:18:48Z

I'm experiencing the same issue trying to get addon-controls working in Vue.

import MyButton from './MyButton';

export default {
  title: 'Button',
  component: MyButton,
  argTypes: {
    color: { control: { type: 'color' } }
  }
};

export const WithControls = (args) => ({
  components: { MyButton },
  template: '<my-button :color="color" :rounded="rounded">Hello Button</my-button>',
  data() {
    return args;
  },
});

https://github.com/Martskin/storybook-vue-playground/blob/master/stories/1-Button.stories.js

https://storybook-vue-playground.netlify.app/

shilman · 2020-06-08T08:23:10Z

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.23 containing PR #11076 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

Martskin · 2020-06-08T17:24:45Z

Thanks! Release https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.23 fixed it for me.

shilman · 2020-06-09T13:03:31Z

I think I need to redo this per #11076 (comment), re-opening

shilman · 2020-06-10T13:59:06Z

I took a different approach this time, based on the knobs examples. Feedback welcome on the PR: #11115

shilman · 2020-06-11T13:07:51Z

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.24 containing PR #11115 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

shilman · 2020-06-11T16:46:31Z

Docs page controls broken, re-opening. Ugh. Cc @backbone87

shilman · 2020-06-12T09:55:05Z

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.26 containing PR #11138 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

shilman · 2020-06-12T10:15:55Z

Here's the most recent version of the Vue story based on the previous set of changes. Please check it out if you're tracking this issue:

https://github.com/storybookjs/storybook/blob/next/examples/vue-kitchen-sink/src/stories/components/button.stories.js#L1-L28

kvas-damian · 2020-06-17T08:26:39Z

@shilman I think we still have this problem when we create MDX stories:

Add

<Story name='args'
    args={{rounded: false}}
>
    {(args) => {
        console.log(args);
        // works on args change
        return {
            components: { MyButton },
            data() {
                console.log('data', args);
                // works only on component render
                return args;
            },
            template: '<my-button :rounded="rounded">A Button with rounded edges</my-button>',
        };
    }}
</Story>

in https://github.com/storybookjs/storybook/blob/next/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx to verify that. For me canvas isn't updated.

shilman · 2020-06-17T09:54:48Z

@kvas-damian working for me. can. you check this out?

https://raw.githubusercontent.com/storybookjs/storybook/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.mdx

kvas-damian · 2020-06-17T10:04:13Z

Ok, I see the problem. I have to pass args via props, not data. Thanks for help

subhaze · 2020-09-01T19:37:14Z

@shilman I'm running into Canvas not updating as well on info @storybook/vue v6.0.21

I may be doing this in a non-supported way, but, the way I'm structuring stories is via example.stories.mdx and building out .vue single file components, then importing them into the example.stories.mdx file.

This appears to work fine on the docs side, I can update a control and it will update the component in the docs, however, when moving over to Canvas, the updates from the docs side are there but doing any updates in the Control panel on Canvas wont update the component, but, if I switch over to docs with the updates, the component on the docs side has the updates from Canvas side, and if I switch immediately back to Canvas after that, the updates are there.

Basically I'm just trying to avoid doing inline templates (which do update for both Docs and Canvas) and not having the extra overhead of defining the component in components:{...}, then writing out the component in the template string, then binding all the props. Using the render function all this is removed and I can just use the example.vue and any other .vue file as-is and pass the props object in like so:

... other imports ...

import StackedBasic from "./StackedBasic.vue";
import StackedBasicSrc from "!!html-loader!./StackedBasic.vue";

... define default arg types ...

<Meta title="Components/Cards/Stacked" argTypes={defaultArgTypes} />
// helper function
export const WrapComponent = (Component, props) => ({
	props: Object.keys(props),
	render: (h) => h(Component, { props }),
});

### Basic Card

<Canvas>
	<Story
		name="Basic Card"
		height="500px"
		parameters={{ storySource: { source: StackedBasicSrc } }}
		args={{ shadow: "shadow-md", title: "Card Titled" }}
	>
		{(args) => WrapComponent(StackedBasic, args)}
	</Story>
</Canvas>

<ArgsTable story="Basic Card" />

With this setup, we can build out multiple component examples as normal .vue files and reuse the WrapComponent passing in props in one go, which is handy since we can also use html-loader to pull in the source for the example and show it in the "show code" panel for a full view into the vue component usage.

The only problem is that Canvas doesn't update when controls are changed :(

Any help here would be much appreciated!

shilman · 2020-09-03T12:46:28Z

@subhaze sorry my vue knowledge is pretty poor. maybe @backbone87 or @Aaron-Pool can give a hand?

subhaze · 2020-09-03T18:16:28Z

OK thanks, I just wasn't sure if it was a limitation or expected behavior on Storybooks side to where you have to define components via template: '<component-here :a-prop="aProp" /> instead of a render function render: (h) => h(ComponentHere, {props}) for Canvas to update the component when changing control values.

shilman · 2020-09-05T01:13:20Z

I don't know the details, but we basically declare the names of the props we want like this:

https://github.com/storybookjs/storybook/blob/next/examples/vue-kitchen-sink/src/stories/addon-controls.stories.js#L19

Then @storybook/vue reactively updates those props behind the scenes when the arg values change. We have examples of consuming those props using a template. I don't know enough about vue to know whether anything special is needed for render functions.

rezkypg · 2020-10-21T05:09:15Z

Sorry I just want to make sure, do you already have workaround on this @subhaze ?
Currently I have the same exact problem as yours, even though I define components via template: '<component-here :a-prop="aProp" />.

subhaze · 2020-10-22T01:51:32Z

@rezkypg sadly no, I've been noticing at times stories not updating on control changes; A refresh works at times. But as my work around I'm just using a helper function that takes props and generates a template string with all the props in-lined.

rezkypg · 2020-10-22T06:27:49Z

Hoo I see. Thanks for the info @subhaze

jwir3 · 2021-01-26T16:17:11Z

I'm not sure if this is the same issue, but I've noticed that sometimes components, such as the one below:

import React from 'react';

import { SchedulePhase } from '../../';

export default {
  title: '03-Cells/SchedulePhase',
  component: SchedulePhase,
  argTypes: {
    timeUnit: {
      control: {
        type: 'select',
        options: [
          'years',
          'months',
          'weeks',
          'days',
          'hours',
          'minutes'
        ]
      }
    }
  }
};

const Template = (args) => <SchedulePhase {...args} />;

export const Default = Template.bind({});
Default.args = {
  phaseName: 'Prep',
  timeAmount: 2,
  timeUnit: 'hours'
};

Don't update on the Canvas view, but they do update on the Docs view. Moreover, in the above example, phaseName updates on the Canvas view, as expected, but the other two - timeAmount and timeUnit do not.

cherylcarpenter · 2021-10-12T00:06:35Z

why is this closed? What is the workaround?
I am experiencing this as described by @jwir3

shilman · 2021-10-12T00:19:32Z

@cherylcarpenter any chance you can open a new issue and provide a reproduction?
See how to create a repro. Thank you! 🙏

rickyruiz · 2021-10-12T17:57:05Z

why is this closed? What is the workaround? I am experiencing this as described by @jwir3

The workaround for me back then was to add a random key to the component to always enforce an update.

const Template: Story = (args, { argTypes }) => {
  return defineComponent({
    props: Object.keys(argTypes),
    setup(props) {
      return () =>
        h(
          BaseButton,
          {
            key: Math.random(),
            props,
          },
          ['Button']
        )
    },
  })
}

jwir3 · 2021-10-13T15:46:36Z

@cherylcarpenter Yes, as @rickyruiz mentioned, I force a re-render by adding a random key. I have a slightly more complicated method that resets when I want to force a re-render but not when I don't care about it rendering, as in situations where backend information is being computed that has no visual aspect to re-render, but it's essentially the same. (I should probably refactor this stuff out of my component, anyway, haha)

kvas-damian changed the title ~~Story canvas isn't updated on Controls prop change for Vue component~~ [addon-controls] Story canvas isn't updated on Controls prop change for Vue component Jun 5, 2020

shilman added addon: controls vue bug labels Jun 5, 2020

shilman added this to the 6.0 args milestone Jun 5, 2020

shilman self-assigned this Jun 6, 2020

shilman mentioned this issue Jun 8, 2020

Vue: Fix force rendering #11076

Merged

2 tasks

shilman closed this as completed Jun 8, 2020

shilman reopened this Jun 9, 2020

shilman mentioned this issue Jun 10, 2020

Vue: Add first-class args support #11115

Merged

shilman closed this as completed Jun 11, 2020

shilman reopened this Jun 11, 2020

shilman mentioned this issue Jun 12, 2020

Addon-docs: Fix Vue args rendering in Docs mode #11138

Merged

3 tasks

shilman closed this as completed Jun 12, 2020

shilman reopened this Jun 17, 2020

shilman closed this as completed Jun 17, 2020

jgaehring mentioned this issue Sep 7, 2020

Investigate Storybook for documenting component library farmOS/field-kit#410

Closed

01231 mentioned this issue Sep 21, 2020

Feature/replace knobs with controls axa-ch-webhub-cloud/pattern-library#1964

Closed

7 tasks

shilman added the has workaround label Oct 22, 2020

thalesagapito mentioned this issue Mar 2, 2022

Story canvas isn't updated on Controls prop change for Vue components #17605

Closed

jattasNI mentioned this issue May 3, 2022

Anchored region ni/nimble#530

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[addon-controls] Story canvas isn't updated on Controls prop change for Vue component #11051

[addon-controls] Story canvas isn't updated on Controls prop change for Vue component #11051

kvas-damian commented Jun 5, 2020

matheo commented Jun 5, 2020

Martskin commented Jun 5, 2020

shilman commented Jun 8, 2020

Martskin commented Jun 8, 2020

shilman commented Jun 9, 2020

shilman commented Jun 10, 2020

shilman commented Jun 11, 2020

shilman commented Jun 11, 2020

shilman commented Jun 12, 2020

shilman commented Jun 12, 2020 •

edited

Loading

kvas-damian commented Jun 17, 2020

shilman commented Jun 17, 2020

kvas-damian commented Jun 17, 2020

subhaze commented Sep 1, 2020 •

edited

Loading

shilman commented Sep 3, 2020

subhaze commented Sep 3, 2020 •

edited

Loading

shilman commented Sep 5, 2020

rezkypg commented Oct 21, 2020

subhaze commented Oct 22, 2020

rezkypg commented Oct 22, 2020

jwir3 commented Jan 26, 2021

cherylcarpenter commented Oct 12, 2021

shilman commented Oct 12, 2021

rickyruiz commented Oct 12, 2021

jwir3 commented Oct 13, 2021

[addon-controls] Story canvas isn't updated on Controls prop change for Vue component #11051

[addon-controls] Story canvas isn't updated on Controls prop change for Vue component #11051

Comments

kvas-damian commented Jun 5, 2020

matheo commented Jun 5, 2020

Martskin commented Jun 5, 2020

shilman commented Jun 8, 2020

Martskin commented Jun 8, 2020

shilman commented Jun 9, 2020

shilman commented Jun 10, 2020

shilman commented Jun 11, 2020

shilman commented Jun 11, 2020

shilman commented Jun 12, 2020

shilman commented Jun 12, 2020 • edited Loading

kvas-damian commented Jun 17, 2020

shilman commented Jun 17, 2020

kvas-damian commented Jun 17, 2020

subhaze commented Sep 1, 2020 • edited Loading

shilman commented Sep 3, 2020

subhaze commented Sep 3, 2020 • edited Loading

shilman commented Sep 5, 2020

rezkypg commented Oct 21, 2020

subhaze commented Oct 22, 2020

rezkypg commented Oct 22, 2020

jwir3 commented Jan 26, 2021

cherylcarpenter commented Oct 12, 2021

shilman commented Oct 12, 2021

rickyruiz commented Oct 12, 2021

jwir3 commented Oct 13, 2021

shilman commented Jun 12, 2020 •

edited

Loading

subhaze commented Sep 1, 2020 •

edited

Loading

subhaze commented Sep 3, 2020 •

edited

Loading