make good example on context-menu

irsyadadl · Nov 19, 2024 · 608c184 · 608c184
1 parent e5bd939
commit 608c184
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 11 deletions.
diff --git a/components/docs/controls/context-menu/context-menu-danger-demo.tsx b/components/docs/controls/context-menu/context-menu-danger-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuDangerDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item>Open</ContextMenu.Item>
         <ContextMenu.Item>Rename</ContextMenu.Item>

diff --git a/components/docs/controls/context-menu/context-menu-demo.tsx b/components/docs/controls/context-menu/context-menu-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content className="sm:min-w-56">
         <ContextMenu.Item>Back</ContextMenu.Item>
         <ContextMenu.Item isDisabled>Forward</ContextMenu.Item>

diff --git a/components/docs/controls/context-menu/context-menu-disabled-demo.tsx b/components/docs/controls/context-menu/context-menu-disabled-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuDisabledDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item id="view">View</ContextMenu.Item>
         <ContextMenu.Item id="edit">Edit</ContextMenu.Item>

diff --git a/components/docs/controls/context-menu/context-menu-item-details-demo.tsx b/components/docs/controls/context-menu/context-menu-item-details-demo.tsx
@@ -5,7 +5,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuItemDetailsDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content items={roles}>
         {(item) => (
           <ContextMenu.Item id={item.id} textValue={item.name}>

diff --git a/components/docs/controls/context-menu/context-menu-separator-demo.tsx b/components/docs/controls/context-menu/context-menu-separator-demo.tsx
@@ -7,7 +7,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuSeparatorDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item id="view">View</ContextMenu.Item>
         <ContextMenu.Item id="edit">Edit</ContextMenu.Item>

diff --git a/components/docs/controls/context-menu/context-menu-with-icon-demo.tsx b/components/docs/controls/context-menu/context-menu-with-icon-demo.tsx
@@ -8,7 +8,9 @@ import { ContextMenu } from "ui"
 export default function ContextMenuWithIconDemo() {
   return (
     <ContextMenu>
-      <ContextMenu.Trigger>Right click me</ContextMenu.Trigger>
+      <ContextMenu.Trigger className="h-28 w-56 border-2 border-dashed rounded-lg grid place-content-center">
+        Right click me
+      </ContextMenu.Trigger>
       <ContextMenu.Content>
         <ContextMenu.Item>
           <IconFolder />

diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react';
+import React from "react"
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field/date-field-demo": {

diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useRef, useState } from "react"
+import React from "react"
 
 import { tv } from "tailwind-variants"
 
@@ -33,11 +33,11 @@ interface ContextMenuRootComponent {
 }
 
 const ContextMenu = ({ children }: ContextMenuRootComponent) => {
-  const [contextMenuOffset, setContextMenuOffset] = useState<{
+  const [contextMenuOffset, setContextMenuOffset] = React.useState<{
     offset: number
     crossOffset: number
   } | null>(null)
-  const buttonRef = useRef<HTMLButtonElement>(null)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
 
   return (
     <ContextMenuTriggerContext.Provider

diff --git a/resources/content/docs/components/controls/context-menu.mdx b/resources/content/docs/components/controls/context-menu.mdx
@@ -3,7 +3,7 @@ title: "Context Menu"
 description: Pops a menu right where you click or hold down long, perfect for a right-click or a solid long press. It's all about quick access and easy picks!
 order: 6
 published: true
-status: alpha
+status: beta
 ---
 
 ## Basic