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?

Answer 1

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.

Answer 2

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

Answer 3

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.