feat(ToastNotification)!: rename from Toast to ToastNotification (#1944)

- rename component and introduce QA fixes for button/icon alignment
- update snapshots

src/components/Toast/index.ts

@@ -1,2 +1 @@
 export { Toast as default } from './Toast';
-export { Toast as ToastV2 } from './Toast-v2';

src/components/Toast/Toast-v2.module.css → src/components/ToastNotification/ToastNotification.module.css

@@ -13,7 +13,7 @@
   display: flex;
   gap: 1rem;
   padding: 1rem;
-  align-items: center;
+  align-items: top;
 
   border: 0.125rem solid;
   border-left: 1rem solid;
@@ -37,4 +37,10 @@
 
 .toast__body {
   flex-grow: 2;
+}
+
+.toast__dismiss-button {
+  flex-shrink: 0;
+  margin-top: -0.5rem;
+  margin-right: -0.5rem;
 }

src/components/Toast/Toast-v2.stories.ts → src/components/ToastNotification/ToastNotification.stories.ts

@@ -1,11 +1,11 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
-import { Toast } from './Toast-v2';
+import { ToastNotification } from './ToastNotification';
 
 export default {
-  title: 'Components/V2/Toast',
-  component: Toast,
+  title: 'Components/V2/ToastNotification',
+  component: ToastNotification,
   parameters: {
     badges: ['intro-1.0', 'current-2.0'],
   },
@@ -15,7 +15,7 @@ export default {
   },
 } as Meta<Args>;
 
-type Args = ComponentProps<typeof Toast>;
+type Args = ComponentProps<typeof ToastNotification>;
 
 export const Default: StoryObj<Args> = {};
 

src/components/Toast/Toast-v2.test.ts → src/components/ToastNotification/ToastNotification.test.ts

@@ -1,8 +1,8 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import type { StoryFile } from '@storybook/testing-react';
 
-import * as stories from './Toast-v2.stories';
+import * as stories from './ToastNotification.stories';
 
-describe('<Toast /> (v2)', () => {
+describe('<ToastNotification /> (v2)', () => {
   generateSnapshots(stories as StoryFile);
 });

src/components/Toast/Toast-v2.tsx → src/components/ToastNotification/ToastNotification.tsx

@@ -7,9 +7,9 @@ import { ButtonV2 as Button } from '../Button';
 import { IconV2 as Icon } from '../Icon';
 import Text from '../Text';
 
-import styles from './Toast-v2.module.css';
+import styles from './ToastNotification.module.css';
 
-export type ToastProps = {
+export type ToastNotificationProps = {
   // Component API
   /**
    * Additional class names that can be appended to the component, passed in for styling.
@@ -31,17 +31,17 @@ export type ToastProps = {
 };
 
 /**
- * `import {Toast} from "@chanzuckerberg/eds";`
+ * `import {ToastNotification} from "@chanzuckerberg/eds";`
  *
  * Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.
  */
-export const Toast = ({
+export const ToastNotification = ({
   className,
   onDismiss,
   status = 'favorable',
   title,
   ...other
-}: ToastProps) => {
+}: ToastNotificationProps) => {
   const componentClassName = clsx(
     styles['toast'],
     status && styles[`toast--status-${status}`],
@@ -63,11 +63,13 @@ export const Toast = ({
       {onDismiss && (
         <Button
           aria-label="close"
+          className={styles['toast__dismiss-button']}
           context="default"
           icon="close"
           iconLayout="icon-only"
           onClick={onDismiss}
           rank="tertiary"
+          variant="neutral"
         >
           Close
         </Button>

src/components/Toast/__snapshots__/Toast-v2.test.ts.snap → src/components/ToastNotification/__snapshots__/ToastNotification.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Toast /> (v2) Critical story renders snapshot 1`] = `
+exports[`<ToastNotification /> (v2) Critical story renders snapshot 1`] = `
 <div
   class="toast toast--status-critical"
 >
@@ -30,7 +30,7 @@ exports[`<Toast /> (v2) Critical story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Toast /> (v2) Default story renders snapshot 1`] = `
+exports[`<ToastNotification /> (v2) Default story renders snapshot 1`] = `
 <div
   class="toast toast--status-favorable"
 >
@@ -60,7 +60,7 @@ exports[`<Toast /> (v2) Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Toast /> (v2) Favorable story renders snapshot 1`] = `
+exports[`<ToastNotification /> (v2) Favorable story renders snapshot 1`] = `
 <div
   class="toast toast--status-favorable"
 >
@@ -90,7 +90,7 @@ exports[`<Toast /> (v2) Favorable story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`<Toast /> (v2) NotDismissable story renders snapshot 1`] = `
+exports[`<ToastNotification /> (v2) NotDismissable story renders snapshot 1`] = `
 <div
   class="toast toast--status-favorable"
 >

src/components/ToastNotification/index.ts

@@ -0,0 +1 @@
+export { ToastNotification as default } from './ToastNotification';

src/index.ts

@@ -70,7 +70,7 @@ export { RadioV2 } from './components/Radio';
 export { SelectV2 } from './components/Select';
 export { default as TabGroupV2 } from './components/TabGroup';
 export { TextareaFieldV2 } from './components/TextareaField';
-export { ToastV2 } from './components/Toast';
+export { default as ToastNotificationV2 } from './components/ToastNotification';
 export { TooltipV2 } from './components/Tooltip';
 
 export type { IconNameV2 } from './components/Icon';