code examples

[MichalBryxi]

• Remove the calls to {{yield}} - those seem to assume some more complex code structure(?) that is not obvious from the README examples

• Give complete, working example using headless-ui

• I think this makes a good, yet simple to follow starting point?

• Giving it out there as a newcomer who had trouble figuring out bits

[NullVoxPopuli]

I think having the first example being a simpler one is probably good. I do think, generally, people always want the the architecture with the yields though -- because folks always want a "Menu" component that's generic and can be used for any kind of menu.

Any chance you'd be willing to write up an example of this pattern? the gist that I'd want conveyed is:

• <PopperJS> - for coordinating the positing of the {{popover}} element to the {{reference}} element
• (HeadlessUI's) <Menu> - for accessibility
• (Your) <MyMenu> - for wiring up the previous two and adding your own styling / design system stuff (this can be named Menu if the Tailwind Menu is imported rather than used via globals resolver -- which is fun, because it then prevents usage of the headless Menu and forces folks to use your design system
• final usage of <MyMenu>:

<MyMenu>
  <:trigger>
    text / icon / etc, maybe button if this were to yield yet another modifier, 
    but _that_ may be out of scope here
  </:trigger>
  <:menu as |Item|>
     <Item> a </Item>
     <Item> b </Item>
  </:menu>
</MyMenu>

[MichalBryxi]

Good point. Having a complex example that shows the real world scenario is a good idea. Will re-do.

[MichalBryxi]

Ok, I got a little bit tangled over how to yield a pre-defined component. To my best understanding this is not really possible (yet) so I just went ahead and created <MyMenu> and <MyMenu::Item> to give folks full example that should not(?) have any major flaws: