feat(ui-alerts): rework Alert

INSTUI-4782

Author: ToMESSKa

packages/ui-alerts/package.json

@@ -39,7 +39,7 @@
     "@instructure/shared-types": "workspace:*",
     "@instructure/ui-a11y-content": "workspace:*",
     "@instructure/ui-buttons": "workspace:*",
-    "@instructure/ui-icons": "workspace:*",
+    "@instructure/ui-icons-lucide": "workspace:*",
     "@instructure/ui-motion": "workspace:*",
     "@instructure/ui-react-utils": "workspace:*",
     "@instructure/ui-themes": "workspace:*",

packages/ui-alerts/src/Alert/index.tsx

@@ -36,17 +36,16 @@ import { View } from '@instructure/ui-view'
 import type { ViewOwnProps } from '@instructure/ui-view'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import {
-  IconCheckMarkSolid,
-  IconInfoBorderlessSolid,
-  IconWarningBorderlessSolid,
-  IconNoSolid
-} from '@instructure/ui-icons'
+  InfoInstUIIcon,
+  XCircleInstUIIcon,
+  CircleCheckInstUIIcon,
+  TriangleAlertInstUIIcon
+} from '@instructure/ui-icons-lucide'
 import { Transition } from '@instructure/ui-motion'
 import { logError as error } from '@instructure/console'
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { AlertProps, AlertState } from './props'
@@ -57,7 +56,7 @@ category: components
 ---
 **/
 @withDeterministicId()
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class Alert extends Component<AlertProps, AlertState> {
   static readonly componentId = 'Alert'
 
@@ -88,10 +87,10 @@ class Alert extends Component<AlertProps, AlertState> {
   srid: string
 
   variantUI = {
-    error: IconNoSolid,
-    info: IconInfoBorderlessSolid,
-    success: IconCheckMarkSolid,
-    warning: IconWarningBorderlessSolid
+    error: XCircleInstUIIcon,
+    info: InfoInstUIIcon,
+    success: CircleCheckInstUIIcon,
+    warning: TriangleAlertInstUIIcon
   }
 
   ref: Element | null = null

packages/ui-alerts/src/Alert/styles.ts

@@ -22,7 +22,8 @@
  * SOFTWARE.
  */
 
-import type { AlertTheme } from '@instructure/shared-types'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
 import type { AlertProps, AlertStyle } from './props'
 
 /**
@@ -36,8 +37,9 @@ import type { AlertProps, AlertStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: AlertTheme,
-  props: AlertProps
+  componentTheme: NewComponentTypes['Alert'],
+  props: AlertProps,
+  sharedTokens: SharedTokens
 ): AlertStyle => {
   const { variant, hasShadow } = props
 
@@ -84,7 +86,11 @@ const generateStyle = (
       borderStyle: componentTheme.borderStyle,
       borderRadius: componentTheme.borderRadius,
       ...variantStyles[variant!].alert,
-      ...(hasShadow && { boxShadow: componentTheme.boxShadow })
+      ...(hasShadow && {
+        boxShadow: boxShadowObjectsToCSSString(
+          sharedTokens.boxShadow.elevation4
+        )
+      })
     },
     icon: {
       color: componentTheme.iconColor,
@@ -116,7 +122,7 @@ const generateStyle = (
       fontFamily: componentTheme.contentFontFamily,
       fontWeight: componentTheme.contentFontWeight,
       lineHeight: componentTheme.contentLineHeight,
-      padding: componentTheme.contentPadding
+      padding: `${componentTheme.contentPaddingVertical} ${componentTheme.contentPaddingHorizontal}`
     },
     variantScreenReaderLabel: {
       position: 'absolute',

packages/ui-alerts/src/Alert/theme.ts

@@ -15,7 +15,7 @@
     { "path": "../ui-a11y-content/tsconfig.build.json" },
     { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../ui-buttons/tsconfig.build.json" },
-    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-icons-lucide/tsconfig.build.json" },
     { "path": "../ui-motion/tsconfig.build.json" },
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-scripts/tsconfig.build.json" },