Bugcrowd Design System

Bugcrowd Design System

Search/

Modals

Last modified:

Modals are in-page popups that hold actions or information directly subordinate to the page.

The Design System’s modals are powered by a component that wraps react-modal, applies our styles, and maps the opening and closing of the modal to redux actions.

Example of Modals - default

() => {
  const { isOpen = false, closeModal, openModal } = useModalState()
  return (
    <React.Fragment>
      <BcButton onClick={openModal}>
        Open the Modal
      </BcButton>

      <BcModal
        size='sm'
        isOpen={isOpen}
        onRequestClose={closeModal}
      >
        <BcModal.Header>
          <BcModal.Title>My title</BcModal.Title>
        </BcModal.Header>
        <BcModal.Body>Some content</BcModal.Body>
        <BcModal.Footer>
          <BcButton
            variant='secondary'
            onClick={closeModal}
          >
            Cancel
          </BcButton>
          <BcButton
            onClick={() => { console.log('My action')}}
          >
            Confirm
          </BcButton>
        </BcModal.Footer>
      </BcModal>
    </React.Fragment>
  )
}
Open in Playroom

React documentation

Last modified:

BcModal component wrapper around ReactModal with some custom style including sizes.

5 sub-components:

  • BcModal.Provider Provider to handle the ability to open close modal.
  • BcModal.Header div element with custom style
  • BcModal.Title span element with custom style
  • BcModal.Body div element with custom style
  • BcModal.Footer div element with custom style

It will also expose a useModalState to be used within the BcModal.Provider.

It includes:

  • isOpen boolean
  • closeModal func to set isOpen as false
  • openModal func to set isOpen as true

Props

  • extends ReactModal props
proptyperequired
sizesm | lgNo

HTML

Last modified:

We require some initial setup for modal so that we push things into one modal and make active/inactive instead of n modals.

When the model is open, the aria-hidden attribute needs to be applied to the rest of the background content so assistive technologies know to ignore that information.

You will need to have a container element, inside <body>, that contains all the content on the page, with a unique ID.

Then you need to tell the modal component which element to add aria-hidden to. This must be done only once and it needs to happen before any modals are rendered.

Design

Last modified:

The default modal scales in total height with the content.

If the modal’s main content extends to a height greater than the current viewport, the main space will receive a scroll bar.

The modal’s footer will always be positioned (absolute) at the bottom of the modal and thus visible to the user even if the main content or viewport trigger scroll bars.

⚠️ The current default and --sm variant modals have scrolling issues in IE11.

Large modal variant

This variant spawns with a height equal to 90% of the viewport [height].

Use this modal if you know you will load a considerable amount of content into the modal’s __main, eg Tracker’s ‘De-duplication’ modal in Submission Inbox.

This modal variant does support scrolling for IE11 unlike the others.

Small modal variant

This variant spawns with a smaller width, closer to the top of the page.

It scales in height automatically.

Use this modal for confirmation checks on irrevocable actions, or alternatively the default size if the modal itself holds further actions.

Don’t use use modals

  • For features that could exist easily within the page
  • For stepped process flows
  • For documentation
  • For interstitials
  • As a decluttering strategy.

Documentation exception cases may include providing a keyboard shortcut cheat sheet.

Do use modals

  • For process steps that avoid interrupting the workflow of the application
  • For process steps that require an action before being able to resume regular usage of the application
  • As an additional step [often the final step] to warn users of important or irrevocable actions.

If a modal has functionality that either creates, updates, or deletes anything use ‘Cancel’ as the close button text string.

Use the most applicable term for the confirm action button text string, eg

  • ‘Save’
  • ‘Save as duplicate’
  • ‘Confirm account deletion’
  • ‘Reward researcher’.

Informational modals should simply have a single ‘Close’ button.

The confirm button should align to the right side of the footer after the cancel button.

Accessibility

Last modified:

Modal accessibility is complicated (eg. focus trapping, accessible naming, state management, etc.) This is why we use and wrap react-modal React modal accessibility

Rationale

Last modified:

  • Modals have become a staple in web UIs and users are fairly familiar with them.

  • We aim to use them with purpose.

  • Briefly why we’re not using <dialog> did not exist when we wrote the modal component. We may investigate using that in the future.

See also

Last modified: