feat(Popconfirm): make title bold and add description prop (#39250)

* feat(popconfirm): make title bold and add description prop * feat(popconfirm): make title bold and add description prop(update demos) * feat(popconfirm): make title bold and add description prop(the update of demos translation) * feat(popconfirm): make title bold and add description prop(the update of snapshot) * feat(popconfirm): make title bold and add description prop(the update of popconfirm md) * feat(popconfirm): make title bold and add description prop(the update of popconfirm md)2 * feat(popconfirm): make title bold and add description prop(run all test.ts.snaps and update popconfirm)
2026-02-09 02:49:18 +08:00 · 2022-12-08 16:39:42 +08:00
parent c2afa97ca1
commit 451d2f6ee2
18 changed files with 257 additions and 45 deletions
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -98,7 +98,7 @@ The items listed above are all functions, expecting a settings object as paramet
 | closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
 | closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
 | content | Content | ReactNode | - |  |
-| footer | Footer content, set as `footer: null` when you don't need default buttons	| ReactNode | - | 5.1.0 |
+| footer | Footer content, set as `footer: null` when you don't need default buttons | ReactNode | - | 5.1.0 |
 | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | Custom icon | ReactNode | &lt;QuestionCircle /> |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -101,7 +101,7 @@ demo:
 | closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
 | closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
 | content | 内容 | ReactNode | - |  |
-| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode | - | 5.1.0  |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | ReactNode | - | 5.1.0 |
 | getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | 自定义图标 | ReactNode | &lt;QuestionCircle /> |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
--- a/components/popconfirm/PurePanel.tsx
+++ b/components/popconfirm/PurePanel.tsx
@@ -29,6 +29,7 @@ export interface OverlayProps
    | 'okType'
    | 'showCancel'
    | 'title'
+    | 'description'
  > {
  prefixCls: string;
  close?: Function;
@@ -42,6 +43,7 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
    okButtonProps,
    cancelButtonProps,
    title,
+    description,
    cancelText,
    okText,
    okType = 'primary',
@@ -60,8 +62,17 @@ export const Overlay: React.FC<OverlayProps> = (props) => {
        <div className={`${prefixCls}-inner-content`}>
          <div className={`${prefixCls}-message`}>
            {icon && <span className={`${prefixCls}-message-icon`}>{icon}</span>}
-            <div className={`${prefixCls}-message-title`}>{getRenderPropValue(title)}</div>
+            <div
+              className={classNames(`${prefixCls}-message-title`, {
+                [`${prefixCls}-message-title-only`]: !!description,
+              })}
+            >
+              {getRenderPropValue(title)}
+            </div>
          </div>
+          {description && (
+            <div className={`${prefixCls}-description`}>{getRenderPropValue(description)}</div>
+          )}
          <div className={`${prefixCls}-buttons`}>
            {showCancel && (
              <Button onClick={onCancel} size="small" {...cancelButtonProps}>
--- a/components/popconfirm/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/popconfirm/tests/snapshots/demo-extend.test.ts.snap
@@ -62,11 +62,16 @@ Array [
                  </span>
                </span>
                <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                >
                  Title
                </div>
              </div>
+              <div
+                class="ant-popconfirm-description"
+              >
+                Open Popconfirm with async logic
+              </div>
              <div
                class="ant-popconfirm-buttons"
              >
@@ -155,11 +160,16 @@ Array [
                  </span>
                </span>
                <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                >
-                  Are you sure to delete this task?
+                  Delete the task
                </div>
              </div>
+              <div
+                class="ant-popconfirm-description"
+              >
+                Are you sure to delete this task?
+              </div>
              <div
                class="ant-popconfirm-buttons"
              >
@@ -248,11 +258,16 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.tsx extend context
                  </span>
                </span>
                <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                >
-                  Are you sure delete this task?
+                  Delete the task
                </div>
              </div>
+              <div
+                class="ant-popconfirm-description"
+              >
+                Are you sure to delete this task?
+              </div>
              <div
                class="ant-popconfirm-buttons"
              >
@@ -368,11 +383,16 @@ Array [
                  </span>
                </span>
                <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                >
-                  Are you sure？
+                  Delete the task
                </div>
              </div>
+              <div
+                class="ant-popconfirm-description"
+              >
+                Are you sure to delete this task?
+              </div>
              <div
                class="ant-popconfirm-buttons"
              >
@@ -461,11 +481,16 @@ Array [
                  </span>
                </span>
                <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                >
-                  Are you sure？
+                  Delete the task
                </div>
              </div>
+              <div
+                class="ant-popconfirm-description"
+              >
+                Are you sure to delete this task?
+              </div>
              <div
                class="ant-popconfirm-buttons"
              >
@@ -562,11 +587,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -653,11 +683,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -744,11 +779,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -839,11 +879,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -930,11 +975,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1021,11 +1071,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1116,11 +1171,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1207,11 +1267,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1298,11 +1363,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1393,11 +1463,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1484,11 +1559,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1575,11 +1655,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
                    </span>
                  </span>
                  <div
-                    class="ant-popconfirm-message-title"
+                    class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                  >
                    Are you sure to delete this task?
                  </div>
                </div>
+                <div
+                  class="ant-popconfirm-description"
+                >
+                  Delete the task
+                </div>
                <div
                  class="ant-popconfirm-buttons"
                >
@@ -1672,11 +1757,16 @@ Array [
                  </span>
                </span>
                <div
-                  class="ant-popconfirm-message-title"
+                  class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
                >
                  Title
                </div>
              </div>
+              <div
+                class="ant-popconfirm-description"
+              >
+                Open Popconfirm with Promise
+              </div>
              <div
                class="ant-popconfirm-buttons"
              >
@@ -1754,11 +1844,16 @@ Array [
                </span>
              </span>
              <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
              >
                Are you OK?
              </div>
            </div>
+            <div
+              class="ant-popconfirm-description"
+            >
+              Does this look good?
+            </div>
            <div
              class="ant-popconfirm-buttons"
            >
@@ -1832,11 +1927,16 @@ Array [
                </span>
              </span>
              <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
              >
                Are you OK?
              </div>
            </div>
+            <div
+              class="ant-popconfirm-description"
+            >
+              Does this look good?
+            </div>
            <div
              class="ant-popconfirm-buttons"
            >
--- a/components/popconfirm/tests/snapshots/demo.test.ts.snap
+++ b/components/popconfirm/tests/snapshots/demo.test.ts.snap
@@ -246,11 +246,16 @@ Array [
                </span>
              </span>
              <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
              >
                Are you OK?
              </div>
            </div>
+            <div
+              class="ant-popconfirm-description"
+            >
+              Does this look good?
+            </div>
            <div
              class="ant-popconfirm-buttons"
            >
@@ -324,11 +329,16 @@ Array [
                </span>
              </span>
              <div
-                class="ant-popconfirm-message-title"
+                class="ant-popconfirm-message-title ant-popconfirm-message-title-only"
              >
                Are you OK?
              </div>
            </div>
+            <div
+              class="ant-popconfirm-description"
+            >
+              Does this look good?
+            </div>
            <div
              class="ant-popconfirm-buttons"
            >
--- a/components/popconfirm/demo/async.tsx
+++ b/components/popconfirm/demo/async.tsx
@@ -26,6 +26,7 @@ const App: React.FC = () => {
  return (
    <Popconfirm
      title="Title"
+      description="Open Popconfirm with async logic"
      open={open}
      onConfirm={handleOk}
      okButtonProps={{ loading: confirmLoading }}
--- a/components/popconfirm/demo/basic.md
+++ b/components/popconfirm/demo/basic.md
@@ -1,7 +1,11 @@
 ## zh-CN

-最简单的用法。
+最简单的用法，支持确认标题和描述。
+
+> `description` 在 `5.1.0` 版本中支持。

 ## en-US

-The basic example.
+The basic example supports the title and description props of confirmation.
+
+> `description` is supported in version `5.1.0`.
--- a/components/popconfirm/demo/basic.tsx
+++ b/components/popconfirm/demo/basic.tsx
@@ -13,7 +13,8 @@ const cancel = (e: React.MouseEvent<HTMLElement>) => {

 const App: React.FC = () => (
  <Popconfirm
-    title="Are you sure to delete this task?"
+    title="Delete the task"
+    description="Are you sure to delete this task?"
    onConfirm={confirm}
    onCancel={cancel}
    okText="Yes"
--- a/components/popconfirm/demo/dynamic-trigger.tsx
+++ b/components/popconfirm/demo/dynamic-trigger.tsx
@@ -36,7 +36,8 @@ const App: React.FC = () => {
  return (
    <div>
      <Popconfirm
-        title="Are you sure delete this task?"
+        title="Delete the task"
+        description="Are you sure to delete this task?"
        open={open}
        onOpenChange={handleOpenChange}
        onConfirm={confirm}
--- a/components/popconfirm/demo/icon.tsx
+++ b/components/popconfirm/demo/icon.tsx
@@ -3,7 +3,11 @@ import { QuestionCircleOutlined } from '@ant-design/icons';
 import { Popconfirm } from 'antd';

 const App: React.FC = () => (
-  <Popconfirm title="Are you sure？" icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+  >
    <a href="#">Delete</a>
  </Popconfirm>
 );
--- a/components/popconfirm/demo/locale.tsx
+++ b/components/popconfirm/demo/locale.tsx
@@ -2,7 +2,12 @@ import React from 'react';
 import { Popconfirm } from 'antd';

 const App: React.FC = () => (
-  <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
+  <Popconfirm
+    title="Delete the task"
+    description="Are you sure to delete this task?"
+    okText="Yes"
+    cancelText="No"
+  >
    <a href="#">Delete</a>
  </Popconfirm>
 );
--- a/components/popconfirm/demo/placement.tsx
+++ b/components/popconfirm/demo/placement.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, message, Popconfirm } from 'antd';

 const text = 'Are you sure to delete this task?';
+const description = 'Delete the task';

 const confirm = () => {
  message.info('Clicked on Yes.');
@@ -10,15 +11,30 @@ const confirm = () => {
 const App: React.FC = () => (
  <div className="demo">
    <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
-      <Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+      <Popconfirm
+        placement="topLeft"
+        title={text}
+        description={description}
+        onConfirm={confirm}
+        okText="Yes"
+        cancelText="No"
+      >
        <Button>TL</Button>
      </Popconfirm>
-      <Popconfirm placement="top" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+      <Popconfirm
+        placement="top"
+        title={text}
+        description={description}
+        onConfirm={confirm}
+        okText="Yes"
+        cancelText="No"
+      >
        <Button>Top</Button>
      </Popconfirm>
      <Popconfirm
        placement="topRight"
        title={text}
+        description={description}
        onConfirm={confirm}
        okText="Yes"
        cancelText="No"
@@ -27,15 +43,30 @@ const App: React.FC = () => (
      </Popconfirm>
    </div>
    <div style={{ width: 70, float: 'left' }}>
-      <Popconfirm placement="leftTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+      <Popconfirm
+        placement="leftTop"
+        title={text}
+        description={description}
+        onConfirm={confirm}
+        okText="Yes"
+        cancelText="No"
+      >
        <Button>LT</Button>
      </Popconfirm>
-      <Popconfirm placement="left" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+      <Popconfirm
+        placement="left"
+        title={text}
+        description={description}
+        onConfirm={confirm}
+        okText="Yes"
+        cancelText="No"
+      >
        <Button>Left</Button>
      </Popconfirm>
      <Popconfirm
        placement="leftBottom"
        title={text}
+        description={description}
        onConfirm={confirm}
        okText="Yes"
        cancelText="No"
@@ -47,18 +78,27 @@ const App: React.FC = () => (
      <Popconfirm
        placement="rightTop"
        title={text}
+        description={description}
        onConfirm={confirm}
        okText="Yes"
        cancelText="No"
      >
        <Button>RT</Button>
      </Popconfirm>
-      <Popconfirm placement="right" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+      <Popconfirm
+        placement="right"
+        title={text}
+        description={description}
+        onConfirm={confirm}
+        okText="Yes"
+        cancelText="No"
+      >
        <Button>Right</Button>
      </Popconfirm>
      <Popconfirm
        placement="rightBottom"
        title={text}
+        description={description}
        onConfirm={confirm}
        okText="Yes"
        cancelText="No"
@@ -70,18 +110,27 @@ const App: React.FC = () => (
      <Popconfirm
        placement="bottomLeft"
        title={text}
+        description={description}
        onConfirm={confirm}
        okText="Yes"
        cancelText="No"
      >
        <Button>BL</Button>
      </Popconfirm>
-      <Popconfirm placement="bottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+      <Popconfirm
+        placement="bottom"
+        title={text}
+        description={description}
+        onConfirm={confirm}
+        okText="Yes"
+        cancelText="No"
+      >
        <Button>Bottom</Button>
      </Popconfirm>
      <Popconfirm
        placement="bottomRight"
        title={text}
+        description={description}
        onConfirm={confirm}
        okText="Yes"
        cancelText="No"
--- a/components/popconfirm/demo/promise.tsx
+++ b/components/popconfirm/demo/promise.tsx
@@ -8,7 +8,12 @@ const App: React.FC = () => {
    });

  return (
-    <Popconfirm title="Title" onConfirm={confirm} onOpenChange={() => console.log('open change')}>
+    <Popconfirm
+      title="Title"
+      description="Open Popconfirm with Promise"
+      onConfirm={confirm}
+      onOpenChange={() => console.log('open change')}
+    >
      <Button type="primary">Open Popconfirm with Promise</Button>
    </Popconfirm>
  );
--- a/components/popconfirm/demo/render-panel.tsx
+++ b/components/popconfirm/demo/render-panel.tsx
@@ -5,8 +5,13 @@ const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopconfirm } = Popconfir

 const App: React.FC = () => (
  <>
-    <InternalPopconfirm title="Are you OK?" />
-    <InternalPopconfirm title="Are you OK?" placement="bottomRight" style={{ width: 250 }} />
+    <InternalPopconfirm title="Are you OK?" description="Does this look good?" />
+    <InternalPopconfirm
+      title="Are you OK?"
+      description="Does this look good?"
+      placement="bottomRight"
+      style={{ width: 250 }}
+    />
  </>
 );

--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@@ -41,6 +41,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 | okType | Button `type` of the Confirm button | string | `primary` |  |
 | showCancel | Show cancel button | boolean | true | 4.18.0 |
 | title | The title of the confirmation box | ReactNode \| () => ReactNode | - |  |
+| description | The description of the confirmation box title | ReactNode \| () => ReactNode | - | 5.1.0 |
 | onCancel | A callback of cancel | function(e) | - |  |
 | onConfirm | A callback of confirmation | function(e) | - |  |

--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -15,6 +15,7 @@ import usePopconfirmStyle from './style';

 export interface PopconfirmProps extends AbstractTooltipProps {
  title: React.ReactNode | RenderFunction;
+  description?: React.ReactNode | RenderFunction;
  disabled?: boolean;
  onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
  onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -41,7 +41,8 @@ demo:
 | okText | 确认按钮文字 | string | `确定` |  |
 | okType | 确认按钮类型 | string | `primary` |  |
 | showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
-| title | 确认框的描述 | ReactNode \| () => ReactNode | - |  |
+| title | 确认框标题 | ReactNode \| () => ReactNode | - |  |
+| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
 | onCancel | 点击取消的回调 | function(e) | - |  |
 | onConfirm | 点击确认的回调 | function(e) | - |  |

--- a/components/popconfirm/style/index.tsx
+++ b/components/popconfirm/style/index.tsx
@@ -17,6 +17,7 @@ const genBaseStyle: GenerateStyle<PopconfirmToken> = (token) => {
    colorWarning,
    marginXS,
    fontSize,
+    fontWeightStrong,
    lineHeight,
  } = token;

@@ -49,6 +50,18 @@ const genBaseStyle: GenerateStyle<PopconfirmToken> = (token) => {
          flex: 'auto',
          marginInlineStart: marginXS,
        },
+
+        '&-title-only': {
+          fontWeight: fontWeightStrong,
+        },
+      },
+
+      [`${componentCls}-description`]: {
+        position: 'relative',
+        marginInlineStart: fontSize + marginXS,
+        marginBottom: marginXS,
+        color: colorText,
+        fontSize,
      },

      [`${componentCls}-buttons`]: {