fix(ui): stop the toast row's collapse box from clipping its shadow

The exit animation collapses a grid row to 0fr, which only takes effect if the row clips its content — so the inner box carried overflow-hidden permanently. That box hugs the toast exactly, and shadow-popup is drawn entirely outside those bounds, so every toast rendered with its shadow cut off. Clip only while the row is collapsing; the toast has faded out by then, so the shadow's absence is invisible and the collapse still animates. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-01 15:32:50 +08:00 · 2026-08-13 17:13:20 +08:00
parent c44a36e3be
commit f11ab5d738
2 changed files with 6 additions and 1 deletions
@@ -240,6 +240,7 @@
 |---|---|---|
 | 2026-08-13 | 建档 v1：先调研 antd / Arco / TDesign / Semi / Material / Fluent 六家，再由设计师拍板四项——四类型（不做 loading）、最多 3 条堆叠顶掉最旧、允许一个操作按钮且时长翻倍、时长按字数动态延长 3～10 秒；另拍板移动端仍在顶部、悬停暂停计时、浅语义色底无边框。共 9 节展示层 + 落地与待决策两节隐藏区 | 待 committer 窗口提交 |
 | 2026-08-13 | 站点接线（元规范 §5 上线清单）：`rspress.config.ts` 侧栏「组件规范」注册入口、00-总纲 §四 进度看板加行、01-设计规范 §0 索引加行并在 §5 层级待定稿留下指针（轻提示须盖住弹窗与抽屉，与 Tooltip 的先后待拍板）。**文档内容未改**；§11.8 的 demo 页仍未建——照 圆角与阴影 / 多端适配 的先例，规范先行、组件落地后再补 `components/toast.mdx` | 待 committer 窗口提交 |
+| 2026-08-13 | 修投影被裁：做收合补位的外层 `overflow-hidden` 把 `shadow-popup` 整个裁掉了（投影画在盒子外面），改为只在退场收合时才裁 | 待 committer 窗口提交 |
 | 2026-08-13 | 修层级：容器改为 `createPortal` 到 `<body>`。原先容器渲染在挂载点原地，被组件站 z-20 的顶栏压住（同一层叠上下文之外，z-index 数值再大也无效），§3「盖住弹窗与抽屉」实际不成立 | 待 committer 窗口提交 |
 | 2026-08-13 | 组件落地：`@bisheng/ui` 新增 Toast（`toastStore.ts` + `Toaster.tsx`），四类型 / 3 条堆叠去重 / 动态时长 + 悬停暂停 / 操作按钮 / ESC / 分级播报全部按 §2–§9 实现；client 壳全量替换（含删掉私有撤销 toast 与旧 `.toast-root` CSS），404 个调用点未动；补 `shadow-popup` / `shadow-modal` 两档投影 token；建 `components/toast.mdx` demo 页并注册侧栏。本文改：§10 标注过时、新增 §11.1 落地状态、§12 勾注 4 条并新增 1 条 | 待 committer 窗口提交 |
 | 2026-08-13 | 补 §10 现状扫描（隐藏区）：全局 Toast 一套 135 文件 404 调用点 + 私有撤销 toast 1 处、壳解剖 13 项差距表、入参双写法 72 vs 45、两个迁移坑（`duration: 0` 语义反转、`useDelayedUploadToast` 死代码）；原 §10/§11 顺延为 §11/§12，待决策清单勾销首条并新增两条。**展示层规则未增未减未改** | 待 committer 窗口提交 |
@@ -133,7 +133,11 @@ function ToastRow({ item, closeLabel }: { item: ToastItem; closeLabel: string })
        item.closing ? 'grid-rows-[0fr] pb-0' : 'grid-rows-[1fr] pb-2',
      )}
    >
-      <div className="overflow-hidden">
+      {/* The 0fr collapse only bites when the row clips its content — but a
+          clipping box that fits the toast exactly also cuts off `shadow-popup`,
+          which is drawn entirely OUTSIDE those bounds. So clip only while the
+          row is collapsing; the toast has faded out by then anyway. */}
+      <div className={item.closing ? 'overflow-hidden' : 'overflow-visible'}>
        <div className="flex justify-center">
          <div
            ref={boxRef}