From 2a73f8a67fea1420c644a25d54bf0f70e09acb04 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Tue, 24 Dec 2024 18:21:57 +0530 Subject: [PATCH] chore: nits --- packages/components/toast/package.json | 1 + .../components/toast/src/toast-provider.tsx | 2 +- .../components/toast/src/toast-region.tsx | 2 +- packages/components/toast/src/toast.tsx | 3 +- packages/components/toast/src/use-toast.ts | 4 +- .../toast/stories/toast.stories.tsx | 10 ++++- packages/core/theme/src/components/toast.ts | 39 +++++++++++++------ pnpm-lock.yaml | 3 ++ 8 files changed, 45 insertions(+), 19 deletions(-) diff --git a/packages/components/toast/package.json b/packages/components/toast/package.json index 2b86beb11c..f4d1ccd6ff 100644 --- a/packages/components/toast/package.json +++ b/packages/components/toast/package.json @@ -43,6 +43,7 @@ "@nextui-org/react-utils": "workspace:*", "@nextui-org/shared-utils": "workspace:*", "@nextui-org/shared-icons": "workspace:*", + "@nextui-org/progress": "workspace:*", "@react-aria/button": "3.9.5", "@react-aria/toast": "3.0.0-beta.15", "@react-aria/utils": "3.24.1", diff --git a/packages/components/toast/src/toast-provider.tsx b/packages/components/toast/src/toast-provider.tsx index e50151f3cb..1274fb234c 100644 --- a/packages/components/toast/src/toast-provider.tsx +++ b/packages/components/toast/src/toast-provider.tsx @@ -27,7 +27,7 @@ export const ToastProvider = ({maxVisibleToasts = 5}: ToastProviderProps) => { return null; } - return <>{}; + return ; }; export const addToast = ({ diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx index 69b4635b5c..dc1bd40682 100644 --- a/packages/components/toast/src/toast-region.tsx +++ b/packages/components/toast/src/toast-region.tsx @@ -18,7 +18,7 @@ export function ToastRegion({toastQueue, ...props}: ToastRe
{toastQueue.visibleToasts.map((toast: QueuedToast) => { return ( diff --git a/packages/components/toast/src/toast.tsx b/packages/components/toast/src/toast.tsx index cdb7acfea8..54ace7c3ef 100644 --- a/packages/components/toast/src/toast.tsx +++ b/packages/components/toast/src/toast.tsx @@ -2,8 +2,7 @@ import {forwardRef} from "@nextui-org/system"; import {Button, ButtonProps} from "@nextui-org/button"; import {CloseIcon} from "@nextui-org/shared-icons"; import {motion, AnimatePresence} from "framer-motion"; - -import {Progress} from "../../../core/react/src"; +import {Progress} from "@nextui-org/progress"; import {UseToastProps, useToast} from "./use-toast"; diff --git a/packages/components/toast/src/use-toast.ts b/packages/components/toast/src/use-toast.ts index bddd0af822..6658846763 100644 --- a/packages/components/toast/src/use-toast.ts +++ b/packages/components/toast/src/use-toast.ts @@ -149,8 +149,8 @@ export function useToast(originalProps: UseToastProps) { const isProgressBarHidden = toast.timeout ? "block" : "hidden"; const progressBarProps = { classNames: { - track: "bg-default-200", - indicator: "bg-default-700/40", + track: slots.progressTrack({class: clsx(classNames?.progressTrack)}), + indicator: "bg-default-600", }, radius: "none", isDisabled: true, diff --git a/packages/components/toast/stories/toast.stories.tsx b/packages/components/toast/stories/toast.stories.tsx index 95305d7d05..9650527b40 100644 --- a/packages/components/toast/stories/toast.stories.tsx +++ b/packages/components/toast/stories/toast.stories.tsx @@ -58,7 +58,13 @@ export const Default = { render: Template, args: { ...defaultProps, - variant: "bordered", - color: "danger", + }, +}; + +export const WithTimeout = { + render: Template, + args: { + ...defaultProps, + timeout: 3000, }, }; diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts index e79096739b..4a619ce408 100644 --- a/packages/core/theme/src/components/toast.ts +++ b/packages/core/theme/src/components/toast.ts @@ -43,9 +43,10 @@ const toast = tv({ "bottom-0", "w-full", "overflow-hidden", - "bg-black-500", + "bg-green-500", "rounded-none", ], + progressTrack: ["bg-default-200"], closeButton: [ "w-4 h-4 min-w-4 p-0.5 absolute -right-1 -top-1 flex items-center justify-center bg-default-100 hover:bg-default-200 text-default-400 hover:text-default-600 border border-1 border-default-400", ], @@ -62,12 +63,23 @@ const toast = tv({ }, color: { default: "", - primary: "", - secondary: "", - success: "", - warning: "", - danger: "", + primary: { + progressTrack: "bg-primary-200", + }, + secondary: { + progressTrack: "bg-secondary-200", + }, + success: { + progressTrack: "bg-success-200", + }, + warning: { + progressTrack: "bg-warning-200", + }, + danger: { + progressTrack: "bg-danger-200", + }, }, + position: {}, }, defaultVariants: { size: "xs", @@ -80,6 +92,7 @@ const toast = tv({ color: "primary", class: { base: "bg-primary-100/40 text-primary-400", + closeButton: "bg-primary-100 hover:bg-primary-200 border-primary-400 text-primary-400", }, }, { @@ -87,27 +100,32 @@ const toast = tv({ color: "secondary", class: { base: "bg-secondary-100/40 text-secondary-400", + closeButton: + "bg-secondary-100 hover:bg-secondary-200 border-secondary-400 text-secondary-400", }, }, { - variant: "faded", + variant: "flat", color: "success", class: { base: "bg-success-100/40 text-success-400", + closeButton: "bg-success-100 hover:bg-success-200 border-success-400 text-success-400", }, }, { - variant: "faded", + variant: "flat", color: "warning", class: { base: "bg-warning-100/40 text-warning-400", + closeButton: "bg-warning-100 hover:bg-warning-200 border-warning-400 text-warning-400", }, }, { - variant: "faded", + variant: "flat", color: "danger", class: { base: "bg-danger-100/40 text-danger-400", + closeButton: "bg-danger-100 hover:bg-danger-200 border-danger-400 text-danger-400", }, }, // faded and color @@ -158,8 +176,7 @@ const toast = tv({ color: "primary", class: { base: "border-primary-400 text-primary-400", - closeButton: - "bg-secondary-100 hover:bg-secondary-200 border-secondary-400 text-secondary-400", + closeButton: "bg-primary-100 hover:bg-primary-200 border-primary-400 text-primary-400", }, }, { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a00842e52..6d5237fcf4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2996,6 +2996,9 @@ importers: packages/components/toast: dependencies: + '@nextui-org/progress': + specifier: workspace:* + version: link:../progress '@nextui-org/react-utils': specifier: workspace:* version: link:../../utilities/react-utils