feat: add top-center position + set variant as optional & improve global toast component

Author: pheralb

library/src/components/toast.tsx

@@ -19,7 +19,7 @@ interface ToastComponentProps extends ToastProps {
 }
 
 const Toast = (props: ToastComponentProps) => {
-  const IconComponent = icons[props.variant];
+  const IconComponent = props.variant ? icons[props.variant] : Info;
   const [isExiting, setIsExiting] = useState<boolean>(false);
 
   const delayDuration = props.delayDuration || 4000;
@@ -48,6 +48,7 @@ const Toast = (props: ToastComponentProps) => {
   const ANIMATION_ENTER_MAP: Record<Position, string> = {
     'top-left': 't_slide-top',
     'top-right': 't_slide-top',
+    'top-center': 't_slide-top',
     'bottom-left': 't_slide-bottom',
     'bottom-right': 't_slide-bottom',
     'bottom-center': 't_slide-bottom',
@@ -56,6 +57,7 @@ const Toast = (props: ToastComponentProps) => {
   const ANIMATION_EXIT_MAP: Record<Position, string> = {
     'top-left': 't_slide-left',
     'top-right': 't_slide-right',
+    'top-center': 't_slide-top-exit',
     'bottom-left': 't_slide-left',
     'bottom-right': 't_slide-right',
     'bottom-center': 't_slide-bottom-exit',
@@ -79,15 +81,16 @@ const Toast = (props: ToastComponentProps) => {
       onMouseLeave={handleMouseLeave}
     >
       <div className="t_container">
-        {props.icon ? (
-          props.icon
-        ) : (
-          <IconComponent
-            width={props.iconSize || 18}
-            height={props.iconSize || 18}
-            fill="currentColor"
-          />
-        )}
+        {props.variant &&
+          (props.icon ? (
+            <div className="t_icon">{props.icon}</div>
+          ) : (
+            <IconComponent
+              width={props.iconSize || 18}
+              height={props.iconSize || 18}
+              className="t_icon"
+            />
+          ))}
         <div className="t_content">
           <p>{props.text}</p>
           {props.description && <p>{props.description}</p>}

library/src/providers/toast-provider.tsx

@@ -26,9 +26,25 @@ export const ToastProvider = ({
     };
     setToasts((prevToasts) => {
       if (prevToasts.length >= maxToasts) {
-        return [newToast, ...prevToasts.slice(0, prevToasts.length - 1)];
+        if (
+          position === 'top-left' ||
+          position === 'top-right' ||
+          position === 'top-center'
+        ) {
+          return [newToast, ...prevToasts.slice(0, prevToasts.length - 1)];
+        } else {
+          return [...prevToasts.slice(1), newToast];
+        }
       } else {
-        return [newToast, ...prevToasts];
+        if (
+          position === 'top-left' ||
+          position === 'top-right' ||
+          position === 'top-center'
+        ) {
+          return [newToast, ...prevToasts];
+        } else {
+          return [...prevToasts, newToast];
+        }
       }
     });
   };
@@ -54,6 +70,7 @@ export const ToastProvider = ({
           't_toasts',
           position === 'top-left' ? 't_top-left' : '',
           position === 'top-right' ? 't_top-right' : '',
+          position === 'top-center' ? 't_top-center' : '',
           position === 'bottom-left' ? 't_bottom-left' : '',
           position === 'bottom-right' ? 't_bottom-right' : '',
           position === 'bottom-center' ? 't_bottom-center' : '',

library/src/styles/toast-component.css

@@ -5,7 +5,7 @@
   --background-color: #ffff;
   --hover-bg-color: #f5f5f5;
   --border-color: #e5e5e5;
-  --title-color: #171717;
+  --text-color: #171717;
   --description-color: #262626;
 }
 
@@ -14,7 +14,7 @@
   --background-color: #ffff;
   --hover-bg-color: #f5f5f5;
   --border-color: #e5e5e5;
-  --title-color: #171717;
+  --text-color: #171717;
   --description-color: #262626;
 }
 
@@ -26,17 +26,17 @@
     --background-color: #171717;
     --hover-bg-color: #27272a;
     --border-color: #262626;
-    --title-color: #fafafa;
+    --text-color: #fafafa;
     --description-color: #262626;
   }
 }
 
 .t_dark-theme {
   --box-shadow: rgb(0 0 0 / 0.1);
   --background-color: #171717;
-  --hover-bg-color: #27272a;
-  --border-color: #262626;
-  --title-color: #fafafa;
+  --hover-bg-color: #262626;
+  --border-color: #27272a;
+  --text-color: #fafafa;
   --description-color: #e5e5e5;
 }
 
@@ -60,6 +60,7 @@
   border-radius: 0.375rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  overflow: hidden;
 }
 
 .t_global button {
@@ -71,7 +72,11 @@
   width: 100%;
   height: 100wh;
   gap: 0.5rem;
-  padding: 9px;
+  padding: 12px;
+}
+
+.t_icon {
+  fill: var(--text-color);
 }
 
 .t_content {
@@ -81,7 +86,7 @@
 
 .t_content p {
   font-weight: 600;
-  color: var(--title-color);
+  color: var(--text-color);
   margin: 0;
 }
 
@@ -108,13 +113,16 @@
   font-size: 13px;
   background-color: transparent;
   cursor: default;
+  border: none;
 }
 
 .t_actions > button:nth-child(1) {
+  color: var(--text-color);
   font-weight: 500;
 }
 
 .t_actions > button:nth-child(2) {
+  color: var(--text-color);
   border-top: 1px solid var(--border-color);
 }
 
@@ -203,6 +211,21 @@
   }
 }
 
+.t_slide-top-exit {
+  animation: slide-top-exit 0.4s ease;
+}
+
+@keyframes slide-top-exit {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
 .t_slide-right {
   animation: slide-right 0.4s ease;
 }

library/src/styles/toast-context.css

@@ -37,6 +37,12 @@
   right: 0;
 }
 
+.t_top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .t_bottom-left {
   bottom: 0;
   left: 0;
@@ -51,5 +57,4 @@
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  padding: 10px;
 }

library/src/types/toast.types.ts

@@ -4,14 +4,15 @@ export type Variant = 'success' | 'error' | 'warning' | 'info';
 export type Position =
   | 'top-left'
   | 'top-right'
+  | 'top-center'
   | 'bottom-left'
   | 'bottom-right'
   | 'bottom-center';
 export type Theme = 'light' | 'dark' | 'system';
 
 export type ToastProps = {
   id?: number;
-  variant: Variant;
+  variant?: Variant;
   text: string;
   description?: string;
   icon?: ReactNode;