Add a prop like onToggle to Figma component?

[JoshuaKGoldberg]

Is your feature request related to a problem? Please describe.

In a Storybook app, I'd like to be able to run a callback when a user shows or hides a <Figma /> component. It doesn't look like there's a natively supported way to do that right now based on the props?

addon-designs/packages/storybook-addon-designs/src/blocks.tsx

Line 59 in 8ff94a0

export interface BlocksCommonProps {

Describe the solution you'd like

Could we please add a prop like onToggle or onShowOrHide that is called when the Hide/Show button is pressed?

  title: collapsed ? "Show" : "Hide",
-  onClick: () => setCollapsed((v) => !v),
+  onClick: () => {
+    setCollapsed((v) => {
+      onToggle(!v);
+      return !v;
+    });
+  },
},

Describe alternatives you've considered

I can't think of anything, sorry. The Figma component itself could store whether the user has toggled it. But -per the context below- this wouldn't be quite enough for my use case.

Design types

• figma
• figspec
• link
• image
• iframe

Additional context

This would be useful for sites that want to store whether the Figma embed has been expanded. For example, gamut.codecademy.com today puts very large embeds to emphasize the designs for many components (example: https://gamut.codecademy.com/?path=/docs/atoms-button--cta-button). But non-Codecademy-employees get a file not found on that embed. And even for Codecademy employees, that's a lot of screen real estate. It'd be nice to be able to save the preference if the user saves one.

Corresponding Gamut PR: Codecademy/gamut#2795

I'd be happy to send this feature in myself. 🙂