Popover

Popovers display related content or functionality that is related to a particular element.

Default

Storybook failed to load.

With title

Popovers can be configured to have a title, this is displayed at the top opposite a close button.

Storybook failed to load.

With title & text button

As above, but with the close button displayed as text.

Storybook failed to load.

On the side

Storybook failed to load.

Attach to external element

Storybook failed to load.

Opened by an input

You can use a BpkInput enhanced with the withOpenEvents higher-order component to open popovers.

Storybook failed to load.

bpk-component-popover

Backpack popover component.

Installation

Check the main Readme for a complete installation guide.

Usage


                                                
                                                import { createRef } from 'react';
                                                import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
                                                import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
                                                import BpkText from '@skyscanner/backpack-web/bpk-component-text';
                                                
                                                class App extends Component {
                                                  constructor() {
                                                    super();
                                                
                                                    this.ref = createRef();
                                                    this.state = {
                                                      isOpen: false,
                                                    };
                                                
                                                  }
                                                
                                                  openPopover = () => {
                                                    this.setState({
                                                      isOpen: true,
                                                    });
                                                  }
                                                
                                                  closePopover = () => {
                                                    this.setState({
                                                      isOpen: false,
                                                    });
                                                  }
                                                
                                                  const target = (
                                                    <div ref={this.ref} className={'my-popover-target'}>
                                                      <BpkButton
                                                        onClick={this.openPopover}>
                                                          Open
                                                      </BpkButton>
                                                    </div>
                                                  )
                                                
                                                  render() {
                                                    return (
                                                      <div id="popover-container">
                                                        <BpkPopover
                                                          id="my-popover"
                                                          target={target}
                                                          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 arrayOf(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.

target

target can be a DOM element with a ref attached to it or a function that returns a DOM element.

Theme Props

  • linkColor
  • linkHoverColor
  • linkActiveColor
  • linkVisitedColor