mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
419bf92282
* Removing Box props description from TS component docs * Making style utility prop comments more generic |
||
---|---|---|
.. | ||
__snapshots__ | ||
index.ts | ||
modal-content.scss | ||
modal-content.stories.tsx | ||
modal-content.test.tsx | ||
modal-content.tsx | ||
modal-content.types.ts | ||
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 <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> ```