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

[ToMESSKa]

… custom icon

INSTUI-4572

ISSUE:

• overriding the border radius of Alert results the icon's border not changing
• the icon cannot be customized

TEST PLAN:

• go over the examples in Alert by overriding borderRadius e.g.:

themeOverride={{
    borderRadius: '1rem'
  }}

• the icons border radius should also change (previously is was unaffected)
• it should work in RTL too
• try adding a custom icon by using the renderCustomIcon prop e.g.:

renderCustomIcon={()=> <IconUserLine />}

• the icon should change

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-07-03 10:08 UTC

[Copilot]

Pull Request Overview

This PR fixes an issue with the Alert component where overriding the border radius did not affect the icon's border and adds a new prop to allow for rendering a custom icon.

• Updated the Alert styles to include new border radius styles for the icon container.
• Added the renderCustomIcon prop in the Alert props and integrated it in the Alert component.
• Updated tests to validate the custom icon functionality.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/ui-alerts/src/Alert/styles.ts	Added negative margin and border radius overrides to adjust the alert icon styling.
packages/ui-alerts/src/Alert/props.ts	Added renderCustomIcon property with associated propTypes and allowedProps update.
packages/ui-alerts/src/Alert/index.tsx	Modified renderIcon to support renderCustomIcon, rendering it when provided.
packages/ui-alerts/src/Alert/tests/Alert.test.tsx	Added a test to ensure a custom icon is rendered via renderCustomIcon prop.

Comments suppressed due to low confidence (1)

packages/ui-alerts/src/Alert/tests/Alert.test.tsx:167

• The test description still references renderIcon; please update it to renderCustomIcon to match the updated prop name and avoid confusion.

it('should render an icon when provided as the `renderIcon` prop', () => {

[ToMESSKa]

this is needed to make a white line between the Alert's and the icon's border to disappear

[matyasf]

nice work!