feat: alert design improved (#4054)

nextui-org · Nov 14, 2024 · 0f55c49 · 0f55c49
1 parent 27ebcbe
commit 0f55c49
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 22 deletions.
diff --git a/.changeset/selfish-baboons-know.md b/.changeset/selfish-baboons-know.md
@@ -0,0 +1,7 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+"@nextui-org/shared-icons": patch
+---
+
+Alert design improved
diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
@@ -150,7 +150,7 @@
           "title": "Alert",
           "keywords": "alert, notification, message",
           "path": "/docs/components/alert.mdx",
-          "isNew": true
+          "newPost": true
         },
         {
           "key": "avatar",

diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
@@ -110,10 +110,12 @@ Alert has the following attributes on the `base` element:
 | icon             | `ReactNode`                                                                 | The alert icon - overrides the default icon | -         |
 | description      | `ReactNode`                                                                 | The alert description                       | -         |
 | color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The alert color theme                       | `default` |
-| variant          | `solid` \| `bordered` \| `flat`                                             | The alert variant                           | `flat`    |
+| variant          | `solid` \| `bordered` \| `flat` \| `faded`                                  | The alert variant                           | `flat`    |
 | radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The alert border radius                     | `md`      |
 | isVisible        | `boolean`                                                                   | Whether the alert is visible                | -         |
 | isClosable       | `boolean`                                                                   | Whether the alert can be closed             | `false`   |
+| hideIcon         | `boolean`                                                                   | Whether the icon is hidden                  | `false`   |
+| hideIconWrapper  | `boolean`                                                                   | Whether the icon wrapper is hidden          | `false`   |
 | closeButtonProps | `ButtonProps`                                                               | Props for the close button                  | -         |
 
 ### Alert Events

diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
@@ -45,6 +45,7 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
     isVisible,
     onClose,
     getAlertIconProps,
+    getIconWrapperProps,
   } = useAlert({...props, ref});
 
   if (!isVisible) return null;
@@ -55,7 +56,9 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
 
   return (
     <div ref={domRef} role="alert" {...getBaseProps()}>
-      {customIcon || <IconComponent {...getAlertIconProps()} />}
+      <div {...getIconWrapperProps()}>
+        {customIcon || <IconComponent {...getAlertIconProps()} />}
+      </div>
       <div {...getMainWrapperProps()}>
         {title && <div {...getTitleProps()}>{title}</div>}
         {!isEmpty(description) && <div {...getDescriptionProps()}>{description}</div>}

diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
@@ -168,6 +168,13 @@ export function useAlert(originalProps: UseAlertProps) {
     [slots, classNames?.alertIcon],
   );
 
+  const getIconWrapperProps = useCallback<PropGetter>(
+    () => ({
+      className: slots.iconWrapper({class: classNames?.iconWrapper}),
+    }),
+    [slots, classNames?.iconWrapper],
+  );
+
   return {
     title,
     icon,
@@ -184,5 +191,6 @@ export function useAlert(originalProps: UseAlertProps) {
     isVisible,
     onClose,
     getAlertIconProps,
+    getIconWrapperProps,
   };
 }
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
@@ -19,7 +19,7 @@ export default {
       control: {
         type: "select",
       },
-      options: ["solid", "flat", "bordered"],
+      options: ["solid", "flat", "bordered", "faded"],
     },
     radius: {
       control: {

diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
@@ -24,13 +24,12 @@ import {colorVariants} from "../utils";
  */
 const alert = tv({
   slots: {
-    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
-    mainWrapper: [
-      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit",
-    ],
-    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
-    description: "text-small font-normal min-h-5 max-h-full text-inherit",
+    base: "flex flex-grow flex-row w-full items-start py-3 px-4 gap-x-1",
+    mainWrapper: "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit",
+    title: "w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
     closeButton: "relative text-inherit",
+    iconWrapper: "flex items-center justify-center w-9 h-9 rounded-full",
     alertIcon: "fill-current w-6",
   },
   variants: {
@@ -45,8 +44,11 @@ const alert = tv({
     variant: {
       solid: {},
       flat: {},
+      faded: {
+        base: "border-small",
+      },
       bordered: {
-        base: "border-medium bg-transparent",
+        base: "border-small bg-transparent",
       },
     },
     radius: {
@@ -66,10 +68,18 @@ const alert = tv({
         base: "rounded-full",
       },
     },
-    hasDescription: {
+    hideIcon: {
+      true: {
+        iconWrapper: "hidden",
+      },
+    },
+    hideIconWrapper: {
       true: {
-        alertIcon: "mt-0.5",
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none",
       },
+    },
+    hasDescription: {
       false: {
         base: "items-center",
         mainWrapper: "justify-center",
@@ -80,6 +90,8 @@ const alert = tv({
     color: "default",
     variant: "flat",
     radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false,
   },
   compoundVariants: [
     // solid / color
@@ -127,58 +139,105 @@ const alert = tv({
         base: colorVariants.solid.danger,
       },
     },
-
     // flat / color
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "default",
       class: {
         base: [colorVariants.flat.default, "text-default-foreground"],
         description: "text-default-600",
         closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100",
       },
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "primary",
       class: {
         base: colorVariants.flat.primary,
         closeButton: "text-primary-400 data-[hover]:bg-primary-100",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100",
       },
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "secondary",
       class: {
         base: colorVariants.flat.secondary,
         closeButton: "text-secondary-400 data-[hover]:bg-secondary-100",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100",
       },
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "success",
       class: {
         base: colorVariants.flat.success,
         closeButton: "text-success-400 data-[hover]:bg-success-100",
+        iconWrapper: "bg-success-50 dark:bg-success-100",
       },
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "warning",
       class: {
         base: colorVariants.flat.warning,
         closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100",
       },
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "danger",
       class: {
         base: colorVariants.flat.danger,
         closeButton: "text-danger-400 data-[hover]:bg-danger-100",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100",
+      },
+    },
+    // faded / color
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default",
+      },
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary",
+      },
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary",
+      },
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success",
+      },
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning",
+      },
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "border-danger",
       },
     },
-
     // bordered / color
     {
       variant: "bordered",
@@ -229,6 +288,56 @@ const alert = tv({
         closeButton: "data-[hover]:bg-danger-50",
       },
     },
+    // flat & bordered
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small",
+      },
+    },
+    // bordered & color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50",
+      },
+    },
   ],
 });
 

