ladle icon indicating copy to clipboard operation
ladle copied to clipboard

Actions addon

Open GeorgeNagel opened this issue 3 years ago • 4 comments

When developing components that have callbacks , like ‘onClick’, it would be nice to be able to see somewhere in the ladle ui that the correct callback has been fired, with any arguments if relevant.

This would behave similar to the actions-addon for Storybook though likely behind a closed-by-default panel like other addons. Perhaps a better name than “actions” is needed here as well to avoid confusion in the ladle code base.

GeorgeNagel avatar Jun 28 '22 17:06 GeorgeNagel

I never understood what's the point of the actions add-on vs just using console.log?

tajo avatar Jun 28 '22 17:06 tajo

For non-developers, opening the console adds quite a bit of friction to the UX. I agree for developers that it's easier to do, but at least on our team, Product Managers and Designers are consumers of the component library.

In Storybook, the fact that actions is an always-open panel means that if I'm reviewing stories somebody else wrote, I'm likely to notice if no callbacks were triggered or if the wrong one fired. I might not remember to open an actions panel every time I want to make sure callbacks are hooked up correctly (I know I suggested using a closed-by-default panel in the original issue post, just trying to be open about possible approaches.)

GeorgeNagel avatar Jun 28 '22 18:06 GeorgeNagel

Well, there could be a bubble/number notification for our addon buttons. Similar to macos:

PMX9d

This could be used for

  • actions - number of actions triggered since the story was first rendered
  • controls - number of controls set to non-default values (pretty useful if someone shares a link with you with a specific control state encoded so you know you are not previewing the default state)
  • a11y - number of violations, although we run the report only when the addon is opened since this is a very heavy process

tajo avatar Jun 28 '22 21:06 tajo

Our devs also use actions a lot. So far I just mapped it to console.log but we can create a more integrated experience.

tajo avatar Jun 28 '22 21:06 tajo