Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook withClassPropertiesKnobs only exports the first element in the template

See original GitHub issue

Using the withClassPropertiesKnobs function only returns the first element in the template. This prevents developers from passing a custom-element with a HTML element to interact with the custom-element.

The first element is selected here and eventually returned here. Shouldn’t the whole wrapper be returned with only the custom-element in it replaced with applied knobs?

Example on what I was trying to do:

import {storiesOf, html, withKnobs, withClassPropertiesKnobs, select} from '@open-wc/demoing-storybook';
import {DraggableDrawer} from "./draggable-drawer";

storiesOf('Core UI', module)
  .addDecorator(withKnobs)
  .add(
    'Dragable Drawer Top',
    () => withClassPropertiesKnobs(DraggableDrawer, {
      overrides: el => [
        {
          key: 'align',
          fn: () => select('align', ['left', 'right','top','bottom'], el.align, 'Inherited'),
        }
      ],
      template: html`
        <draggable-drawer align="${'top'}">
          <h1>Drawer</h1>
          <ul>
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
          </ul>
        </draggable-drawer>
        <button onclick="document.querySelector('draggable-drawer').open()">Open Drawer</button>        
        `
    }),
    { notes: 'Test' , options: { selectedPanel: 'storybooks/knobs/panel' }}
  );