chore: toast styles improved

heroui-inc · Feb 16, 2025 · 09241fa · 09241fa
1 parent 88b9cbe
commit 09241fa
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 8 deletions.
diff --git a/.changeset/shaggy-clocks-tie.md b/.changeset/shaggy-clocks-tie.md
@@ -0,0 +1,6 @@
+---
+"@heroui/toast": patch
+"@heroui/theme": patch
+---
+
+Toasts styles improved
diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx
@@ -284,7 +284,7 @@ Toast has the following slots:
     },
     {
       attribute: "classNames",
-      type: "Partial<Record<\"base\" | \"content\" | \"title\" | \"description\" | \"icon\" | \"loadingIcon\" | \"progressTrack\" | \"progressIndicator\ | \"motionDiv\" | \"closeButton\" | \"closeIcon\", string>>",
+      type: "Partial<Record<\"base\" | \"content\" | \"wrapper\" | \"title\" | \"description\" | \"icon\" | \"loadingIcon\" | \"progressTrack\" | \"progressIndicator\ | \"motionDiv\" | \"closeButton\" | \"closeIcon\", string>>",
       description: "Allows to set custom class names for the toast slots.",
       default: "-"
     }

diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx
@@ -41,6 +41,7 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
     progressBarRef,
     classNames,
     slots,
+    getWrapperProps,
     isProgressBarVisible,
     getToastProps,
     getContentProps,
@@ -78,15 +79,15 @@ const Toast = forwardRef<"div", ToastProps>((props, ref) => {
 
   const toastContent = (
     <Component ref={domRef} {...getToastProps()}>
-      <main {...getContentProps()}>
+      <div {...getContentProps()}>
         {hideIcon && !isLoading
           ? null
           : loadingIconComponent || customIcon || <IconComponent {...getIconProps()} />}
-        <div>
+        <div {...getWrapperProps()}>
           <div {...getTitleProps()}>{props.toast.content.title}</div>
           <div {...getDescriptionProps()}>{props.toast.content.description}</div>
         </div>
-      </main>
+      </div>
       {isProgressBarVisible && (
         <div className={slots.progressTrack({class: classNames?.progressTrack})}>
           <div

diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts
@@ -405,6 +405,14 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
     [slots, classNames, toastProps, hoverProps, toast, toast.animation, toast.key, opacityValue],
   );
 
+  const getWrapperProps: PropGetter = useCallback(
+    (props = {}) => ({
+      className: slots.wrapper({class: classNames?.wrapper}),
+      ...props,
+    }),
+    [],
+  );
+
   const getIconProps: PropGetter = useCallback(
     (props = {}) => ({
       "aria-label": "descriptionIcon",
@@ -607,6 +615,7 @@ export function useToast<T extends ToastProps>(originalProps: UseToastProps<T>)
     isProgressBarVisible: !!timeout,
     total,
     index,
+    getWrapperProps,
     getToastProps,
     getTitleProps,
     getContentProps,

diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx
@@ -196,7 +196,7 @@ const PromiseToastTemplate = (args: ToastProps) => {
             addToast({
               title: "Toast Title",
               description: "Toast Displayed Successfully",
-              promise: new Promise((resolve) => setTimeout(resolve, 4000)),
+              promise: new Promise((resolve) => setTimeout(resolve, 5000)),
               ...args,
             });
           }}

diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts
@@ -44,12 +44,13 @@ const toast = tv({
       "w-full sm:w-[356px]",
       "min-h-4",
     ],
-    title: ["text-small", "me-4", "text-foreground"],
-    description: ["text-small", "me-4", "text-default-500"],
+    wrapper: ["flex flex-col gap-y-0"],
+    title: ["text-sm", "me-4", "font-medium", "text-foreground"],
+    description: ["text-sm", "me-4", "text-default-500"],
     icon: ["w-6 h-6 flex-none fill-current"],
     loadingIcon: ["w-6 h-6 flex-none fill-current"],
     content: ["flex flex-grow flex-row gap-x-4 items-center relative"],
-    progressTrack: ["absolute top-0 inset-0 bg-transparent overflow-hidden"],
+    progressTrack: ["absolute inset-0 pointer-events-none bg-transparent overflow-hidden"],
     progressIndicator: ["h-full bg-default-400 opacity-20"],
     motionDiv: [
       "fixed",