Storybook: Option to hide the action logger

[clauderic]

Is there an option to hide the action logger?

[arunoda]

Yes. That's via keyboard shortcuts.
See this post: https://voice.kadira.io/power-tools-for-react-storybook-d404d7b29b82#.6br0o4xb0

[clauderic]

Sorry, should've been more specific. I meant is there a way to permanantly disable it from a configuration perspective, not at runtime. I'd love to use that area to display code examples instead, since my app doesn't use Redux

I read this section about customizing the UI https://github.com/kadirahq/react-storybook/blob/master/docs/configure_storybook.md#customizing-the-ui, but it links to a dead file https://raw.githubusercontent.com/kadirahq/react-storybook/master/src/client/ui/layout.js

[arunoda]

Ah okay. That's a nice feature.

[arunoda]

You can simply remove it via our custom addons.js file.

Or you can hide it by adding down=0 query parameter.
See: http://kadira-samples.github.io/react-button/?down=0

[itsravenous]

Just to clarify, because it wasn't clear to me:

You can simply remove it via our custom addons.js file.

This means adding an addons.js file in your .storybook folder. This will disable the loading of the default addons. If, like me, you want the links addon (which is one of the defaults) but _not_ the action logger, just install @kadira/storybook-addon-links separately and import it in your addons.js file:

import '@kadira/storybook-addon-links/register';

[Bjvanminnen]

I've added an empty addons.js file to my .storybook folder, and I no longer get the action logger, but I still have a down panel that just states "No Panels Available". It seems the down panel should just be hidden in this case?

Is there any way to make it so that the down panel is hidden by default? Ideally I wouldn't have to add a query param every time to hide it.

[UsulPro]

@Bjvanminnen

https://github.com/storybooks/storybook-addon-options

[mrchief]

https://github.com/storybooks/storybook-addon-options

This is great except for this:

It is also possible to call setOptions() inside individual stories. Note that this will bring impact story render performance significantly.

[Hypnosphi]

@mrchief Why not use it globally (in config.js)?

[mrchief]

@Hypnosphi I'm trying to create a storybook where some of the stories will need the action panel. While some are simply CodeSandbox embeds. For those, I would like to claim the whole screen area and so would disable the action panel completely.

You can see it here: https://github.com/dowjones/react-dropdown-tree-select/tree/storybook

[jamesarmenta]

For posterity: This is now possible by configuring options in addParameters:

addParameters({
  options: {
      ...
      showAddonPanel: false
      ...
  }
});

See https://github.com/storybookjs/storybook/tree/master/addons/options for more details

[kriskate]

For posterity: This is now possible by configuring options in addParameters:

while that is technically true, you will need to add showAddownPanel: true option for all the stories that actually need the addons panel, as setting it to false in any story will hide it for all the stories

[shilman]

@kriskate if that's the case, you should be able to set it globally to true, since parameters cascade. (haven't tested for this specific case, but am certain cascading works)

[kriskate]

thanks @shilman , just tried doing so and it works. I've set showAddonPanel: true as global in config.js, and in the story I don't want it to be shown, as false.

The only inconvenience right now is that in order for this to work, you have to write your stories the old fashioned, non-exports way:

// works, hides the panels
storiesOf("Modal", module)
  .addParameters({ options: { showAddonPanel: false } })
  .add("Open Modal", () => <ModalBody />);


// doesn't work, the panels are shown
storiesOf("Modal", module).addParameters({ options: { showAddonPanel: false } });
export const OpenModal = () => <ModalBody />;

LE: Taken from https://github.com/storybookjs/storybook/issues/9175#issuecomment-566838973
This works:

// global addParameters - showAddonPanel: true


/* *.stories.tsx */

export const OpenModal = () => <ModalBody />;
OpenModal.story = {
  parameters: { options: { showAddonPanel: false } },
};