From 58b4b7d8edd99d9f9a85946f7fe077de2f486d10 Mon Sep 17 00:00:00 2001
From: Hannah <hannah.zhang1@westpac.com.au>
Date: Thu, 5 Sep 2024 13:45:31 +1000
Subject: [PATCH] fix: removed 'flex' iconSize option

---
 packages/ui/src/components/alert/alert.component.tsx |  6 +++---
 packages/ui/src/components/alert/alert.styles.ts     | 10 ++++++++--
 packages/ui/src/components/alert/alert.types.ts      |  2 +-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/components/alert/alert.component.tsx b/packages/ui/src/components/alert/alert.component.tsx
index fd02a7b82..c26464b50 100644
--- a/packages/ui/src/components/alert/alert.component.tsx
+++ b/packages/ui/src/components/alert/alert.component.tsx
@@ -19,7 +19,7 @@ export function Alert({
   open: isOpen = true,
   onClose,
   icon,
-  iconSize = 'flex',
+  iconSize,
   tag: Tag = 'div',
   className,
   children,
@@ -61,8 +61,8 @@ export function Alert({
             transition={{ duration: 0.4 }}
           >
             <Tag className={styles.base({ className })} {...props}>
-              <span className={styles.icon()}>
-                <Icon size={iconSize === 'flex' ? { initial: 'small', xsl: 'medium' } : iconSize} look="outlined" />
+              <span className={styles.icon({ hasSize: iconSize ? true : false })}>
+                <Icon size={iconSize ? iconSize : { initial: 'small', xsl: 'medium' }} look="outlined" />
               </span>
               <div className={styles.body()}>
                 {!!heading && <HeadingTag className={styles.heading()}>{heading}</HeadingTag>}
diff --git a/packages/ui/src/components/alert/alert.styles.ts b/packages/ui/src/components/alert/alert.styles.ts
index 97f7635e1..335473e35 100644
--- a/packages/ui/src/components/alert/alert.styles.ts
+++ b/packages/ui/src/components/alert/alert.styles.ts
@@ -38,6 +38,12 @@ export const styles = tv(
       dismissible: {
         true: '',
       },
+      hasSize: {
+        true: {},
+        false: {
+          icon: 'mr-1 xsl:mr-2',
+        },
+      },
       iconSize: {
         xsmall: {
           icon: 'mr-1',
@@ -51,8 +57,8 @@ export const styles = tv(
         large: {
           icon: 'mr-2',
         },
-        flex: {
-          icon: 'mr-1 xsl:mr-2',
+        xlarge: {
+          icon: 'mr-2',
         },
       },
     },
diff --git a/packages/ui/src/components/alert/alert.types.ts b/packages/ui/src/components/alert/alert.types.ts
index a3333d10c..7533f84ce 100644
--- a/packages/ui/src/components/alert/alert.types.ts
+++ b/packages/ui/src/components/alert/alert.types.ts
@@ -31,7 +31,7 @@ export type AlertProps = {
    * The size of the alert icon.
    * @default undefined
    */
-  iconSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'flex';
+  iconSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
    * Alert look style
    * @default info