Skip to content

Storybook doesn't handle bound attributes from FAST #5

@kimberleyamackenzie

Description

@kimberleyamackenzie

I noticed that when there's a bound attribute in a Facet custom component, Storybook seems to ignore changes in that attribute. I found this when working on the left nav, but then also noticed it's an issue for the existing counter component.

In that component, there are two attributes using the x => x.something syntax:
<${buttonTag} appearance="${x => x.appearance}" @click=${x => x.increment()}>

In Facet's storybook, updating those two attributes ("appearance" through a select control, and "increment" through clicking the button itself) has no effect on the actual component. The html updates in the dom as expected, and the storybook args change as well, but the actual component isn't impacted. I confirmed that everything behaves as expected in the sandbox, leading me to believe this is a Storybook-FAST integration issue.

After poking around a little, my guess is that there is a bug between FAST's html function and Storybook - we follow the suggested Storybook syntax exactly, but the docs refer mostly to lit-html. There's not a lot of information about FAST and Storybook together, so I didn't have a lot of luck in finding a work around within Storybook.

The workaround for now is just working with the sandbox to develop components using the binding method for attributes, but I do think this is something important to solve in the near-ish term.

Metadata

Metadata

Assignees

No one assigned

    Labels

    kind/bugSome behavior is incorrect or out of spec

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions