Bugcrowd design system: Containers

Containers are wrappers for other elements.

The reimplementation of Bootstrap’s grid system is included herein.

Accordions

Guidance last updated: May 28, 2018

Interactive, at default collapsed content blocks that expand upon toggling their title.

Use accordions to hide some content in complex designs where the accordion’s content is important but not vital to be displayed initially.

Title support: the accordion title content is currently built to rely on the padding offset of the Icon Component. If .bc-icon isn’t used the title will be out of alignment with the accordion main body content.

Accordion React component propTypes

Our accordions are provided as a React component (‘Accordion’).

Accordion properties:

Prop Type Description
targetId string A unique identifier for the component title anchor, used to associate the title to the body content
title object The heading title text for the accordion, passed as an object to support custom markup
children node The markup/content body of the accordion
isOpen boolean The open/close state of the accordion
openOnLoad boolean Sets accordion to be open already on load
openAccordion function Called onClick to open the accordion
closeAccordion function Called onClick to close the accordion

All props except isOpen are required.

Guidance on multiple accordions

You can group accordions, ideally in a list. When doing so give your list container (the <ul> or <ol>) an ARIA role of tablist. Place the accordion component inside the list item (<li>).

Accordions receive the .bc-accordion and .bc-panel classes. This means you can in part style them as a group via .bc-panels plural class and its variants.

Remember to pass unique IDs to each accordion.

Users can open multiple accordions simultaneously (this component does not close other already open accordions).

Possible feature idea: it may be desirable to provide bulk open/close functionality for large groups of accordions.

Open accordions on initial load

Accordions can add friction to accessing information and navigating a user interface.

Accordions can be set to be open by default by providing the openOnLoad property.

It is important to retain discoverability when placing user interface controls within an accordion.

For example: when providing retry buttons to a list of events that have fired, consider having the most recent event’s data and controls already open upon page-load. This way the open accordion’s content allude to the respective controls within each of the subsequent events that are closed in the accordion list.

Rendered example of Accordions

Haml markup example of Accordions

%div{'data-react-class': 'AccordionExample'}

Grid

Guidance last updated: Feb 8, 2018

A reimplementation of the 12-column Bootstrap 3 grid system.

Our grid setup uses the same classes as the Bootstrap 3 grid system, with one addition/exception (see usage below).

This means you can refer to the Bootstrap 3 grid documentation when building grids.

Grid test file.

Using the grid

The grid’s container(s) must sit in a wrapping element with the class .bc-grid (eg on <body>), but otherwise none of the other grid classes use the .bc- namespace prefix.

If you need a grid that spans the entire width of the viewport use .container-fluid.

Customisations

There are two additions:

  • Custom *-xl-* breakpoint classes which corresponds to the $bc-media-xl breakpoint
  • .container-fluid__container: a fixed-width ‘inner’ container for the full-viewport-width fluid container.

Primary header

Guidance last updated: May 15, 2018

The main header of a page.

The header container holds the Navbar and AVM banner alerts when they spawn.

Header container positioning

The container is set to position: fixed and has a z-index of overlay.

This means the next ‘container’ element that follows after the <header> must receive an offset commensurate in height (at all breakpoints) to ensure that page content is not obscured by the header.

.bc-header handles this by pushing the <main> element down (via a general CSS sibling selector).

When the AVM banner spawns the height of the header increases. To account for this a variant class (.bc-header--avm-active) is provided. Apply this class on AVM spawn to the <header>. This increases the offset for <main> commensurate to the additional height the AVM banner adds to the header.

Header container test file

Two test files are provided to properly test the fixed positioning and z-index:

(These include the Navbar, and AVM banner in the case of Tracker.)

Syntax highlighting

Guidance last updated: Mar 19, 2018

A wrapper for applying syntax highlighting to code blocks.

Rouge is used to power this feature, both here in the docs and in the application allowing researchers and ASEs alike to use this feature in Markdown-parsed <textarea> inputs.

Syntax highlighting usage

The highlighter will parse and apply highlight styles via CSS classes to fenced code blocks that have a language specified, eg

``` ruby
def what?
  42
end
```

would yield:

def what?
  42
end

Syntax highlighting CSS classes

