auto-claude: subtask-1-1 - Add hideCloseButton prop to DialogContent component

- Added DialogContentProps interface extending base Radix dialog props
- Added optional hideCloseButton boolean prop
- Conditionally render close button based on hideCloseButton value
- When hideCloseButton is true, the built-in close button is hidden
This commit is contained in:
AndyMik90
2025-12-17 09:50:12 +01:00
parent 2d2a8131cc
commit 5f9653a961
@@ -28,10 +28,14 @@ const DialogOverlay = React.forwardRef<
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
hideCloseButton?: boolean;
}
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
DialogContentProps
>(({ className, children, hideCloseButton, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
@@ -52,18 +56,20 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
<DialogPrimitive.Close
className={cn(
'absolute right-4 top-4 rounded-lg p-1',
'text-muted-foreground hover:text-foreground',
'hover:bg-accent transition-colors',
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
'disabled:pointer-events-none'
)}
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
{!hideCloseButton && (
<DialogPrimitive.Close
className={cn(
'absolute right-4 top-4 rounded-lg p-1',
'text-muted-foreground hover:text-foreground',
'hover:bg-accent transition-colors',
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
'disabled:pointer-events-none'
)}
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</DialogPortal>
));