status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(system): improve Dialog composability

This commit is contained in:
Pavel Prichodko 2022-03-18 18:10:14 +01:00
parent 8efa04f054
commit 49135c57e5
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
3 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/status-react/src/system/dialog/alert-dialog.tsx
View File

@ -5,9 +5,10 @@ import * as Primitive from '@radix-ui/react-alert-dialog'
import { CrossIcon } from '~/src/icons/cross-icon'
import { Button } from '../button'
import { Heading } from '../heading'
import { IconButton } from '../icon-button'
import { Text } from '../text'
import { Actions, Body, Content, Header, Overlay, Title } from './styles'
import { Actions, Body, Content, Header, Overlay } from './styles'
interface TriggerProps {
children: [React.ReactElement, React.ReactElement]
@ -42,7 +43,9 @@ const AlertDialog = (props: DialogProps) => {
<Overlay as={Primitive.Overlay} />
<Content as={Primitive.Content}>
<Header>
<Title as={Primitive.Title}>{title}</Title>
<Heading as={Primitive.Title} weight="600" size="17">
{title}
</Heading>
<Primitive.Cancel asChild>
<IconButton label="Close">
<CrossIcon />

42
packages/status-react/src/system/dialog/dialog.tsx
View File

@ -5,8 +5,12 @@ import * as Primitive from '@radix-ui/react-dialog'
import { CrossIcon } from '~/src/icons/cross-icon'
import { Button } from '../button'
import { Heading } from '../heading'
import { IconButton } from '../icon-button'
import { Actions, Body, Content, Header, Overlay, Title } from './styles'
import { Separator } from '../separator'
import { Actions, Body, Content, Header, Overlay } from './styles'
import type { ButtonProps } from '../button'
interface DialogTriggerProps {
children: [React.ReactElement, React.ReactElement]
@ -30,37 +34,47 @@ const DialogTrigger = (props: DialogTriggerProps) => {
interface DialogProps {
title: React.ReactNode
children: React.ReactNode
actionLabel: string
cancelLabel?: string
}
const Dialog = (props: DialogProps) => {
const { title, children, actionLabel, cancelLabel } = props
const { title, children } = props
return (
<Primitive.Portal>
<Overlay as={Primitive.Overlay} />
<Content as={Primitive.Content}>
<Header>
<Title as={Primitive.Title}>{title}</Title>
<Heading as={Primitive.Title} weight="600" size="17">
{title}
</Heading>
<Primitive.Close asChild>
<IconButton label="Close">
<CrossIcon />
</IconButton>
</Primitive.Close>
</Header>
<Body>{children}</Body>
<Actions>
{cancelLabel && (
<Primitive.Close asChild>
<Button>{cancelLabel}</Button>
</Primitive.Close>
)}
<Button>{actionLabel}</Button>
</Actions>
{children}
</Content>
</Primitive.Portal>
)
}
const Cancel = (props: ButtonProps) => {
return (
<Primitive.Close asChild>
<Button {...props} />
</Primitive.Close>
)
}
const Action = (props: ButtonProps) => {
return <Button {...props} />
}
Dialog.Body = Body
Dialog.Actions = Actions
Dialog.Cancel = Cancel
Dialog.Action = Action
Dialog.Separator = Separator
export { Dialog, DialogTrigger }

10
packages/status-react/src/system/dialog/styles.tsx
View File

@ -49,7 +49,7 @@ export const Content = styled('div', {
})
export const Header = styled('div', {
padding: '16px',
padding: '12px 12px 12px 16px',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
@ -65,12 +65,6 @@ export const Actions = styled('div', {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
borderTop: '1px solid #EEF2F5',
gap: 16,
borderTop: '1px solid #eee',
})
export const Title = styled('div', {
margin: 0,
fontWeight: 500,
fontSize: 17,
})