1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/component-library/modal-content/modal-content.tsx
George Marshall 68f928c8a2
Adding ModalContent component (#18175)
* 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
2023-03-22 17:17:19 -07:00

38 lines
925 B
TypeScript

import React from 'react';
import classnames from 'classnames';
import {
BackgroundColor,
BorderRadius,
BLOCK_SIZES,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { ModalContentProps, ModalContentSize } from './modal-content.types';
export const ModalContent = ({
className = '',
children,
size = ModalContentSize.Sm,
width,
modalContentRef, // Would have preferred to forwardRef but it's not trivial in TypeScript. Will update once we have an established pattern
...props
}: ModalContentProps) => (
<Box
className={classnames(
'mm-modal-content',
{ [`mm-modal-content--size-${size}`]: !width },
className,
)}
backgroundColor={BackgroundColor.backgroundDefault}
borderRadius={BorderRadius.LG}
width={width || BLOCK_SIZES.FULL}
padding={4}
ref={modalContentRef}
{...props}
>
{children}
</Box>
);