From 6fdb29a58d4e3cef033cb312607ce98b711d1e07 Mon Sep 17 00:00:00 2001 From: Jason Gill <103820+gilluminate@users.noreply.github.com> Date: Wed, 11 Mar 2026 12:13:45 -0600 Subject: [PATCH 1/4] fix: Alert banner variant now uses Carbon icons Mirror Ant's internal banner defaults (showIcon=true, type="warning") in the CustomAlert HOC so Carbon icons are injected for banner mode. Co-Authored-By: Claude Opus 4.6 --- clients/fidesui/src/hoc/CustomAlert.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/clients/fidesui/src/hoc/CustomAlert.tsx b/clients/fidesui/src/hoc/CustomAlert.tsx index 214c3b4bf19..077e98c77a4 100644 --- a/clients/fidesui/src/hoc/CustomAlert.tsx +++ b/clients/fidesui/src/hoc/CustomAlert.tsx @@ -8,18 +8,25 @@ export interface CustomAlertProps extends AlertProps {} const withCustomProps = (WrappedComponent: typeof Alert) => { const WrappedAlert = React.forwardRef( - ({ showIcon, icon, type = "info", description, ...props }, ref) => { + ({ showIcon, icon, type, banner, description, ...props }, ref) => { + // Mirror Ant's internal defaults so Carbon icons apply correctly: + // - banner mode defaults type to "warning" (not "info") + // - banner mode implicitly enables showIcon + const resolvedType = type ?? (banner ? "warning" : "info"); + const resolvedShowIcon = showIcon ?? !!banner; + const carbonIcon = - showIcon && icon === undefined - ? getDefaultAlertIcon(type, !!description) + resolvedShowIcon && icon === undefined + ? getDefaultAlertIcon(resolvedType, !!description) : icon; return ( @@ -39,6 +46,9 @@ const withCustomProps = (WrappedComponent: typeof Alert) => { * injected based on the alert `type`. Icons are sized at 16px for compact * alerts and 24px when a `description` is present. * + * Banner mode (`banner={true}`) mirrors Ant's internal defaults: `showIcon` + * defaults to true and `type` defaults to "warning" when not explicitly set. + * * All standard Alert props are supported. Passing a custom `icon` overrides * the Carbon default. */ From 719ab4618f58c825f028bcf2e2f6d2cc6fa7a4a3 Mon Sep 17 00:00:00 2001 From: Jason Gill <103820+gilluminate@users.noreply.github.com> Date: Thu, 12 Mar 2026 10:22:18 -0600 Subject: [PATCH 2/4] Simplify CustomAlert banner defaults for consistency Override Ant's banner-specific defaults so all alert types behave identically (type="info", showIcon=false). Co-Authored-By: Claude Opus 4.6 --- clients/fidesui/src/hoc/CustomAlert.tsx | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/clients/fidesui/src/hoc/CustomAlert.tsx b/clients/fidesui/src/hoc/CustomAlert.tsx index 077e98c77a4..07328c1c455 100644 --- a/clients/fidesui/src/hoc/CustomAlert.tsx +++ b/clients/fidesui/src/hoc/CustomAlert.tsx @@ -8,24 +8,20 @@ export interface CustomAlertProps extends AlertProps {} const withCustomProps = (WrappedComponent: typeof Alert) => { const WrappedAlert = React.forwardRef( - ({ showIcon, icon, type, banner, description, ...props }, ref) => { - // Mirror Ant's internal defaults so Carbon icons apply correctly: - // - banner mode defaults type to "warning" (not "info") - // - banner mode implicitly enables showIcon - const resolvedType = type ?? (banner ? "warning" : "info"); - const resolvedShowIcon = showIcon ?? !!banner; - + ({ showIcon = false, icon, type = "info", banner, description, ...props }, ref) => { + // Override Ant's banner-specific defaults so all alert types + // behave consistently. const carbonIcon = - resolvedShowIcon && icon === undefined - ? getDefaultAlertIcon(resolvedType, !!description) + showIcon && icon === undefined + ? getDefaultAlertIcon(type, !!description) : icon; return ( { * injected based on the alert `type`. Icons are sized at 16px for compact * alerts and 24px when a `description` is present. * - * Banner mode (`banner={true}`) mirrors Ant's internal defaults: `showIcon` - * defaults to true and `type` defaults to "warning" when not explicitly set. + * Banner mode (`banner={true}`) uses the same defaults as all other alert + * types (`showIcon=false`, `type="info"`), overriding Ant's internal defaults. * * All standard Alert props are supported. Passing a custom `icon` overrides * the Carbon default. From 82a9ac75a8672125925bf3f643c1a9818bb6067e Mon Sep 17 00:00:00 2001 From: Jason Gill <103820+gilluminate@users.noreply.github.com> Date: Thu, 12 Mar 2026 11:23:48 -0600 Subject: [PATCH 3/4] fix formatting --- clients/fidesui/src/hoc/CustomAlert.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/clients/fidesui/src/hoc/CustomAlert.tsx b/clients/fidesui/src/hoc/CustomAlert.tsx index 07328c1c455..b7bb6bb10db 100644 --- a/clients/fidesui/src/hoc/CustomAlert.tsx +++ b/clients/fidesui/src/hoc/CustomAlert.tsx @@ -8,7 +8,10 @@ export interface CustomAlertProps extends AlertProps {} const withCustomProps = (WrappedComponent: typeof Alert) => { const WrappedAlert = React.forwardRef( - ({ showIcon = false, icon, type = "info", banner, description, ...props }, ref) => { + ( + { showIcon = false, icon, type = "info", banner, description, ...props }, + ref, + ) => { // Override Ant's banner-specific defaults so all alert types // behave consistently. const carbonIcon = From 84a6af17654de6c1dd96b7ff131dc84e29129bde Mon Sep 17 00:00:00 2001 From: Jason Gill <103820+gilluminate@users.noreply.github.com> Date: Thu, 12 Mar 2026 11:36:10 -0600 Subject: [PATCH 4/4] Update Alert.stories.tsx --- .../fidesui/src/components/feedback/Alert.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/clients/fidesui/src/components/feedback/Alert.stories.tsx b/clients/fidesui/src/components/feedback/Alert.stories.tsx index 0d5c42d8ee7..a157378e75f 100644 --- a/clients/fidesui/src/components/feedback/Alert.stories.tsx +++ b/clients/fidesui/src/components/feedback/Alert.stories.tsx @@ -95,6 +95,16 @@ export const Banner: Story = { description: PARAGRAPH_LOREM, banner: true, }, + argTypes: { + type: { + control: "select", + options: Object.values(ALERT_TYPE), + }, + showIcon: { + control: "boolean", + }, + icon: iconControl, + }, }; export const Compact: Story = {