Merge branch 'main' into fix/workspace

Author: jjinendra3

packages/fuselage-toastbar/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @rocket.chat/fuselage-toastbar
 
+## 0.35.0
+
+### Minor Changes
+
+- [#1591](https://github.com/RocketChat/fuselage/pull/1591) [`13755ae`](https://github.com/RocketChat/fuselage/commit/13755aef092f68a392809999a03c54bd0ec66749) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(toastbar): new Toastbar variants
+
 ## 0.34.0
 
 ### Minor Changes

packages/fuselage-toastbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage-toastbar",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Fuselage ToastBar component",
   "keywords": [
     "rocketchat",

packages/fuselage-toastbar/src/ToastBar.stories.tsx

@@ -53,18 +53,16 @@ export const Default: StoryFn = () => {
   );
 };
 
-const Template: StoryFn<{
-  position: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
-}> = ({ position }) => {
+const Template: StoryFn<typeof useToastBarDispatch> = (args) => {
   const dispatchToastMessage = useToastBarDispatch();
 
   useEffect(() => {
     dispatchToastMessage({
       type: 'success',
       message: DEFAULT_MESSAGE,
-      position,
+      ...args,
     });
-  }, [dispatchToastMessage, position]);
+  }, [args, dispatchToastMessage]);
 
   return (
     <Button
@@ -73,7 +71,7 @@ const Template: StoryFn<{
         dispatchToastMessage({
           type: 'success',
           message: DEFAULT_MESSAGE,
-          position,
+          ...args,
         })
       }
     >
@@ -101,3 +99,8 @@ export const BottomEnd = Template.bind({});
 BottomEnd.args = {
   position: 'bottom-end',
 };
+
+export const Persistent = Template.bind({});
+Persistent.args = {
+  isPersistent: true,
+};

packages/fuselage-toastbar/src/ToastBarContext.ts

@@ -1,12 +1,13 @@
-import { createContext, useContext } from 'react';
+import { createContext, ReactNode, useContext } from 'react';
 
 export type ToastBarPayload = {
   type?: 'success' | 'info' | 'error';
-  message: string | Error;
+  message: ReactNode | string | Error;
   title?: string;
   position?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
   time: number;
   id: string;
+  isPersistent?: boolean;
 };
 
 type ToastBarContextValue = {

packages/fuselage-toastbar/src/ToastBarPersistent.tsx

@@ -0,0 +1,20 @@
+import { ToastBar } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+import type { ToastBarPayload } from './ToastBarContext';
+
+const ToastBarPersistent = ({
+  type,
+  message,
+  title,
+  id,
+}: ToastBarPayload): ReactElement => {
+  return (
+    <ToastBar variant={type} id={id} isPaused>
+      {title}
+      {message instanceof Error ? String(message) : message}
+    </ToastBar>
+  );
+};
+
+export default ToastBarPersistent;

packages/fuselage-toastbar/src/ToastBarProvider.tsx

@@ -3,6 +3,7 @@ import { useState, memo, useCallback } from 'react';
 
 import type { ToastBarPayload } from './ToastBarContext';
 import { ToastBarContext } from './ToastBarContext';
+import ToastBarPersistent from './ToastBarPersistent';
 import ToastBarPortal from './ToastBarPortal';
 import ToastBarTimed from './ToastBarTimed';
 import ToastBarZone from './ToastBarZone';
@@ -52,9 +53,13 @@ const ToastBarProvider = ({ children }: ToastBarProps): ReactElement => {
             key={zone}
             position={zone as ToastBarPayload['position']}
           >
-            {toasts.map((toast) => (
-              <ToastBarTimed key={toast.id} {...toast} />
-            ))}
+            {toasts.map((toast) =>
+              toast.isPersistent ? (
+                <ToastBarPersistent key={toast.id} {...toast} />
+              ) : (
+                <ToastBarTimed key={toast.id} {...toast} />
+              ),
+            )}
           </ToastBarZone>
         ))}
       </ToastBarPortal>

packages/fuselage-toastbar/src/ToastBarTimed.tsx

@@ -10,6 +10,7 @@ const ToastBarTimed = ({
   type,
   id,
   message,
+  title,
 }: ToastBarPayload): ReactElement => {
   const dismissToastMessage = useToastBarDismiss();
 
@@ -23,12 +24,14 @@ const ToastBarTimed = ({
       variant={type}
       onPointerEnter={() => pause()}
       onPointerLeave={() => resume()}
-      children={String(message)}
       onClose={dismissToastMessage}
       id={id}
       time={time}
       isPaused={isPaused}
-    />
+    >
+      {title}
+      {message instanceof Error ? String(message) : message}
+    </ToastBar>
   );
 };