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

[gilluminate]

Ticket ENG-2891

Description Of Changes

Extend Ant Design's <Alert> component in FidesUI to use Carbon icons as the default icons for each feedback type (info, success, warning, error). This follows the same pattern established in #7569 for Modal, Message, and Notification.

Since Alert is a declarative component (not an imperative API), this uses an HOC approach rather than the FidesUIProvider wrapping used for the others. Icons are sized at 16px for compact alerts and 24px when a description is present.

No consumer changes needed. All existing <Alert> imports from fidesui automatically get Carbon icons when showIcon is true. Alerts without showIcon are unaffected, and passing a custom icon prop still overrides the default.

Code Changes

• clients/fidesui/src/lib/carbon-icon-defaults.tsx - Add ALERT_ICON_CONFIG map and getDefaultAlertIcon() getter with size-aware icon selection
• clients/fidesui/src/hoc/CustomAlert.tsx - New HOC wrapping Ant's Alert, injecting Carbon icons when showIcon is true and no custom icon is provided
• clients/fidesui/src/hoc/index.tsx - Export new CustomAlert HOC
• clients/fidesui/src/index.ts - Swap raw Alert re-export from antd with CustomAlert as Alert; add AlertProps type export
• clients/fidesui/src/components/feedback/Alert.stories.tsx - Add showIcon: true to Primary story; add compact (no description) story variants for all 4 types

Steps to Confirm

1. Open Storybook (cd clients/fidesui && npm run storybook)
2. Navigate to Feedback > Alert stories
3. Verify all 4 types (info, success, warning, error) show Carbon icons at 24px in the "with description" stories
4. Verify compact stories show Carbon icons at 16px
5. Toggle showIcon off in the Primary story controls and confirm the icon disappears
6. Run npx tsc --noEmit in clients/fidesui and clients/admin-ui to confirm no type errors

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • No migrations
• Documentation:
  • No documentation updates required

Summary by CodeRabbit

Release Notes

• Style
  • Alert component now displays Carbon Design System icons instead of default icons for improved visual consistency.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ignored	Preview	Mar 10, 2026 7:38pm
fides-privacy-center	Ignored		Mar 10, 2026 7:38pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR replaces Ant Design's default icons with Carbon icons in the Alert component by introducing a CustomAlert HOC that wraps Ant's Alert and automatically applies Carbon icons when showIcon is enabled and no custom icon is provided. The public Alert export is updated to use the wrapped component.

Changes

Cohort / File(s)	Summary
Icon Utilities clients/fidesui/src/lib/carbon-icon-defaults.tsx	Adds alert icon sizing constants (ALERT_ICON_SIZE, ALERT_ICON_SIZE_WITH_DESC) and ALERT_ICON_MAP mapping FeedbackTypes to Carbon icons. Exports new getDefaultAlertIcon() function to select icons and sizing based on type and description presence.
CustomAlert HOC clients/fidesui/src/hoc/CustomAlert.tsx, clients/fidesui/src/hoc/index.tsx	Introduces CustomAlert higher-order component that wraps Ant's Alert, automatically deriving and applying Carbon icons via getDefaultAlertIcon() when showIcon is true and no custom icon supplied. Forwards refs and preserves all Alert props. Re-exports from hoc barrel file.
Public API clients/fidesui/src/index.ts	Replaces antd Alert export with CustomAlert (aliased as Alert); adds CustomAlertProps type alias exported as AlertProps from hoc exports.
Changelog changelog/7613-alert-carbon-icons.yaml	Adds changelog entry documenting replacement of Ant default icons with Carbon icons in Alert component.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• ENG-2890: Extend message and notification APIs to use Carbon icons #7582: Adds Carbon icon defaults for message and notification components using the same carbon-icon-defaults module approach.
• ENG-2889: Replace Ant default icons with Carbon icons in Modal methods #7569: Implements similar Carbon icon integration pattern for Modal component with getDefaultModalIcon utility function.

Poem

