Modal

Purpose

Modal functions as an HTML dialog. Use it as a parent to alerts, locators, or subwindows you wish to break the traditional page flow.

Basic Implementation

import Button from '@wedgekit/button';
import Modal from '@wedgekit/modal';

const Example = () => {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <div>
      <Button
        onClick={() => {
          setShowModal(true);
        }}
      >
        Open Modal
      </Button>
      {showModal && (
        <Modal
          label="My Modal"
          onExit={() => {
            setShowModal(false);
          }}
        >
          <p style={{ padding: '24px', fontSize: '16px' }}>Here is some content.</p>
          <Button
            onClick={() => {
              setShowModal(false);
            }}
          >
            Exit Modal
          </Button>
        </Modal>
      )}
    </div>
  );
};

render(<Example />);

Props

In addition to the props listed below, all react-focus-lock props will be passed through.

className

Type: string

Required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

children

Type: JSX.element

Required: ✅

The modal content.

height

Type: string

Required: ❌

Allows the consumer to set a height value for the Modal, overriding the default height set by the position property.

label

Type: string

Required: ✅

Aria compliant text for all child components to be 'labeled-by', required on all wedgekit components.

mainContentLock

Type: boolean

Required: ❌

Default: true

Locking the main content prevents the user from interacting with the node tree outside of the modal. It also places a colored underlay to obscure the screen outside of the modal from vision. When mainContentLock is false outside clicks and the escape button will not close the Modal.

position

Type: center | top | right | bottom | left

Required: ❌

Optional prop to designate the location of the Modal. Defaults to Center.

width

Type: string

Required: ❌

Allows the consumer to set a width value for the Modal, overriding the default width set by the position property.

onExit

Type: (event: ReactEvent) => void

Required: ✅

Function that will fire when the modal is closed. Events that will trigger onExit are as follows:

• Pressing the escape key

• Clicking outside of the Modal

Default Modal Components

@wedgekit/modal offers default stylings for frequently used subcomponents of Modal. ModalHeader and ModalFooter can be consumed like so:

import Button from '@wedgekit/button';
import Modal, { ModalHeader, ModalFooter } from '@wedgekit/modal';

const Example = () => {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <div>
      <Button
        onClick={() => {
          setShowModal(true);
        }}
      >
        Open Modal
      </Button>
      {showModal && (
        <Modal
          label="My Modal"
          onExit={() => {
            setShowModal(false);
          }}
        >
          <ModalHeader
            title="My Modal"
            onClose={() => {
              setShowModal(false);
            }}
          />
          <p style={{ padding: '24px', fontSize: '16px' }}>Here is some content.</p>
          <ModalFooter
            onPrimary={() => {
              setShowModal(false);
            }}
          />
        </Modal>
      )}
    </div>
  );
};

render(<Example />);

Alert Modal Component

@wedgekit/modal offers the name export AlertModal that builds upon the modal component to display a standard alert type modal. The standard modal includes a confirm and cancel button, however the onConfirm property can be omitted to provide a single button modal. The current alert modal types are information, success, warning, danger. A basic implementation of the AlertModal component:

import Button from '@wedgekit/button';
import { AlertModal } from '@wedgekit/modal';

const Example = () => {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <div>
      <Button
        onClick={() => {
          setShowModal(true);
        }}
      >
        Open Modal
      </Button>
      {showModal && (
        <AlertModal
          alertType='danger'
          title='Delete record'
          message='Are you sure you want to delete this record?'
          buttonText = { continue: 'Delete' }
          onContinue= {() => {
            // delete the record
          }}
          onExit={() => {
            setShowModal(false);
          }}
        />
      )}
    </div>
  );
};

render(<Example />);