From afac9f72db1a3082b2a6c0c2ba5afafb29266de4 Mon Sep 17 00:00:00 2001 From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com> Date: Thu, 9 Oct 2025 15:10:56 +0530 Subject: [PATCH] [WEB-5101]fix: toast action items hover behaviour (#7929) * fix: toast action items hover behaviour * fix: refactored toast styles --- packages/propel/src/toast/toast.stories.tsx | 17 +++++++++--- packages/propel/src/toast/toast.tsx | 30 ++++++++++++++++++++- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/packages/propel/src/toast/toast.stories.tsx b/packages/propel/src/toast/toast.stories.tsx index 9732e8ab7..607100497 100644 --- a/packages/propel/src/toast/toast.stories.tsx +++ b/packages/propel/src/toast/toast.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { Toast, setToast, updateToast, setPromiseToast, TOAST_TYPE } from "./toast"; +import { useState } from "react"; const meta = { title: "Components/Toast", @@ -153,9 +154,19 @@ export const WithActionItems: Story = { title: "File uploaded", message: "Your file has been uploaded successfully.", actionItems: ( - +
+ + {`View work item`} + + +
), }) } diff --git a/packages/propel/src/toast/toast.tsx b/packages/propel/src/toast/toast.tsx index 481bd7fea..fd37edc01 100644 --- a/packages/propel/src/toast/toast.tsx +++ b/packages/propel/src/toast/toast.tsx @@ -111,7 +111,35 @@ const ToastRender = ({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast toast={toast} key={id} className={cn( - "flex items-center rounded-lg border shadow-sm p-2 w-[350px] absolute right-3 bottom-3 z-[calc(1000-var(--toast-index))] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-10px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))] transition-[opacity,transform] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] select-none after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] data-[ending-style]:opacity-0 data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)] data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[ending-style]:[&:not([data-limited])]:[transform:translateY(150%)]", + // Base layout and positioning + "flex group items-center rounded-lg border shadow-sm p-2 w-[350px]", + "absolute right-3 bottom-3 z-[calc(1000-var(--toast-index))]", + "select-none transition-[opacity,transform] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]", + + // Default transform with stacking and scaling + "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-10px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]", + + // Pseudo-element for gap spacing + "after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']", + + // State-based opacity + "data-[ending-style]:opacity-0 data-[limited]:opacity-0", + + // Starting animation + "data-[starting-style]:[transform:translateY(150%)]", + + // Expanded state transform + "data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]", + + // Swipe direction endings - consolidated + "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", + "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", + "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", + "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", + + // Default ending transform for non-limited toasts + "data-[ending-style]:[&:not([data-limited])]:[transform:translateY(150%)]", + data.backgroundColorClassName, data.borderColorClassName )}