change: [M3-9655] - [Akamai Design System] Toast Component

packages/manager/.changeset/pr-11962-changed-1743652792312.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Update toast styling to Akamai Design System specs ([#11962](https://github.com/linode/manager/pull/11962))

packages/manager/src/components/Snackbar/CloseSnackbar.tsx

@@ -1,5 +1,4 @@
-import { IconButton } from '@linode/ui';
-import Close from '@mui/icons-material/Close';
+import { CloseIcon, IconButton } from '@linode/ui';
 import * as React from 'react';
 
 interface Props {
@@ -20,7 +19,7 @@ export const CloseSnackbar = (props: Props) => {
       size="large"
       title={text}
     >
-      <Close />
+      <CloseIcon width={16} height={16} />
     </IconButton>
   );
 };

packages/manager/src/components/Snackbar/Snackbar.tsx

@@ -5,14 +5,36 @@ import * as React from 'react';
 
 import { CloseSnackbar } from './CloseSnackbar';
 
+import {
+  InfoOutlinedIcon,
+  TipOutlinedIcon,
+  WarningOutlinedIcon,
+  ErrorOutlinedIcon,
+  SuccessOutlinedIcon,
+} from '@linode/ui';
+
 import type { Theme } from '@mui/material/styles';
 import type { SnackbarProviderProps } from 'notistack';
 
+// Add override for "tip" variant which is Akamai specific and not built into Notistack
+declare module 'notistack' {
+  interface VariantOverrides {
+    tip: true;
+  }
+}
+
 const StyledMaterialDesignContent = styled(MaterialDesignContent)(
   ({ theme }: { theme: Theme }) => ({
+    '#notistack-snackbar > svg': {
+      position: 'absolute',
+      left: '14px',
+    },
     '&.notistack-MuiContent': {
       color: theme.notificationToast.default.color,
       flexWrap: 'unset',
+      borderRadius: 0,
+      paddingLeft: theme.spacingFunction(12),
+      paddingRight: theme.spacingFunction(12),
       [theme.breakpoints.up('md')]: {
         maxWidth: '400px',
       },
@@ -25,7 +47,7 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
       backgroundColor: theme.notificationToast.error.backgroundColor,
       borderLeft: theme.notificationToast.error.borderLeft,
     },
-    '&.notistack-MuiContent-info': {
+    '&.notistack-MuiContent-info, &.notistack-MuiContent-tip': {
       backgroundColor: theme.notificationToast.info.backgroundColor,
       borderLeft: theme.notificationToast.info.borderLeft,
     },
@@ -37,6 +59,9 @@ const StyledMaterialDesignContent = styled(MaterialDesignContent)(
       backgroundColor: theme.notificationToast.warning.backgroundColor,
       borderLeft: theme.notificationToast.warning.borderLeft,
     },
+    '& #notistack-snackbar + div': {
+      paddingLeft: theme.spacingFunction(12),
+    },
   })
 );
 
@@ -50,13 +75,22 @@ export const Snackbar = (props: SnackbarProviderProps) => {
 
   return (
     <SnackbarProvider
+      iconVariant={{
+        default: <InfoOutlinedIcon />,
+        info: <InfoOutlinedIcon />,
+        tip: <TipOutlinedIcon />,
+        warning: <WarningOutlinedIcon />,
+        error: <ErrorOutlinedIcon />,
+        success: <SuccessOutlinedIcon />,
+      }}
       {...rest}
       Components={{
         default: StyledMaterialDesignContent,
-        error: StyledMaterialDesignContent,
         info: StyledMaterialDesignContent,
-        success: StyledMaterialDesignContent,
+        tip: StyledMaterialDesignContent,
         warning: StyledMaterialDesignContent,
+        error: StyledMaterialDesignContent,
+        success: StyledMaterialDesignContent,
       }}
       action={(snackbarId) => (
         <CloseSnackbar

packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx

@@ -42,7 +42,7 @@ type Story = StoryObj<typeof Snackbar>;
 export const Default: Story = {
   args: {
     anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-    hideIconVariant: true,
+    hideIconVariant: false,
     maxSnack: 5,
   },
   render: (args) => <Template {...args} />,
@@ -58,7 +58,14 @@ function Template(args: any) {
 
 function Example() {
   const { enqueueSnackbar } = useSnackbar();
-  const variants = ['default', 'success', 'warning', 'error', 'info'] as const;
+  const variants = [
+    'default',
+    'success',
+    'warning',
+    'error',
+    'info',
+    'tip',
+  ] as const;
   const showToast = (variant: VariantType) =>
     enqueueSnackbar(
       'Toast message. This will auto destruct after five seconds.',
@@ -84,7 +91,7 @@ function Example() {
 export const WithEventMessage: Story = {
   args: {
     anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-    hideIconVariant: true,
+    hideIconVariant: false,
     maxSnack: 5,
   },
   render: (args) => {
@@ -124,7 +131,7 @@ export const WithEventMessage: Story = {
 export const WithLongMessage: Story = {
   args: {
     anchorOrigin: { horizontal: 'right', vertical: 'bottom' },
-    hideIconVariant: true,
+    hideIconVariant: false,
     maxSnack: 5,
   },
   render: (args) => {

packages/manager/src/index.tsx

@@ -68,7 +68,7 @@ const Main = () => {
                 <Snackbar
                   anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
                   autoHideDuration={4000}
-                  hideIconVariant={true}
+                  hideIconVariant={false}
                   maxSnack={3}
                 >
                   <Switch>

packages/ui/.changeset/pr-11962-added-1743652880587.md

@@ -0,0 +1,5 @@
+---
+"@linode/ui": Added
+---
+
+Include outlined SVG icons for toast design ([#11962](https://github.com/linode/manager/pull/11962))

packages/ui/src/assets/icons/index.ts

@@ -6,14 +6,19 @@ export { default as CheckboxIndeterminateIcon } from './checkboxIndeterminate.sv
 export { default as ChevronDownIcon } from './chevron-down.svg';
 export { default as ChevronUpIcon } from './chevron-up.svg';
 export { default as CloseIcon } from './close.svg';
+export { default as ErrorOutlinedIcon } from './error-outlined.svg';
 export { default as InfoIcon } from './info.svg';
+export { default as InfoOutlinedIcon } from './info-outlined.svg';
 export { default as PendingIcon } from './pending.svg';
 export { default as PlusSignIcon } from './plusSign.svg';
 export { default as RadioIcon } from './radio.svg';
 export { default as RadioIconRadioed } from './radioRadioed.svg';
 export { default as ReloadIcon } from './reload.svg';
+export { default as SuccessOutlinedIcon } from './success-outlined.svg';
+export { default as TipOutlinedIcon } from './tip-outlined.svg';
 export { default as ToggleOffIcon } from './toggleOff.svg';
 export { default as ToggleOnIcon } from './toggleOn.svg';
 export { default as VisibilityHideIcon } from './visibilityHide.svg';
 export { default as VisibilityShowIcon } from './visibilityShow.svg';
 export { default as WarningIcon } from './warning.svg';
+export { default as WarningOutlinedIcon } from './warning-outlined.svg';

packages/ui/src/foundations/themes/dark.ts

@@ -109,24 +109,28 @@ export const customDarkModeOptions = {
 export const notificationToast = {
   default: {
     backgroundColor: NotificationToast.Informative.Background,
-    borderLeft: `6px solid ${NotificationToast.Informative.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Informative.Border}`,
     color: NotificationToast.Text,
   },
   error: {
     backgroundColor: NotificationToast.Error.Background,
-    borderLeft: `6px solid ${NotificationToast.Error.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Error.Border}`,
   },
   info: {
     backgroundColor: NotificationToast.Informative.Background,
-    borderLeft: `6px solid ${NotificationToast.Informative.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Informative.Border}`,
   },
   success: {
     backgroundColor: NotificationToast.Success.Background,
-    borderLeft: `6px solid ${NotificationToast.Success.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Success.Border}`,
   },
   warning: {
     backgroundColor: NotificationToast.Warning.Background,
-    borderLeft: `6px solid ${NotificationToast.Warning.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Warning.Border}`,
+  },
+  tip: {
+    backgroundColor: NotificationToast.Informative.Background,
+    borderLeft: `48px solid ${NotificationToast.Informative.Border}`,
   },
 } as const;
 

packages/ui/src/foundations/themes/light.ts

@@ -115,24 +115,28 @@ export const borderColors = {
 export const notificationToast = {
   default: {
     backgroundColor: NotificationToast.Informative.Background,
-    borderLeft: `6px solid ${NotificationToast.Informative.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Informative.Border}`,
     color: NotificationToast.Text,
   },
   error: {
     backgroundColor: NotificationToast.Error.Background,
-    borderLeft: `6px solid ${NotificationToast.Error.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Error.Border}`,
   },
   info: {
     backgroundColor: NotificationToast.Informative.Background,
-    borderLeft: `6px solid ${NotificationToast.Informative.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Informative.Border}`,
   },
   success: {
     backgroundColor: NotificationToast.Success.Background,
-    borderLeft: `6px solid ${NotificationToast.Success.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Success.Border}`,
   },
   warning: {
     backgroundColor: NotificationToast.Warning.Background,
-    borderLeft: `6px solid ${NotificationToast.Warning.Border}`,
+    borderLeft: `48px solid ${NotificationToast.Warning.Border}`,
+  },
+  tip: {
+    backgroundColor: NotificationToast.Informative.Background,
+    borderLeft: `48px solid ${NotificationToast.Informative.Border}`,
   },
 } as const;