Sidebar filters and sidebar tag badges don't co-exist

[Sidnioulz]

I had the same issue. I noticed that when removing my sidebar filters in manager.ts, it did show up.

I have a sidebar filter in manager.ts so it won't display my stories with tag 'chromatic-only'

manager.ts
import { addons } from '@storybook/manager-api';

addons.setConfig({
  sidebar: {
    filters: {
      patterns: (item) => {
        // in the sidebar exclude all items with the tag 'chromatic-only'
        return !item.tags?.includes('chromatic-only');
      },
    },
  },
});

Originally posted by @Fedduh in #15 (comment)

[Sidnioulz]

Hi @Fedduh, sadly I could not reproduce this issue.

I've added the same sidebar filter config you're using on my local storybook instance on the main branch. Could you please run it and confirm you see the sidebar badges?

Could you please share a repo where sidebar filters trigger the issue so I can investigate it?

[Fedduh]

It was a bit of a hassle to setup a repo (my own repo is private).
I used some AI to set it up, but it does demostrate the issue. Perhaps it's cause by the Angular version of Storybook?

This is the stackblitz:
https://stackblitz.com/edit/sb1-kd55we?file=.storybook%2Fmanager.ts

If you run it (npm i && npm start) it will show the badge in the sidebar, and on top

When you

• 'restore' the commented code in './storybook/manager.ts' (the sidebar property)
• restart the application (stop current and npm start)

It will only show on top.

Hope this helps you debugging. I could indeed not reproduce the issue in your main branch.

(please ignore the node version warnings.. locally i do use node > v20. But i can't change the node version of Stackblitz)

[Sidnioulz]

I suspect that addons.setConfig({ sidebar }) erases the whole sidebar object, including renderLabel.

Could you try to keep your filters and add the following?

// .storybook/manager.ts
import { addons } from '@storybook/manager-api'
import { renderLabel } from 'storybook-addon-tag-badges'

const filters = { /* ... */ };

addons.setConfig({
  sidebar: {
    filters,
    renderLabel,
  }
})

[Fedduh]

That indeed fixes it! Thanks :)

[Sidnioulz]

Yay! Thanks for reporting back. I'll add a more explicit use case in the README so it's easier to spot.

[github-actions]

🎉 This issue has been resolved in version 1.2.1 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