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

import * as ModalBodyStories from './modal-body.stories';

# ModalBody

`ModalBody` is a container component that handles the scrolling of the [`Modal`](?path=/docs/components-componentlibrary-modal--docs) content.

<Canvas of={ModalBodyStories.DefaultStory} />

## Props

<Controls of={ModalBodyStories.DefaultStory} />

### Children

Use the `children` prop to pass in any valid React children. The `ModalBody`'s purpose is to handle the scrolling of the `Modal` content when the content extends beyond the viewport.

<Canvas of={ModalBodyStories.Children} />

```jsx
import { ModalBody } from '../../component-library';

<div style={{ height: 100, width: 200 }}>
  <ModalBody>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
    libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id
    elit. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper
    nulla non metus auctor fringilla..
  </ModalBody>
</div>;
```

### Padding

The `ModalBody` has default padding to align with the rest of the `Modal` components. You can override this padding by passing in a `padding` prop.
Defaults:

- paddingLeft: 4 (16px)
- paddingRight: 4 (16px)
- paddingBottom: 2 (8px)
- paddingTop: 2 (8px)

<Canvas of={ModalBodyStories.Padding} />

```jsx
import {
  BackgroundColor,
  Display,
  FlexDirection,
} from '../../../helpers/constants/design-system';
import { ModalBody, Text } from '../../component-library';

<div style={{ height: 200, width: 300 }}>
  <ModalBody
    display={Display.Flex}
    flexDirection={FlexDirection.Column}
    paddingLeft={0} // removing horizontal padding from ModalBody
    paddingRight={0}
  >
    <Text paddingLeft={4} paddingRight={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
      libero, a pharetra augue. Nullam id
    </Text>
    <Text
      backgroundColor={BackgroundColor.primaryMuted}
      paddingLeft={4}
      paddingRight={4}
    >
      Element touches edge of ModalBody
    </Text>
    <Text paddingLeft={4} paddingRight={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit
      libero, a pharetra augue. Nullam id
    </Text>
  </ModalBody>
</div>;
```
