Earthbar: click outside a tab to close it

[judytuna]

As seen in earthstar-project/twodays-crossing#5 !

[sgwilym]

Because the Earthbar's presentation is meant to be determined by the app using it (it could be horizontal, vertical, tabs, a drawer…) I think doing this in Twodays Crossing might be the right place actually. Baking into this library would be making too much of an assumption, imo.

[cinnamon-bun]

@sgwilym I can't find a way to do this from outside of react-earthstar.

My goal was to make a giant div that would cover the entire screen, sitting just behind the tab panel, with an onClick event that closes the tab. I ran into some difficulties:

• I think the app doesn't have the ability read or change the Earthbar's tab state from the outside?
  • It can't know when to draw the giant div itself
  • It can't close the tab
• I tried adding the giant div as a ::before pseudo-element on the actual Earthbar tab using just CSS.
  • Turns out pseudo-elements can't have onClick handlers

Ways for React-earthstar to help

• Render a div that, when clicked, closes a tab. It could be hidden by default and apps can override the CSS to make it into a screen-covering giant div like I was trying to make
• Or somehow expose the tab state to the app so it can be read and changed. I'm not sure how, since the Earthbar and the app are siblings in the tree.

[sgwilym]

Maybe I'll have to do both.

• People will probably want to do other things that require reading/changing state. I imagine that adding onTabChange, activeTab props would probably do it.
• I'm trying to strike the balance between having Earthbar be flexible and having it be useful out the box. Being able to click outside of the box to close a tab seems like a pretty common request. I need to think a bit harder about this...