🐰 Hops with glee – Alert icons dance in carbon-bright hues,
No more Ant defaults, just icons the rabbits choose!
CustomAlert wraps them with HOC-powered grace,
Carbon replaces the old in this cozy new space. 🎨✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: replacing Ant default icons with Carbon icons in the Alert component, which aligns with the primary objective of the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description follows the required template with all major sections populated including ticket number, description, code changes, confirmation steps, and a comprehensive pre-merge checklist.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch gill/ENG-2891/alert-carbon-icons

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Greptile Summary

This PR extends Ant Design's Alert component in FidesUI to use Carbon icons as the default icons for each feedback type (info, success, warning, error), following the same pattern established for Modal, Message, and Notification. A new CustomAlert HOC is introduced that injects Carbon icons when showIcon is true and no custom icon is provided, with size-aware selection (16px compact, 24px with description). The change is transparent to consumers — all existing Alert imports from fidesui automatically get Carbon icons.

• New CustomAlert HOC correctly handles all prop combinations: Carbon icon injection, custom icon override, and showIcon=false passthrough, and properly forwards the ErrorBoundary static property.
• New getDefaultAlertIcon() getter in carbon-icon-defaults.tsx follows the established file structure but diverges slightly from the other icon maps — MODAL_ICON_MAP, MESSAGE_ICON_MAP, and NOTIFICATION_ICON_MAP are all pre-computed at module load time, whereas getDefaultAlertIcon creates a new React element on every call. Pre-computing two maps (compact and with-description) would restore consistency and avoid React seeing a new icon prop reference on every render.
• Storybook stories cover all 4 alert types in both compact and description variants.
• The AlertProps type re-export and the swap of Alert → CustomAlert as Alert in index.ts are clean and backward-compatible.

Confidence Score: 5/5

• This PR is safe to merge — it's a UI-only change that is backward-compatible and follows established patterns in the codebase.
• The implementation is straightforward, well-scoped, and mirrors the existing HOC pattern for Avatar, Card, Input, etc. No logic bugs or type errors were found. The one suggestion (pre-computing icon maps) is a minor optimization/consistency nit and does not affect correctness.
• No files require special attention.

Important Files Changed

Filename	Overview
clients/fidesui/src/lib/carbon-icon-defaults.tsx	Adds ALERT_ICON_CONFIG map and getDefaultAlertIcon() function following the existing pattern; minor inconsistency — unlike other icon maps, icons are created dynamically on each call rather than pre-computed at module load time.
clients/fidesui/src/hoc/CustomAlert.tsx	New HOC wrapping Ant's Alert to inject Carbon icons. Logic is correct: Carbon icon is only injected when showIcon is true and no custom icon is provided. ErrorBoundary static property is correctly forwarded.
clients/fidesui/src/components/feedback/Alert.stories.tsx	Adds compact story variants for all 4 alert types and imports TITLE_LOREM. PrimaryCompact intentionally omits showIcon: true (mirroring the Primary story playground pattern), while the other compact variants have it enabled.
clients/fidesui/src/index.ts	Cleanly swaps the raw Alert re-export from antd with CustomAlert as Alert and adds AlertProps type export. No issues.
clients/fidesui/src/hoc/index.tsx	Simple addition of CustomAlert export, consistent with the existing file pattern.
changelog/7613-alert-carbon-icons.yaml	Standard changelog entry; no issues.

_{Last reviewed commit: 2dbb5de}

[speaker-ender]

Approving as is but left some comments/questions. Overall looks good!

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@clients/fidesui/src/hoc/CustomAlert.tsx`:
- Around line 11-15: The Compact vs full icon sizing uses a truthy check
(!!description) in the CustomAlert render (the arrow function that accepts
showIcon, icon, type, description) which treats valid React nodes like 0 or ""
as absent; change that to an explicit presence check (e.g., description !== null
&& description !== undefined && description !== false) when calling
getDefaultAlertIcon(type, ...), so numeric or empty-string descriptions are
treated as present and get the 24px icon; keep the existing showIcon && icon ===
undefined gating intact.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 533eaddc-efba-447e-bb76-442693d1a236

📥 Commits

Reviewing files that changed from the base of the PR and between 2dbb5de and 511ebca.

📒 Files selected for processing (2)

• clients/fidesui/src/hoc/CustomAlert.tsx
• clients/fidesui/src/lib/carbon-icon-defaults.tsx