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

[shilman]

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.

[michaelbayday]

i was experiencing something similar to this with react

[petermikitsh]

I've been observing controls not updating the render on the canvas tab, with react

[shilman]

@michaelbayday @petermikitsh do either of you have a repro you can share? haven't seen that yet.

[blowsie]

@shilman

reproduced in vue, here https://github.com/storybookjs/storybook/issues/11990

[blowsie]

Reproduction is now showing the controls and showing the issue https://github.com/blowsie/storybook-vue

[shilman]

The problem is the story:

https://github.com/blowsie/storybook-vue/blob/master/src/TestComponent.stories.js#L11

Try:

const Template = (args, { argTypes }) => ({

[blowsie]

Fixed my issue, thanks!

[petermikitsh]

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

[flobiber]

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

[manuelmeister]

Can be observed here as well: https://storybookjs.netlify.app/angular-cli/?path=/docs/docbutton--basic

[jamesjenkinsjr]

Scouring around, this workaround got my Docs page re-rendering with changes to controls (for React implementations, but perhaps could also work for Vue?):

import { parameters } from "@storybook/addon-docs/dist/frameworks/react/config";
import { addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
  docs: {
    ...parameters.docs,
    container: DocsContainer,
    page: DocsPage,
  },
  controls: {
    expanded: true,
  }
});

Note the import and spread of parameters.docs

[shilman]

@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.

[ThibaudAV]

with this PR it will work https://github.com/storybookjs/storybook/pull/13525

[lucas-labs]

Hi! I'm experiencing this issue with Angular + iframes. I see #13525 was already merged and it should've fixed this. There's no one else having this problem any more? Maybe it's something on my side?

[shilman]

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

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

[dmartinjs]

@lucas-labs I have this problem too.

@shilman but if we have a component taking the whole page as popin for example ? with that I can't render inline and controls are still not working with iframes.

[lucas-labs]

@dmartinjs that's kind of my situation too. In my case, the component is not taking the whole page, but it's a static header stuck to the top, and since I have several stories, using inline components causes all my stories to render one on top of each other taking the same space in the docs page.

[RenanRossiDias]

Same problem in Vue. :/

[dmartinjs]

I found a partial solution to deal with this by disabling iframe and using decorators to set a height and use the transform: scale(1) trick to have the component only render in the story.

So for example in my Story (in web component context):

export default {
  title: 'Indicators/Toast',
  decorators: [(story) => html`<div style="height: 100vh;transform: scale(1);">${story()}</div>`],
}

[qortex]

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

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

Stumbled upon this too (docs not updating on input changes, but canvas does), and this fixes the issue with import { addParameters } from '@storybook/angular';.

Shouldn't it be made the default for Angular (and/or other frameworks?)? What are the drawbacks?

[tannguyenad]

Im facing the same issue. Not only the controls but also the global context does NOT work properly in Docs page.

[EliezerB123]

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

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

Shouldn't it be made the default for Angular (and/or other frameworks?)? What are the drawbacks?

@qortex Apparently it's deliberately set to false by default for Angular. Not sure what are the drawbacks, though... https://github.com/storybookjs/storybook/pull/14447

[SushkaVlad]

Hello, everybody. I'm facing the same issue using parameter - docs: { page: DocsPage, inlineStories: false, iframeHeight: 500 } (Framework - React). Am i right that the only option is to switch inlineStories to true. And how can we solve that if we need to render component in iframe. @shilman

[shilman]

@SushkaVlad you're correct that's the only option for now

@tmeasday will any of the recent docs rearchitecture address this limitation of addon-docs custom useArgs hook for iframed stories?

[SushkaVlad]

@shilman Thanks a lot)

[tmeasday]

@shilman I don't think we've changed the implementation, but then again it uses the channel so it's not clear to me why it wouldn't work. Probably something we should look at while we revisit the ArgsTable component cc @JReinhold

[tmeasday]

Oh, is the issue that we have a preview embedded inside a preview and messages aren't making it three layers deep? I guess that's probably the problem, scratch what I just said above.

I don't think anything we are doing will influence this problem. It's sort of orthogonal to everything else.

[quantizor]

Hi, I saw that @shilman closed my bug ticket in #22148, is a fix being planned?

[tmeasday]

@probablyup it's not something that's actively being worked on. But would be happy to support someone working on it.

[quantizor]

I could take a crack at it with a bit of guidance