diff --git a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx index d6043f90efbc9..ef7eb6551b32d 100644 --- a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.test.tsx @@ -14,6 +14,7 @@ const defaultToastContainerProps: ToastContainerProps = { politeness: 'polite', remove: () => null, timeout: -1, + intent: undefined, updateId: 0, visible: true, }; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts index c8b6287a960cd..c57bf6f66cf0c 100644 --- a/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts +++ b/packages/react-components/react-toast/src/components/ToastContainer/ToastContainer.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; import { Announce } from '../AriaLive/AriaLive.types'; -import { Toast } from '../../state'; +import { Toast, ToastIntent } from '../../state'; import { ToastContextValue } from '../../contexts/toastContext'; import { TimerProps } from '../Timer/Timer'; @@ -20,25 +20,18 @@ export type ToastContainerSlots = { export type ToastContainerProps = ComponentProps> & Pick< Toast, - | 'close' - | 'remove' - | 'updateId' - | 'data' - | 'timeout' - | 'politeness' - | 'pauseOnHover' - | 'pauseOnWindowBlur' - | 'intent' + 'close' | 'remove' | 'updateId' | 'data' | 'timeout' | 'politeness' | 'pauseOnHover' | 'pauseOnWindowBlur' > & { visible: boolean; announce: Announce; + intent: ToastIntent | undefined; }; /** * State used in rendering ToastContainer */ export type ToastContainerState = ComponentState & - Pick & { + Pick & { transitionTimeout: number; timerTimeout: number; running: boolean; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts index 691be0e3f2db0..d9247ba3392d4 100644 --- a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts @@ -101,5 +101,6 @@ export const useToastContainer_unstable = ( onTransitionEntering, updateId, nodeRef: toastRef, + intent, }; }; diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts index 7ea8809573013..bfaa9965cc1bd 100644 --- a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts +++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainerContextValues.ts @@ -2,13 +2,14 @@ import * as React from 'react'; import { ToastContainerContextValues, ToastContainerState } from './ToastContainer.types'; export function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues { - const { close } = state; + const { close, intent } = state; const toastContext = React.useMemo( () => ({ close, + intent, }), - [close], + [close, intent], ); return { diff --git a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts index a83f7413c95cd..602a0d4c1efa5 100644 --- a/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts +++ b/packages/react-components/react-toast/src/components/ToastTitle/ToastTitle.types.ts @@ -7,8 +7,6 @@ export type ToastTitleSlots = { action?: Slot<'div'>; }; -export type ToastIntent = 'info' | 'success' | 'error' | 'warning'; - /** * ToastTitle Props */ diff --git a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx index f9670644073c0..8e67c04b5ee23 100644 --- a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx +++ b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx @@ -24,7 +24,13 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => { resolveShorthand(toastsToRender.has(toastPosition) ? rootProps : null, { defaultProps: { children: toastsToRender.get(toastPosition)?.map(toast => ( - + {toast.content as React.ReactNode} )), diff --git a/packages/react-components/react-toast/src/contexts/toastContext.tsx b/packages/react-components/react-toast/src/contexts/toastContext.tsx index 0e30d4a7fe1c1..795ea441f09bd 100644 --- a/packages/react-components/react-toast/src/contexts/toastContext.tsx +++ b/packages/react-components/react-toast/src/contexts/toastContext.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; -import { ToastOptions } from '../state/types'; +import { ToastIntent } from '../state/types'; export type ToastContextValue = { close: () => void; -} & Pick; + intent: ToastIntent | undefined; +}; const toastContextDefaultValue: ToastContextValue = { close: () => null, + intent: undefined, }; const toastContext = React.createContext(undefined); diff --git a/packages/react-components/react-toast/src/index.ts b/packages/react-components/react-toast/src/index.ts index 48917d8694eec..8578e40344db4 100644 --- a/packages/react-components/react-toast/src/index.ts +++ b/packages/react-components/react-toast/src/index.ts @@ -1,5 +1,5 @@ export { useToastController } from './state'; -export type { ToastPosition, ToastId, ToastOffset, ToastPoliteness, ToastStatus } from './state'; +export type { ToastPosition, ToastId, ToastOffset, ToastPoliteness, ToastStatus, ToastIntent } from './state'; export { ToastTrigger } from './ToastTrigger'; export type { ToastTriggerChildProps, ToastTriggerProps, ToastTriggerState } from './ToastTrigger'; @@ -21,7 +21,7 @@ export { renderToastTitle_unstable, toastTitleClassNames, } from './ToastTitle'; -export type { ToastTitleProps, ToastTitleState, ToastTitleSlots, ToastIntent } from './ToastTitle'; +export type { ToastTitleProps, ToastTitleState, ToastTitleSlots } from './ToastTitle'; export { ToastBody,