feat: alert styles improved (#4073)

heroui-inc · Nov 16, 2024 · 70dc759 · 70dc759
1 parent b2e8d9b
commit 70dc759
Show file tree

Hide file tree

Showing 6 changed files with 272 additions and 101 deletions.
diff --git a/.changeset/sixty-ties-knock.md b/.changeset/sixty-ties-knock.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+---
+
+Alert compoentn styles improved
diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts
@@ -1,60 +1,190 @@
-const App = `import {Alert, Button} from "@nextui-org/react";
+const AppTs = `import {Alert, Button} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
+      <Alert
+        ref={ref}
+        classNames={{
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames?.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames?.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
+        }}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
 
 export default function App() {
-  const [isVisible, setIsVisible] = React.useState(true);
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
 
   return (
-    <div className="flex items-center justify-center w-full">
-      {!isVisible && (
-        <Button
-          className="bg-background text-default-700 font-medium border-1 shadow-small"
-          size="sm"
-          variant="bordered"
-          onPress={() => setIsVisible(true)}
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
         >
-          Show Alert
-        </Button>
-      )}
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}`;
+
+const App = `import {Alert, Button} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
       <Alert
+        ref={ref}
         classNames={{
-          base: [
-            "bg-default-50 dark:bg-background",
-            "relative before:content-[''] before:absolute before:z-10",
-            "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1 before:bg-secondary",
-            "rounded-l-none border-l-0",
-          ],
-          mainWrapper: "pt-1",
-          iconWrapper: "border-1 border-secondary-200 dark:bg-transparent",
-          alertIcon: "text-secondary",
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames.iconWrapper),
         }}
-        isVisible={isVisible}
-        title="The documents you requested are ready to be viewed"
-        variant="faded"
-        onClose={() => setIsVisible(false)}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
       >
-        <div className="flex items-center gap-1 mt-3">
-          <Button
-            className="bg-background text-default-700 font-medium border-1 shadow-small"
-            size="sm"
-            variant="bordered"
-          >
-            View documents
-          </Button>
-          <Button
-            className="text-default-500 font-medium underline underline-offset-4"
-            size="sm"
-            variant="light"
-          >
-            Maybe later
-          </Button>
-        </div>
+        {children}
       </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
     </div>
   );
 }`;
 
 const react = {
   "/App.jsx": App,
+  "/App.tsx": AppTs,
 };
 
 export default {

diff --git a/apps/docs/content/components/alert/variants.ts b/apps/docs/content/components/alert/variants.ts
@@ -4,7 +4,7 @@ export default function App() {
   return (
     <div className="flex flex-col gap-4 w-full">
       {["solid", "bordered", "flat", "faded"].map((variant) => (
-        <Alert key={variant} variant={variant} color="danger" title={\`This is a \${variant} variant alert\`}/>
+        <Alert key={variant} variant={variant} color="secondary" title={\`This is a \${variant} variant alert\`}/>
       ))}
     </div>
   );

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
@@ -24,9 +24,7 @@ const iconMap = {
 
 export type AlertColor = keyof typeof iconMap;
 
-export interface AlertProps extends Omit<UseAlertProps, "hasDescription"> {
-  color: AlertColor;
-}
+export interface AlertProps extends Omit<UseAlertProps, "hasDescription"> {}
 
 const Alert = forwardRef<"div", AlertProps>((props, ref) => {
   const {