diff --git a/.changeset/selfish-baboons-know.md b/.changeset/selfish-baboons-know.md new file mode 100644 index 0000000000..38ceb57b9c --- /dev/null +++ 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 index 1d5500f469..5f4f00f72b 100644 --- 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 index 15f49b31c9..3d2b30bc8f 100644 --- 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 index 3cac310475..d6460aa45d 100644 --- 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 (
- {customIcon || } +
+ {customIcon || } +
{title &&
{title}
} {!isEmpty(description) &&
{description}
} diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts index 290c4b99c2..8e75163770 100644 --- 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( + () => ({ + 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 index 8e2daebcf5..8392066927 100644 --- 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 index c7713f9729..3af4e45dfd 100644 --- 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 index a647c6b04e..fd4d4d3133 100644 --- 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} > - + ); };