From 1466c53cb8caa7d59f1b378b0cc3a38835669b85 Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Fri, 13 Jun 2025 16:56:37 +0200
Subject: [PATCH] fix(ui-alerts): fix Alert border radius override and add new
 prop for custom icon

INSTUI-4572
---
 packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx |  9 +++++++++
 packages/ui-alerts/src/Alert/index.tsx                |  7 ++++---
 packages/ui-alerts/src/Alert/props.ts                 | 11 +++++++++--
 packages/ui-alerts/src/Alert/styles.ts                |  3 +++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx b/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx
index 01f904f28b..a5874f6499 100644
--- a/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx
+++ b/packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx
@@ -29,6 +29,7 @@ import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
 import { Alert } from '../index'
 import type { AlertProps } from '../props'
+import { IconGroupLine } from '@instructure/ui-icons'
 
 describe('<Alert />', () => {
   let srdiv: HTMLDivElement | null
@@ -147,6 +148,14 @@ describe('<Alert />', () => {
     expect(liveRegion).toHaveAttribute('aria-live', 'polite')
   })
 
+  it('should render an icon when provided as the `renderIcon` prop', () => {
+    const { container } = render(<Alert renderCustomIcon={<IconGroupLine />} />)
+    const icon = container.querySelector('svg[class$="-svgIcon"]')
+
+    expect(icon).toHaveAttribute('name', 'IconGroup')
+    expect(icon).toBeInTheDocument()
+  })
+
   describe('with `screenReaderOnly', () => {
     it('should not render anything when using `liveRegion`', async () => {
       const liveRegion = document.getElementById('_alertLiveRegion')!
diff --git a/packages/ui-alerts/src/Alert/index.tsx b/packages/ui-alerts/src/Alert/index.tsx
index 845a964f3b..bd796545e3 100644
--- a/packages/ui-alerts/src/Alert/index.tsx
+++ b/packages/ui-alerts/src/Alert/index.tsx
@@ -237,10 +237,11 @@ class Alert extends Component<AlertProps, AlertState> {
   }
 
   renderIcon() {
-    const Icon = this.variantUI[this.props.variant!]
+    const { renderCustomIcon, variant, styles } = this.props
+    const Icon = this.variantUI[variant!]
     return (
-      <div css={this.props.styles?.icon}>
-        <Icon />
+      <div css={styles?.icon}>
+        {renderCustomIcon ? callRenderProp(renderCustomIcon) : <Icon />}
       </div>
     )
   }
diff --git a/packages/ui-alerts/src/Alert/props.ts b/packages/ui-alerts/src/Alert/props.ts
index bfa9d3b3ec..2c3b759671 100644
--- a/packages/ui-alerts/src/Alert/props.ts
+++ b/packages/ui-alerts/src/Alert/props.ts
@@ -109,6 +109,11 @@ type AlertOwnProps = {
    * If the alert should have a shadow.
    */
   hasShadow: boolean
+
+  /**
+   * An icon, or function that returns an icon. Setting it will override the variant's icon.
+   */
+  renderCustomIcon?: Renderable
 }
 
 type PropKeys = keyof AlertOwnProps
@@ -137,7 +142,8 @@ const propTypes: PropValidators<PropKeys> = {
   transition: PropTypes.oneOf(['none', 'fade']),
   open: PropTypes.bool,
   hasShadow: PropTypes.bool,
-  variantScreenReaderLabel: PropTypes.string
+  variantScreenReaderLabel: PropTypes.string,
+  renderCustomIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -153,7 +159,8 @@ const allowedProps: AllowedPropKeys = [
   'onDismiss',
   'transition',
   'open',
-  'hasShadow'
+  'hasShadow',
+  'renderCustomIcon'
 ]
 
 type AlertState = {
diff --git a/packages/ui-alerts/src/Alert/styles.ts b/packages/ui-alerts/src/Alert/styles.ts
index cdf49b0ea2..38a264fdb5 100644
--- a/packages/ui-alerts/src/Alert/styles.ts
+++ b/packages/ui-alerts/src/Alert/styles.ts
@@ -95,6 +95,9 @@ const generateStyle = (
       justifyContent: 'center',
       fontSize: '1.125rem',
       borderRight: `${componentTheme.borderWidth} ${componentTheme.borderStyle}`,
+      margin: -1,
+      borderStartStartRadius: componentTheme.borderRadius,
+      borderEndStartRadius: componentTheme.borderRadius,
       ...variantStyles[variant!].icon
     },
     closeButton: {