Styleguide

Modal

Modals are containers that show up temporarily, usually so that a user can take a quick action and be done with it.


Exceptions happen, but it's strongly recommended that Modals are only called when the user takes an action — e.g., user clicks "Edit" and the modal is an editable form — rather than a surprise pop-up.


Modals borrow some styles from .card : in a way, they're just floating cards.

Action Modals

When the user needs to take an action (e.g., edit a field, or make a choice), use an action modal. These modals have buttons, and the buttons (e.g., Cancel or Save, Yes or No) are the only way to close the modal: there should be no "X" symbol to close the modal, and clicking outside of the modal should not close it. Use react prop isActionModal.
import React from 'react';
import Modal from '../../../../app/javascript/react_components/modal';

export default class ModalActionExample extends React.Component {
  constructor () {
    super()
    this.state = {
      isOpen: false
    }
  }

  openModal = () => {
    this.setState({ isOpen: true })
  }

  onClose = () => {
    this.setState({ isOpen: false })
  }

  render () {
    let { isOpen } = this.state

    return <div>
      <button
        className='button button--primary'
        onClick={this.openModal}
      >
        Open Modal
      </button>
      <Modal
        className='xs-12of12 sm-8of12 md-5of12 lg-4of12'
        escapable={false}
        title={'My Modal'}
        isOpen={isOpen}
        onClose={this.onClose}
        actionBtnConfig={{
          className: 'button--primary',
          isVisible: true,
          onClick: () => confirm('Close modal?') && this.setState({ isOpen: false }),
          text: 'Sounds Good'
        }}
        cancelBtnConfig={{
          isVisible: true,
          text: 'Cancel'
        }}
      >
        <div className="flex flew--row">
          <div>
            <p>When the user needs to take an action (e.g., edit a field, or make a choice), use an action modal. These modals have buttons, and the buttons (e.g., Cancel or Save, Yes or No) are the only way to close the modal: there should be no "X" symbol to close the modal, and clicking outside of the modal should not close it. Use react prop isActionModal.</p>
            <p>Click any action to close the modal.</p>
          </div>
        </div>
      </Modal>
    </div>
  }
}

Info Modals

When the modal is simply showing information (instead of asking for an action), it should be dismiss-able with the "X" symbol, or dismissed if the user clicks outside of the modal area.
import React from 'react';
import Modal from '../../../../app/javascript/react_components/modal';

export default class ModalInfoExample extends React.Component {
  constructor () {
    super()
    this.state = {
      isOpen: false
    }
  }

  openModal = () => {
    this.setState({ isOpen: true })
  }

  onClose = () => {
    this.setState({ isOpen: false })
  }

  render () {
    let { isOpen } = this.state

    return <div>
      <button
        className='button button--primary'
        onClick={this.openModal}
      >
        Open Modal
      </button>
      <Modal
        className='xs-12of12 sm-8of12 md-5of12 lg-4of12'
        title={'My Modal'}
        isOpen={isOpen}
        onClose={this.onClose}
      >
        <div className="flex flew--row">
          <p>When the modal is simply showing information (instead of asking for an action), it should be dismiss-able with the "X" symbol, or dismissed if the user clicks outside of the modal area.</p>
        </div>
      </Modal>
    </div>
  }
}

Backup plan

If the modal component isn't working in your situation, the closest prior component was the popup component in the Style Guide. Though, Modals have been tricky in the past and other teammates may have a better (custom) solution than that old component.

Contact

Primary designer was Alex Couch. The original developer was Steven Farberov. Carlos Leon was the developer that incorporated the Modal into the Style Guide.