fix: icon size

Author: lisalupi

packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -16,12 +16,12 @@ exports[`alert > renders correctly small 1`] = `
           style="--_4k0ekn3: 1 1 auto;"
         >
           <svg
-            class="styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_sentiment_danger__vbm0wq5 styles_size_large__vbm0wq8 styles_undefined_compound_36__vbm0wq1k"
-            viewBox="0 0 20 20"
+            class="styles__1b838gxd styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_sentiment_danger__vbm0wq5 styles_size_small__vbm0wqa styles_undefined_compound_36__vbm0wq1k"
+            viewBox="0 0 16 16"
           >
             <path
               clip-rule="evenodd"
-              d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+              d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 4C8.41421 4 8.75 4.33579 8.75 4.75V7.75C8.75 8.16421 8.41421 8.5 8 8.5C7.58579 8.5 7.25 8.16421 7.25 7.75V4.75C7.25 4.33579 7.58579 4 8 4ZM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z"
               fill-rule="evenodd"
             />
           </svg>

packages/ui/src/components/Alert/index.tsx

@@ -16,6 +16,7 @@ import {
   alert,
   buttonAlert,
   buttonCloseAlert,
+  smallIcon,
   textAlert,
   wrapAlert,
 } from './styles.css'
@@ -98,9 +99,10 @@ export const Alert = ({
         >
           <Icon
             aria-hidden="true"
+            className={size === 'small' ? smallIcon : ''}
             prominence={sentiment === 'neutral' ? 'strong' : undefined}
             sentiment={sentiment}
-            size="large"
+            size={size === 'small' ? 'small' : 'large'}
           />
           <Stack
             alignItems="center"

packages/ui/src/components/Alert/styles.css.ts

@@ -50,7 +50,6 @@ export const wrapAlert = style({
 
 export const textAlert = style({
   color: theme.colors.neutral.text,
-  paddingTop: theme.space['0.25'],
 })
 
 export const buttonAlert = styleVariants({
@@ -67,3 +66,7 @@ export const buttonCloseAlert = style({
 })
 
 export type AlertVariants = NonNullable<RecipeVariants<typeof alert>>
+
+export const smallIcon = style({
+  marginTop: theme.space['0.25'],
+})