跳到主要内容

Dialog 新增 Size=Emphasized 变体(DES-37)

Pre-release · 类型: ✨ 新功能

DES-37:Dialog 新增 Size=Emphasized 变体。

改动内容

DES-37: Dialog 支持 Size=Emphasized

状态:已完成

背景: Figma Modal 组件(COMPONENT_SET 21235:6773)的 Size 轴含 Default / Emphasized 两个值,此前实现仅覆盖 Default。经 Figma 核实,EmphasizedDefault 唯一差异是内容容器宽度(Default 464px / Emphasized 708px),其余 padding / 圆角 / 字号 / 结构两者一致。

注:原 DialogDesignSpec.md 误将 Size 轴记为 Variant,且多列了一个不存在的 Onboarding 值。Onboarding Modal 在 Figma 中是独立组件(节点 18609:2556 / 21248:3849),不在本组件范围。spec 已一并修正。

改动文件src/components/Dialog/Dialog.tsxsrc/components/Dialog/index.tssrc/components/index.tssrc/components/Dialog/Dialog.test.tsxsrc/components/Dialog/DialogDesignSpec.mdpackages/design-site/docs/components/patterns/dialog.mdxpackages/design-site/i18n/zh-CN/.../dialog.mdx

改动内容

  1. 新增对外类型 DialogSize = 'default' | 'emphasized'DialogProps.size(默认 'default')。DialogOpenOptions 通过 Omit<DialogProps, ...> 自动继承 size,命令式 Dialog.open() 同样可用
  2. 新增尺寸→宽度映射 DIALOG_SIZE_CLASS,仅 emphasized 覆盖 ui/dialog 默认宽度(max-w-177 = 708px);default 沿用 primitive 的 max-w-116(464px)。通过 mergeClass(tailwind-merge 3.3.0)覆盖,已验证 max-w-116 / max-w-177 同组去重
  3. ui/dialog 保持不变(primitive 仍提供 464px 默认),符合「ui 提供默认视觉、design 层接管语义变体」分层原则
  4. 补单测:默认宽度 max-w-116size="emphasized" 应用 max-w-177 且覆盖默认
  5. design-site 新增「Size / 尺寸」示例与 Props 表 size 行(中英双语)