binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5776]chore: updated design system for alert modal #8415

Browse source
This commit is contained in:
Vamsi Krishna 2025-12-22 16:38:20 +05:30 • committed by GitHub
parent 8a0b710a62
commit daf65f5ddd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
packages/ui/src/modals/alert-modal.tsx
View file

@ -2,8 +2,8 @@ import type { LucideIcon } from "lucide-react";
import { AlertTriangle, Info } from "lucide-react"; import { AlertTriangle, Info } from "lucide-react";
import React from "react"; import React from "react";
// components // components
import type { TButtonVariant } from "../button"; import type { TButtonVariant } from "@plane/propel/button";
import { Button } from "../button"; import { Button } from "@plane/propel/button";
import { cn } from "../utils"; import { cn } from "../utils";
import { EModalPosition, EModalWidth } from "./constants"; import { EModalPosition, EModalWidth } from "./constants";
import { ModalCore } from "./modal-core"; import { ModalCore } from "./modal-core";
@ -28,6 +28,7 @@ type Props = {
title: string; title: string;
variant?: TModalVariant; variant?: TModalVariant;
width?: EModalWidth; width?: EModalWidth;
customIcon?: React.ReactNode;
}; };
const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = { const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
@ -36,7 +37,7 @@ const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
}; };
const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = { const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
danger: "danger", danger: "error-fill",
primary: "primary", primary: "primary",
}; };
@ -62,6 +63,7 @@ export function AlertModalCore(props: Props) {
title, title,
variant = "danger", variant = "danger",
width = EModalWidth.XL, width = EModalWidth.XL,
customIcon,
} = props; } = props;
const Icon = VARIANT_ICONS[variant]; const Icon = VARIANT_ICONS[variant];
@ -76,7 +78,7 @@ export function AlertModalCore(props: Props) {
VARIANT_CLASSES[variant] VARIANT_CLASSES[variant]
)} )}
> >
<Icon className="size-5" aria-hidden="true" /> {customIcon ? <>{customIcon}</> : <Icon className="size-5" aria-hidden="true" />}
</span> </span>
)} )}
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
@ -85,7 +87,7 @@ export function AlertModalCore(props: Props) {
</div> </div>
</div> </div>
<div className="px-5 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t-[0.5px] border-subtle"> <div className="px-5 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t-[0.5px] border-subtle">
<Button variant="neutral-primary" onClick={handleClose}> <Button variant="secondary" onClick={handleClose}>
{secondaryButtonText} {secondaryButtonText}
</Button> </Button>
<Button variant={BUTTON_VARIANTS[variant]} tabIndex={1} onClick={handleSubmit} loading={isSubmitting}> <Button variant={BUTTON_VARIANTS[variant]} tabIndex={1} onClick={handleSubmit} loading={isSubmitting}>