diff --git a/src/components/Toast/Toast.module.scss b/src/components/Toast/Toast.module.scss index 0bee3d6de9..5052c95ec0 100644 --- a/src/components/Toast/Toast.module.scss +++ b/src/components/Toast/Toast.module.scss @@ -59,6 +59,21 @@ background-color: var(--negative-color); } +.typeWarning { + background-color: var(--warning-color); + color: var(--text-color-fixed-dark); + + .closeButton { + color: var(--text-color-fixed-dark); + } + + .actionButton, + .actionLink { + color: var(--text-color-fixed-dark); + border-color: var(--text-color-fixed-dark); + } +} + // Animation .enterActive { animation-iteration-count: 1; diff --git a/src/components/Toast/ToastConstants.ts b/src/components/Toast/ToastConstants.ts index 177c3a853e..c3caa130cf 100644 --- a/src/components/Toast/ToastConstants.ts +++ b/src/components/Toast/ToastConstants.ts @@ -1,11 +1,13 @@ import Info from "../Icon/Icons/components/Info"; import Check from "../Icon/Icons/components/Check"; import Alert from "../Icon/Icons/components/Alert"; +import Warning from "../Icon/Icons/components/Warning"; export enum ToastType { NORMAL = "normal", POSITIVE = "positive", - NEGATIVE = "negative" + NEGATIVE = "negative", + WARNING = "warning" } export enum ToastActionType { @@ -16,7 +18,8 @@ export enum ToastActionType { export const defaultIconMap = { [ToastType.NORMAL]: Info, [ToastType.POSITIVE]: Check, - [ToastType.NEGATIVE]: Alert + [ToastType.NEGATIVE]: Alert, + [ToastType.WARNING]: Warning }; export type ToastAction = { diff --git a/src/components/Toast/__stories__/toast.stories.mdx b/src/components/Toast/__stories__/toast.stories.mdx index 4ab33dfef0..bdedc2efcb 100644 --- a/src/components/Toast/__stories__/toast.stories.mdx +++ b/src/components/Toast/__stories__/toast.stories.mdx @@ -162,6 +162,27 @@ Use when something was deleted, a problem has occured, etc. +### Warning message + + + + {() => { + const actions = useMemo(() => [{ type: Toast.actionTypes.BUTTON, content: "Button" }], []); + return ( + + Warning message toast + + ); + }} + + + ## Do’s and Don’ts