Storybook: Decorators on stories are placed around the inline-view of the info-addon

[fangel]

I'm trying to use a combination of the Info-addon with inline: true and a decorator that limits the width of my component to X pixels.

What I currently have is

import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

storiesOf('MyComponent', module)
  .addDecorator(story => (
    <div style={{ width: 300, margin: '1em' }}>
      {story()}
    </div>
  ))
  .add('Instance',
    withInfo({
      text: 'A descriptive test',
      inline: true,
    })(() => (
      <MyComponent />
    )));

What I expected was that the inline info (header + source + prop-tables) was rendered in full width, and only MyComponent was wrapped in the decorator limiting its width to 300px.
However, the decorator is applied around the entire inline info view, also limiting the width of the header, source and prop-table.

The markup that ends up being inserted is the following:

<div data-reactroot="" style="width: 300px; margin: 1em;">
  <div>
    <div><!-- the info-addon header --></div>
    <!-- my component -->
    <div><!-- the info-addon source + prop-table --></div>
  </div>
</div>

What I was expecting was something like

<div>
  <div><!-- the info-addon header --></div>
  <div style="width: 300px; margin: 1em;">
    <!-- my component -->
  </div>
  <div><!-- the info-addon source + prop-table --></div>
</div>

Is there a way to use decorators to only decorate the component, and not the inline view too?

As far as I remember, the old addWithInfo-API didn't have the same problem/behaviour.

Versions: storybook/addon-info = ^3.2.9, storybook/react = ^3.2.8

[ImanMh]

Same issue here

[Hypnosphi]

You could add withInfo decorator after your own:

storiesOf('MyComponent', module)
  .addDecorator(story => (
    <div style={{ width: 300, margin: '1em' }}>
      {story()}
    </div>
  ))
  .addDecorator((story, context) =>
    withInfo({
      text: 'A descriptive test',
      inline: true,
    })(story)(context)
  )
  .add('Instance', () => <Button />);

Docs say though that withInfo won't work well when used as decorator other then first one: https://github.com/storybooks/storybook/tree/master/addons/info#usage-as-decorator
@UsulPro why is that so? The only problem I noticed is that "Story source" section includes the inner decorator

[UsulPro]

At this stage withInfo is exactly the same decorator as any other you adding with addDecorator.
It just works with a story prop passed to him. story could be wrapped to another decorator, but withInfo has no information about that.

It is important to declare this decorator as the first decorator, otherwise it won't work well.

I guess better to say that it should be the root decorator (actually the last one because each decorator wraps all previous)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 60 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[mattgreenfield]

I'm having this issue too. The above fixes don't seem to help. Has anyone had any luck? Thanks.

[dan-kez]

I am also experiencing the same issue. I wrap some of my components in divs with set width and it's affecting the addon.

[parkerbossier]

My current approach is to have one story that's only the component, so I have no "documentation" for wrapping divs or components. I then have another story with component variations or things wired up or similar. However, this does mean that it's not possible to render out a controlled component, have proper docs for it, and have it be interactive (because wrapping it in some sort of state control will kill the docs).