Storybook: Toggle default parameter options per story in CSF format

Created on 17 Dec 2019 · 6Comments · Source: storybookjs/storybook

I would like to be able to change the default parameter options of a story on a named export level. (it has to be in CSF format)

For example, I have a button story, one export shows the documentation, the other export shows the example. On the documentation, I would like to set showPanel = false and in the example set it to true

pseudo code below:

export default {
title: 'Button',
parameters: { options: {showPanel: true}}
};
export const Documentation = () => <>
{default.parameters.options.showPanel = false}
;

export const Example = () => <>
{default.parameters.options.showPanel = true}
;

Is this currently possible?

csf inactive question / support

Source

tleite

Most helpful comment

Parameters are hierarchical, so here's how that would work:

export default {
  title: 'Button',
  parameters: { foo: 'bar' } // by default all stories in this file get this
}

export const A = () => ... // foo = 'bar'

export const B = () => ...
B.story = {
  parameters: { foo: 'baz' } // foo = 'baz'
}

shilman on 18 Dec 2019

👍2

All 6 comments

Parameters are hierarchical, so here's how that would work:

export default {
  title: 'Button',
  parameters: { foo: 'bar' } // by default all stories in this file get this
}

export const A = () => ... // foo = 'bar'

export const B = () => ...
B.story = {
  parameters: { foo: 'baz' } // foo = 'baz'
}

shilman on 18 Dec 2019

👍2

This does not work for me...
Is there any example that you are aware, in which we can show/hide panel per export (not per story)?

tleite on 19 Dec 2019

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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

stale[bot] on 9 Jan 2020

@tleite This doesn't work?

export default {
  title: 'Button',
  parameters: { options: {showPanel: true}}
};

export const Documentation = () => <>Foo</>;
Documentation.story = {
  parameters: { options: {showPanel: false}}
}

shilman on 10 Jan 2020

stale[bot] on 31 Jan 2020

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!

stale[bot] on 1 Mar 2020

Was this page helpful?

0 / 5 - 0 ratings