feat(system): add more dialog sizes
This commit is contained in:
parent
c4e80bbdb3
commit
4979a5cd96
packages/status-react/src/system/dialog
|
@ -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}
|
||||
|
|
|
@ -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', {
|
||||
|
|
Loading…
Reference in New Issue