From 9c5979dfe56e91ddad502c27b145c6a94f173c11 Mon Sep 17 00:00:00 2001 From: deepshekhardas Date: Sat, 18 Jul 2026 11:08:51 +0530 Subject: [PATCH] fix: notification type not correctly rendered in antd and mantine providers --- .../providers/notificationProvider/index.tsx | 25 ++++++++++- .../core/src/contexts/notification/types.ts | 2 +- .../src/providers/notificationProvider.tsx | 43 ++++++++++++------- 3 files changed, 53 insertions(+), 17 deletions(-) diff --git a/packages/antd/src/providers/notificationProvider/index.tsx b/packages/antd/src/providers/notificationProvider/index.tsx index 9d77c91325344..d5594f2004275 100644 --- a/packages/antd/src/providers/notificationProvider/index.tsx +++ b/packages/antd/src/providers/notificationProvider/index.tsx @@ -38,12 +38,35 @@ export const useNotificationProvider = (): NotificationProvider => { duration: 0, closeIcon: <>, }); + } else if (type === "success") { + notification.success({ + key, + description: message, + message: description ?? null, + }); + } else if (type === "error") { + notification.error({ + key, + description: message, + message: description ?? null, + }); + } else if (type === "info") { + notification.info({ + key, + description: message, + message: description ?? null, + }); + } else if (type === "warning") { + notification.warning({ + key, + description: message, + message: description ?? null, + }); } else { notification.open({ key, description: message, message: description ?? null, - type, }); } }, diff --git a/packages/core/src/contexts/notification/types.ts b/packages/core/src/contexts/notification/types.ts index 6b09df9520ea6..977543515d79d 100644 --- a/packages/core/src/contexts/notification/types.ts +++ b/packages/core/src/contexts/notification/types.ts @@ -33,7 +33,7 @@ export type SuccessErrorNotification< export type OpenNotificationParams = { key?: string; message: string; - type: "success" | "error" | "progress"; + type?: "success" | "error" | "progress" | "info" | "warning"; description?: string; cancelMutation?: () => void; undoableTimeout?: number; diff --git a/packages/mantine/src/providers/notificationProvider.tsx b/packages/mantine/src/providers/notificationProvider.tsx index d4caf5b1e3d69..a60c62f825d7c 100644 --- a/packages/mantine/src/providers/notificationProvider.tsx +++ b/packages/mantine/src/providers/notificationProvider.tsx @@ -6,10 +6,28 @@ import { hideNotification, } from "@mantine/notifications"; import { ActionIcon, Box, Group, Text } from "@mantine/core"; -import { IconCheck, IconRotate2, IconX } from "@tabler/icons-react"; +import { + IconCheck, + IconRotate2, + IconX, + IconInfoCircle, + IconAlertCircle, +} from "@tabler/icons-react"; import { RingCountdown } from "@components"; +const notificationStyleByType: Record< + string, + { color: string; icon: React.ReactNode } +> = { + success: { color: "primary", icon: }, + error: { color: "red", icon: }, + info: { color: "blue", icon: }, + warning: { color: "orange", icon: }, +}; + +const defaultStyle = { color: "gray", icon: null }; + export const useNotificationProvider = (): NotificationProvider => { const activeNotifications: string[] = []; @@ -35,6 +53,10 @@ export const useNotificationProvider = (): NotificationProvider => { } }; + const getStyle = (type?: string) => { + return notificationStyleByType[type ?? ""] ?? defaultStyle; + }; + const notificationProvider: NotificationProvider = { open: ({ message, @@ -123,16 +145,12 @@ export const useNotificationProvider = (): NotificationProvider => { }); } } else { + const style = getStyle(type); if (isNotificationActive(key)) { updateNotification({ id: key!, - color: type === "success" ? "primary" : "red", - icon: - type === "success" ? ( - - ) : ( - - ), + color: style.color, + icon: style.icon ?? undefined, message, title: description, autoClose: 5000, @@ -141,13 +159,8 @@ export const useNotificationProvider = (): NotificationProvider => { addNotification(key); showNotification({ id: key!, - color: type === "success" ? "primary" : "red", - icon: - type === "success" ? ( - - ) : ( - - ), + color: style.color, + icon: style.icon ?? undefined, message, title: description, onClose: () => {