[v12] feat(ui-alerts): rework Alert

docs/guides/upgrade-guide.md

@@ -136,6 +136,13 @@ type: example
 </InstUISettingsProvider>
 ```
 
+### Alert
+
+- theme variable `boxShadow` is now removed and uses `sharedTokens.boxShadow.elevation4` instead
+- theme variable `contentPadding` has been removed and split into:
+  - `contentPaddingVertical` (for top/bottom padding)
+  - `contentPaddingHorizontal` (for left/right padding)
+
 ### Breadcrumb
 
 #### New tokens

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/__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-lucide'
 
 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
-} 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/tsconfig.build.json

@@ -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" },