diff --git a/packages/utilities/shared-icons/src/warning.tsx b/packages/utilities/shared-icons/src/warning.tsx
@@ -14,7 +14,12 @@ export const WarningIcon = (
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path d="M20.76 13.92L14.36 2.4C13.5 0.85 12.31 0 11 0C9.69 0 8.5 0.85 7.64 2.4L1.24 13.92C0.43 15.39 0.340001 16.8 0.99 17.91C1.64 19.02 2.92 19.63 4.6 19.63H17.4C19.08 19.63 20.36 19.02 21.01 17.91C21.66 16.8 21.57 15.38 20.76 13.92ZM10.25 7C10.25 6.59 10.59 6.25 11 6.25C11.41 6.25 11.75 6.59 11.75 7V12C11.75 12.41 11.41 12.75 11 12.75C10.59 12.75 10.25 12.41 10.25 12V7ZM11.71 15.71C11.66 15.75 11.61 15.79 11.56 15.83C11.5 15.87 11.44 15.9 11.38 15.92C11.32 15.95 11.26 15.97 11.19 15.98C11.13 15.99 11.06 16 11 16C10.94 16 10.87 15.99 10.8 15.98C10.74 15.97 10.68 15.95 10.62 15.92C10.56 15.9 10.5 15.87 10.44 15.83C10.39 15.79 10.34 15.75 10.29 15.71C10.11 15.52 10 15.26 10 15C10 14.74 10.11 14.48 10.29 14.29C10.34 14.25 10.39 14.21 10.44 14.17C10.5 14.13 10.56 14.1 10.62 14.08C10.68 14.05 10.74 14.03 10.8 14.02C10.93 13.99 11.07 13.99 11.19 14.02C11.26 14.03 11.32 14.05 11.38 14.08C11.44 14.1 11.5 14.13 11.56 14.17C11.61 14.21 11.66 14.25 11.71 14.29C11.89 14.48 12 14.74 12 15C12 15.26 11.89 15.52 11.71 15.71Z" />
+      <path
+        clipRule="evenodd"
+        d="M3 10.417C3 7.219 3 5.62 3.378 5.082C3.755 4.545 5.258 4.03 8.265 3.001L8.838 2.805C10.405 2.268 11.188 2 12 2C12.812 2 13.595 2.268 15.162 2.805L15.735 3.001C18.742 4.03 20.245 4.545 20.622 5.082C21 5.62 21 7.22 21 10.417V11.991C21 17.629 16.761 20.366 14.101 21.527C13.38 21.842 13.02 22 12 22C10.98 22 10.62 21.842 9.899 21.527C7.239 20.365 3 17.63 3 11.991V10.417ZM12 7.25C12.1989 7.25 12.3897 7.32902 12.5303 7.46967C12.671 7.61032 12.75 7.80109 12.75 8V12C12.75 12.1989 12.671 12.3897 12.5303 12.5303C12.3897 12.671 12.1989 12.75 12 12.75C11.8011 12.75 11.6103 12.671 11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.80109 11.329 7.61032 11.4697 7.46967C11.6103 7.32902 11.8011 7.25 12 7.25ZM12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15C13 14.7348 12.8946 14.4804 12.7071 14.2929C12.5196 14.1054 12.2652 14 12 14C11.7348 14 11.4804 14.1054 11.2929 14.2929C11.1054 14.4804 11 14.7348 11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
     </svg>
   );
 };