feat: alert styles improved

.changeset/new-cougars-collect.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/alert": patch
+"@nextui-org/theme": patch
+---
+
+Alert styles improved

apps/docs/content/components/alert/controlled.ts

@@ -13,6 +13,8 @@ export default function App() {
           title={title}
           description={description}
           isVisible={isVisible} 
+          variant="faded"
+          color="success"
           onClose={() => setIsVisible(false)}
         />
       ) : (

apps/docs/content/components/alert/custom-styles.ts

@@ -1,27 +1,54 @@
-const App = `import {Alert} from "@nextui-org/react";
+const App = `import {Alert, Button} from "@nextui-org/react";
 
 export default function App() {
-  const title = "Success";
-  const description = "Thanks for subscribing to our newsletter!";
-  
+  const [isVisible, setIsVisible] = React.useState(true);
+
   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)}
+        >
+          Show Alert
+        </Button>
+      )}
       <Alert
-        title={title}
-        description={description}
         classNames={{
-           base: [
-            "bg-background",
-            "border",
-            "border-foreground-400",
-            "shadow",
-            "hover:bg-slate-200",
-            "cursor-pointer",
+          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",
           ],
-          title: ["text-base", "text-foreground", "font-semibold"],
-          description: ["text-base", "text-foreground-600"],
+          mainWrapper: "pt-1",
+          iconWrapper: "border-1 border-secondary-200 dark:bg-transparent",
+          alertIcon: "text-secondary",
         }}
