Problem with sidebar dots

[acc-nicholas]

Hey @etchteam

I'm trying to set up this addon, but i can't seem to get the sidebar dots working as i would expect.

I followed the setup instructions and added the necessary configuration to .storybook/main.js. But the sidebar dots did not appear.

I looked through the code/issues and found where the dots come from:
https://github.com/etchteam/storybook-addon-status/blob/master/src/register.tsx#L29

After thinking on that i realized the first check seems off to me:

if (!isLeaf || !parameters || !parameters.status) {
  return name;
}

It seems that only leaf nodes can have a dot? Is that intentional? All my leaf nodes are missing parameters.status because I only put parameters.status on the default story export as the docs prescribe. But that isn't a leaf node.

I could see the dot if i put parameters.status on a single story (leaf node), but i have over 300 stories and really don't want to do that. I'd much prefer to define these at the component level, not the leaf.

Perhaps i'm missing something or misunderstanding. Any help is much appreciated!

[gavmck]

Do you get the status showing in the top bar in canvas mode?

[acc-nicholas]

Yes, the status shows in the top bar as expected!

[gavmck]

Are you able to show me an example story file?

[gavmck]

(As notes) the leaf nodes inherit parameters from the default/parent story so it should highlight all your leafs.

[acc-nicholas]

Yeah! Happy to provide any further context! Could it be because of the Template and .bind? Perhaps that doesn't inherit the parameters as we expect?

import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";
import { LightningBoltIcon } from "@radix-ui/react-icons";
import { AccessibleIcon, AccessibleIconProps } from "./AccessibleIcon";
import { getRadixDocsUtilsUrl } from "../../constants";

export default {
  title: "Components/Accessible Icon",
  component: AccessibleIcon,
  parameters: {
    docs: {
      description: {
        component: `Makes icons accessible by adding a label. Built based on the radix-ui primitive [accessible icon](${getRadixDocsUtilsUrl(
          "accessible-icon"
        )}).`,
      },
    },
    status: {
      type: "stable",
    },
  },
  argTypes: {
    asChild: { control: false },
  },
} as Meta;

const Icon = () => <LightningBoltIcon />;

const Template: Story<AccessibleIconProps> = (args) => (
  <AccessibleIcon {...args}>
    <Icon />
  </AccessibleIcon>
);

export const Default = Template.bind({});
Default.args = {
  label: "Lightning Bolt",
};

[gavmck]

And you don't get any status dot next to the Default story label? (Not the expandable Accessible Icon label)

[acc-nicholas]

Here's a screenshot. Toolbar status badge ✅ Sidebar dots 👎

[gavmck]

Sorry for the late reply. Are you able to provide a reproduction repo?

[acc-nicholas]

I don't have one handy, i've been working in a private repo. Do you have a starter code sandbox or anything?

[gavmck]

Just to say I haven't forgotten about this, no starter code sandbox I'm afraid. Will try and spin something up when I get a chance.

[blowsie]

I got a feeling this isnt working due to incompatibility with newer versions of storybook.
The screenshot in the readme is also missing the sidebar dots.

[gavmck]

I got a feeling this isnt working due to incompatibility with newer versions of storybook. The screenshot in the readme is also missing the sidebar dots.

The readme screenshot predates the dots :)

We're on 6.5.9 and working correctly here. Can you show me your setup code?

[stefanlivens]

Same here. Sorry I can't give repo nor screenshots. But we're on Storybook 6.5.9, we have dots next to the individual story, but not next to the 'leaf'.
only these addons:
addons: [
'@etchteam/storybook-addon-status',
'@storybook/addon-essentials',
'@storybook/addon-links',
'@storybook/addon-a11y',
],
but webpack5 as builder

[xzentorzx]

I also did not have any dots in the sidebar, and furthermore I was not able to use the renderLabel config (as described in the storybook docs) at all. Turns out you cannot use this when you are on storyStoreV7: true. I commented that line out in my main.js and lo and behold, the dots are there...

[gavmck]

Ah hah!

[jwir3]

I also did not have any dots in the sidebar, and furthermore I was not able to use the renderLabel config (as described in the storybook docs) at all. Turns out you cannot use this when you are on storyStoreV7: true. I commented that line out in my main.js and lo and behold, the dots are there...

Now that Storybook v7 is in rc, I've noticed that when using v7 of storybook, the dots appear inconsistently at best. They will never appear when I load the storybook, but sometimes they will appear as I click on each individual component.

[DanWebb]

A partial fix has been shipped in v4.2.4

As explained in #47, unfortunately, we can only show the status dots when stories are visited.

I'll keep this open in the hope that a full fix becomes available.

[colangeloproductions]

A partial fix has been shipped in v4.2.4

As explained in #47, unfortunately, we can only show the status dots when stories are visited.

I'll keep this open in the hope that a full fix becomes available.

@DanWebb Is there any issue or PR we can follow to be notified?

[DanWebb]

This issue 😅

[fweinaug]

it would be great to have an option to disable the dots in the sidebar.

[platzhersh]

Just noticed this too, using Storybook 7.5.3

[dastan-neofonie]

The problem is still there, unfortunately. Only when you click onto the story itself, the dot shows up.