feat: update toast component to include action button text & fix max width

Author: pheralb

library/src/components/toast.tsx

@@ -102,8 +102,8 @@ const Toast = (props: ToastComponentProps) => {
       </div>
       <div className="t_actions">
         {props.action && (
-          <button onClick={props.action} title="Action button">
-            Action
+          <button onClick={props.action.onClick} title="Action button">
+            {props.action.text ?? 'Action'}
           </button>
         )}
         <button onClick={props.onClose} title="Close toast">

library/src/styles/toast-component.css

@@ -51,12 +51,11 @@
   list-style: none;
   outline: none;
   background-color: var(--background-color);
-  width: 100%;
+  width: auto;
   box-shadow:
     0 1px 3px 0 var(--box-shadow),
     0 1px 2px -1px var(--box-shadow);
   border: 1px solid var(--border-color);
-  max-width: 20rem;
   border-radius: 0.375rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -70,9 +69,12 @@
 .t_container {
   display: flex;
   width: 100%;
+  max-width: 20rem;
   height: 100wh;
   gap: 0.5rem;
   padding: 12px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .t_icon {
@@ -82,6 +84,8 @@
 .t_content {
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  max-width: 100%;
 }
 
 .t_content p {

library/src/types/toast.types.ts

@@ -10,6 +10,11 @@ export type Position =
   | 'bottom-center';
 export type Theme = 'light' | 'dark' | 'system';
 
+export interface Action {
+  text?: string;
+  onClick: () => void | (() => Promise<void>);
+}
+
 export type ToastProps = {
   id?: number;
   text: string;
@@ -18,7 +23,7 @@ export type ToastProps = {
   iconSize?: number;
   delayDuration?: number;
   theme?: Theme;
-  action?: () => void | (() => Promise<void>);
+  action?: Action;
 };
 
 export type ToastProviderProperties = {

website/app/components/examples/useToast.tsx

@@ -92,23 +92,27 @@ const UseToastActionsExamples = () => {
 
   const handleChangeVariant = () => {
     t.default({
-      text: `A toast with 👀 action button`,
-      description: 'Click the action button to see the confetti 🥹',
-      action: () => {
-        if (typeof window !== 'undefined') {
-          const confetti = new JSConfetti();
-          confetti.addConfetti({
-            confettiRadius: 3,
-            confettiNumber: 100,
-            confettiColors: [
-              '#14532d',
-              '#ff477e',
-              '#f7f7f7',
-              '#ffcc00',
-              '#ffcc00',
-            ],
-          });
-        }
+      text: `A toast with confetti 🎉`,
+      description: 'Click the button to see the confetti',
+      delayDuration: 400000,
+      icon: <PartyPopperIcon size={24} />,
+      action: {
+        onClick: () => {
+          if (typeof window !== 'undefined') {
+            const confetti = new JSConfetti();
+            confetti.addConfetti({
+              confettiRadius: 3,
+              confettiNumber: 100,
+              confettiColors: [
+                '#14532d',
+                '#ff477e',
+                '#f7f7f7',
+                '#ffcc00',
+                '#ffcc00',
+              ],
+            });
+          }
+        },
       },
     });
   };

website/app/routes/useToast.mdx

@@ -39,9 +39,11 @@ export default function Index() {
 ```tsx
 t.default({
   text: `A toast with 👀 action button`,
-  action: () => {
-    // Do something
-    }
+  action: {
+    label: 'Action', // Button label
+    onClick: () => {
+      // Do something
+    },
   },
 });
 ```
@@ -56,6 +58,6 @@ The `toast.variant` function accepts the following options:
 | `description`   | Toast's description                           | `string`                              | -        |
 | `icon`          | Icon to display in the toast                  | `ReactNode`                           | -        |
 | `iconSize`      | Size of the icon                              | `number`                              | -        |
-| `delayDuration` | Duration before the toast disappears          | `number`                              | -        |
+| `delayDuration` | Duration before the toast disappears          | `number` (default: `4000`)            | -        |
 | `theme`         | Theme of the toast                            | `Theme` (`light` / `dark` / `system`) | -        |
 | `action`        | Show a _Action_ button and execute a function | `() => void \| () => Promise<void>`   | -        |