mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
68f928c8a2
* Adding ModalContent component * Using different component api for ref * use imperative handle * Updating size * Updating stories and docs as well as component api * Fixing import
116 lines
3.3 KiB
Plaintext
116 lines
3.3 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
|
|
|
|
<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`
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-modalcontent--children" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { ModalContent, Text } from '../../component-library';
|
|
|
|
<ModalContent>
|
|
<ModalHeader />
|
|
<Text>
|
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio,
|
|
reiciendis assumenda dolorum mollitia saepe, optio at aliquam molestias
|
|
omnis quae corporis nesciunt natus, quas tempore ut ullam eaque fuga. Velit.
|
|
</Text>
|
|
</ModalContent>;
|
|
```
|
|
|
|
### 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 Box props or add a className to override the default size.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-modalcontent--size" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import { BLOCK_SIZES } from '../../../helpers/constants/design-system';
|
|
import { ModalContent,s Text } from '../../component-library';
|
|
|
|
<ModalContent {...args} marginBottom={4}>
|
|
<Text>ModalContentSize.Sm default and only size 360px max-width</Text>
|
|
</ModalContent>
|
|
<ModalContent
|
|
{...args}
|
|
width={[
|
|
BLOCK_SIZES.FULL,
|
|
BLOCK_SIZES.THREE_FOURTHS,
|
|
BLOCK_SIZES.HALF,
|
|
BLOCK_SIZES.ONE_THIRD,
|
|
]}
|
|
marginBottom={4}
|
|
>
|
|
<Text>
|
|
Using width Box props and responsive array props <br /> [
|
|
BLOCK_SIZES.FULL, BLOCK_SIZES.THREE_FOURTHS, BLOCK_SIZES.HALF,
|
|
BLOCK_SIZES.ONE_THIRD, ]
|
|
</Text>
|
|
</ModalContent>
|
|
<ModalContent {...args} marginBottom={4} style={{ maxWidth: 800 }}>
|
|
Adding a className and setting a max width (max-width: 800px)
|
|
</ModalContent>
|
|
```
|
|
|
|
### Modal Content Ref
|
|
|
|
Use the `modalContentRef` prop to pass a ref to the `ModalContent` component. This is primarily used with the `closeOnOutsideClick` prop on the `Modal` component. It allows the `Modal` to close when the user clicks outside of the `ModalContent` component.
|
|
|
|
<Canvas>
|
|
<Story id="components-componentlibrary-modalcontent--modal-content-ref" />
|
|
</Canvas>
|
|
|
|
```jsx
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
import { ModalContent, Text } from '../../component-library';
|
|
|
|
const [show, setShow] = useState(false);
|
|
const modalContentRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (
|
|
modalContentRef?.current &&
|
|
!modalContentRef.current.contains(event.target as Node)
|
|
) {
|
|
setShow(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
<Button onClick={() => setShow(true)}>Show ModalContent</Button>
|
|
{show && (
|
|
<ModalContent modalContentRef={modalContentRef}>
|
|
Click outside of this ModalContent to close
|
|
</ModalContent>
|
|
)}
|
|
```
|