Added content wrapped in decorator

[shilman]

Issue by aray12
Friday Jul 15, 2016 at 16:41 GMT
Originally opened as storybook-eol/react-storybook-addon-info#40

---

So if I want to provide some styling just to the component. The following example will center everything, including what addon-info adds

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

storiesOf('Button', module)
  .addDecorator(story => (<div style={{width: '100px', margin: 'auto'}}>{story()}</div>))
  .addWithInfo(
    'Standard
    `
    This should continue to be normal and not constrained by the decorator <div>
    `,
    () => (
      <button onClick={action('button clicked')}>Click Me</button>
    ),
    { inline: true, source: true, header: true }
  )

Thoughts?

[shilman]

Comment by mnmtanish
Monday Jul 18, 2016 at 09:52 GMT

---

Yeah, that messes things up pretty bad. I think we should let addon developers decide that. How about exposing 2 new methods addRaw and decorate in addition to add?

cc: @arunoda

[shilman]

Comment by arunoda
Wednesday Jul 20, 2016 at 04:24 GMT

---

@mnmtanish basically we need some options to do this:

• apply decorators
• do not apply decorators

Is that? If so, I'm okay with a such an API.

May be an option to the .add as byPassDecorators.

[shilman]

Comment by mnmtanish
Thursday Jul 21, 2016 at 04:20 GMT

---

With the option users can only bypass decorators. With addRaw and decorate users can apply decorators exactly where they want. And adding an options object to the add method would make the API look terrible.

[davemcorwin]

In general, you can apply styles to the container of your story markup by providing a styles key in the configuration such as:

{
  ...
  styles: stylesheet => {
    stylesheet.children = {
    // some styles
    }
    return stylesheet
  },
}

However, this did not work when rendering inline (with inline: true in the config), so I just submitted #1431 to address this.

This doesn't fully address being able to add a decorator there, but it will solve some simple use cases.

[ndelangen]

#1147 We will move the info into a panel.

[ndelangen]

Feel free to continue discussing or re-open if there's still an issue afterwards 👍