Dialog

A dialog differs from a modal in that it does not come with a masking layer (to obscure the rest of the page) and the user can choose to shift focus away from the dialog contents via mouse click or a keyboard shortcut.

If you decide to provide a header inside your dialog, it's recommended to configure the aria-labelledby attribute, which can be added to props.dialogProps.

Installation

npm i boundless-dialog --save

Then use it like:

/** @jsx createElement */
 
import { createElement, PureComponent } from 'react';
import { findDOMNode } from 'react-dom';
import Button from 'boundless-button';
import Dialog from 'boundless-dialog';
 
export default class DialogDemo extends PureComponent {
    state = {
        showDialog: false,
    }
 
    componentDidMount() {
        const node = findDOMNode(this.refs.trigger);
 
        this.setState({
            leftPosition: node.offsetLeft + node.offsetWidth + 10 + 'px',
            topPosition: node.offsetTop + 'px',
        });
    }
 
    toggleDialog = () => {
        this.setState({ showDialog: !this.state.showDialog });
    }
 
    renderDialog() {
        if (this.state.showDialog) {
            return (
                <Dialog
                    closeOnEscKey={true}
                    closeOnOutsideClick={true}
                    onClose={this.toggleDialog}
                    style={{
                        left: this.state.leftPosition,
                        top: this.state.topPosition,
                    }}>
                    <iframe
                        className='dialog-demo-video-frame'
                        width='560'
                        height='315'
                        src='https://www.youtube.com/embed/HEheh1BH34Q?autoplay=1&showinfo=0&autohide=1'
                        frameBorder='0'
                        title='A youtube video showcasing the relative size of celestial objects.'
                        allowFullScreen />
                    <Button
                        className='dialog-demo-close-button'
                        title='Close'
                        onPressed={this.toggleDialog} />
                </Dialog>
            );
        }
    }
 
    render() {
        return (
            <div>
                <Button ref='trigger' onPressed={this.toggleDialog}>Launch Video</Button>
                {this.renderDialog()}
            </div>
        );
    }
}

Dialog can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { Dialog } from 'boundless';

Props

Note: only top-level props are in the README, for the full list check out the website.

Required Props

There are no required props.

Optional Props

• * · any React-supported attribute

  Expects	Default Value
  any	n/a

• after · arbitrary content to be rendered after the dialog in the DOM

  Expects	Default Value
  any renderable	null

• before · arbitrary content to be rendered before the dialog in the DOM

  Expects	Default Value
  any renderable	null

• captureFocus · determines if focus is allowed to move away from the dialog

  Expects	Default Value
  bool	true

• closeOnEscKey · enable detection of "Escape" keypresses to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnInsideClick · enable detection of clicks inside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnOutsideClick · enable detection of clicks outside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnOutsideFocus · enable detection of focus outside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• closeOnOutsideScroll · enable detection of scroll and mousewheel events outside the dialog area to trigger props.onClose; if a function is provided, the return value determines if the dialog will be closed

  Expects	Default Value
  bool or function	false

• component · override the type of .b-dialog-wrapper HTML element

  Expects	Default Value
  string	'div'

• dialogComponent · override the type of .b-dialog HTML element

  Expects	Default Value
  string	'div'

• dialogProps

  Expects	Default Value
  object	{}

• onClose · a custom event handler that is called to indicate that the dialog should be unrendered by its parent; the event occurs if one or more of the "closeOn" props (closeOnEscKey, closeOnOutsideClick, etc.) are passed as true and the dismissal criteria are satisfied

  Expects	Default Value
  function	() => {}

Reference Styles

Stylus

You can see what variables are available to override in variables.styl.

// Redefine any variables as desired, e.g:
color-accent = royalblue
 
// Bring in the component styles; they will be autoconfigured based on the above
@require "node_modules/boundless-dialog/style"

CSS

If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css, based on Boundless's default variables.