Note that for compatibility reasons this feature does not require the common .bc- class prefix for its .highlight and .language-$lang classes.

There is currently no full dark theme support for this container.

Modals

Guidance last updated: Jun 5, 2019

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

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

Modal usage guidance

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 cheatsheet.

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.

Modal buttons

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.

Button strings can be modified by the confirmText and cancelText props respectively.

Similarly either button can be omitted by the showConfirm and showCancel props respectively.

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

Modal configuration

Modals have the following properties:

Prop Type Description
id* string A unique identifier for the component (used to store the the open/closed state in the store)
title* string The heading text for the dialog
showConfirm true/false Used to hide/show the confirmation button (defaults to true)
showCancel true/false Used to hide/show the cancel button (defaults to true)
confirmText string Override the text for the confirmation button
cancelText string Override the text for the cancel button
disableSubmit boolean Disable the submit button
onConfirm function Called when the confirmation button is clicked
onCancel function Called when the cancel button is clicked or the modal is closed by clicking outside
variants object CSS variants for various elements
variants.modal default/large/small Modal (size) variant
variants.confirm secondary/block/caution Confirm button variant
variants.cancel cancel/caution Cancel button variant
reactModalProps object Any additional props you wish to pass to react-modal
children component(s) The markup for the main body of the dialog
headerContent component(s) Additional header content (Note: content will appear directly adjacent to the title)
className string String passed to root container of the component to append to the html class attribute
closeOnConfirm boolean Whether or not to automatically close the modal when you hit the submit button (defaults to true)

Props with an asterisk are required.

To open the modal, dispatch the openModal(id) action.

To stop the user from being able to close the modal by clicking on the overlay, set shouldCloseOnOverlayClick to false in reactModalProps.

import Modal from 'design-system/modal/Modal'
import { openModal } from 'design-system/modal/actions'
...
<Modal
  id='unique-id'
  title='modal-example-title'
  onConfirm={() => console.log('Modal confirmed')}
  onCancel={() => console.log('Modal cancelled')}
  confirmText='update'
  reactModalProps={{shouldCloseOnOverlayClick: false}}
>
  <p>Modal body text</p>
</Modal>
...
<button onClick={() => dispatch(openModal('unique-id'))}>
  Open modal
</button>

For more details, see the modal examples.

Applying custom styles to modals

You can pass additional custom classes via the className prop to into the bc-modal container.

Use custom classes primarily to style custom modal body content.

Careful: avoid overriding the main wrapper classes of the modal component (eg .bc-overlay, .bc-modal, .bc-modal__header, et cetera).

Keeping the modal open after clicking confirm

You can prevent the modal from automatically closing when clicking the confirm/submit button by setting the closeOnConfirm prop to false.

This can be helpful when the modal contains a form and you wish to display inline errors without closing and reopening the modal.

Careful: This means you will be responsible for handling the closing of the modal in the onConfirm action.

Additional setup

Reducer

You will need to include the modal reducer in your top-level application reducer, so the modals can properly manage their open/close state.

aria-hidden and setAppElement

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. This means your DOM structure will look something like:

<body>
  <div id="content">
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</body>

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.

Modal.setAppElement('#content')

Now when the modal is opened, your DOM structure will look something like:

<html>
  <head>...</head>
  <body class="ReactModal__Body--open">
    <div id="content" aria-hidden="true">
      <header>...</header>
      <main>...</main>
      <footer>...</footer>
    </div>
    <div>...modal stuff...</div>
  </body>
</html>

Modal sizing and browser support

Modal defaults

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.

Rendered example of Modals

Haml markup example of Modals

%div{'data-react-class': 'ModalExample'}

Variants

--lg variant

Rendered example of Modals
Haml markup example of Modals --lg
%div{'data-react-class': 'ModalExampleLarge'}

--sm variant

Rendered example of Modals
Haml markup example of Modals --sm
%div{'data-react-class': 'ModalExampleSmall'}

Panels

Guidance last updated: Apr 10, 2018

Flexible containers for info panes and various interactive widgets.

Panels are multi-purpose containers for a variety of content.

Use a panel to contain and wrap content and related UI components both in the main content space, or in a sidebar.

Use the --action variant if your panel contains interactive elements, eg a form. There is a --lined variant that is identical in style to the action variant (bordered header and footer) which is offered for semantic reasons.

