Side Modal

Peer review pending

A modal that stays on the side of the screen.

Version 4.1.1

const SideModalExample = () => {
  return (
    <SideModalContainer>
      <SideModalButton variant="primary">
        Open dialog
      </SideModalButton>
      <SideModal aria-label="Basic Side Modal">
        <SideModalHeader>
          <SideModalHeading>
            Heading
          </SideModalHeading>
        </SideModalHeader>
        <SideModalBody>
          <Paragraph>
            A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
          </Paragraph>
          <Paragraph>
            You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
          </Paragraph>
        </SideModalBody>
      </SideModal>
    </SideModalContainer>
  );
};

render(
  <SideModalExample />
)

Guidelines

The Side Modal component is a non-modal dialog that sits on top of the right side of the page. It is meant for situations like a preview of a record while looking at a table.

(warning)

Only use one Side Modal on a page

We currenly only support having one Side Modal open on a page. If you have questions, please post a GitHub Discussion.

Accessibility

Side Modal and non-modal dialogs follow these accessibility guidelines:

There must be a focusable element inside the dialog.
There should be a close button so screen readers have a specific close action to target.
A Side Modal is a focus trap, and focus is placed inside it when it's shown.
A Side Modal must be triggered by an explicit user action, e.g. clicking a button.

Examples

const SideModalExample = () => {
  return (
    <SideModalContainer>
      <SideModalButton variant="primary">
        Open dialog
      </SideModalButton>
      <SideModal aria-label="Basic Side Modal">
        <SideModalHeader>
          <SideModalHeading>
            Heading
          </SideModalHeading>
        </SideModalHeader>
        <SideModalBody>
          <Paragraph>
            A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
          </Paragraph>
          <Paragraph>
            You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
          </Paragraph>
        </SideModalBody>
      </SideModal>
    </SideModalContainer>
  );
};

render(
  <SideModalExample />
)

The SideModalFooter component has a justifyContent prop that lets you change how the actions are displayed within the footer. It can be set to flex-start, flex-end, or space-between and the default is flex-end.

const SideModalFooterExample = () => {
  return (
    <SideModalContainer>
      <SideModalButton variant="primary">
        Open dialog
      </SideModalButton>
      <SideModal aria-label="Basic Side Modal">
        <SideModalHeader>
          <SideModalHeading>
            Heading
          </SideModalHeading>
        </SideModalHeader>
        <SideModalBody>
          <Paragraph>
            A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
          </Paragraph>
          <Paragraph>
            You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
          </Paragraph>
        </SideModalBody>
        <SideModalFooter>
          <SideModalFooterActions>
            <Button variant="secondary">Secondary action</Button>
            <Button variant="primary">Primary action</Button>
          </SideModalFooterActions>
        </SideModalFooter>
      </SideModal>
    </SideModalContainer>
  );
};

render(
  <SideModalFooterExample />
)

SideModalButton

The SideModalButton renders a Button component and accepts all of its props, which are listed on the Button page.

const SideModalButtonExample = () => {
  return (
    <Box display="flex" flexDirection="row" columnGap="space70">
      <SideModalContainer>
        <SideModalButton variant="primary">
          Open dialog
        </SideModalButton>
        <SideModal aria-label="Basic Side Modal">
          <SideModalHeader>
            <SideModalHeading>
              Heading
            </SideModalHeading>
          </SideModalHeader>
          <SideModalBody>
            <Paragraph>
              A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
            </Paragraph>
            <Paragraph>
              You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
            </Paragraph>
          </SideModalBody>
        </SideModal>
      </SideModalContainer>
      <SideModalContainer>
        <SideModalButton variant="secondary_icon" size="icon_small">
          <PlusIcon decorative={false}  title="Open side modal" />
        </SideModalButton>
        <SideModal aria-label="Basic Side Modal">
          <SideModalHeader>
            <SideModalHeading>
              Heading
            </SideModalHeading>
          </SideModalHeader>
          <SideModalBody>
            <Paragraph>
              A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
            </Paragraph>
            <Paragraph>
              You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
            </Paragraph>
          </SideModalBody>
        </SideModal>
      </SideModalContainer>
      <SideModalContainer>
        <SideModalButton variant="reset" size="reset">
          Open dialog
        </SideModalButton>
        <SideModal aria-label="Basic Side Modal">
          <SideModalHeader>
            <SideModalHeading>
              Heading
            </SideModalHeading>
          </SideModalHeader>
          <SideModalBody>
            <Paragraph>
              A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
            </Paragraph>
            <Paragraph>
              You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
            </Paragraph>
          </SideModalBody>
        </SideModal>
      </SideModalContainer>
    </Box>
  );
};

render(
  <SideModalButtonExample />
)

Using state hooks

Side Modal comes with the option of "hooking" into the internal state by using the state hook originally provided by Reakit.

Rather than the state be internal to the component, you can use the useSideModalState hook and pass the returned state to SideModalContainer as the state prop.

This allows you to use certain returned props from the state hook, including functions like hide and show.

It should be noted that when doing so, the state prop takes precedent over the other properties that affect the state or initial state of the Side Modal. They will be ignored in favour of them being provided as arguments to the useSideModalState hook.

For full details on how to use the state hook, and what props to provide it, follow the Non-Modal Dialog Primitive documentation.

const SideModalHookExample = () => {
  const dialog = useSideModalState({});
  return (
    <Box display="flex" flexDirection="column" rowGap="space70">
      <Box>
        <SideModalContainer state={dialog}>
          <SideModalButton variant="primary">
            Open dialog
          </SideModalButton>
          <SideModal aria-label="Basic Side Modal">
            <SideModalHeader>
              <SideModalHeading>
                Heading
              </SideModalHeading>
            </SideModalHeader>
            <SideModalBody>
              <Paragraph>
                A Modal is a dialog that appears over the main content and moves the system into a special mode requiring user interaction.
              </Paragraph>
              <Paragraph>
                You can compose a Modal content area to support your use case, but elements such as Paragraph and Form Input are commonly used. See examples for common Modal patterns and dos/don'ts.
              </Paragraph>
            </SideModalBody>
          </SideModal>
        </SideModalContainer>
      </Box>
      <Box>
        <Button variant="primary" onClick={() => dialog.show()}>Open dialog</Button>
      </Box>
      <Box>
        <Button variant="primary" onClick={() => dialog.hide()}>Close dialog</Button>
      </Box>
    </Box>
  );
};

render(
  <SideModalHookExample />
)