feat(system): add more dialog sizes

This commit is contained in:
Pavel Prichodko 2022-04-06 10:38:34 +02:00
parent c4e80bbdb3
commit 4979a5cd96
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 25 additions and 3 deletions
packages/status-react/src/system/dialog

View File

@ -11,6 +11,7 @@ import { Separator } from '../separator'
import { Actions, Body, Content, Header, Overlay } from './styles'
import type { ButtonProps } from '../button'
import type { Variants } from './styles'
interface DialogTriggerProps {
children: [React.ReactElement, React.ReactElement]
@ -34,15 +35,16 @@ const DialogTrigger = (props: DialogTriggerProps) => {
interface DialogProps {
title: React.ReactNode
children: React.ReactNode
size?: Variants['size']
}
const Dialog = (props: DialogProps) => {
const { title, children } = props
const { title, children, size, ...contentProps } = props
return (
<Primitive.Portal>
<Overlay as={Primitive.Overlay} />
<Content as={Primitive.Content}>
<Content as={Primitive.Content} size={size} {...contentProps}>
<Header>
<Heading as={Primitive.Title} weight="600" size="17">
{title}

View File

@ -1,5 +1,9 @@
import { keyframes, styled } from '~/src/styles/config'
import type { VariantProps } from '~/src/styles/config'
export type Variants = VariantProps<typeof Content>
const overlayAnimation = keyframes({
'0%': {
opacity: 0,
@ -40,12 +44,28 @@ export const Content = styled('div', {
left: '50%',
transform: 'translate(-50%, -50%)',
width: '90vw',
maxWidth: '638px',
maxHeight: '85vh',
'@motion': {
animation: `${contentAnimation} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
},
variants: {
size: {
480: {
maxWidth: '480px',
},
640: {
maxWidth: '640px',
},
1060: {
maxWidth: '1060px',
},
},
},
defaultVariants: {
size: '480',
},
})
export const Header = styled('div', {