-      />
+        isVisible={isVisible}
+        title="The documents you requested are ready to be viewed"
+        variant="faded"
+        onClose={() => setIsVisible(false)}
+      >
+        <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>
+      </Alert>
     </div>
   );
 }`;

apps/docs/content/components/alert/index.ts

@@ -5,6 +5,7 @@ import customImpl from "./custom-impl";
 import customStyles from "./custom-styles";
 import variants from "./variants";
 import withIcon from "./with-icon";
+import withAction from "./with-action";
 import controlled from "./controlled";
 
 export const alertContent = {
@@ -15,5 +16,6 @@ export const alertContent = {
   customStyles,
   variants,
   withIcon,
+  withAction,
   controlled,
 };

apps/docs/content/components/alert/variants.ts

@@ -3,15 +3,9 @@ const App = `import {Alert} from "@nextui-org/react";
 export default function App() {
   return (
     <div className="flex flex-col gap-4 w-full">
-      <Alert variant="solid">
-        A solid variant alert
-      </Alert>
-      <Alert variant="bordered">
-        A bordered variant alert
-      </Alert>
-      <Alert variant="flat">
-        A flat variant alert
-      </Alert>
+      {["solid", "bordered", "flat", "faded"].map((variant) => (
+        <Alert key={variant} variant={variant} color="danger" title={\`This is a \${variant} variant alert\`}/>
+      ))}
     </div>
   );
 }`;

apps/docs/content/components/alert/with-action.ts

@@ -0,0 +1,29 @@
+const App = `import {Alert, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isVisible, setIsVisible] = React.useState(true);
+
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert
+        color="warning"
+        description="Upgrade to a paid plan to continue"
+        endContent={
+          <Button color="warning" size="sm" variant="flat">
+            Upgrade
+          </Button>
+        }
+        title="You have no credits left"
+        variant="faded"
+      />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/docs/components/alert.mdx

@@ -59,7 +59,11 @@ Alert comes with 6 color variants to convey different meanings.
 
 By default, Alert displays an appropriate icon based on the `color` prop. You can override this by providing a custom icon using the `icon` prop.
 
-<CodeDemo title="With Icon" files={alertContent.withIcon} />
+### With Action
+
+Alert supports an `endContent` prop for additional actions.
+
+<CodeDemo title="With Action" files={alertContent.withAction} />
 
 ### Controlled Visibility
 
@@ -92,6 +96,18 @@ Alert has the following attributes on the `base` element:
 
 <Spacer y={4} />
 
+### Slots
+
+Alert has the following slots:
+
+- `base`: The main alert container element
+- `title`: The title element
+- `description`: The description element
+- `mainWrapper`: The wrapper for the title and description content
+- `closeButton`: The close button element
+- `iconWrapper`: The wrapper for the alert icon
+- `alertIcon`: The alert icon element
+
 ## Accessibility
 
 - Alert has role of `alert`
@@ -112,6 +128,8 @@ Alert has the following attributes on the `base` element:
 | color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The alert color theme                       | `default` |
 | variant          | `solid` \| `bordered` \| `flat` \| `faded`                                  | The alert variant                           | `flat`    |
 | radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The alert border radius                     | `md`      |
+| startContent     | `ReactNode`                                                                 | The alert start content                     | -         |
+| endContent       | `ReactNode`                                                                 | The alert end content                       | -         |
 | isVisible        | `boolean`                                                                   | Whether the alert is visible                | -         |
 | isClosable       | `boolean`                                                                   | Whether the alert can be closed             | `false`   |
 | hideIcon         | `boolean`                                                                   | Whether the icon is hidden                  | `false`   |

packages/components/alert/package.json

@@ -47,9 +47,9 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/button": "workspace:*",
     "@react-stately/utils": "3.10.1",
-    "@react-aria/utils": "3.24.1",
-    "@nextui-org/button": "workspace:*"
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/system": "workspace:*",

packages/components/alert/src/alert.tsx

@@ -32,7 +32,10 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
   const {
     title,
     icon,
+    children,
     description,
+    endContent,
+    startContent,
     isClosable,
     domRef,
     handleClose,
@@ -56,14 +59,16 @@ const Alert = forwardRef<"div", AlertProps>((props, ref) => {
 
   return (
     <div ref={domRef} role="alert" {...getBaseProps()}>
+      {startContent}
       <div {...getIconWrapperProps()}>
         {customIcon || <IconComponent {...getAlertIconProps()} />}
       </div>
       <div {...getMainWrapperProps()}>
         {title && <div {...getTitleProps()}>{title}</div>}
         {!isEmpty(description) && <div {...getDescriptionProps()}>{description}</div>}
+        {children}
       </div>
-
+      {endContent}
       {(isClosable || onClose) && (
         <Button
           isIconOnly

packages/components/alert/src/use-alert.ts

@@ -27,6 +27,14 @@ interface Props extends HTMLNextUIProps<"div"> {
    * Icon to be displayed in the alert - overrides the default icon
    */
   icon?: ReactNode;
+  /**
+   * Content to be displayed in the end side of the alert
+   */
+  endContent?: ReactNode;
+  /**
+   * Content to be displayed in the start side of the alert
+   */
+  startContent?: ReactNode;
   /**
    * Whether the alert is visible.
    * @default false
@@ -81,17 +89,21 @@ export function useAlert(originalProps: UseAlertProps) {
 
   const {
     as,
-    title: titleProp,
+    title,
     children,
     description,
     onClose,
     isClosable,
     ref,
     icon,
+    startContent,
+    endContent,
     isVisible: isVisibleProp,
     isDefaultVisible,
     onVisibleChange,
-    closeButtonProps = {},
+    closeButtonProps = {
+      size: "sm",
+    },
     classNames,
     ...otherProps
   } = props;
@@ -102,8 +114,6 @@ export function useAlert(originalProps: UseAlertProps) {
     onVisibleChange,
   );
 
-  const title = titleProp || children;
-
   const Component = as || "div";
   const shouldFilterDOMProps = typeof Component === "string";
 
@@ -178,9 +188,12 @@ export function useAlert(originalProps: UseAlertProps) {
   return {
     title,
     icon,
+    children,
     description,
     isClosable,
     domRef,
+    endContent,
+    startContent,
     getBaseProps,
     getMainWrapperProps,
     getDescriptionProps,