跳到主要内容

Toast action 支持透传 actionProps 到底层按钮（WEB-1181）

版本： 0.6.7 · 类型： ✨ Feature

WEB-1181

问题​

ToastActionConfig（对外公开类型，经 Toast.tsx re-export）此前只接受 { label, onClick }，action 按钮的 variant / size 在 ToastItem 内写死。调用方——例如 AI Feedback toast——无法自定义 action 按钮（自定义 variant、aria-label、data-testid 等）。

改动文件​

  • packages/design/src/components/Toast/toast-manager.ts
  • packages/design/src/components/Toast/ToastItem.tsx
  • packages/design/src/components/Toast/__tests__/Toast.test.tsx

改动内容​

  1. ToastActionConfig 新增可选 actionProps，透传给底层 Button：
    • 类型：Omit<ButtonProps, 'children' | 'onClick'> & { [key: `data-${string}`]: string | number | boolean | undefined }；data-* 索引签名沿用 Dialog okButtonProps 既有约定。
    • 排除 children（由 label 承担）与 onClick（由 Toast 组合为 onClick + 自动关闭，因此不可覆盖）。
  2. ToastItem 的 renderActionButton 里，{...config.actionProps} 放在默认 variant / size 之后（使调用方可覆盖），但在组合 onClick 之前（使点击 + 自动关闭行为不可被覆盖）。
  3. 单测：aiFeedback toast 通过 actionProps 把 action 覆盖为 variant="primary" + data-testid，断言 class 生效且 onClick 仍被触发。

用法​

toast.aiFeedback('...', {
  action: {
    label: 'Regenerate',
    onClick: handleRegenerate,
    actionProps: { variant: 'primary', 'aria-label': 'Regenerate', 'data-testid': 'ai-regenerate' },
  },
});