The title of the panel has one fixed font-size.

Panels container class

There is a [plural] .bc-panels container class that provides a wrapper for a group of panels.

It has one variant: .bc-panels--tiled, which uses flexbox to provide a tiled layout. You’ll need to use the Grid container classes to define the grid setup.

Rendered example of Panels

Need help?

View documentation

Our support team is available 9am to 5pm, Monday to Friday PST. Please send us an email if you need assistance!

Email [email protected]

Haml markup example of Panels

.bc-panel
  .bc-panel__header
    %span.bc-panel__title
      Need help?
  .bc-panel__main
    %p
      %a{href: 'https://docs.bugcrowd.com/'}
        View documentation
    %p
      Our support team is available 9am to 5pm, Monday to Friday PST. Please
      send us an email if you need assistance!
    %p
      Email
      %a{href: 'mailto:[email protected]'}
        [email protected]

Variants

--action variant

Rendered example of Panels
Invite a team member

Be careful who you invite as new members will be able to see vulnerability information.

Haml markup example of Panels --action
%form.bc-panel.bc-panel--action
  .bc-panel__header
    %span.bc-panel__title
      Invite a team member
  .bc-panel__main
    .email
      %label.bc-text-input__label{for: 'example--panel-email'}
        Their email adddress:
      %input.bc-text-input.bc-text-input--block{name: 'example--panel-email', id: 'example--panel-email', type: 'text', placeholder: '[email protected]'}
    .role
      %label.bc-dropdown__label{for: 'example--panel-dropdown'}
        User role:
      .bc-dropdown.bc-dropdown--block
        %select{id: 'example--panel-dropdown', class: 'bc-dropdown__select'}
          %option{value: '1'}
            Viewer
          %option{value: '1'}
            Analyst
          %option{value: '3'}
            Admin
    .bc-page-alert.bc-page-alert--warning.bc-page-alert--small
      %p
        Be careful who you invite as new members will be able to see vulnerability information.
  .bc-panel__footer
    %button.bc-btn.bc-btn.bc-btn--small(disabled)
      Invite
    %button.bc-btn.bc-btn--cancel.bc-btn--small
      Cancel

--shadow variant

Rendered example of Panels
Confirm program access

You are entering staff mode. We won’t ask for confirmation again until the session expires.

Haml markup example of Panels --shadow
.bc-panel.bc-panel--shadow.bc-panel--lined
  .bc-panel__header
    %span.bc-panel__title
      Confirm program access
  .bc-panel__main
    %p
      You are entering staff mode. We won’t ask for confirmation again until the
      session expires.
    %button.bc-btn.bc-btn--small.bc-btn--block
      Give me access
  .bc-panel__footer
    %p
      %a{href: 'javascript:void(0)'}
        View your access grants

--interactive variant

Rendered example of Panels
Haml markup example of Panels --interactive
%ul.bc-panels
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      .bc-panel__footer
        %p
          Duis aute irure dolor in reprehenderit.
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex. In voluptate velit esse cillum.
      .bc-panel__footer
        %p
          I’m the program footer.
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur.
      .bc-panel__footer
        %p
          Boy, it sure is quiet here.
  %li.row
    %a.bc-panel.bc-panel--interactive{href: '#'}
      .bc-panel__header
        %h4.bc-panel__title
          Panel title
      .bc-panel__main
        %p
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
      .bc-panel__footer
        %p
          There are usually actions here…

--tiled variant

Rendered example of Panels
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. In voluptate velit esse cillum.

  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Haml markup example of Panels --tiled
%ul.row.bc-panels.bc-panels--tiled
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
      .bc-panel__footer
        %p
          Duis aute irure dolor in reprehenderit.
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex. In voluptate velit esse cillum.
      .bc-panel__footer
        %p
          I’m the program footer.
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur.
      .bc-panel__footer
        %p
          Boy, it sure is quiet here.
  %li.col-xs-12.col-sm-6.col-xl-3
    .bc-panel.bc-panel--lined
      .bc-panel__header
        %h4.bc-panel__title
          %a{href: '#'}
            Panel title
      .bc-panel__main
        %p
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.
      .bc-panel__footer
        %p
          There are usually actions here…