Flyout: How to use? - Githubissues

getflourish commented 2 years ago

I’m trying to use the Flyout component, but I’m a bit lost looking at the docs on Storybook.

This is example code:

<ut
  decorator={<Tl />}
  onClose={function noRefCheck(){}}
  onOpenChange={function noRefCheck(){}}
  title="Header title"
  trigger={<Q onClick={function noRefCheck(){}}>Button</Q>}
>
  <p className="tw-text-center tw-py-8">
    Fun with Flyouts and Buttons!
  </p>
</ut>

As far as I understand, I can pass in a component via the trigger prop.

When I do that, that component is wrapped in a <div type="button"> but when I click it, nothing happens.

I see that there’s a onClick prop, but it’s not clear what the callback looks like because Storybook seems to mess up the example code :(

The issue with the example code applies to all examples, but so far I’ve been able to figure it out, except for this one :D

I’d appreciate any help! Thanks!

getflourish commented 2 years ago

Okay, I figured it out by looking at the Storybook Story.

https://github.com/Frontify/arcade/blob/141774680dbbddc2793e857afbc2b6e44e81d9aa/src/components/Flyout/Flyout.stories.tsx#L127

Take it as feedback that the Storybook Docs could use some love :)

CelienB commented 2 years ago

Hello and thank you for your feedback. I agree with you, the code examples we show in the docs are automatically generated by Storybook and we're planning to improve that aspect very soon. We think you should be able to copy and paste and get a somewhat working component out of the box.

Frontify / fondue

Flyout: How to use? #595