feat: rename ToastLayout to Toast (#28140)

* feat: rename ToastLayout to Toast

Follows up from #28139 and renames ToastLayout to Toast

* fix md

packages/react-components/react-toast/etc/react-toast.api.md

@@ -16,6 +16,9 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TriggerProps } from '@fluentui/react-utilities';
 
+// @public
+export const renderToast_unstable: (state: ToastState) => JSX.Element;
+
 // @public
 export const renderToastBody_unstable: (state: ToastBodyState) => JSX.Element;
 
@@ -26,10 +29,10 @@ export const renderToaster_unstable: (state: ToasterState) => JSX.Element;
 export const renderToastFooter_unstable: (state: ToastFooterState) => JSX.Element;
 
 // @public
-export const renderToastLayout_unstable: (state: ToastLayoutState) => JSX.Element;
+export const renderToastTitle_unstable: (state: ToastTitleState) => JSX.Element;
 
 // @public
-export const renderToastTitle_unstable: (state: ToastTitleState) => JSX.Element;
+export const Toast: ForwardRefComponent<ToastProps>;
 
 // @public
 export const ToastBody: ForwardRefComponent<ToastBodyProps>;
@@ -49,6 +52,9 @@ export type ToastBodySlots = {
 // @public
 export type ToastBodyState = ComponentState<ToastBodySlots>;
 
+// @public (undocumented)
+export const toastClassNames: SlotClassNames<ToastSlots>;
+
 // @public
 export const Toaster: React_2.FC<ToasterProps>;
 
@@ -91,28 +97,22 @@ export type ToastFooterState = ComponentState<ToastFooterSlots>;
 // @public (undocumented)
 export type ToastId = string;
 
-// @public
-export const ToastLayout: ForwardRefComponent<ToastLayoutProps>;
+// @public (undocumented)
+export type ToastOffset = Partial<Record<ToastPosition, ToastOffsetObject>> | ToastOffsetObject;
 
 // @public (undocumented)
-export const toastLayoutClassNames: SlotClassNames<ToastLayoutSlots>;
+export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 // @public
-export type ToastLayoutProps = ComponentProps<ToastLayoutSlots> & {};
+export type ToastProps = ComponentProps<ToastSlots> & {};
 
 // @public (undocumented)
-export type ToastLayoutSlots = {
+export type ToastSlots = {
     root: Slot<'div'>;
 };
 
 // @public
-export type ToastLayoutState = ComponentState<ToastLayoutSlots>;
-
-// @public (undocumented)
-export type ToastOffset = Partial<Record<ToastPosition, ToastOffsetObject>> | ToastOffsetObject;
-
-// @public (undocumented)
-export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type ToastState = ComponentState<ToastSlots>;
 
 // @public
 export const ToastTitle: ForwardRefComponent<ToastTitleProps>;
@@ -151,6 +151,9 @@ export type ToastTriggerState = {
     children: React_2.ReactElement | null;
 };
 
+// @public
+export const useToast_unstable: (props: ToastProps, ref: React_2.Ref<HTMLElement>) => ToastState;
+
 // @public
 export const useToastBody_unstable: (props: ToastBodyProps, ref: React_2.Ref<HTMLElement>) => ToastBodyState;
 
@@ -178,10 +181,7 @@ export const useToastFooter_unstable: (props: ToastFooterProps, ref: React_2.Ref
 export const useToastFooterStyles_unstable: (state: ToastFooterState) => ToastFooterState;
 
 // @public
-export const useToastLayout_unstable: (props: ToastLayoutProps, ref: React_2.Ref<HTMLElement>) => ToastLayoutState;
-
-// @public
-export const useToastLayoutStyles_unstable: (state: ToastLayoutState) => ToastLayoutState;
+export const useToastStyles_unstable: (state: ToastState) => ToastState;
 
 // @public
 export const useToastTitle_unstable: (props: ToastTitleProps, ref: React_2.Ref<HTMLElement>) => ToastTitleState;

packages/react-components/react-toast/src/Toast.ts

@@ -0,0 +1 @@
+export * from './components/Toast/index';

packages/react-components/react-toast/src/components/ToastLayout/ToastLayout.test.tsx → packages/react-components/react-toast/src/components/Toast/Toast.test.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { ToastLayout } from './ToastLayout';
+import { Toast } from './Toast';
 import { isConformant } from '../../testing/isConformant';
 
-describe('ToastLayout', () => {
+describe('Toast', () => {
   isConformant({
-    Component: ToastLayout,
-    displayName: 'ToastLayout',
+    Component: Toast,
+    displayName: 'Toast',
   });
 
   it('renders a default state', () => {
-    const result = render(<ToastLayout>Default ToastLayout</ToastLayout>);
+    const result = render(<Toast>Default Toast</Toast>);
     expect(result.container).toMatchSnapshot();
   });
 });

packages/react-components/react-toast/src/components/Toast/Toast.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useToast_unstable } from './useToast';
+import { renderToast_unstable } from './renderToast';
+import { useToastStyles_unstable } from './useToastStyles.styles';
+import type { ToastProps } from './Toast.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * Toast component
+ */
+export const Toast: ForwardRefComponent<ToastProps> = React.forwardRef((props, ref) => {
+  const state = useToast_unstable(props, ref);
+
+  useToastStyles_unstable(state);
+  return renderToast_unstable(state);
+});
+
+Toast.displayName = 'Toast';

packages/react-components/react-toast/src/components/Toast/Toast.types.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type ToastSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * Toast Props
+ */
+export type ToastProps = ComponentProps<ToastSlots> & {};
+
+/**
+ * State used in rendering Toast
+ */
+export type ToastState = ComponentState<ToastSlots>;

packages/react-components/react-toast/src/components/Toast/__snapshots__/Toast.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toast renders a default state 1`] = `
+<div>
+  <div
+    class="fui-Toast"
+  >
+    Default Toast
+  </div>
+</div>
+`;

packages/react-components/react-toast/src/components/Toast/index.ts

@@ -0,0 +1,5 @@
+export * from './Toast';
+export * from './Toast.types';
+export * from './renderToast';
+export * from './useToast';
+export * from './useToastStyles.styles';

packages/react-components/react-toast/src/components/Toast/renderToast.tsx

@@ -0,0 +1,15 @@
+/** @jsxRuntime classic */
+/** @jsx createElement */
+
+import { createElement } from '@fluentui/react-jsx-runtime';
+import { getSlotsNext } from '@fluentui/react-utilities';
+import type { ToastState, ToastSlots } from './Toast.types';
+
+/**
+ * Render the final JSX of Toast
+ */
+export const renderToast_unstable = (state: ToastState) => {
+  const { slots, slotProps } = getSlotsNext<ToastSlots>(state);
+
+  return <slots.root {...slotProps.root} />;
+};

packages/react-components/react-toast/src/components/Toast/useToast.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { ToastProps, ToastState } from './Toast.types';
+
+/**
+ * Create the state required to render Toast.
+ *
+ * The returned state can be modified with hooks such as useToastStyles_unstable,
+ * before being passed to renderToast_unstable.
+ *
+ * @param props - props from this instance of Toast
+ * @param ref - reference to root HTMLElement of Toast
+ */
+export const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {
+  return {
+    components: {
+      root: 'div',
+    },
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};

packages/react-components/react-toast/src/components/ToastLayout/useToastLayoutStyles.styles.ts → packages/react-components/react-toast/src/components/Toast/useToastStyles.styles.ts

@@ -1,10 +1,10 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { ToastLayoutSlots, ToastLayoutState } from './ToastLayout.types';
+import type { ToastSlots, ToastState } from './Toast.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
-export const toastLayoutClassNames: SlotClassNames<ToastLayoutSlots> = {
-  root: 'fui-ToastLayout',
+export const toastClassNames: SlotClassNames<ToastSlots> = {
+  root: 'fui-Toast',
 };
 
 /**
@@ -32,11 +32,11 @@ const useStyles = makeStyles({
 });
 
 /**
- * Apply styling to the ToastLayout slots based on the state
+ * Apply styling to the Toast slots based on the state
  */
-export const useToastLayoutStyles_unstable = (state: ToastLayoutState): ToastLayoutState => {
+export const useToastStyles_unstable = (state: ToastState): ToastState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toastLayoutClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(toastClassNames.root, styles.root, state.root.className);
 
   return state;
 };

packages/react-components/react-toast/src/index.ts

@@ -11,14 +11,8 @@ export {
   toasterClassNames,
 } from './Toaster';
 export type { ToasterProps, ToasterState, ToasterSlots } from './Toaster';
-export {
-  ToastLayout,
-  useToastLayoutStyles_unstable,
-  useToastLayout_unstable,
-  renderToastLayout_unstable,
-  toastLayoutClassNames,
-} from './ToastLayout';
-export type { ToastLayoutProps, ToastLayoutState, ToastLayoutSlots } from './ToastLayout';
+export { Toast, useToastStyles_unstable, useToast_unstable, renderToast_unstable, toastClassNames } from './Toast';
+export type { ToastProps, ToastState, ToastSlots } from './Toast';
 
 export {
   ToastTitle,

packages/react-components/react-toast/stories/Toast/CustomAnnounce.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Toaster, useToastController, ToastLayout, ToastTitle, ToasterProps } from '@fluentui/react-toast';
+import { Toaster, useToastController, Toast, ToastTitle, ToasterProps } from '@fluentui/react-toast';
 import { useId, Link, makeStyles, shorthands } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
@@ -24,21 +24,21 @@ export const CustomAnnounce = () => {
   const { dispatchToast } = useToastController(toasterId);
   const dispatchAlert = () =>
     dispatchToast(
-      <ToastLayout>
+      <Toast>
         <ToastTitle intent="success" action={<Link>Undo</Link>}>
           Assertive toast {counter++}
         </ToastTitle>
-      </ToastLayout>,
+      </Toast>,
       { politeness: 'assertive' },
     );
 
   const dispatchStatus = () =>
     dispatchToast(
-      <ToastLayout>
+      <Toast>
         <ToastTitle intent="success" action={<Link>Undo</Link>}>
           Polite toast {counter++}
         </ToastTitle>
-      </ToastLayout>,
+      </Toast>,
       { politeness: 'polite' },
     );