Not working with Lit for component states

[leventozen]

Hi, We are trying to create some stories for our components states like hover but no luck. Here you can look at our other issue before using this addon.

Code:

export const SingleButtonTemplate = (args) => html`<bl-button
    variant=${ifDefined(args.variant)}
    kind=${ifDefined(args.kind)}
    href=${ifDefined(args.href)}
    target=${ifDefined(args.target)}
    size=${ifDefined(args.size)}
    icon="${ifDefined(args.icon)}"
    label="${ifDefined(args.label)}"
    ?disabled=${args.disabled}
    style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
      >${unsafeHTML(args.content)}</bl-button>`

export const Template = (args) => html`
${SingleButtonTemplate({content: 'Primary Button', ...args})}
${SingleButtonTemplate({variant: 'secondary', content: 'Secondary Button', ...args})}
${SingleButtonTemplate({variant: 'success', content: 'Success Button', ...args})}
${SingleButtonTemplate({variant: 'danger', content: 'Danger Button', ...args})}`;

export const states = {
  pseudo: {
    hover: "bl-button"
  }
}

<Canvas isColumn>
  <Story name="Primary Buttons Hover" args={{ content: 'Save', icon: 'info' }} parameters={states}>
    {ButtonTypesTemplate.bind({})}
  </Story>
  <Story name="Secondary Buttons Hover" args={{ variant: 'secondary', content: 'Save', icon: 'info' }} parameters={states}>
    {ButtonTypesTemplate.bind({})}
  </Story>
  <Story name="Success Buttons Hover" args={{ variant: 'success', content: 'Save', icon: 'info' }} parameters={states}>
    {ButtonTypesTemplate.bind({})}
  </Story>
  <Story name="Danger Buttons Hover" args={{ variant: 'danger', content: 'Save', icon: 'info' }} parameters={states}>
    {ButtonTypesTemplate.bind({})}
  </Story>
</Canvas>

It will not work well in Chromatic. Here you can see that our first button has no pseudo-class or Chromatic took a screenshot of this story like that. However, if you react to those stories in the storybook, everything seems fine. Unless, if you open canvas and go back to docs again (maybe twice), it will not work. Additionally, after you open canvas and use the left menu and reach the hover story, it will work for only that story.

I am using Chrome (Version 104.0.5112.101)

PS: If there is no parameter, simply returning StoryFn() may be considered as a performance improvement.

Thanks in advance

[ghengeveld]

I would really appreciate if you could get to the bottom of this. I have close to zero experience with Lit so I'm not really able to debug this.

[muratcorlu]

@ghengeveld, I want to ask some questions about the intention of this plugin-in to be able to debug this issue:

• When we set hover: "bl-button" what should plugin do? Does it find all of the bl-button tags inside the "story" (or whole document?) and adds pseudo-hover class to it (excluding the process of replacing styles)? Or does it "also" pass through all of the items "inside" bl-button"s and add pseudo-hover class to them?
• We are not sure if that can be the root cause, but we noticed that "adding pseudo-hover class" flow doesn't work properly when we switch between canvas and docs tabs if you have multiple stories with hover states. Seems like there is a useEffect that listens to some parameters to apply classes, but those parameters don't change when we return to docs tab from canvas tab. Is this the expected behavior?
• We also noticed that this plugin works on "all" of the stories, instead of just the stories that we gave pseudo parameter. Is this intentional? This also makes very difficult to debug a single story.