Storybook: @storybook-addon-options: per-story hiding panel, hides it for every story.

Created on 19 Jun 2019  路  13Comments  路  Source: storybookjs/storybook

Bug or support request summary

HI,

What we are trying to do, is to hide the knobs/actions panel per story. For example, on our welcomes page, we don't need it. So we used the options-addon to hide it for this "component".
And it works, BUT it also hides the panel for the rest of the stories.

What we want is to be able to hide the panel for one story and let it re-appear once we switch stories.
We know we can add the options again to the existing story, making it so that it shows up again, but I think that shouldn't be the only solution, no?

Steps to reproduce

  • Install the @storybook/addon-options
  • add the { options: { showPanel: false } } to a story of your choice
  • launch storybook and see if the panel is gone.
  • Now, switch stories.
    Result: the panel is hidden for every story.
    Expected result: the panel should be hidden on 1 story, and shown for the others.

Please specify which version of Storybook and optionally any affected addons that you're running

"@storybook/addon-actions": "^5.1.8",
"@storybook/addon-info": "^5.1.8",
"@storybook/addon-knobs": "^5.1.8",
"@storybook/addon-links": "^5.1.8",
"@storybook/addon-options": "^5.1.8",
"@storybook/addon-storyshots": "^5.1.8",
"@storybook/addons": "^5.1.8",
"@storybook/react": "^5.1.8",
"babel-plugin-require-context-hook": "^1.0.0",
"identity-obj-proxy": "^3.0.0",
"node-sass": "^4.12.0",
"prop-types": "^15.7.2",
"react-chromatic": "^0.8.4",
"react-content-loader": "^4.2.1",
"react-number-format": "^4.0.7",
"react-popover": "^0.5.10",
"sass-loader": "^7.1.0",
"styled-components": "^4.2.0"

Affected platforms

  • Versie 75.0.3770.100 (Offici毛le build) (64-bits)

Screenshots / Screencast / Code Snippets (Optional)

This is the code used to create the story that hides the panel. And it works. But hides the panel for the rest of the stories also.

import React, { Fragment } from 'react';
import { storiesOf } from '@storybook/react';

const Welcome = () => {
  return (
    <Fragment>
      <h1>Welcome</h1>
     </Fragment>
  );
};

storiesOf('Welcome', module).add('Getting started', () => <Welcome />, { options: { showPanel: false } });

End bug report support request - delete the rest below

options has workaround inactive question / support ui

Most helpful comment

Be awesome if it takes it one step further
If a story doesn't contain the settings/properties of a registered addon, it won't show its panel/tab.

All 13 comments

Be awesome if it takes it one step further
If a story doesn't contain the settings/properties of a registered addon, it won't show its panel/tab.

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!

Any updates on the solution?

Have you tried a workaround where you globally add

addParameters({ options: { showPanel: true }});

And then locally set it to showPanel: false on specific stories?

@shilman I tried that and it still dosen't work.

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!

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!

For the record: @alihassan0 @shilman the proposed workaround does indeed work in 5.3.12

@shilman

"build-storybook": "build-storybook --docs -c .storybook -s ./public",

does not work in 5.3.7. Do I need to update to some higher version?

@kushalmahajan in what way doesn't it work, and how is it related to this issue?

Oops! Posted on wrong thread. I will update accordingly.

@shilman

"build-storybook": "build-storybook --docs -c .storybook -s ./public",

does not work in 5.3.7. Do I need to update to some higher version?

try 5.3.12 that's the version I verified the functioning workaround :)

This workaround is not working for me in 5.3.19 or 6.0.10. I tried this:

I have showPanel set to true in .storybook/manager.js

addons.setConfig({
  showPanel: true,
});

In my documentation story, I am disabling it:

import GettingStarted from "./GettingStarted";

export default {
  title: "Documentation/Getting Started",
  component: GettingStarted,
  parameters: {
    options: {
      showPanel: false,
    },
  },
};

const Docs = GettingStarted;
export { Docs };

I have cleared all caches and site data in my browser.

When I first load a story that should have the panel shown, I see the panel. When I navigate to _Getting Started_ where the panel is hidden, the panel disappears. However, when I navigate to any other story from there on out, the panel is always hidden.

Was this page helpful?
0 / 5 - 0 ratings