How do we use booleans in Storybook with Lit?

[damontgomery]

If we have a boolean attribute / property in our Lit web component? How do we set a boolean in Storybook so that it updates as expected?

• I expect that using the controls in Storybook will change the attribute
• I expect that when the attribute changes, the Lit component property will also change

Possible solution

shouldShowIcon="${ifDefined(shouldShowIcon ? 'true' : undefined)}"

I think this works because ifDefined knows how to hide the attribute if the value is undefined. So, we can test for the boolean value and then set a string or undefined to hide it completely.

Some background

Lit-html is used to generate the Lit component in stories. The html`` syntax does this.

If an attribute exists, even if the value is "false", Lit will set the property to true. It needs to be something like, <outline-example myBoolean></outline-example> and <outline-example></outline-example> and not <outline-example myBoolean="false"></outline-example>.

Attempted solutions

• ?attributeName since it says it's for booleans
• .attributeName which changes the property and the attribute is not reflected
• ${attributeName ? 'attributName' : ''} function in place of the attribute / value pair didn't seem to work.

[damontgomery]

:( & :)

I swear we tried ?shouldShowIcon="${shouldShowIcon}" several times and it wasn't doing what we expected in Storybook, but now it seems to work as expected.

I think this is the solution for booleans.

[damontgomery]

Yeah, seems to still be working.