feat: alert component #3680
feat: alert component #3680
Conversation
🦋 Changeset detectedLatest commit: 7003759 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@abhinav700 is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
wingkwong
changed the title
…per, adding isCloseable prop
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| case "primary": | ||
| return <CloseIcon className={`fill-current text-primary-200`} height={20} width={20} />; | ||
|
|
||
| case "secondary": | ||
| return <CloseIcon className={`fill-current text-secondary-200`} height={20} width={20} />; | ||
|
|
||
| case "success": | ||
| return <CloseIcon className={`fill-current text-success-200`} height={20} width={20} />; | ||
|
|
||
| case "warning": | ||
| return <CloseIcon className={`fill-current text-warning-200`} height={20} width={20} />; | ||
|
|
||
| case "danger": | ||
| return <CloseIcon className={`fill-current text-danger-200`} height={20} width={20} />; | ||
|
|
||
| default: | ||
| return <CloseIcon className={`fill-current text-default-400`} height={20} width={20} />; |
There was a problem hiding this comment.
there is no variable used in className. You can simply use string. e.g.
className="fill-current text-primary-200"
There was a problem hiding this comment.
Must have forgot to change that from my previous code. will make changes.
| case "primary": | ||
| return <SuccessIcon className={`fill-current text-primary`} />; | ||
| case "secondary": | ||
| return <SuccessIcon className={`fill-current text-secondary`} />; | ||
| case "success": | ||
| return <SuccessIcon className={`fill-current text-success`} />; | ||
| case "warning": | ||
| return <WarningIcon className={`fill-current text-warning`} />; | ||
| case "danger": | ||
| return <DangerIcon className={`fill-current text-danger`} />; | ||
| default: | ||
| return <InfoCircleIcon className={`fill-current text-default-foreground`} />; |
| /** | ||
| * title of the alert message | ||
| */ | ||
| title: string; | ||
|
|
||
| /** | ||
| * Main body of the alert message | ||
| */ | ||
| description: ReactNode; |
There was a problem hiding this comment.
i think title should be optional while description is mandatory.
| * @example | ||
| * ```ts | ||
| * <Alert classNames={{ | ||
| * base:"base-classes", // image classes |
| /** | ||
| * isCloseable is true by default if not provided in props | ||
| */ | ||
| isCloseable: true, | ||
|
|
||
| /** | ||
| * By default, onClose simply closes the alert | ||
| */ | ||
| onClose: handleClose, |
There was a problem hiding this comment.
what's the reason defining there here while they are already in props? or you just wanna define the default value? if so, you can simply do in this way
const {title, description, onClose = handleClose, isCloseable = true, ref, classNames} = props;There was a problem hiding this comment.
yeah, I was trying to set defautl values. Will use the syntax you suggested.
| base: "rounded-[12px]", | ||
| }, | ||
| md: { | ||
| base: "rounded-[16px]", | ||
| }, | ||
| lg: { | ||
| base: "rounded-[22px]", | ||
| }, | ||
| full: { | ||
| base: "rounded-[9999px]", |
There was a problem hiding this comment.
use TW class. e.g. small, medium, large, full.
|
|
||
| const alert = tv({ | ||
| slots: { | ||
| base: ["group flex flex-row w-[342px] h-[68px] p-[12px]"], |
There was a problem hiding this comment.
group->group/alertso that it won't conflict with other components.- may double check if you really need group here or not
There was a problem hiding this comment.
Yeah we might not need it here. Will check it.
| base: ["group flex flex-row w-[342px] h-[68px] p-[12px]"], | ||
| title: ["text-medium font-normal block h-[24px]"], | ||
| description: ["text-small font-normal h-[20px]"], | ||
| mainWrapper: ["w-[268px] h-[44px] ml-[20px] flex flex-col box-border items-start"], | ||
| closeButton: ["w-[24px h-[24px] cursor-pointer relative"], |
There was a problem hiding this comment.
can you explain in more detail
There was a problem hiding this comment.
We don't use the arbitrary values but TW classes. e.g. p-[12px] -> p-3, h-[20px] -> h-5.
| import React from "react"; | ||
|
|
||
| import {IconSvgProps} from "./types"; | ||
| export const InfoCircleIcon = ( |
There was a problem hiding this comment.
add a new line before export (apply to other files)
| @@ -0,0 +1,21 @@ | |||
| import React from "react"; | |||
There was a problem hiding this comment.
declare but never read. (please check other files as well)
abhinav700
force-pushed
the
adding_alert_component
branch
from
e6efe4f
to
60cd878
Compare
📝 Description