Improvement/33473 react toast styling (#33550)

Author: soumyart

change/@fluentui-react-toast-e37ea84e-b210-4707-bac3-e4fd689b556e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: Add intent property to Toast state and useToast hook. Correct media className assignment in useToastTitleStyles.",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -1,5 +1,6 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { ToastIntent } from '../../state/types';
 
 export type ToastSlots = {
   root: Slot<'div'>;
@@ -21,4 +22,5 @@ export type ToastProps = ComponentProps<ToastSlots> & {
  */
 export type ToastState = ComponentState<ToastSlots> & {
   backgroundAppearance: BackgroundAppearanceContextValue;
+  intent?: ToastIntent | undefined;
 };

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { ToastProps, ToastState } from './Toast.types';
+import { useToastContainerContext } from '../../contexts/toastContainerContext';
 
 /**
  * Create the state required to render Toast.
@@ -12,6 +13,8 @@ import type { ToastProps, ToastState } from './Toast.types';
  * @param ref - reference to root HTMLElement of Toast
  */
 export const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {
+  const { intent } = useToastContainerContext();
+
   return {
     components: {
       root: 'div',
@@ -27,5 +30,6 @@ export const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>
       { elementType: 'div' },
     ),
     backgroundAppearance: props.appearance,
+    intent,
   };
 };

packages/react-components/react-toast/library/src/components/ToastTitle/useToastTitleStyles.styles.ts

@@ -102,9 +102,9 @@ export const useToastTitleStyles_unstable = (state: ToastTitleState): ToastTitle
       toastTitleClassNames.media,
       mediaBaseClassName,
       state.backgroundAppearance === 'inverted' && invertedStyles.media,
-      state.media.className,
       intent && intentIconStyles[intent],
       intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent],
+      state.media.className,
     );
   }