Merge pull request #74 from DouglasNeuroInformatics/mobile-dialog-styles

refactor: remove forwardRef from dialog

Author: joshunrau

src/components/Dialog/DialogContent.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import {} from 'react';
 
 import { Close, Content, Portal } from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
@@ -7,19 +7,15 @@ import { cn } from '@/utils';
 
 import { DialogOverlay } from './DialogOverlay';
 
-export const DialogContent = forwardRef<
-  React.ElementRef<typeof Content>,
-  React.ComponentPropsWithoutRef<typeof Content>
->(function DialogContent({ children, className, ...props }, ref) {
+export const DialogContent = ({ children, className, ...props }: React.ComponentProps<typeof Content>) => {
   return (
     <Portal>
       <DialogOverlay />
       <Content
         className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-md border p-6 shadow-lg duration-300 sm:max-w-lg sm:rounded-lg',
           className
         )}
-        ref={ref}
         {...props}
       >
         {children}
@@ -29,4 +25,4 @@ export const DialogContent = forwardRef<
       </Content>
     </Portal>
   );
-});
+};

src/components/Dialog/DialogDescription.tsx

@@ -1,12 +1,9 @@
-import { forwardRef } from 'react';
+import {} from 'react';
 
 import { Description } from '@radix-ui/react-dialog';
 
 import { cn } from '@/utils';
 
-export const DialogDescription = forwardRef<
-  React.ElementRef<typeof Description>,
-  React.ComponentPropsWithoutRef<typeof Description>
->(function DialogDescription({ className, ...props }, ref) {
-  return <Description className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} />;
-});
+export const DialogDescription = ({ className, ...props }: React.ComponentProps<typeof Description>) => {
+  return <Description className={cn('text-muted-foreground text-sm', className)} {...props} />;
+};

src/components/Dialog/DialogOverlay.tsx

@@ -1,21 +1,17 @@
-import { forwardRef } from 'react';
+import {} from 'react';
 
 import { Overlay } from '@radix-ui/react-dialog';
 
 import { cn } from '@/utils';
 
-export const DialogOverlay = forwardRef<
-  React.ElementRef<typeof Overlay>,
-  React.ComponentPropsWithoutRef<typeof Overlay>
->(function DialogOverlay({ className, ...props }, ref) {
+export const DialogOverlay = ({ className, ...props }: React.ComponentProps<typeof Overlay>) => {
   return (
     <Overlay
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-200',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-300',
         className
       )}
-      ref={ref}
       {...props}
     />
   );
-});
+};

src/components/Dialog/DialogTitle.tsx

@@ -1,13 +1,9 @@
-import { forwardRef } from 'react';
+import {} from 'react';
 
 import { Title } from '@radix-ui/react-dialog';
 
 import { cn } from '@/utils';
 
-export const DialogTitle = forwardRef<React.ElementRef<typeof Title>, React.ComponentPropsWithoutRef<typeof Title>>(
-  function DialogTitle({ className, ...props }, ref) {
-    return (
-      <Title className={cn('text-lg font-semibold leading-none tracking-tight', className)} ref={ref} {...props} />
-    );
-  }
-);
+export const DialogTitle = ({ className, ...props }: React.ComponentProps<typeof Title>) => {
+  return <Title className={cn('text-lg leading-none font-semibold tracking-tight', className)} {...props} />;
+};