fix: removed 'flex' iconSize option

WestpacGEL · Sep 5, 2024 · 58b4b7d · 58b4b7d
1 parent 4686714
commit 58b4b7d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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