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 731336a364
commit 1a8760586d
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
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 { CrossIcon } from '~/src/icons/cross-icon'
import { Button } from '../button' import { Button } from '../button'
import { Heading } from '../heading'
import { IconButton } from '../icon-button' import { IconButton } from '../icon-button'
import { Text } from '../text' import { Text } from '../text'
import { Actions, Body, Content, Header, Overlay, Title } from './styles' import { Actions, Body, Content, Header, Overlay } from './styles'
interface TriggerProps { interface TriggerProps {
children: [React.ReactElement, React.ReactElement] children: [React.ReactElement, React.ReactElement]
@ -42,7 +43,9 @@ const AlertDialog = (props: DialogProps) => {
<Overlay as={Primitive.Overlay} /> <Overlay as={Primitive.Overlay} />
<Content as={Primitive.Content}> <Content as={Primitive.Content}>
<Header> <Header>
<Title as={Primitive.Title}>{title}</Title> <Heading as={Primitive.Title} weight="600" size="17">
{title}
</Heading>
<Primitive.Cancel asChild> <Primitive.Cancel asChild>
<IconButton label="Close"> <IconButton label="Close">
<CrossIcon /> <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 { CrossIcon } from '~/src/icons/cross-icon'
import { Button } from '../button' import { Button } from '../button'
import { Heading } from '../heading'
import { IconButton } from '../icon-button' 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 { interface DialogTriggerProps {
children: [React.ReactElement, React.ReactElement] children: [React.ReactElement, React.ReactElement]
@ -30,37 +34,47 @@ const DialogTrigger = (props: DialogTriggerProps) => {
interface DialogProps { interface DialogProps {
title: React.ReactNode title: React.ReactNode
children: React.ReactNode children: React.ReactNode
actionLabel: string
cancelLabel?: string
} }
const Dialog = (props: DialogProps) => { const Dialog = (props: DialogProps) => {
const { title, children, actionLabel, cancelLabel } = props const { title, children } = props
return ( return (
<Primitive.Portal> <Primitive.Portal>
<Overlay as={Primitive.Overlay} /> <Overlay as={Primitive.Overlay} />
<Content as={Primitive.Content}> <Content as={Primitive.Content}>
<Header> <Header>
<Title as={Primitive.Title}>{title}</Title> <Heading as={Primitive.Title} weight="600" size="17">
{title}
</Heading>
<Primitive.Close asChild> <Primitive.Close asChild>
<IconButton label="Close"> <IconButton label="Close">
<CrossIcon /> <CrossIcon />
</IconButton> </IconButton>
</Primitive.Close> </Primitive.Close>
</Header> </Header>
<Body>{children}</Body> {children}
<Actions>
{cancelLabel && (
<Primitive.Close asChild>
<Button>{cancelLabel}</Button>
</Primitive.Close>
)}
<Button>{actionLabel}</Button>
</Actions>
</Content> </Content>
</Primitive.Portal> </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 } 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', { export const Header = styled('div', {
padding: '16px', padding: '12px 12px 12px 16px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
@ -65,12 +65,6 @@ export const Actions = styled('div', {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end', justifyContent: 'flex-end',
borderTop: '1px solid #EEF2F5',
gap: 16, gap: 16,
borderTop: '1px solid #eee',
})
export const Title = styled('div', {
margin: 0,
fontWeight: 500,
fontSize: 17,
}) })