How can I use 'selectedPanel` in storybook?

Question

I noticed a property in Storybooks Options Docs called selectedPanel which I assume will allow me to pre-select an addon panel.

I'm unclear on how to use it. The example is:

options: { selectedPanel: 'storybook/a11y/panel' }

What I don't understand is where the 'storybook/a11y/panel' string comes from. What if I want to preselect the 'Source' panel?

score 3 · Answer 1 · answered May 26 '20 at 20:34

3

For anyone looking to default to the knobs panel: selectedPanel: 'storybookjs/knobs/panel' appears to work!

answered May 26 '20 at 20:34

Katie

75
1
7

score 2 · Accepted Answer · edited May 07 '20 at 21:33

I've encountered the same issue and managed to find out that the panelId can at least be found in the addon's register source code step. For example, I wanted to open Readme tab for certain stories.

I ended up finding the id of the panel in registerWithPanelTitle.js, and then using it with the storiesOf API like this:

.addParameters({
  options: { selectedPanel: 'REACT_STORYBOOK/readme/panel' },
})

For a11y, it can be found in constants.ts.

Although, I've searched for those in the distributed node_modules versions in my case.

P.S. If you want to reorder the panels for all of the stories globally, the list that the addons are imported in handles it.

Thanks so much, this has been driving me crazy. – linuxdan May 07 '20 at 18:25 — linuxdan, May 07 '20 at 18:25

score 0 · Answer 3 · answered Nov 03 '20 at 15:37

I was using the @storybook/addons-essential in main.js and simply added @storybook/addon-controls to the front of the addons array option, like so:

module.exports = {
    addons: ['@storybook/addon-controls', '@storybook/addon-essentials'],
    ...
}

This puts the controls tab first, which is auto-selected.

How can I use 'selectedPanel` in storybook?

3 Answers3