fix(ui-alerts): fix Alert border radius override and add new prop for custom icon

INSTUI-4572

Author: ToMESSKa

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')!

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>
     )
   }

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 = {

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: {