mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
132 lines
3.5 KiB
Plaintext
132 lines
3.5 KiB
Plaintext
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>
|
|
```
|