Skip to content

Commit 4479548

Browse files
tanerengiiintanerengiiin
committed
refactor: update confirm dialog and dialog components for improved structure and functionality
1 parent 62085bc commit 4479548

File tree

124 files changed

+451
-7262
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

124 files changed

+451
-7262
lines changed

‎apps/showcase/demo/primitive/confirmdialog/basic-demo.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,24 @@ export default function BasicDemo() {
1111
<ConfirmDialog.Trigger className={styles.trigger}>Save</ConfirmDialog.Trigger>
1212
<ConfirmDialog.Portal>
1313
<ConfirmDialog.Backdrop className={styles.backdrop} />
14-
<ConfirmDialog.Popup className={styles.popup}>
15-
<ConfirmDialog.Header className={styles.header}>
16-
<ConfirmDialog.Title className={styles.title}>Confirm</ConfirmDialog.Title>
17-
<ConfirmDialog.Close className={styles.close}>
18-
<Times />
19-
</ConfirmDialog.Close>
20-
</ConfirmDialog.Header>
21-
<ConfirmDialog.Content className={styles.content}>
22-
<ExclamationTriangle className={styles.icon} />
23-
<ConfirmDialog.Message className={styles.message}>Are you sure you want to proceed?</ConfirmDialog.Message>
24-
</ConfirmDialog.Content>
25-
<ConfirmDialog.Footer className={styles.footer}>
26-
<ConfirmDialog.Close className={styles.cancelButton}>Cancel</ConfirmDialog.Close>
27-
<ConfirmDialog.Close className={styles.confirmButton}>Confirm</ConfirmDialog.Close>
28-
</ConfirmDialog.Footer>
29-
</ConfirmDialog.Popup>
14+
<ConfirmDialog.Positioner>
15+
<ConfirmDialog.Popup className={styles.popup}>
16+
<ConfirmDialog.Header className={styles.header}>
17+
<ConfirmDialog.Title className={styles.title}>Confirm</ConfirmDialog.Title>
18+
<ConfirmDialog.Close className={styles.close}>
19+
<Times />
20+
</ConfirmDialog.Close>
21+
</ConfirmDialog.Header>
22+
<ConfirmDialog.Content className={styles.content}>
23+
<ExclamationTriangle className={styles.icon} />
24+
<ConfirmDialog.Message className={styles.message}>Are you sure you want to proceed?</ConfirmDialog.Message>
25+
</ConfirmDialog.Content>
26+
<ConfirmDialog.Footer className={styles.footer}>
27+
<ConfirmDialog.Close className={styles.cancelButton}>Cancel</ConfirmDialog.Close>
28+
<ConfirmDialog.Close className={styles.confirmButton}>Confirm</ConfirmDialog.Close>
29+
</ConfirmDialog.Footer>
30+
</ConfirmDialog.Popup>
31+
</ConfirmDialog.Positioner>
3032
</ConfirmDialog.Portal>
3133
</ConfirmDialog.Root>
3234
</div>

‎apps/showcase/demo/styled/confirmdialog/basic-demo.tsx‎

Lines changed: 41 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,26 @@ export default function BasicDemo() {
1212
</ConfirmDialog.Trigger>
1313
<ConfirmDialog.Portal>
1414
<ConfirmDialog.Backdrop />
15-
<ConfirmDialog.Popup>
16-
<ConfirmDialog.Header>
17-
<ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
18-
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
19-
<Times />
20-
</ConfirmDialog.Close>
21-
</ConfirmDialog.Header>
22-
<ConfirmDialog.Content>
23-
<ExclamationTriangle className="w-8! h-8!" />
24-
<ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
25-
</ConfirmDialog.Content>
26-
<ConfirmDialog.Footer>
27-
<ConfirmDialog.Close as={Button} variant="outlined">
28-
Cancel
29-
</ConfirmDialog.Close>
30-
<ConfirmDialog.Close as={Button}>Save</ConfirmDialog.Close>
31-
</ConfirmDialog.Footer>
32-
</ConfirmDialog.Popup>
15+
<ConfirmDialog.Positioner>
16+
<ConfirmDialog.Popup>
17+
<ConfirmDialog.Header>
18+
<ConfirmDialog.Title>Edit Profile</ConfirmDialog.Title>
19+
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
20+
<Times />
21+
</ConfirmDialog.Close>
22+
</ConfirmDialog.Header>
23+
<ConfirmDialog.Content>
24+
<ExclamationTriangle className="w-8! h-8!" />
25+
<ConfirmDialog.Message>Are you sure you want to proceed?</ConfirmDialog.Message>
26+
</ConfirmDialog.Content>
27+
<ConfirmDialog.Footer>
28+
<ConfirmDialog.Close as={Button} variant="outlined">
29+
Cancel
30+
</ConfirmDialog.Close>
31+
<ConfirmDialog.Close as={Button}>Save</ConfirmDialog.Close>
32+
</ConfirmDialog.Footer>
33+
</ConfirmDialog.Popup>
34+
</ConfirmDialog.Positioner>
3335
</ConfirmDialog.Portal>
3436
</ConfirmDialog.Root>
3537
<ConfirmDialog.Root>
@@ -38,25 +40,27 @@ export default function BasicDemo() {
3840
</ConfirmDialog.Trigger>
3941
<ConfirmDialog.Portal>
4042
<ConfirmDialog.Backdrop />
41-
<ConfirmDialog.Popup>
42-
<ConfirmDialog.Header>
43-
<ConfirmDialog.Title>Danger Zone</ConfirmDialog.Title>
44-
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
45-
<Times />
46-
</ConfirmDialog.Close>
47-
</ConfirmDialog.Header>
48-
<ConfirmDialog.Content>
49-
<ConfirmDialog.Message>Do you want to delete this record?</ConfirmDialog.Message>
50-
</ConfirmDialog.Content>
51-
<ConfirmDialog.Footer>
52-
<ConfirmDialog.Close as={Button} variant="outlined">
53-
Cancel
54-
</ConfirmDialog.Close>
55-
<ConfirmDialog.Close as={Button} severity="danger">
56-
Delete
57-
</ConfirmDialog.Close>
58-
</ConfirmDialog.Footer>
59-
</ConfirmDialog.Popup>
43+
<ConfirmDialog.Positioner>
44+
<ConfirmDialog.Popup>
45+
<ConfirmDialog.Header>
46+
<ConfirmDialog.Title>Danger Zone</ConfirmDialog.Title>
47+
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
48+
<Times />
49+
</ConfirmDialog.Close>
50+
</ConfirmDialog.Header>
51+
<ConfirmDialog.Content>
52+
<ConfirmDialog.Message>Do you want to delete this record?</ConfirmDialog.Message>
53+
</ConfirmDialog.Content>
54+
<ConfirmDialog.Footer>
55+
<ConfirmDialog.Close as={Button} variant="outlined">
56+
Cancel
57+
</ConfirmDialog.Close>
58+
<ConfirmDialog.Close as={Button} severity="danger">
59+
Delete
60+
</ConfirmDialog.Close>
61+
</ConfirmDialog.Footer>
62+
</ConfirmDialog.Popup>
63+
</ConfirmDialog.Positioner>
6064
</ConfirmDialog.Portal>
6165
</ConfirmDialog.Root>
6266
</div>

‎apps/showcase/demo/styled/confirmdialog/delete-demo.tsx‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -16,55 +16,57 @@ export default function DeleteDemo() {
1616
</ConfirmDialog.Trigger>
1717
<ConfirmDialog.Portal>
1818
<ConfirmDialog.Backdrop />
19-
<ConfirmDialog.Popup style={{ width: '28rem' }}>
20-
<ConfirmDialog.Header>
21-
<ConfirmDialog.Title>Delete Product</ConfirmDialog.Title>
22-
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
23-
<Times />
24-
</ConfirmDialog.Close>
25-
</ConfirmDialog.Header>
26-
<ConfirmDialog.Content>
27-
<div className="flex flex-col gap-4 py-2">
28-
<div className="flex items-center gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-xl">
29-
<Image
30-
src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg"
31-
alt="Bamboo Watch"
32-
width={80}
33-
height={80}
34-
className="rounded-lg object-cover"
35-
/>
36-
<div className="flex-1">
37-
<div className="flex items-center gap-2 mb-1">
38-
<h4 className="font-semibold text-surface-700 dark:text-surface-200 m-0">Bamboo Watch</h4>
39-
<Tag severity="success" className="text-xs">
40-
In Stock
41-
</Tag>
19+
<ConfirmDialog.Positioner>
20+
<ConfirmDialog.Popup style={{ width: '28rem' }}>
21+
<ConfirmDialog.Header>
22+
<ConfirmDialog.Title>Delete Product</ConfirmDialog.Title>
23+
<ConfirmDialog.Close as={Button} iconOnly variant="text" rounded severity="secondary">
24+
<Times />
25+
</ConfirmDialog.Close>
26+
</ConfirmDialog.Header>
27+
<ConfirmDialog.Content>
28+
<div className="flex flex-col gap-4 py-2">
29+
<div className="flex items-center gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-xl">
30+
<Image
31+
src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg"
32+
alt="Bamboo Watch"
33+
width={80}
34+
height={80}
35+
className="rounded-lg object-cover"
36+
/>
37+
<div className="flex-1">
38+
<div className="flex items-center gap-2 mb-1">
39+
<h4 className="font-semibold text-surface-700 dark:text-surface-200 m-0">Bamboo Watch</h4>
40+
<Tag severity="success" className="text-xs">
41+
In Stock
42+
</Tag>
43+
</div>
44+
<p className="text-surface-500 dark:text-surface-400 text-sm m-0">Product Code: f230fh0g3</p>
45+
<p className="text-primary font-semibold mt-2 mb-0">$65.00</p>
4246
</div>
43-
<p className="text-surface-500 dark:text-surface-400 text-sm m-0">Product Code: f230fh0g3</p>
44-
<p className="text-primary font-semibold mt-2 mb-0">$65.00</p>
4547
</div>
46-
</div>
47-
<div className="flex items-start gap-3 p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
48-
<ExclamationTriangle className="text-orange-500 mt-0.5" />
49-
<div>
50-
<p className="font-medium text-orange-700 dark:text-orange-300 text-sm m-0">Warning</p>
51-
<p className="text-orange-600 dark:text-orange-400 text-xs mt-1 mb-0">
52-
This will remove the product from your inventory and cannot be recovered.
53-
</p>
48+
<div className="flex items-start gap-3 p-3 bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg">
49+
<ExclamationTriangle className="text-orange-500 mt-0.5" />
50+
<div>
51+
<p className="font-medium text-orange-700 dark:text-orange-300 text-sm m-0">Warning</p>
52+
<p className="text-orange-600 dark:text-orange-400 text-xs mt-1 mb-0">
53+
This will remove the product from your inventory and cannot be recovered.
54+
</p>
55+
</div>
5456
</div>
5557
</div>
56-
</div>
57-
</ConfirmDialog.Content>
58-
<ConfirmDialog.Footer>
59-
<ConfirmDialog.Close as={Button} variant="outlined">
60-
Cancel
61-
</ConfirmDialog.Close>
62-
<ConfirmDialog.Close as={Button} severity="danger">
63-
<Trash />
64-
Delete Product
65-
</ConfirmDialog.Close>
66-
</ConfirmDialog.Footer>
67-
</ConfirmDialog.Popup>
58+
</ConfirmDialog.Content>
59+
<ConfirmDialog.Footer>
60+
<ConfirmDialog.Close as={Button} variant="outlined">
61+
Cancel
62+
</ConfirmDialog.Close>
63+
<ConfirmDialog.Close as={Button} severity="danger">
64+
<Trash />
65+
Delete Product
66+
</ConfirmDialog.Close>
67+
</ConfirmDialog.Footer>
68+
</ConfirmDialog.Popup>
69+
</ConfirmDialog.Positioner>
6870
</ConfirmDialog.Portal>
6971
</ConfirmDialog.Root>
7072
</div>

0 commit comments

Comments
 (0)