From 53e23b0eb1dda9d83285ab73283a4d7485b8912e Mon Sep 17 00:00:00 2001 From: Wael Date: Fri, 4 Jul 2025 15:05:19 +0100 Subject: [PATCH 1/3] site: fix sudden success clipboard animation --- apps/site/components/Common/CodeBox.tsx | 2 +- .../src/Common/Notification/index.module.css | 56 +++++++++++++++++++ .../Providers/NotificationProvider/index.tsx | 29 ++++++++-- 3 files changed, 80 insertions(+), 7 deletions(-) diff --git a/apps/site/components/Common/CodeBox.tsx b/apps/site/components/Common/CodeBox.tsx index 049e95196c4df..e7d1079d5ee11 100644 --- a/apps/site/components/Common/CodeBox.tsx +++ b/apps/site/components/Common/CodeBox.tsx @@ -25,7 +25,7 @@ const CodeBox: FC> = props => { copyToClipboard(text); notify({ - duration: 300, + duration: 800, message: (
diff --git a/packages/ui-components/src/Common/Notification/index.module.css b/packages/ui-components/src/Common/Notification/index.module.css index 23d6933699609..28f8c67b208ee 100644 --- a/packages/ui-components/src/Common/Notification/index.module.css +++ b/packages/ui-components/src/Common/Notification/index.module.css @@ -13,8 +13,64 @@ dark:bg-neutral-900; } +.root[data-state='open'] { + animation: slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.root[data-state='closed'] { + animation: slide-out 200ms ease-in forwards; +} + +.root[data-swipe='move'] { + transform: translateX(var(--radix-toast-swipe-move-x)); +} + +.root[data-swipe='cancel'] { + transform: translateX(0); + transition: transform 200ms ease-out; +} + +.root[data-swipe='end'] { + animation: swipe-out 150ms ease-out forwards; +} + .message { @apply font-medium text-green-600 dark:text-white; } + +@keyframes slide-in { + from { + opacity: 0; + transform: translateX(calc(100% + 24px)); + } + + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slide-out { + from { + opacity: 1; + transform: translateX(0); + } + + to { + opacity: 0; + transform: translateX(calc(100% + 24px)); + } +} + +@keyframes swipe-out { + from { + transform: translateX(var(--radix-toast-swipe-end-x)); + } + + to { + opacity: 0; + transform: translateX(calc(100% + 24px)); + } +} diff --git a/packages/ui-components/src/Providers/NotificationProvider/index.tsx b/packages/ui-components/src/Providers/NotificationProvider/index.tsx index 3aca3b54edd9a..d93d1499d9962 100644 --- a/packages/ui-components/src/Providers/NotificationProvider/index.tsx +++ b/packages/ui-components/src/Providers/NotificationProvider/index.tsx @@ -27,21 +27,38 @@ export const useNotification = () => useContext(NotificationDispatch); export const NotificationProvider: FC = ({ children }) => { const [notification, dispatch] = useState(null); + const [isOpen, setIsOpen] = useState(false); useEffect(() => { - const timeout = setTimeout(() => dispatch(null), notification?.duration); - - return () => clearTimeout(timeout); + if (notification) { + setIsOpen(true); + const timeout = setTimeout(() => { + setIsOpen(false); + }, notification.duration); + return () => clearTimeout(timeout); + } }, [notification]); + const handleOpenChange = (open: boolean) => { + setIsOpen(open); + if (!open) { + setTimeout(() => { + dispatch(null); + }, 200); // Match your exit animation duration + } + }; + return ( - + {children} - {notification && ( - + {notification.message} )} From 4481a2fa9426261ab89c8949b6472d77f872e196 Mon Sep 17 00:00:00 2001 From: Wael Date: Tue, 15 Jul 2025 15:56:07 +0100 Subject: [PATCH 2/3] site: revert animation classes --- .../src/Common/Notification/index.module.css | 56 ------------------- .../Providers/NotificationProvider/index.tsx | 15 +---- 2 files changed, 1 insertion(+), 70 deletions(-) diff --git a/packages/ui-components/src/Common/Notification/index.module.css b/packages/ui-components/src/Common/Notification/index.module.css index 28f8c67b208ee..23d6933699609 100644 --- a/packages/ui-components/src/Common/Notification/index.module.css +++ b/packages/ui-components/src/Common/Notification/index.module.css @@ -13,64 +13,8 @@ dark:bg-neutral-900; } -.root[data-state='open'] { - animation: slide-in 300ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.root[data-state='closed'] { - animation: slide-out 200ms ease-in forwards; -} - -.root[data-swipe='move'] { - transform: translateX(var(--radix-toast-swipe-move-x)); -} - -.root[data-swipe='cancel'] { - transform: translateX(0); - transition: transform 200ms ease-out; -} - -.root[data-swipe='end'] { - animation: swipe-out 150ms ease-out forwards; -} - .message { @apply font-medium text-green-600 dark:text-white; } - -@keyframes slide-in { - from { - opacity: 0; - transform: translateX(calc(100% + 24px)); - } - - to { - opacity: 1; - transform: translateX(0); - } -} - -@keyframes slide-out { - from { - opacity: 1; - transform: translateX(0); - } - - to { - opacity: 0; - transform: translateX(calc(100% + 24px)); - } -} - -@keyframes swipe-out { - from { - transform: translateX(var(--radix-toast-swipe-end-x)); - } - - to { - opacity: 0; - transform: translateX(calc(100% + 24px)); - } -} diff --git a/packages/ui-components/src/Providers/NotificationProvider/index.tsx b/packages/ui-components/src/Providers/NotificationProvider/index.tsx index d93d1499d9962..641bee5896ad7 100644 --- a/packages/ui-components/src/Providers/NotificationProvider/index.tsx +++ b/packages/ui-components/src/Providers/NotificationProvider/index.tsx @@ -39,26 +39,13 @@ export const NotificationProvider: FC = ({ children }) => { } }, [notification]); - const handleOpenChange = (open: boolean) => { - setIsOpen(open); - if (!open) { - setTimeout(() => { - dispatch(null); - }, 200); // Match your exit animation duration - } - }; - return ( {children} {notification && ( - + {notification.message} )} From f2cebf6f3550e03da37cc62e61ed89e7f41e136b Mon Sep 17 00:00:00 2001 From: Wael Date: Tue, 15 Jul 2025 15:59:42 +0100 Subject: [PATCH 3/3] site: remove unnecessary animation logic --- .../src/Providers/NotificationProvider/index.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/ui-components/src/Providers/NotificationProvider/index.tsx b/packages/ui-components/src/Providers/NotificationProvider/index.tsx index 641bee5896ad7..b086b09b17a7f 100644 --- a/packages/ui-components/src/Providers/NotificationProvider/index.tsx +++ b/packages/ui-components/src/Providers/NotificationProvider/index.tsx @@ -27,25 +27,20 @@ export const useNotification = () => useContext(NotificationDispatch); export const NotificationProvider: FC = ({ children }) => { const [notification, dispatch] = useState(null); - const [isOpen, setIsOpen] = useState(false); useEffect(() => { - if (notification) { - setIsOpen(true); - const timeout = setTimeout(() => { - setIsOpen(false); - }, notification.duration); - return () => clearTimeout(timeout); - } + const timeout = setTimeout(() => dispatch(null), notification?.duration); + + return () => clearTimeout(timeout); }, [notification]); return ( - + {children} {notification && ( - + {notification.message} )}