storybook: Addon-docs: DocsPage Controls don't update iframe stories

Controls don’t update iframed stories on the Docs tab, but do update on the Canvas tab.

controls-bug

For frameworks that support inline rendering (react, vue, web-components, etc.), making the docs stories render inline is a workaround.

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 31
  • Comments: 45 (22 by maintainers)

Most upvoted comments

@lucas-labs you need to opt into inline rendering by configuring .storybook/preview.js:

export const parameters = { docs:  { inlineStories: true } };

So for me i also have this issue with angular -> here is an example repo: https://github.com/flobiber/storybook-angular

No quick fix yet @seriouz

@probablyup could you provide a simple reproduction on stackblitz? https://storybook.new

Here you go: https://stackblitz.com/edit/github-yxuht3?file=src%2Fstories%2FButton.tsx,src%2Fstories%2FButton.stories.ts&preset=node

If you go to the Buttons “Docs” story you can see that I added the following to the meta config:

parameters: {
  docs: {
    story: {
      inline: false,
    },
  },
},

After adding this, changing the controls for the primary story has no effect.

I noticed Storybook styles colliding into the inline stories, so I then thought to use the iframe mode to prevent that. And now I’m faced with the realization that controls do not working with iframe stories in docs page.

I’ve created a PR that would let users know of this current iframe stories + docs + controls limitation in the docs https://github.com/storybookjs/storybook/pull/25593

@jamesjenkinsjr if you needed to do this it’s due to a configuration problem and not related to the iframe issue here. I just want to clarify for anybody who stumbles across this to avoid confusion.

@shilman No repro; my observation was a hiccup on my upgrade from 5 to 6. My apologies!