menu-button: add a css selector to the Menu to know when it's open

[bogdansoare]

My use case is that I want to style an arrow icon inside the MenuButton based on whether the menu is open or not.

Is this a feature that could be accepted? Can I make a pull request?

[bogdansoare]

or maybe I should use the aria-expanded attribute?

[chadwithuhc]

[aria-expanded="true"] will accomplish same thing fo sho

[ryanflorence]

^ that works, will also be adding a render prop API here because we can't animate the exit transition yet.

It'll probably look like this:

<Menu>
  {({ isOpen }) => (
    <MenuButton/>
    {isOpen && <MenuList/>}
  )}
</Menu>

Not only will it allow animations, but you'd be able to add whatever classNames you wanted when it's open.