Merge pull request #271 from softnetics/supakorn/migrate/components

feat: modify example of `dropdown-menu-item`

Author: SupakornNetsuwan

.changeset/plenty-terms-visit.md

@@ -0,0 +1,5 @@
+---
+"@example/ui-playground": patch
+---
+
+feat: add `dialog-overlay-props` for `dialog-content`.

.changeset/tender-hounds-shave.md

@@ -3,4 +3,4 @@
 '@genseki/react': patch
 ---
 
-fix: make combobox able to disabled.
+fix: Add example for `dialog` open with `dropdown-menu-item`

examples/ui-playground/src/app/playground/shadcn/dropdown-menu-section.tsx

@@ -13,7 +13,16 @@ import {
   UserIcon,
 } from '@phosphor-icons/react'
 
-import { Button } from '@genseki/react/v2'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@genseki/react/v2'
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -38,30 +47,66 @@ import { PlaygroundCard } from '~/src/components/card'
 function BasicDropdown() {
   return (
     <div className="flex flex-wrap gap-4">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Open Menu</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem>
-            <UserIcon />
-            Profile
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <PencilIcon />
-            Settings
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <HeartIcon />
-            Favorites
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            <TrashIcon />
-            Delete
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <Dialog>
+        <DialogContent
+          onPointerDownOutside={(e) => {
+            e.preventDefault()
+            console.log(e)
+          }}
+          className="p-18"
+        >
+          <DialogHeader>
+            <div className="flex items-center gap-6">
+              <div className="flex size-20 items-center justify-center rounded-full bg-primary/5 ">
+                <UserIcon className="size-12 text-primary" />
+              </div>
+              <div>
+                <DialogTitle className="text-xl">Welcome!</DialogTitle>
+                <DialogDescription>
+                  This is a custom styled dialog with enhanced visual appeal.
+                </DialogDescription>
+              </div>
+            </div>
+          </DialogHeader>
+          <div className="py-6">
+            <Typography type="body" className="text-text-secondary">
+              This dialog features custom styling including gradient backgrounds, enhanced borders,
+              and larger icons to create a more engaging user experience.
+            </Typography>
+          </div>
+          <DialogFooter className="gap-2">
+            <Button variant="secondary">Maybe Later</Button>
+            <Button>Get Started</Button>
+          </DialogFooter>
+        </DialogContent>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open Menu</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              <UserIcon />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <PencilIcon />
+              Settings
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <HeartIcon />
+              Favorites
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <DialogTrigger className="w-full">
+                <TrashIcon />
+                Delete
+              </DialogTrigger>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Dialog>
     </div>
   )
 }