Popover (brainstorming)

[nikgraf]

Initial Component API research

with @federicare

State handling

function togglePopover() {
  this.setState({
    isOpen: !this.state.isOpen;
  });
}

<button onClick={ this.togglePopover }>
  Toggle
</button>
<Popover isOpen={ this.state.isOpen }>
  Hello Alex <button>Donate!</button><p>Screw alex</p>
</Popover>

Bootstrap (React)way

const popover = (
  <Popover><strong>Holy guacamole!</strong> Check this info.</Popover>
);

<OverlayTrigger placement='bottom' overlay={popover}>
  <button>Holy guacamole!</button>
</OverlayTrigger>

Dedicated subcomponents

<Popover>
  <Trigger><button>Press Me!</button></Trigger>
  <Content>
    Hello Alex <button>Donate!</button><p>Screw alex</p>
  </Content>
</Popover>

Data Trigger

<button data-trigger={ "abc" }>Hello</button>
<Popover id="abc">
  Hello Alex <button>Donate!</button><p>Screw alex</p>
</Popover>

[jpuri]

This might be related: #151, though not same.

[nikgraf]

@jpuri for sure

btw I added a first skeleton commit in here: https://github.com/nikgraf/belle/tree/popover

[jpuri]

👍