diff --git a/packages/framework/esm-styleguide/src/_overrides.scss b/packages/framework/esm-styleguide/src/_overrides.scss index 9526d3b0e..990c61dcc 100644 --- a/packages/framework/esm-styleguide/src/_overrides.scss +++ b/packages/framework/esm-styleguide/src/_overrides.scss @@ -494,3 +494,10 @@ html[dir='rtl'] { } } } + +// This is to override the green border and background color which we apply to tertiary buttons. Since this in the Notification carbon uses blue. +.cds--actionable-notification__action-button.cds--btn--tertiary { + background-color: transparent; + border: 1px solid #0f62fe; + color: #0f62fe; +} diff --git a/packages/framework/esm-styleguide/src/toasts/_toasts.scss b/packages/framework/esm-styleguide/src/toasts/_toasts.scss index 282ae9595..d4eaa10f2 100644 --- a/packages/framework/esm-styleguide/src/toasts/_toasts.scss +++ b/packages/framework/esm-styleguide/src/toasts/_toasts.scss @@ -1,4 +1,6 @@ .omrs-toasts-container { + display: flex; + flex-direction: column; z-index: 100000; position: fixed; width: 20rem; diff --git a/packages/framework/esm-styleguide/src/toasts/toast.component.tsx b/packages/framework/esm-styleguide/src/toasts/toast.component.tsx index b0c3ee54c..f06c15914 100644 --- a/packages/framework/esm-styleguide/src/toasts/toast.component.tsx +++ b/packages/framework/esm-styleguide/src/toasts/toast.component.tsx @@ -35,38 +35,30 @@ export const Toast: React.FC = ({ toast, closeToast }) => { title, actionButtonLabel, onActionButtonClick = () => {}, - millis = defaultOptions.millis, + millis = actionButtonLabel ? null : defaultOptions.millis, } = toast; - const [waitingForTime, setWaitingForTime] = useState(true); - const handleActionClick = useCallback(() => { onActionButtonClick(); closeToast(); }, [closeToast, onActionButtonClick]); useEffect(() => { - if (waitingForTime) { + if (millis) { const timeoutId = setTimeout(closeToast, millis); return () => clearTimeout(timeoutId); } - }, [waitingForTime, closeToast, millis]); + }, [closeToast, millis]); return ( -
setWaitingForTime(false)} - onMouseLeave={() => setWaitingForTime(true)} - > - -
+ ); };