Group name includes leading and trailing whitespace

[x4th]

I'm trying to move one component group to the top to have it displayed before all others.

// .storybook/preview.tsx

export const parameters = {
  options: {
    storySort: {
      order: ['Line Items'],
    },
  },
}

This however has no effect and when I looked inside the related story I see I used:

// components/LineItems/SingleLineItems.stories.tsx

export default {
  component: SingleLineItem,
  title: 'Line Items / Single Line Item',
}

If I change order: ['Line Items'], to order: ['Line Items '], in the first file or title: 'Line Items / Single Line Item', to title: 'Line Items/Single Line Item', the group moves to the top. If there's a reason why whitespace here should matter you should at least make a note in the docs warning users to not have spaces around the slash.

[ghengeveld]

Related: #13275
This was released in 6.2.0-alpha.0. @x4th could you check if this problem goes away using that version of Storybook?

[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!

[x4th]

Hey, can you tell me how to do that? I tried running yarn add storybook@6.2.0-alpha.0 but when I run storybook (yarn storybook) which is start-storybook -p 6006 that still calls the old (stable) version. I checked the docs but couldn't find anything on this.

[ghengeveld]

@x4th You probably need to run with --no-manager-cache.

[bodograumann]

I have the exact same issue with storybook v6.2.9.
The only difference is, that I’m defining the stories in mdx format.

[ghengeveld]

@bodograumann Can you give an example of such a story file?

[bodograumann]

At least it is consistent, so that when I include the trailing space in the sort order, it works. :-D
Here is an example:

import { ArgsTable, Meta, Story } from "@storybook/addon-docs/blocks";
import Toast from "@/components/generic/Toast.vue";

<Meta title="Generic / Toast" component={Toast} />

# Toast

<ArgsTable />

Toast messages come in three flavors.

## Information

<Story name="Notice">
  {{
    components: { Toast },
    template: `
    <Toast
      severity="info"
      title="Notice"
      text="An alert has been triggered."
    />
  `,
  }}
</Story>

I left away the other two stories for brevity.

Relevant preview.js part goes along the lines of:

export const parameters = {
  options: {
    storySort: {
      method: "alphabetical",
      order: [
        "Generic ",
        "Section2 ",
        "Section3 ",
        "… ",
      ],
    },
  },
};

[ghengeveld]

@bodograumann Thanks. I confirmed an fixed the problem: #15038

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-beta.1 containing PR #15038 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[bodograumann]

Just upgraded to 6.3-rc.11 and it works very well. Thank you!