ENG-2891: Replace Ant default icons with Carbon icons in Alert component

changelog/7613-alert-carbon-icons.yaml

@@ -0,0 +1,4 @@
+type: Changed
+description: Replaced Ant default icons with Carbon icons in Alert component
+pr: 7613
+labels: []

clients/fidesui/src/hoc/CustomAlert.tsx

@@ -0,0 +1,47 @@
+import { Alert, AlertProps } from "antd/lib";
+import type { AlertRef } from "antd/lib/alert/Alert";
+import React from "react";
+
+import { getDefaultAlertIcon } from "../lib/carbon-icon-defaults";
+
+export interface CustomAlertProps extends AlertProps {}
+
+const withCustomProps = (WrappedComponent: typeof Alert) => {
+  const WrappedAlert = React.forwardRef<AlertRef, CustomAlertProps>(
+    ({ showIcon, icon, type = "info", description, ...props }, ref) => {
+      const carbonIcon =
+        showIcon && icon === undefined
+          ? getDefaultAlertIcon(type, !!description)
+          : icon;
+
+      return (
+        <WrappedComponent
+          ref={ref}
+          showIcon={showIcon}
+          icon={carbonIcon}
+          type={type}
+          description={description}
+          {...props}
+        />
+      );
+    },
+  );
+
+  WrappedAlert.displayName = "CustomAlert";
+  return WrappedAlert;
+};
+
+/**
+ * Higher-order component that extends Ant Design's Alert to use Carbon icons
+ * as the default icons for each feedback type (info, success, warning, error).
+ *
+ * When `showIcon` is true and no custom `icon` is provided, a Carbon icon is
+ * injected based on the alert `type`. Icons are sized at 16px for compact
+ * alerts and 24px when a `description` is present.
+ *
+ * All standard Alert props are supported. Passing a custom `icon` overrides
+ * the Carbon default.
+ */
+export const CustomAlert = Object.assign(withCustomProps(Alert), {
+  ErrorBoundary: Alert.ErrorBoundary,
+});

clients/fidesui/src/hoc/index.tsx

@@ -1,4 +1,5 @@
 export * from "./CopyTooltip";
+export * from "./CustomAlert";
 export * from "./CustomAvatar";
 export * from "./CustomCard";
 export * from "./CustomDateRangePicker";

clients/fidesui/src/index.ts

@@ -234,7 +234,6 @@ export type {
   UploadProps,
 } from "antd/lib";
 export {
-  Alert,
   AutoComplete,
   Badge,
   Breadcrumb,
@@ -288,6 +287,7 @@ export type { DisplayValueType } from "rc-select/lib/BaseSelect";
 
 // Higher-order components
 export type {
+  CustomAlertProps as AlertProps,
   CustomAvatarProps as AvatarProps,
   CustomCardProps as CardProps,
   ICustomMultiSelectProps,
@@ -297,6 +297,7 @@ export type {
   StatisticTrend,
 } from "./hoc";
 export {
+  CustomAlert as Alert,
   CustomAvatar as Avatar,
   CustomCard as Card,
   CopyTooltip,

clients/fidesui/src/lib/carbon-icon-defaults.tsx

@@ -11,6 +11,8 @@ import { ReactNode } from "react";
 export type FeedbackType = "info" | "success" | "warning" | "error";
 export type ModalType = FeedbackType | "confirm";
 
+const ALERT_ICON_SIZE = 16;
+const ALERT_ICON_SIZE_WITH_DESC = 24;
 const MODAL_ICON_SIZE = 24;
 const MESSAGE_ICON_SIZE = 16;
 const NOTIFICATION_ICON_SIZE = 24;
@@ -82,6 +84,22 @@ const NOTIFICATION_ICON_MAP: Record<FeedbackType, ReactNode> = {
   error: inlineIcon(Misuse, "var(--fidesui-error)", NOTIFICATION_ICON_SIZE),
 };
 
+const ALERT_ICON_MAP: Record<FeedbackType, CarbonIconType> = {
+  info: InformationFilled,
+  success: CheckmarkFilled,
+  warning: WarningFilled,
+  error: Misuse,
+};
+
+export const getDefaultAlertIcon = (
+  type: FeedbackType,
+  hasDescription: boolean,
+): ReactNode => {
+  const Icon = ALERT_ICON_MAP[type];
+  const size = hasDescription ? ALERT_ICON_SIZE_WITH_DESC : ALERT_ICON_SIZE;
+  return <Icon size={size} />;
+};
+
 export const getDefaultModalIcon = (type: ModalType): ReactNode =>
   MODAL_ICON_MAP[type];