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

fix: align tick icon, text, and cross icon inside toaster (#21607)

Browse Source 
* Fix: align tick icon, text, and cross icon inside toaster

* fix: align elements in toaster

* fix: toaster icon changes

* test approval recheck

* fix: toast message id fixed

* fix: merge conflict resolved

* fix:test recheck

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
This commit is contained in:
Faiz
2025-06-19 16:27:35 +00:00
committed by GitHub
co-authored by Kartik Saini
parent 00aac89ed7
commit 2f35428232
1 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/toast/showToast.tsx
+30 -25
View File
@@ -13,17 +13,19 @@ type IToast = {
export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
<button
className={classNames(
"data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
"data-testid-toast-success bg-default dark:bg-inverted text-emphasis dark:text-inverted shadow-elevation-low border-subtle mb-2 flex h-auto items-center justify-between space-x-2 rounded-lg border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
)}
onClick={() => onClose(toastId)}>
<span className="mt-0.5">
<Icon name="check" className="h-4 w-4" />
<span className="mt-1">
<Icon name="check" className="size-4" />
</span>
<p data-testid="toast-success" className="m-0 w-full text-left">
{message}
</p>
<span className="mt-0.5">
<Icon name="x" className="h-4 w-4 hover:cursor-pointer" />
<div className="flex items-center">
<p data-testid="toast-success" className="m-0 w-full text-left">
{message}
</p>
</div>
<span className="mt-1">
<Icon name="x" className="size-4 hover:cursor-pointer" />
</span>
</button>
);
@@ -31,17 +33,19 @@ export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
<button
className={classNames(
"animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
"animate-fade-in-up bg-semantic-error-subtle text-semantic-error shadow-elevation-low border-semantic-error-subtle mb-2 flex h-auto items-center justify-between space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
)}
onClick={() => onClose(toastId)}>
<span className="mt-0.5">
<Icon name="info" className="text-semantic-error h-4 w-4" />
<span className="mt-1">
<Icon name="info" className="text-semantic-error size-4" />
</span>
<p data-testid="toast-error" className="m-0 w-full text-left">
{message}
</p>
<span className="mt-0.5">
<Icon name="x" className="text-semantic-error h-4 w-4 hover:cursor-pointer" />
<div className="flex items-center">
<p data-testid="toast-error" className="m-0 w-full text-left">
{message}
</p>
</div>
<span className="mt-1">
<Icon name="x" className="text-semantic-error size-4 hover:cursor-pointer" />
</span>
</button>
);
@@ -49,17 +53,19 @@ export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
export const WarningToast = ({ message, onClose, toastId }: IToast) => (
<button
className={classNames(
"animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
"animate-fade-in-up bg-semantic-attention-subtle text-semantic-attention shadow-elevation-low border-semantic-attention-subtle mb-2 flex h-auto items-center justify-between space-x-2 rounded-md border px-3 py-2.5 text-sm font-semibold rtl:space-x-reverse md:max-w-sm"
)}
onClick={() => onClose(toastId)}>
<span className="mt-0.5">
<Icon name="info" className="text-semantic-attention h-4 w-4" />
<span className="mt-1">
<Icon name="info" className="text-semantic-attention size-4" />
</span>
<p data-testid="toast-warning" className="m-0 w-full text-left">
{message}
</p>
<span className="mt-0.5">
<Icon name="x" className="text-semantic-attention h-4 w-4 hover:cursor-pointer" />
<div className="flex items-center">
<p data-testid="toast-warning" className="m-0 w-full text-left">
{message}
</p>
</div>
<span className="mt-1">
<Icon name="x" className="text-semantic-attention size-4 hover:cursor-pointer" />
</span>
</button>
);
@@ -71,7 +77,6 @@ type ToastVariants = "success" | "warning" | "error";
export function showToast(
message: string,
variant: ToastVariants,
// Options or duration (duration for backwards compatibility reasons)
options: number | ExternalToast = TOAST_VISIBLE_DURATION
) {
const _options: ExternalToast = typeof options === "number" ? { duration: options } : options;