Modal

<ModalHeader>Hello world</ModalHeader>
<ModalBody>
  <FormControl label="Name">
    <StatefulInput className="mb-3" placeholder="Enter Name"/>
  </FormControl>
  <FormControl label="Description">
      <StatefulInput placeholder="Enter Description"/>
  </FormControl>
</ModalBody>
<ModalFooter>
  <Button className="mr-3" variant="secondary">Cancel</Button>
  <Button>Submit</Button>
</ModalFooter>

() => setIsOpen(false);

import * as React from "react";
import {
  Modal,
  ModalHeader,
  ModalBody,
  ModalFooter,
  FormControl,
  StatefulInput
} from "spaceweb/modal";

export default () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <Modal
      onClose={() => setIsOpen(false)}
      isOpen={isOpen}
      animate
      autoFocus
      size="md"
      role="dialog"
    >
      <ModalHeader>Hello world</ModalHeader>
      <ModalBody>
        <FormControl label="Name">
          <StatefulInput
            className="mb-3"
            placeholder="Enter Name"
          />
        </FormControl>
        <FormControl label="Description">
          <StatefulInput placeholder="Enter Description" />
        </FormControl>
      </ModalBody>
      <ModalFooter>
        <Button className="mr-3" variant="secondary">
          Cancel
        </Button>
        <Button>Submit</Button>
      </ModalFooter>
    </Modal>
  );
}

A design structure to organize and hide content, so as not to overwhelm the user.

Modals provide an opportunity to display content, focused actions or alerts while maintaining the context of an existing view. This limits workflow interruptions and allows for focused communication and user interactions. There are two types of modals in Base – default and alert. Each modal share the same anatomy of a header, footer, and shaded background overlay.

Standard modals are basic containers with a close “X” and the ability the dismiss by clicking outside of the modal bounds. The primary action button is a primary system color, complimented by a grey cancel action.

The alert modal is to intended to focus the user on an urgent message that requires deliberate action. By contrast to standard modals, alert modals have no close “X”, nor do they allow for out of bounds dismissal. The primary action is always a system red with a grey cancel action.

Modal Sizes

There are 3 available sizes for Modal (sm, md, lg).

These translate to size of Modal Dialog:

• sm - max height = 560px & width = 520px.
• md - max height = 660px & width = 720px.
• lg - height = 90% of (total screen) & width = 1220px.

Apart from these typical use cases for more complex modals is to increase the size of the modal. You can simply use overrides to send your custom height & widths to Dialog. You can check that in examples.

Accessibility

We have built in functionality based on the recommendations for dialogs and modals in WAI-ARIA Authoring Practices 1.1.

• Upon opening, focus will be transferred to the first interactive element (unless autofocus is set to false)
• Dialog element has aria-modal="true"
• Explicitly exposes a role prop to control whether dialog or alertdialog is used.
• Tab key moves between focusable items (form inputs, footer buttons, etc). User should not be able to tab to items outside of modal.
• Escape key closes the modal
• Click on backdrop (anywhere outside dialog) hides modal.
• Background is not be scrollable while modal is open (position: fixed).
• Upon closing, focus should return to element that triggered modal.

Examples

You can use noBorder prop in both ModalHeader & ModalFooter to make them borderless.

The modal will by default focus the first interactive element. If you want to focus something further down in the tab order, you can use the autoFocus property. This might be useful for targeting the most common action in the modal, such as a confirmation button.

onClose can have 3 different type of closeSource. backdrop, closeButton & escape. This can be helpfult to block close behaviour on backdrop click.

Sizes

Here, we are using a combination of overrides and in-line styles to set the height of the modal to 80vh and the width to 80vw. We also set the Modal to be a column-based flex container, while the ModalBody is then set to flex-grow : 1 in order to properly space the header and footer.

Modal/Popover can be wrapped with LayersManager to override host element or z-index of the container.

Notice that you need to handle modals closing order following their stacking order when multiple modals are dismissed at the same time. This is important to have the body scrolling restored in an expected way. See how the initial modal's close function is passed as a callback to the modal that is stacked on top of it toggleConfirm(false, close).

API

Modal props

You can check the implementation of the component for more details.

Modal exports

You can import this module like so:

import {CLOSE_SOURCE} from 'spaceweb/modal'

It exports the following components or utility functions:

• CLOSE_SOURCE
• FocusOnce
• Modal
• ModalBody
• ModalFooter
• ModalHeader
• StyledDialog
• StyledDialogContainer
• StyledModal
• StyledRoot