Toast: Update Toast to use semantic tokens (#34844)

Co-authored-by: Mitch-At-Work <[email protected]>

Author: terynk

change/@fluentui-react-toast-213ed5af-e9e3-44d7-a136-ba202f583a40.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Export ToastContainer state and classNames nessecary for style overrides",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -64,6 +64,21 @@ export type ToastBodyState = ComponentState<ToastBodySlots> & {
 // @public (undocumented)
 export const toastClassNames: SlotClassNames<ToastSlots>;
 
+// @public (undocumented)
+export const toastContainerClassNames: SlotClassNames<ToastContainerSlots>;
+
+// @public
+export type ToastContainerState = ComponentState<ToastContainerSlots> & Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> & Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {
+    transitionTimeout: number;
+    timerTimeout: number;
+    running: boolean;
+    onTransitionEntering: () => void;
+    nodeRef: React_2.Ref<HTMLDivElement>;
+    onMotionFinish?: (event: null, data: {
+        direction: 'enter' | 'exit';
+    }) => void;
+};
+
 // @public
 export const Toaster: React_2.FC<ToasterProps>;
 

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

@@ -42,7 +42,7 @@ export type ToastContainerState = ComponentState<ToastContainerSlots> &
      */
     onTransitionEntering: () => void;
     /**
-     * @deprecated
+     * @deprecated now merged with root ref
      */
     nodeRef: React.Ref<HTMLDivElement>;
 

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

@@ -40,3 +40,6 @@ export {
   toastFooterClassNames,
 } from './ToastFooter';
 export type { ToastFooterProps, ToastFooterState, ToastFooterSlots } from './ToastFooter';
+
+export { toastContainerClassNames } from './ToastContainer';
+export type { ToastContainerState } from './ToastContainer';

packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md

@@ -60,6 +60,11 @@ import { TabListState } from '@fluentui/react-tabs';
 import { TabState } from '@fluentui/react-tabs';
 import { TextareaState } from '@fluentui/react-textarea';
 import { TextState } from '@fluentui/react-text';
+import { ToastBodyState } from '@fluentui/react-toast';
+import { ToastContainerState } from '@fluentui/react-toast';
+import { ToastFooterState } from '@fluentui/react-toast';
+import { ToastState } from '@fluentui/react-toast';
+import { ToastTitleState } from '@fluentui/react-toast';
 import { ToggleButtonState } from '@fluentui/react-button';
 import { ToolbarDividerState } from '@fluentui/react-toolbar';
 import { ToolbarGroupState } from '@fluentui/react-toolbar';
@@ -250,6 +255,21 @@ export const useSemanticTextareaStyles: (_state: unknown) => TextareaState;
 // @public
 export const useSemanticTextStyles: (_state: unknown) => TextState;
 
+// @public
+export const useSemanticToastBodyStyles: (_state: unknown) => ToastBodyState;
+
+// @public
+export const useSemanticToastContainerStyles: (_state: unknown) => ToastContainerState;
+
+// @public
+export const useSemanticToastFooterStyles: (_state: unknown) => ToastFooterState;
+
+// @public
+export const useSemanticToastStyles: (_state: unknown) => ToastState;
+
+// @public
+export const useSemanticToastTitleStyles: (_state: unknown) => ToastTitleState;
+
 // @public (undocumented)
 export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState;
 

packages/react-components/semantic-style-hooks-preview/library/package.json

@@ -61,6 +61,7 @@
     "@fluentui/react-text": "^9.4.36",
     "@fluentui/react-textarea": "^9.4.6",
     "@fluentui/react-theme": "^9.1.24",
+    "@fluentui/react-toast": "^9.4.8",
     "@fluentui/react-toolbar": "^9.4.5",
     "@fluentui/react-tooltip": "^9.6.6",
     "@fluentui/react-tree": "^9.10.9",

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Menu/useSemanticMenuItemSwitchStyles.styles.ts

@@ -155,7 +155,6 @@ export const useSemanticMenuItemSwitchStyles = (_state: unknown): MenuItemSwitch
   useMenuItemStyles_unstable({
     ...state,
     components: {
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...state.components,
       checkmark: 'span',
       submenuIndicator: 'span',

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/index.ts

@@ -0,0 +1,5 @@
+export { useSemanticToastBodyStyles } from './useSemanticToastBodyStyles.styles';
+export { useSemanticToastContainerStyles } from './useSemanticToastContainerStyles.styles';
+export { useSemanticToastFooterStyles } from './useSemanticToastFooterStyles.styles';
+export { useSemanticToastStyles } from './useSemanticToastStyles.styles';
+export { useSemanticToastTitleStyles } from './useSemanticToastTitleStyles.styles';

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastBodyStyles.styles.ts

@@ -0,0 +1,65 @@
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { toastBodyClassNames, type ToastBodyState } from '@fluentui/react-toast';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+const useRootBaseClassName = makeResetStyles({
+  gridColumnStart: 2,
+  gridColumnEnd: 3,
+  paddingTop: '6px', //not connected to tokens in Figma
+  fontSize: semanticTokens.textRampItemBodyFontSize,
+  lineHeight: semanticTokens.textRampItemBodyLineHeight,
+  fontWeight: semanticTokens.textStyleDefaultRegularWeight,
+  color: semanticTokens.foregroundContentNeutralPrimary,
+  wordBreak: 'break-word',
+});
+
+const useSubtitleBaseClassName = makeResetStyles({
+  paddingTop: '4px', //not connected to tokens in Figma
+  gridColumnStart: 2,
+  gridColumnEnd: 3,
+  fontSize: semanticTokens.textRampMetadataFontSize,
+  lineHeight: semanticTokens.textRampMetadataLineHeight,
+  fontWeight: semanticTokens.textStyleDefaultRegularWeight,
+  color: semanticTokens.foregroundContentNeutralSecondary,
+});
+
+const useInvertedStyles = makeStyles({
+  root: {
+    color: semanticTokens._ctrlToastBodyForegroundContentNeutralPrimary,
+  },
+  subtitle: {
+    color: semanticTokens._ctrlToastBodyForegroundContentNeutralSecondary,
+  },
+});
+
+/**
+ * Apply styling to the ToastBody slots based on the state
+ */
+export const useSemanticToastBodyStyles = (_state: unknown): ToastBodyState => {
+  'use no memo';
+
+  const state = _state as ToastBodyState;
+  const rootBaseClassName = useRootBaseClassName();
+  const subtitleBaseClassName = useSubtitleBaseClassName();
+  const invertedStyles = useInvertedStyles();
+  state.root.className = mergeClasses(
+    state.root.className,
+    toastBodyClassNames.root,
+    rootBaseClassName,
+    state.backgroundAppearance === 'inverted' && invertedStyles.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  if (state.subtitle) {
+    state.subtitle.className = mergeClasses(
+      state.subtitle.className,
+      toastBodyClassNames.subtitle,
+      subtitleBaseClassName,
+      state.backgroundAppearance === 'inverted' && invertedStyles.subtitle,
+      getSlotClassNameProp_unstable(state.subtitle),
+    );
+  }
+
+  return state;
+};

packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Toast/useSemanticToastContainerStyles.styles.ts

@@ -0,0 +1,34 @@
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { toastContainerClassNames, type ToastContainerState } from '@fluentui/react-toast';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+const useRootBaseClassName = makeResetStyles({
+  boxSizing: 'border-box',
+  marginTop: semanticTokens.gapBetweenCtrlLgDefault,
+  pointerEvents: 'all',
+  borderRadius: semanticTokens._ctrlToastContainerFlyoutRest,
+  ...createCustomFocusIndicatorStyle({
+    outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens._ctrlToastContainerCtrlFocusOuterStroke}`,
+  }),
+});
+
+/**
+ * Apply styling to the ToastContainer slots based on the state
+ */
+export const useSemanticToastContainerStyles = (_state: unknown): ToastContainerState => {
+  'use no memo';
+
+  const state = _state as ToastContainerState;
+
+  const rootBaseClassName = useRootBaseClassName();
+  state.root.className = mergeClasses(
+    state.root.className,
+    toastContainerClassNames.root,
+    rootBaseClassName,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};