bpk-component-popover

Backpack popover component.

Installation

npm install bpk-component-popover --save-dev

Usage

import React, { Component } from 'react';
import BpkButton from 'bpk-component-button';
import BpkPopover from 'bpk-component-popover';
import BpkText from 'bpk-component-text';

class App extends Component {
  constructor() {
    super();

    this.state = {
      isOpen: false,
    };

  }

  openPopover = () => {
    this.setState({
      isOpen: true,
    });
  }

  closePopover = () => {
    this.setState({
      isOpen: false,
    });
  }

  render() {
    return (
      <div id="popover-container">
        <BpkPopover
          id="my-popover"
          target={
            <BpkButton onClick={this.openPopover}>Open</BpkButton>
          }
          onClose={this.closePopover}
          isOpen={this.state.isOpen}
          label="My popover"
          closeButtonText="Close"
          renderTarget={() =>
            document.getElementById('popover-container')
          }
          closeButtonProps={{
            tabIndex: 0,
          }}
        >
          <BpkText>My popover content</BpkText>
        </BpkPopover>
      </div>
    );
  }
}

Theming: In order to theme the modal, a renderTarget needs to be supplied as a function which returns a DOM node in the scope of a BpkThemeProvider.

Props

| Property | PropType | Required | Default Value | | --------------------- | ----------------------------------------- | -------- | ------------- | | children | node | true | - | | closeButtonText | string | true | - | | id | string | true | - | | isOpen | bool | true | - | | label | string | true | - | | onClose | func | true | - | | target | element or func | true | - | | closeButtonIcon | bool | false | true | | closeButtonProps | object | false | null | | labelAsTitle | bool | false | false | | padded | bool | false | true | | placement | oneOf(['top', 'right', 'bottom', 'left']) | false | 'bottom' | | popperModifiers | object | false | null | | portalClassName | string | false | null | | portalStyle | object | false | null | | renderTarget | func | false | null |

In order to attach the popover to a regular DOM element, provide a function which returns it to target:

<BpkPopover
  id="my-popover"
  target={() => document.getElementById('mydiv')}
  onClose={this.closePopover}
  isOpen={this.state.isOpen}
  label="My popover"
  closeButtonText="Close"
>
  <BpkText>My popover content</BpkText>
</BpkPopover>

Prop Details

onClose

const onClose = (event, {
  source: <string>, // One of `DOCUMENT_CLICK`, `CLOSE_BUTTON`, `CLOSE_LINK`, `ESCAPE`
}) => {
  ...
}

popperModifiers

Please refer to the documentation for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the popover to overflow the viewport etc.

Theme Props

• linkColor
• linkHoverColor
• linkActiveColor
• linkVisitedColor