Skip to main content

Dialog Size=Emphasized variant (DES-37)

Pre-release · Type: ✨ Feature

DES-37: Dialog adds a Size=Emphasized variant.

Changes​

DES-37: Dialog supports Size=Emphasized

Status: Done

Background: The Size axis of the Figma Modal component (COMPONENT_SET 21235:6773) contains two values, Default / Emphasized, while the previous implementation only covered Default. As verified in Figma, the only difference between Emphasized and Default is the content container width (Default 464px / Emphasized 708px); the padding / corner radius / font size / structure are identical between the two.

Note: the original DialogDesignSpec.md mistakenly recorded the Size axis as Variant, and listed an extra, nonexistent Onboarding value. Onboarding Modal is a separate component in Figma (nodes 18609:2556 / 21248:3849) and is out of scope for this component. The spec has been corrected accordingly.

Changed files: src/components/Dialog/Dialog.tsx, src/components/Dialog/index.ts, src/components/index.ts, src/components/Dialog/Dialog.test.tsx, src/components/Dialog/DialogDesignSpec.md, packages/design-site/docs/components/patterns/dialog.mdx, packages/design-site/i18n/zh-CN/.../dialog.mdx

Changes:

  1. Added the public type DialogSize = 'default' | 'emphasized' and DialogProps.size (default 'default'). DialogOpenOptions automatically inherits size via Omit<DialogProps, ...>, so the imperative Dialog.open() also supports it
  2. Added the size→width mapping DIALOG_SIZE_CLASS; only emphasized overrides the ui/dialog default width (max-w-177 = 708px); default keeps the primitive's max-w-116 (464px). Overriding goes through mergeClass (tailwind-merge 3.3.0); verified that max-w-116 / max-w-177 are deduplicated within the same group
  3. ui/dialog stays unchanged (the primitive still provides the 464px default), in line with the layering principle of "ui provides the default visuals, the design layer takes over semantic variants"
  4. Added unit tests: default width max-w-116; size="emphasized" applies max-w-177 and overrides the default
  5. design-site adds a "Size" example and a size row in the Props table (bilingual)