bug on different property vs attribute names via Lit property decorator

[scottnath]

Hi @break-stuff ,

When creating a different attribute name vs a property name using Lit's @property() decorator, the property is picked up by Storybook docs, but the attribute is not.

Minimal reproduction (minor changes to lit-starter-kit)
break-stuff/lit-starter-kit@main...scottnath:lit-starter-kit:main

I adjusted variation in the lit-starter-kit to be:

  @property({ type: String, attribute: 'data-variation' })
  variation?: 'default' | 'primary' | 'hollow' | 'transparent';

meaning the attribute is data-variation but the property is just variation.

I added two stories, and the first one AttrVsProp shows the attribute data-variation as empty and this.variation is not configured. In the second, PropVsAttr the attribute data-variation is populated correctly and this.variation has the correct content

export const AttrVsProp: Story = {
  args: {
    'default-slot': 'My Button',
    variation: 'primary'
  },
};

export const PropVsAttr: Story = {
  args: {
    'default-slot': 'My Button',
    'data-variation': 'primary'
  },
};

Is there a way to configure either cem-creation or the break-stuff tools to have this work as expected (both attribute and property properly populate the component and storybook controls when used) or is this a bug?

thank you for any help,
Scott

[break-stuff]

Would you expect that all attributes be displayed in the attributes section and all of the corresponding properties be displayed separately in the properties section? That would bloat up the controls section and may make it confusing for users.

[scottnath]

No, what helpers shows is great (shows only attributes in storybook controls, not properties), I would just want data-variation to be populated in the controls even if the user used variation - is that possible?

[break-stuff]

Ah, if you set reflect: true in the @property decorator, doest that give you the experience you're looking for?

[scottnath]

added reflect, did not change docs in storybook
break-stuff/lit-starter-kit@main...scottnath:lit-starter-kit:main