feat(ui-alerts): rework Alert

INSTUI-4782

Author: ToMESSKa

docs/guides/upgrade-guide.md

@@ -90,6 +90,21 @@ type: embed
     {oldName:"titleCardMini",newName:"titleCardMini",note:"now returns a full typography object instead of just a font size"},
     {oldName:"label",newName:"label",note:"now returns a full typography object instead of just a font size"},
     {oldName:"labelInline",newName:"labelInline",note:"now returns a full typography object instead of just a font size"}
+      ]}
+/>
+
+```
+
+### Alert
+
+```js
+---
+type: embed
+---
+<V12ChangelogTable
+  removed={[
+    {name:"boxShadow",note:"now uses sharedTokens.boxShadow.elevation4"},
+    {name:"contentPadding",note:"split into contentPaddingVertical and contentPaddingHorizontal"}
   ]}
 />
 

packages/ui-alerts/src/Alert/__tests__/Alert.test.tsx

@@ -29,7 +29,7 @@ import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
 import { Alert } from '../index'
 import type { AlertProps } from '../props'
-import { IconGroupLine } from '@instructure/ui-icons'
+import { GroupInstUIIcon } from '@instructure/ui-icons'
 
 describe('<Alert />', () => {
   let srdiv: HTMLDivElement | null
@@ -97,10 +97,10 @@ describe('<Alert />', () => {
     NonNullable<AlertProps['variant']>,
     string
   > = {
-    error: 'IconNo',
-    info: 'IconInfoBorderless',
-    success: 'IconCheckMark',
-    warning: 'IconWarningBorderless'
+    error: 'CircleX',
+    info: 'Info',
+    success: 'CircleCheck',
+    warning: 'TriangleAlert'
   }
 
   ;(
@@ -115,7 +115,7 @@ describe('<Alert />', () => {
           Success: Sample alert text.
         </Alert>
       )
-      const icon = container.querySelector('svg[class$="-svgIcon"]')
+      const icon = container.querySelector('svg[class^="lucide"]')
 
       expect(icon).toHaveAttribute('name', iconComponent)
     })
@@ -167,10 +167,12 @@ describe('<Alert />', () => {
   })
 
   it('should render an icon when provided as the `renderIcon` prop', () => {
-    const { container } = render(<Alert renderCustomIcon={<IconGroupLine />} />)
-    const icon = container.querySelector('svg[class$="-svgIcon"]')
+    const { container } = render(
+      <Alert renderCustomIcon={<GroupInstUIIcon />} />
+    )
+    const icon = container.querySelector('svg[class^="lucide"]')
 
-    expect(icon).toHaveAttribute('name', 'IconGroup')
+    expect(icon).toHaveAttribute('name', 'Group')
     expect(icon).toBeInTheDocument()
   })
 

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
+  InfoInstUIIcon,
+  XCircleInstUIIcon,
+  CircleCheckInstUIIcon,
+  TriangleAlertInstUIIcon
 } from '@instructure/ui-icons'
 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',