Skip to content

Modal.mdx

Latest commit

 

History

History
121 lines (69 loc) · 3.88 KB

Modal.mdx

File metadata and controls

121 lines (69 loc) · 3.88 KB

import { Canvas, Controls, Meta } from '@storybook/blocks';

import { ComponentHeader } from '~styleguide/blocks';

import * as ModalStories from './Modal.stories';

export const parameters = { subtitle: A simple Modal portal to escape current DOM Context., design: { type: 'figma', url: 'https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=2449%3A3770', }, status: 'current', source: { repo: 'gamut', githubLink: 'https://github.com/Codecademy/gamut/blob/main/packages/gamut/src/Modals/Modal.tsx', }, };

<ComponentHeader {...parameters} />

Usage

Use a Modal to create a dialog on sits on top of a full screen overlay.

Size variants

Fluid

Setting the size to 'fluid' will make the width of the Modal fit its content.

Large

A Modal with size 'large' has a width of 680px and a minimum height of 310px.

Medium

A Modal with size 'medium' has a width of 540px and a minimum height of 240px.

Small

A Modal with size 'small' has a width of 400px and a minimum height of 170px.

Close behavior

Creating a custom close button

By default, the Modal will render a close button. You can disable the default close button with the hideCloseButton prop by setting it to false. You can then use the isOpen prop to create other controls that toggle the Modal on and off.

Alternative closing methods

Other than creating buttons that can close the Modal, there are other ways a Modal can be closed by the user.

  1. Clicking the content outside of the Modal
  2. Clicking the escape key on their keyboard

All of these methods default to true for accessibility reasons, and rely on setting the required onRequestClose prop and making sure it toggles the isOpen prop on the Modal.

Scrollable

A Modal can be made scrollable by including large content inside.

Adding an image

The image prop can be used to include a full-width product image or illustration with a 16:9 aspect ratio. This image should help clarify the message of the modal.

Overflow for images will be cut off, so make sure the image is correctly sized for the modal.

Multiple views

A single Modal can be used to navigate between different content within itself by passing an array of views including children, primaryCta, and secondaryCta.

Each view can also take a title that renders as a heading. However, if the Modal already has a title prop passed then that value will be the title rendered instead of the view's title.

primaryCta and secondaryCta both take an actionType prop to determine the action of the button:

  • primaryCta can be actionType="next" to move to the next view or actionType="confirm" to do some action on the final view.
  • secondaryCta can be actionType="back" to move to the previous view or actionType="cancel" to close the modal.

Try clicking all the buttons in the example to see them in action:

Disabled

The primaryCta and secondaryCta can be disabled, via the disabled prop, based on some logic or until some action has been done. Here the Next button is disabled until the checkbox is checked.

Danger variant

The primaryCta with actionType="confirm" can add a danger variant, which will change the color of the button to red. This is useful for actions that are destructive or irreversible.

Playground