[Bug]: Boolean controls break when attributes names use hyphens(-) in Lit

[Vahid1919]

Describe the bug

When using Storybook in combination with Lit, hyphenated attribute names (eg: not-interactive), defined using the Lit @Property decorator, break the Story book Controls.

In this PR, I defined the non-interactive attribute like so:

@property({ type: Boolean, reflect: true, attribute: 'not-interactive' }) notInteractive = false;

Adding the attribute property breaks the control after the first activation:

not.working.mov

When I remove the attribute property, this issue is resolved. Though the attribute name is not ideal:

@property({ type: Boolean, reflect: true }) notInteractive = false;

working.mov

Reproduction link

https://github.com/solid-design-system/solid

Reproduction steps

1. Navigate to top link
2. Install pnpm (not npm)
3. Install dependencies ('pnpm i')
4. Navigate to packages/components and run dev server ('pnpm dev')
5. Navigate to the 'dialog' component on the Storybook and test the 'no-close-button' attribute
6. Find dialog.ts ((packages/components/components/) and remove the attribute property from the @Property decorator. This version should work.

System

Storybook Environment Info:
(node:99778) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

  System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 126.0.6478.183
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: ^8.1.10 => 8.1.10 
    @storybook/addon-interactions: ^8.1.10 => 8.1.10 
    @storybook/addon-links: ^8.1.10 => 8.1.10 
    @storybook/addon-mdx-gfm: ^8.1.10 => 8.1.10 
    @storybook/addons: ^7.5.3 => 7.6.17 
    @storybook/blocks: ^8.1.10 => 8.1.10 
    @storybook/test: ^8.1.10 => 8.1.10 
    @storybook/theming: ^8.1.10 => 8.1.10 
    @storybook/web-components: ^8.1.10 => 8.1.10 
    @storybook/web-components-vite: ^8.1.10 => 8.1.10 
    chromatic: ^11.5.4 => 11.5.4 
    storybook: ^8.1.10 => 8.1.10 
    storybook-addon-designs: 6.3.1 => 6.3.1

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
To address the issue with hyphenated attribute names in Lit components, follow these steps:

1. Update Boolean Control:

   • Modify /code/lib/blocks/src/controls/Boolean.tsx to handle hyphenated attribute names.
   • Ensure the control correctly parses and maps hyphenated names to their corresponding properties.

2. Update Object Control:

   • Modify /code/lib/blocks/src/controls/Object.tsx similarly to handle hyphenated attribute names.
   • Ensure the control correctly parses and maps hyphenated names to their corresponding properties.

3. Test Changes:

   • Add test cases in /code/lib/blocks/src/controls/Boolean.stories.tsx and /code/lib/blocks/src/controls/Object.stories.tsx to verify the controls work with hyphenated attribute names.

Example modification in Boolean.tsx:

const parseAttributeName = (name) => name.replace(/-([a-z])/g, (g) => g[1].toUpperCase());

const BooleanControl = ({ name, ...props }) => {
  const parsedName = parseAttributeName(name);
  // existing logic
};

References

/code/lib/blocks/src/controls/Boolean.stories.tsx
/code/lib/blocks/src/controls/Object.stories.tsx
/code/addons/controls
/code/addons/controls/src

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[daneah]

We're experiencing this too, and I haven't been able to track it down to anything else going on with our use of Lit or our Storybook configuration.

ithaka/pharos#791 (comment)