commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

fix: align confirmation dialog header and footer (#29588)

Browse Source 
Signed-off-by: Chayan Das <daschayan8837@gmail.com>
Co-authored-by: Bandhan Majumder <133476557+bandhan-majumder@users.noreply.github.com>
This commit is contained in:
Chayan Das
2026-06-19 12:11:40 +05:30
committed by GitHub
co-authored by Bandhan Majumder
parent 1599dfd515
commit 7469444aea
1 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/dialog/Dialog.tsx
+26 -21
View File
@@ -98,15 +98,10 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
</div>
)}
{type === "confirmation" && (
<div className="flex">
{icon && (
<div className="bg-emphasis flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
<Icon name={icon} className="text-emphasis h-4 w-4" />
</div>
)}
<div className="ml-4 grow">
<DialogHeader title={title} subtitle={props.description} />
<div data-testid="dialog-confirmation">{children}</div>
<div>
<DialogHeader title={title} subtitle={props.description} icon={icon} />
<div data-testid="dialog-confirmation" className="flex flex-col">
{children}
</div>
</div>
)}
@@ -120,6 +115,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
type DialogHeaderProps = {
title: React.ReactNode;
subtitle?: React.ReactNode;
icon?: IconName;
} & React.HTMLAttributes<HTMLDivElement>;
export function DialogHeader(props: DialogHeaderProps) {
@@ -127,17 +123,26 @@ export function DialogHeader(props: DialogHeaderProps) {
return (
<div className="mb-4">
<h2
data-testid="dialog-title"
className="text-semibold text-emphasis font-cal mb-1 text-xl"
id="modal-title">
{props.title}
</h2>
{props.subtitle && (
<p className="text-subtle text-sm" data-testid="dialog-subtitle">
{props.subtitle}
</p>
)}
<div className={classNames("flex gap-2", props.subtitle ? "items-start" : "items-center")}>
{props.icon && (
<div className="bg-emphasis flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
<Icon name={props.icon} className="text-emphasis h-4 w-4" />
</div>
)}
<div>
<h2
data-testid="dialog-title"
className="text-semibold text-emphasis font-cal text-xl"
id="modal-title">
{props.title}
</h2>
{props.subtitle && (
<p className="text-subtle text-sm" data-testid="dialog-subtitle">
{props.subtitle}
</p>
)}
</div>
</div>
</div>
);
}
@@ -198,4 +203,4 @@ export function DialogClose(
</Button>
</DialogPrimitive.Close>
);
}
}