monday-ui-react-core/src/components/Modal/__stories__/Modal.mdx

Official monday.com UI resources for application development in React.js

import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
import { Story, Canvas, Meta } from "@storybook/blocks";
import { DIALOG, TIPSEEN, TOOLTIP } from "../../../storybook/components/related-components/component-description-map";
import {
  DialogAsModalBadExample,
  ModalExampleWrapper,
  TipAlertDialog,
  TipDevDropdownInsideModal,
  TipDialog
} from "./Modal.stories.helpers";
import * as ModalStories from "./Modal.stories";

<Meta of={ModalStories} />

# Modal

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

Modal allows the user to focus on one task or a piece of information, by popping-up and blocking the page content until the modal task is completed, or until the user dismisses the action.
Use modal for short and non-frequent tasks. For common tasks consider using the main flow.

<Canvas of={ModalStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Modals appear centered on the page, with a visible backdrop dimming the rest of the page for focus.",
    "Modals height is dynamic according to its content.",
    "All modals must have a title and a close button",
    "By default, Modal will be closed by: clicking outside, the ESC key and the closing buttons."
  ]}
/>

<TipAlertDialog />
<br />
<TipDialog />

## Variants

### Sizes

<Canvas of={ModalStories.Sizes} />

### Modal header with an icon

Use the ModalHeader component to display a Header with an icon

<Canvas of={ModalStories.ModalWithIcon} />

### Alert Modal

Use the <code>alertDialog</code> boolean prop in order to allow closing the modal only by the close buttons and not by ESC or by
clicking outside. Use this variant in case of sensitive or important messages, and in modals that requires data from the user, such as forms.

<Canvas of={ModalStories.AlertModal} />

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <ModalExampleWrapper bestPractice modalTitle="Modal title" buttonTitle="Click here">
            Modal content
          </ModalExampleWrapper>
        ),
        description: "Modal must include backdrop element."
      },
      negative: {
        component: <DialogAsModalBadExample />,
        description: "Don't remove the backdrop element of the modal or the modal's title."
      }
    }
  ]}
/>

<TipDevDropdownInsideModal />

## Use cases and examples

### Modal with editable title

<Canvas of={ModalStories.ModalWithEditableTitle} />

## Related components

<RelatedComponents componentsNames={[TOOLTIP, DIALOG, TIPSEEN]} />