Add status "badge" in sidebar

[stowball]

It would be awesome if this addon added an appropriately coloured dot beside the story name in the sidebar, and potentially some treatment to the parent so you can see the status at a glance for all stories/components.

Could potentially only identify beta or deprecated ones to reduce noise

[gavmck]

Hey that would be neat! I don't know if I can get sidebar access from the storybook addon API, but I'll give it a shot

[gavmck]

I don't think this is possible in Storybook v5.

If you can see a way of doing it, or anyone who is editing the sidebar content using addons, then let me know.

Leaving this open in case somebody figures it out.

🙏

[adrienrn]

Coming back to this issue looking for a similar thing.

As of Storybook 6.2.0 (which is still at a release candidate phase 🙈 ), it will be possible to use a configuration sidebar.renderLabel ! Briefly tested it and we can start prepare for it for when it is stable:

The gist would be:

// .storybook/manager.js
import { addons } from '@storybook/addons';
import { Icons } from '@storybook/components';
import { styled } from '@storybook/theming';
import React from 'react';

const SuffixIcon = styled(Icons)`
  align-self: center;
  display: inline;
  height: 1.125em;
  margin-left: 4px;
  width: 1.125em;
`;

addons.setConfig({
  sidebar: {
    renderLabel: item => {
      // item can be a Root | Group | Story
      if (!item.isLeaf) {
        return item.name;
      }
      
      return (<>{item.name}<SuffixIcon icon="lightning" /></>);
    },
  },
});

To dig deeper:

• Core: Add renderLabel to customize sidebar tree labels storybookjs/storybook#13121
• https://github.com/storybookjs/storybook/blob/05078ff2605eec0f79a3de2c60adbe9946a9ce37/lib/ui/src/components/sidebar/Tree.tsx#L140
• https://github.com/storybookjs/storybook/blob/b17f10833cfe781f3ea9b9f5a7dd591f0ae27c0d/lib/api/src/modules/provider.ts#L12
• https://github.com/storybookjs/storybook/blob/b17f10833cfe781f3ea9b9f5a7dd591f0ae27c0d/lib/api/src/lib/stories.ts#L45

[gavmck]

Status badges with title attr hovers so you can see the full status and description are now available on v3.0.0 🎉