Storybook: Disable when globally

[shilman]

Issue by lucasconstantino
_Friday Nov 18, 2016 at 19:53 GMT_
_Originally opened as https://github.com/storybooks/react-storybook-decorator-centered/issues/5_

---

Is there anyway to enable this globally but allow for disabling on a given story?

[shilman]

Comment by mnmtanish
_Saturday Nov 19, 2016 at 02:00 GMT_

---

Try wrapping your story with a div like this:

<div style={{ flex: 1 }}>
  // story
</div>

NOTE: I haven't this yet so maybe this will need a few tweaks to work well.

[shilman]

Closing this for now! Please re-open if this is still a problem!

[Billy-]

I would like this feature. It should be possible for any decorator...

[techieshark]

The suggested workaround from April 2017 seems to no longer work.

Given these styles:
https://github.com/storybooks/storybook/blob/fae0ff5b53bd32e9db89d551c48638eddbf814af/addons/centered/src/styles.js

The parent sets display: flex but there's an inner container between that and the story, and yet "The scope of a flex formatting context is limited to a parent/child relationship." - https://stackoverflow.com/a/37844240/1024811

Thus, setting flex: 1 on a grandchild of display: flex won't work.

[techieshark]

Would it be possible to disable through same mechanism as available with addon-info?

Like so:

storiesOf('MyComponent', module)
    .addParameters({ centered: { disable: true }, info: { disable: true }})

[seleckis]

Would be great to have this. E.g. I have need a wrapper with paddings for the most of components, but some of them should go without padding. Any suggestion?

Another option can be sending params to that global decorator somehow.

[michelcve]

@shilman is it possible to reopen? The original workaround doesn't seem to work anymore, and it would be nice if the property "centered: { disable: true}" would work when it's enabled globally.

[shilman]

Seems like it's already implemented?

https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/addon-centered.stories.js#L19-L25

[michelcve]

I'm using it with angular, and it doesn't seem to do anything for me when I set props "centered: { disable: true }".

But perhaps this is an angular specific bug then?

[michelcve]

I'm sorry, it does work. I actually made 2 mistakes:

1) I mistakenly added it to th 'props' section, instead of the 'parameters' section
2) It should be in the 'export default {}' and not in the 'export primary = () => {}'