Add option to disable What's New notification and indicator

[hudochenkov]

Is your feature request related to a problem? Please describe.

Many people prefer to avoid notifications, popups, toasts, and other ways to get attention. What's New notification toast and indicator are such things.

I subscribed to the Storybook blog RSS, and I update Storybook regularly. Extra notifications add more distraction to me.

Describe the solution you'd like

Add an option to turn off What's New notification toast and indicator on the cog menu:

Describe alternatives you've considered

As a workaround, developers could use Stylus browser extension to apply custom CSS to hide these things. But it's not a good solution, as it should be done on each developer machine.

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[jonniebigodes]

Hey @hudochenkov, thanks for reaching out to us with your idea. Appreciate it 🙏 ! Whether this would eventually materialize or not will be up for debate. In the meantime, you can disable the notifications from showing up by adjusting your Storybook configuration file by adding the disableWhatsNewNotifications option and setting it to true. For context, here's the documentation on how to do it.

Hope you have a fantastic day.

Stay safe

[hudochenkov]

This is awesome! Thank you! I tried to search for this, but couldn't find anything. Only found removed --no-release-notes CLI flag.

This works great! However it keeps indicator on the cog menu.

[andrienko]

An ugly (hacky) way to disable the what's new item from menu, and the green dot is to add the .storybook/manager-head.html file and write something like this there:

<style type="text/css">
  button[title='Shortcuts']::before,
  button[title='Shortcuts']::after,
  #list-item-whats-new,
  #list-item-about,
  #list-item-documentation {
    display: none;
  }
</style>

Of course, it won't disable the annoying items, will just hide them...

[DonnyVerduijn]

In order to target the notification at the bottom, you can use the following selector. Note that over time this might need to be adjusted but this seems the most straightforward way to do it currently.

#root > div:first-child > div:first-child {
  display: none;
}