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.
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)
@lucas-labs you need to opt into inline rendering by configuring
.storybook/preview.js
:with this PR it will work https://github.com/storybookjs/storybook/pull/13525
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
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:
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!