binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5101]fix: toast action items hover behaviour (#7929)

Browse source 
* fix: toast action items hover behaviour

* fix: refactored toast styles
This commit is contained in:
Vamsi Krishna 2025-10-09 15:10:56 +05:30 • committed by GitHub
parent 0f038705ed
commit afac9f72db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/propel/src/toast/toast.stories.tsx
View file

@ -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: (
<button className="rounded bg-blue-500 px-3 py-1 text-xs text-white hover:bg-blue-600">
View File
<div className="flex items-center gap-1 text-xs text-custom-text-200">
<a
href="#"
target="_blank"
rel="noopener noreferrer"
className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-medium rounded"
>
{`View work item`}
</a>
<button className="cursor-pointer hidden group-hover:flex px-2 py-1 text-custom-text-300 hover:text-custom-text-200 hover:bg-custom-background-90 rounded">
Copy link
</button>
</div>
),
})
}

30
packages/propel/src/toast/toast.tsx
View file

@ -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-&lsqb;cubic-bezier(0.22,1,0.36,1)&rsqb;",
// 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
)}