From 9f7c920346f3e650f530930cd22ca241fc6cbd7f Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 26 Aug 2025 16:54:43 -0500 Subject: Fix toast type (#8909) * Fix confusing toast API * Provide all exports to e2e file * Fix first usage in Composer * Loosen type, add Trans tag --- src/components/Toast/Toast.tsx | 91 +++++++++++++++--------------------------- 1 file changed, 32 insertions(+), 59 deletions(-) (limited to 'src/components/Toast/Toast.tsx') diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx index 53d5e5115..ac5bc4889 100644 --- a/src/components/Toast/Toast.tsx +++ b/src/components/Toast/Toast.tsx @@ -16,19 +16,6 @@ import {dismiss} from '#/components/Toast/sonner' import {type ToastType} from '#/components/Toast/types' import {Text as BaseText} from '#/components/Typography' -type ToastConfigContextType = { - id: string -} - -type ToastThemeContextType = { - type: ToastType -} - -export type ToastComponentProps = { - type?: ToastType - content: string -} - export const ICONS = { default: CircleCheck, success: CircleCheck, @@ -37,81 +24,67 @@ export const ICONS = { info: CircleInfo, } -const ToastConfigContext = createContext({ +const ToastConfigContext = createContext<{ + id: string + type: ToastType +}>({ id: '', + type: 'default', }) ToastConfigContext.displayName = 'ToastConfigContext' export function ToastConfigProvider({ children, id, + type, }: { children: React.ReactNode id: string + type: ToastType }) { return ( - ({id}), [id])}> + ({id, type}), [id, type])}> {children} ) } -const ToastThemeContext = createContext({ - type: 'default', -}) -ToastThemeContext.displayName = 'ToastThemeContext' - -export function Default({type = 'default', content}: ToastComponentProps) { - return ( - - - {content} - - ) -} - -export function Outer({ - children, - type = 'default', -}: { - children: React.ReactNode - type?: ToastType -}) { +export function Outer({children}: {children: React.ReactNode}) { const t = useTheme() + const {type} = useContext(ToastConfigContext) const styles = useToastStyles({type}) return ( - ({type}), [type])}> - - {children} - - + + {children} + ) } export function Icon({icon}: {icon?: React.ComponentType}) { - const {type} = useContext(ToastThemeContext) + const {type} = useContext(ToastConfigContext) const styles = useToastStyles({type}) const IconComponent = icon || ICONS[type] return } export function Text({children}: {children: React.ReactNode}) { - const {type} = useContext(ToastThemeContext) + const {type} = useContext(ToastConfigContext) const {textColor} = useToastStyles({type}) const {fontScaleCompensation} = useToastFontScaleCompensation() return ( @@ -142,12 +115,12 @@ export function Text({children}: {children: React.ReactNode}) { export function Action( props: Omit & { - children: string + children: React.ReactNode }, ) { const t = useTheme() const {fontScaleCompensation} = useToastFontScaleCompensation() - const {type} = useContext(ToastThemeContext) + const {type} = useContext(ToastConfigContext) const {id} = useContext(ToastConfigContext) const styles = useMemo(() => { const base = { -- cgit 1.4.1