metamask-extension/ui/components/component-library/modal-content/README.mdx

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import { ModalContent } from './modal-content';

# ModalContent

`ModalContent` is the container for the modal dialog's content. It uses context supplied by the `Modal` component and cannot be used without it.

<Canvas>
  <Story id="components-componentlibrary-modalcontent--default-story" />
</Canvas>

## Props

The `ModalContent` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props

<ArgsTable of={ModalContent} />

### Children

Use the `children` prop to render the content of `ModalContent`. The `ModalContent` should generally be used with the `ModalHeader` component.

<Canvas>
  <Story id="components-componentlibrary-modalcontent--children" />
</Canvas>

```jsx
import React, { useState } from 'react';
import { Modal, ModalContent, ModalHeader, Text, Button, BUTTON_VARIANT } from '../../component-library';

const [show, setShow] = useState(false);
const handleOnClick = () => {
  setShow(!show);
};

<Button variant={BUTTON_VARIANT.PRIMARY} onClick={handleOnClick}>
  Open
</Button>
<Modal isOpen={show} onClose={handleOnClick}>
  <ModalContent {...args}>
    <ModalHeader marginBottom={4}>Modal Header</ModalHeader>
    <Text marginBottom={4}>Modal Content</Text>
    <Button variant={BUTTON_VARIANT.PRIMARY} onClick={handleOnClick}>
      Close
    </Button>
    <LoremIpsum />
    <LoremIpsum />
    <LoremIpsum />
    <LoremIpsum />
    <LoremIpsum />
  </ModalContent>
</Modal>
```

### Size

Currently the `ModalContent` supports a single size, this decision was made after we ran an audit on all modal sizes in the extension codebase and found that all modals could be made to fit the `ModalContentSize.Sm`(360px) size.

If you do require a larger modal size you can use the `modalDialogProps` to add a className to override the default size.

<Canvas>
  <Story id="components-componentlibrary-modalcontent--size" />
</Canvas>

```jsx
import { DISPLAY } from '../../../helpers/constants/design-system';

import Box from '../../ui/box';

import { Modal, ModalContent, Text, Button, BUTTON_VARIANT } from '../../component-library';

enum ModalContentSizeStoryOption {
  Sm = 'sm',
  ClassName = 'className',
}

const [show, setShow] = useState({
  sm: false,
  className: false,
});
const handleOnClick = (size: ModalContentSizeStoryOption) => {
  setShow({ ...show, [size]: !show[size] });
};

<Box display={DISPLAY.FLEX} gap={4}>
  <Button
    variant={BUTTON_VARIANT.SECONDARY}
    onClick={() => handleOnClick(ModalContentSizeStoryOption.Sm)}
  >
    Show sm size
  </Button>
  <Button
    variant={BUTTON_VARIANT.SECONDARY}
    onClick={() => handleOnClick(ModalContentSizeStoryOption.ClassName)}
  >
    Show className
  </Button>
</Box>

<Modal
  isOpen={show.sm}
  onClose={() => handleOnClick(ModalContentSizeStoryOption.Sm)}
>
  <ModalContent {...args}>
    <Text marginBottom={4}>
      ModalContentSize.Sm default and only size 360px max-width
    </Text>
    <Button onClick={() => setShow({ ...show, sm: false })}>Close</Button>
  </ModalContent>
</Modal>

<Modal
  isOpen={show.className}
  onClose={() => handleOnClick(ModalContentSizeStoryOption.ClassName)}
>
  <ModalContent
    {...args}
    modalDialogProps={{
      style: { maxWidth: 800 },
    }}
  >
    <Text marginBottom={4}>
      Using modalDialogProps and adding a className setting a max width
      (max-width: 800px)
    </Text>
    <Button onClick={() => setShow({ ...show, className: false })}>
      Close
    </Button>
  </ModalContent>
</Modal>
```