docs(modal): use Record<SemanticDOM> instead of classnames/styles type (#50330)

components/modal/demo/_semantic.tsx

@@ -9,7 +9,7 @@ const locales = {
   cn: {
     mask: '遮罩层元素',
     wrapper: '包裹层元素，一般用于动画容器',
-    content: 'Drawer 容器元素',
+    content: 'Modal 容器元素',
     header: '头部元素',
     body: '内容元素',
     footer: '底部元素',
@@ -17,7 +17,7 @@ const locales = {
   en: {
     mask: 'Mask element',
     wrapper: 'Wrapper element. Used for motion container',
-    content: 'Drawer container element',
+    content: 'Modal container element',
     header: 'Header element',
     body: 'Body element',
     footer: 'Footer element',
@@ -57,6 +57,8 @@ const App: React.FC = () => {
     <SemanticPreview
       semantics={[
         { name: 'mask', desc: locale.mask, version: '5.13.0' },
+        { name: 'content', desc: locale.content, version: '5.13.0' },
+        { name: 'wrapper', desc: locale.wrapper, version: '5.13.0' },
         { name: 'header', desc: locale.header, version: '5.13.0' },
         { name: 'body', desc: locale.body, version: '5.13.0' },
         { name: 'footer', desc: locale.footer, version: '5.13.0' },

components/modal/index.en-US.md

@@ -48,8 +48,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | afterClose | Specify a function that will be called when modal is closed completely | function | - |  |
-| classNames | Config Modal build-in module's className | `header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;` | - |  |
-| styles | Config Modal build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
+| classNames | Config Modal build-in module's className | [Record<SemanticDOM, string>](#semantic-dom) | - |  |
+| styles | Config Modal build-in module's style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#api) | - |  |
 | cancelText | Text of the Cancel button | ReactNode | `Cancel` |  |
 | centered | Centered Modal | boolean | false |  |
@@ -192,7 +192,7 @@ const confirmed = await modal.confirm({ ... });
 | originNode | default node | React.ReactNode | - |
 | extra | extended options | { OkBtn: FC; CancelBtn: FC } | - |
 
-### `styles` and `classNames` attribute
+## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
 

components/modal/index.zh-CN.md

@@ -49,8 +49,8 @@ demo:
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | afterClose | Modal 完全关闭后的回调 | function | - |  |
-| classNames | 配置弹窗内置模块的 className | `header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;` | - |  |
-| styles | 配置弹窗内置模块的 style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
+| classNames | 配置弹窗内置模块的 className | [Record<SemanticDOM, string>](#semantic-dom) | - |  |
+| styles | 配置弹窗内置模块的 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.10.0 |
 | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#api) | - |  |
 | cancelText | 取消按钮文字 | ReactNode | `取消` |  |
 | centered | 垂直居中展示 Modal | boolean | false |  |
@@ -193,7 +193,7 @@ const confirmed = await modal.confirm({ ... });
 | originNode | 默认节点 | React.ReactNode | - |
 | extra | 扩展选项 | { OkBtn: FC; CancelBtn: FC } | - |
 
-### `styles` and `classNames` 属性
+## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>