From 3b44741cf9a374760bc0c41735929b833331d082 Mon Sep 17 00:00:00 2001
From: Yuichi Ohneda <ohneda@gmail.com>
Date: Wed, 1 May 2024 23:08:37 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20fix(dialog):=20showCloseButton?=
 =?UTF-8?q?=20Prop=20Warning=20in=20DialogContent=20Component=20(#2597)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix DialogPrimitive.Content to not pass a showCloseButton property that does not exist in it to avoid outputting a warning.
---
 client/src/components/ui/Dialog.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ui/Dialog.tsx b/client/src/components/ui/Dialog.tsx
index bb0d3aeb05..ef2cae96f3 100644
--- a/client/src/components/ui/Dialog.tsx
+++ b/client/src/components/ui/Dialog.tsx
@@ -40,9 +40,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
->(({ className, children = true, ...props }, ref) => {
+>(({ className, children = true, showCloseButton = true, ...props }, ref) => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
-
   return (
     <DialogPortal>
       <DialogOverlay />
@@ -59,10 +58,12 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="absolute right-6 top-[1.6rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 dark:data-[state=open]:bg-gray-800">
-          <X className="h-5 w-5 text-black dark:text-white" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        {showCloseButton && (
+          <DialogPrimitive.Close className="absolute right-6 top-[1.6rem] rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900 dark:data-[state=open]:bg-gray-800">
+            <X className="h-5 w-5 text-black dark:text-white" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   );