Storybook: When group specified for any knob, others without group are not displaying

[SkReD]

When set group for knob in story other knobs, that dont have group, are not displaying in knobs panel

To Reproduce
Steps to reproduce the behavior:

1. Add story with two knobs (text for example)
2. Set group to one of them
3. Open storybook
4. Knob without group is not in knob panel

Expected behavior
Group 'All' should contain the knob without group

Screenshots

Code snippets

<Block variation={{
    endpoint: text('frame 1: endpoint', 'http://www.google.com', 'test'),
    height: text('frame 1: height', '1650px')
}}

System:

• OS: Windows10
• Device: Laptop Dell G3
• Browser: Chrome
• Framework: react
• Addons:
  
  
  
  • @storybook/addon-actions: "4.0.6",
  
  
  • @storybook/addon-comments: "3.2.19",
  
  
  • @storybook/addon-console: "1.1.0",
  
  
  • @storybook/addon-info: "4.0.6",
  
  
  • @storybook/addon-knobs: "4.0.6",
  
  
  • @storybook/addon-links: "4.0.6",
  
  
  • @storybook/addon-notes: "4.0.6",
  
  
  • @storybook/addon-options: "4.0.6",
  
  
  • @storybook/addon-storyshots: "4.0.6",
  
  
  • @storybook/addon-storyshots-puppeteer: "4.0.6",
  
  
  • @storybook/addon-viewport: "4.0.6",
  
  
• Version: 4.0.6

[jaydlawrence]

Having the same problem.
We are having to go through all of our Knobs and set a group for all of them now, just so that they show up.

[fredxie]

We are experiencing the same issue. Having to add default groupId to all the knobs is a huge drag

[ehtonay]

My project is suffering from this issue. Any chance for a fix?

[lordfido]

Any clue about the status of this issue?

[Jessidhia]

I think I more-or-less get what is happening:

https://github.com/storybooks/storybook/blob/next/addons/knobs/src/components/Panel.js#L141-L163

The way the tabs work is, they're all rendered but only the selected one is not display: hidden;. When the "ALL" tab is selected, it just shows the contents of all the tabs at the same time.

The problem is, there is no tab being created for the items that "don't have a group". That's what's supposed to be in place of the () => null in the groups[DEFAULT_GROUP_ID] tab.

[shilman]

Yippee!! I just released https://github.com/storybooks/storybook/releases/tag/v4.2.0-alpha.10 containing PR #5106 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[maikthomas]

Looks like this was released in https://github.com/storybooks/storybook/releases/tag/v4.1.7 already

Add-knobs: render non-grouped knobs in the ALL tab (#5106)

(Incase anyone else was waiting for 4.2)