Allow for logging additional data with an action

So current action API does not allow for logging additional (dynamic) data. When i expand an action in the “Actions” tab, i always see isTrusted: true (using @storybook/web-components here).

Some use cases:

• Log event.detail in case of CustomEvents emitted from my web components (make this work automatically if detail is present?)
• Log some component state as part of the event (whether a checkbox is checked as part of the change event)
• Event properties (whether or not it bubbles, is cancellable or is composed (crosses shadow DOM boundary))

[shilman]

Why not just define a custom action, something like:

const clicked = action('clicked');
return <Button onClick={(e) => clicked({ ...e, someData })} />

Or even:

const annotatedAction = (label, extraData) => {
  const original = action('label');
  return (data) => original({ ...data, ...extraData });
}

[jpzwarte]

@shilman I’ve verified that it works great:

<Story name="Example" argTypes={{ onClick: { action: 'clicked' }}}>
  {({ onClick }) => html`<button @click=${event => onClick('foo', 'bar', event)}>Foo</button>`}
</Story>