rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix dropdown popup edge weight and close animation

Browse Source 
The popup stacked a CSS border on top of shadow-5, whose first layer is
already a 0 0 0 1px sand-a3 hairline ring, so the edge rendered as two
1px lines. Drop the redundant border and let the shadow provide the
single hairline.

Also transition the scale property instead of transform: Tailwind v4
maps scale-95 to the CSS scale property, so the old transform,opacity
list never animated the scale and the close snapped. Animate scale and
opacity with an explicit 150ms ease-out so open and close are smooth.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-28 15:50:33 +02:00
parent 72f52c1ad7
commit 4f3d3dc3b3
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/src/v2/Dropdown/variants.ts
View File

@@ -19,8 +19,8 @@ import { tv } from "tailwind-variants/lite";
export const dropdownPopup = tv({
base: [
"min-w-40 origin-(--transform-origin) rounded-3 border border-sand-a2 bg-sand-1 p-2 shadow-5 outline-none",
"transition-[transform,opacity] data-starting-style:scale-95 data-starting-style:opacity-0",
"min-w-40 origin-(--transform-origin) rounded-3 bg-sand-1 p-2 shadow-5 outline-none",
"transition-[scale,opacity] duration-150 ease-out data-starting-style:scale-95 data-starting-style:opacity-0",
"data-ending-style:scale-95 data-ending-style:opacity-0",
],
});