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

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

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

[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)