diff --git a/changelog/7613-alert-carbon-icons.yaml b/changelog/7613-alert-carbon-icons.yaml new file mode 100644 index 00000000000..7c5449abee4 --- /dev/null +++ b/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: [] diff --git a/clients/fidesui/src/hoc/CustomAlert.tsx b/clients/fidesui/src/hoc/CustomAlert.tsx new file mode 100644 index 00000000000..214c3b4bf19 --- /dev/null +++ b/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( + ({ showIcon, icon, type = "info", description, ...props }, ref) => { + const carbonIcon = + showIcon && icon === undefined + ? getDefaultAlertIcon(type, !!description) + : icon; + + return ( + + ); + }, + ); + + 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, +}); diff --git a/clients/fidesui/src/hoc/index.tsx b/clients/fidesui/src/hoc/index.tsx index 7370a6e1b6d..4b00708392e 100644 --- a/clients/fidesui/src/hoc/index.tsx +++ b/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"; diff --git a/clients/fidesui/src/index.ts b/clients/fidesui/src/index.ts index f2a9b72c921..9eda07a5d93 100644 --- a/clients/fidesui/src/index.ts +++ b/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, diff --git a/clients/fidesui/src/lib/carbon-icon-defaults.tsx b/clients/fidesui/src/lib/carbon-icon-defaults.tsx index 2f3807f69b6..ccf3f4e8352 100644 --- a/clients/fidesui/src/lib/carbon-icon-defaults.tsx +++ b/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 = { error: inlineIcon(Misuse, "var(--fidesui-error)", NOTIFICATION_ICON_SIZE), }; +const ALERT_ICON_MAP: Record = { + 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 ; +}; + export const getDefaultModalIcon = (type: ModalType): ReactNode => MODAL_ICON_MAP[type];