feat: Added progress bar to toast messages for better UI experience

packages/ui-elements/src/components/ToastBar/ProgressBar.js

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { Box } from '../Box';
+import useTheme from '../../hooks/useTheme';
+import { getProgressBarStyles } from './ToastBar.styles';
+
+const ProgressBar = ({ color, time }) => {
+  const [progress, setProgress] = useState(0);
+  const { theme } = useTheme();
+  const { mode } = useTheme();
+  const styles = getProgressBarStyles(theme, mode, progress, color);
+
+  useEffect(() => {
+    const intervalTime = 10;
+
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev < 100) {
+          return prev + 1;
+        }
+        clearInterval(interval);
+        return prev;
+      });
+    }, intervalTime);
+
+    return () => clearInterval(interval);
+  }, [time]);
+
+  return <Box css={styles.progressbar} />;
+};
+
+export default ProgressBar;

packages/ui-elements/src/components/ToastBar/ToastBar.js

@@ -7,14 +7,17 @@ import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
 import { getToastbarStyles } from './ToastBar.styles';
 import useTheme from '../../hooks/useTheme';
+import ProgressBar from './ProgressBar';
+import { darken, lighten } from '../../lib';
 
 const ToastBar = ({ toast, onClose }) => {
   const { type, message, time = 2000 } = toast;
   const toastRef = useRef();
   const { theme } = useTheme();
+  const { mode } = useTheme();
 
   const { classNames, styleOverrides } = useComponentOverrides('ToastBar');
-  const styles = getToastbarStyles(theme);
+  const styles = getToastbarStyles(theme, mode);
   const { iconName, bgColor, color } = useMemo(() => {
     const color =
       type === 'error'
@@ -45,17 +48,29 @@ const ToastBar = ({ toast, onClose }) => {
     setTimeout(onClose, time);
   }, [onClose, time]);
 
+  let progressBarBgColor = darken(bgColor, 0.5);
+  if (mode === 'dark') {
+    progressBarBgColor = lighten(bgColor, 0.85);
+  }
+
   return (
-    <Box
-      ref={toastRef}
-      css={styles.toastbar(color, bgColor, time)}
-      className={appendClassNames('ec-toast-bar', classNames)}
-      style={styleOverrides}
-    >
-      <Icon size="1em" name={iconName} />
-      {message}
-      <ActionButton icon="cross" size="small" onClick={onClose} ghost />
-    </Box>
+    <>
+      <Box
+        ref={toastRef}
+        css={styles.toastbar(color, bgColor, time)}
+        className={appendClassNames('ec-toast-bar', classNames)}
+        style={styleOverrides}
+      >
+        <Box css={styles.content}>
+          <Icon size="1em" name={iconName} />
+          {message}
+          <ActionButton icon="cross" size="small" onClick={onClose} ghost />
+        </Box>
+        <Box css={styles.progressBarContainer}>
+          <ProgressBar color={progressBarBgColor} time={time} />
+        </Box>
+      </Box>
+    </>
   );
 };
 

packages/ui-elements/src/components/ToastBar/ToastBar.styles.js

@@ -15,14 +15,14 @@ const animation = keyframes`
 }
 `;
 
-export const getToastbarStyles = (theme) => {
+export const getToastbarStyles = (theme, mode) => {
   const styles = {
     toastbar: (color, bgColor, time) => css`
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
       gap: 1em;
-      align-items: center;
-      justify-content: space-between;
+      align-items: flex-start;
+      justify-content: flex-start;
       width: fit-content;
       max-width: 20rem;
       color: ${color};
@@ -31,19 +31,51 @@ export const getToastbarStyles = (theme) => {
       padding: 0.75em 1em;
       z-index: ${theme.zIndex?.toastbar || 1600};
       animation: ${animation} ${time}ms ease-in-out forwards;
+      position: relative;
+      overflow: hidden;
+    `,
+    content: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    `,
+    progressBarContainer: css`
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: 5px;
+      width: 100%;
+      background-color: ${mode === 'dark' ? theme.colors.foreground : null};
+      clip-path: inset(0 0 0 0 round ${theme.radius});
     `,
   };
 
   return styles;
 };
 
-export const getToastBarContainerStyles = (theme) => {
+export const getToastBarContainerStyles = (theme, mode) => {
   const styles = {
     container: css`
       position: absolute;
       z-index: ${theme.zIndex?.toastbar || 1600};
       border-radius: ${theme.radius};
       animation: ${animation} ${2000}ms ease-in-out forwards;
+      box-shadow: ${mode === 'light'
+        ? '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
+        : null};
+    `,
+  };
+  return styles;
+};
+
+export const getProgressBarStyles = (theme, mode, progress, color) => {
+  const styles = {
+    progressbar: css`
+      width: ${progress}%;
+      height: 100%;
+      background-color: ${color};
+      transition: width 0.02s linear;
     `,
   };
   return styles;

packages/ui-elements/src/components/ToastBar/ToastContainer.js

@@ -7,7 +7,8 @@ import { getToastBarContainerStyles } from './ToastBar.styles';
 
 const ToastContainer = () => {
   const { theme } = useTheme();
-  const styles = getToastBarContainerStyles(theme);
+  const { mode } = useTheme();
+  const styles = getToastBarContainerStyles(theme, mode);
   const { position, toasts, setToasts } = useContext(ToastContext);
   const positionStyle = useMemo(() => {
     const positions = position.split(/\s+/);