Sidebar subheadings unexpectedly appearing

[astrotim]

Since upgrading from v6-beta to v6-rc, we've noticed that some stories are getting the non-expandable groupings in the sidebar while others aren’t, and I can’t see any difference in how they are implemented.

For example our MDX page for Button appears in a folder in alphabetical order.

It is marked up with the Meta component

// Button.stories.mdx
<Meta title="Button/Docs" />

while our MDX page for List appears with a subheading, at the end of the alphabetical list. It is marked up the same

// List.stories.mdx
<Meta title="List/Docs" />

The configuration of these two components is very similar.

// Button.js
export default Button

// Button.story.js
export default {
  title: 'Button',
}

// List.js
export default List

// List.story.js
export default {
  title: 'List',
}

Note: we use ComponentName.stories.mdx and ComponentName.story.js simply to make the MDX appear before the CSF in the navigation order.

To Reproduce
We don't have any public-facing URLs to share unfortunately, but the Storybook admins may have access to view our Chromatic builds. There are also some illustrative screenshots below.

Chromatic build using v6-rc which demonstrates the appearance of 6 subheadings below the main alphabetically ordered story list.

Expected behavior
I expected not to see subheadings since there were no code changes related to opting in to this appearance.

Chromatic build using v6-beta which shows the same 6 components folders in alphabetical order without any sub headings.

Screenshots

After: v6-rc.3 (sub headings appearing - screenshot simplifed for brevity)

Before: v6-beta (no subheadings - screenshot simplifed for brevity)

Code snippets
If applicable, add code samples to help explain your problem.

System:
Results of npx -p @storybook/cli@next sb info - TBD

Packages installed:

"@storybook/addon-actions": "6.0.0-rc.3",
"@storybook/addon-backgrounds": "6.0.0-rc.3",
"@storybook/addon-controls": "6.0.0-rc.3",
"@storybook/addon-docs": "6.0.0-rc.3",
"@storybook/addon-knobs": "6.0.0-rc.3",
"@storybook/addon-viewport": "6.0.0-rc.3",
"@storybook/addons": "6.0.0-rc.3",
"@storybook/react": "6.0.0-rc.3",

Additional context
We have worked around this for now by disabling the subheadings via:

addons.setConfig({
  showRoots: false
});

But we would like to evolve towards using the subheadings, so it would be great to understand why and how to use them properly.

[ndelangen]

@astrotim Do you think you could help me reproduce this?

I'm sure there's a bug / unwanted feature in there, but in our official storybook example (which does use a combination of storieOf, MDX, CSF)

Do you have any pointers to what you think might be the cause of this?

[astrotim]

@ndelangen I haven't been able to spot any clues on this one, but I'll try reproducing it on a branch in the Storybook example and see how that goes.

[ndelangen]

Thanks @astrotim 👍

[stale]

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!

[doublejosh]

I was also stumped by the subheading logic. Seems to only appear when components are put into a folder with no root component/story.

However, on auto-reload it sometimes appears *once if the path root string doesn't match the folder name it's in. But it goes away on reload :)

[shilman]

Can you try upgrading to 6.1 and see if it's fixed with the new sidebar?

npx sb upgrade --prerelease

[astrotim]

OK, will do!

[stale]

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!

[doublejosh]

Here's the docs on "roots"...
https://storybook.js.org/docs/react/configure/sidebar-and-urls#roots

[shilman]

Closing this for now. Please let me know if there's more to be done here!