fix(avatar): title type in Avatar (#4529)

* fix(avatar): title type in Avatar * fix(alert): apply isEmpty check on title * fix(alert): alert interface props type
heroui-inc · Jan 13, 2025 · fcdf24a · fcdf24a
1 parent cfff127
commit fcdf24a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/quick-peas-care.md b/.changeset/quick-peas-care.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+fix title type in Avatar (#4525)
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
@@ -138,7 +138,7 @@ Alert has the following slots:
   data={[
     {
       attribute: "title",
-      type: "string",
+      type: "ReactNode",
       description: "The alert title",
       default: "-"
     },

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
@@ -62,7 +62,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
         {customIcon || <IconComponent {...getAlertIconProps()} />}
       </div>
       <div {...getMainWrapperProps()}>
-        {title && <div {...getTitleProps()}>{title}</div>}
+        {!isEmpty(title) && <div {...getTitleProps()}>{title}</div>}
         {!isEmpty(description) && <div {...getDescriptionProps()}>{description}</div>}
         {children}
       </div>

diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
@@ -9,15 +9,15 @@ import {alert} from "@nextui-org/theme";
 import {useControlledState} from "@react-stately/utils";
 import {clsx, dataAttr, isEmpty, objectToDeps} from "@nextui-org/shared-utils";
 
-interface Props extends HTMLNextUIProps<"div"> {
+interface Props extends Omit<HTMLNextUIProps<"div">, "title"> {
   /**
    * Ref to the DOM node.
    */
   ref?: ReactRef<HTMLDivElement | null>;
   /**
    * title of the alert message
    */
-  title?: string;
+  title?: ReactNode;
   /**
    * description of the alert message
    */