From 1a8760586d1b96870fc03241bc69736911ceb9c4 Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Fri, 18 Mar 2022 18:10:14 +0100
Subject: [PATCH] feat(system): improve Dialog composability
---
.../src/system/dialog/alert-dialog.tsx | 7 +++-
.../status-react/src/system/dialog/dialog.tsx | 42 ++++++++++++-------
.../status-react/src/system/dialog/styles.tsx | 10 +----
3 files changed, 35 insertions(+), 24 deletions(-)
diff --git a/packages/status-react/src/system/dialog/alert-dialog.tsx b/packages/status-react/src/system/dialog/alert-dialog.tsx
index 15e8dc2..e9f5841 100644
--- a/packages/status-react/src/system/dialog/alert-dialog.tsx
+++ b/packages/status-react/src/system/dialog/alert-dialog.tsx
@@ -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) => {
- {title}
+
+ {title}
+
diff --git a/packages/status-react/src/system/dialog/dialog.tsx b/packages/status-react/src/system/dialog/dialog.tsx
index e6c8f37..17ec7c5 100644
--- a/packages/status-react/src/system/dialog/dialog.tsx
+++ b/packages/status-react/src/system/dialog/dialog.tsx
@@ -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 (
- {children}
-
- {cancelLabel && (
-
-
-
- )}
-
-
+ {children}
)
}
+const Cancel = (props: ButtonProps) => {
+ return (
+
+
+
+ )
+}
+
+const Action = (props: ButtonProps) => {
+ return
+}
+
+Dialog.Body = Body
+Dialog.Actions = Actions
+Dialog.Cancel = Cancel
+Dialog.Action = Action
+Dialog.Separator = Separator
+
export { Dialog, DialogTrigger }
diff --git a/packages/status-react/src/system/dialog/styles.tsx b/packages/status-react/src/system/dialog/styles.tsx
index 7b79485..1eb36b5 100644
--- a/packages/status-react/src/system/dialog/styles.tsx
+++ b/packages/status-react/src/system/dialog/styles.tsx
@@ -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,
})