feat(popconfirm): make title bold and add description prop

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,15 @@ 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>
+          <div className={`${prefixCls}-description`}>{getRenderPropValue(description)}</div>
           <div className={`${prefixCls}-buttons`}>
             {showCancel && (
               <Button onClick={onCancel} size="small" {...cancelButtonProps}>

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 }}

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="删除任务"
+    description="Are you sure to delete this task?"
     onConfirm={confirm}
     onCancel={cancel}
     okText="Yes"

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="删除任务"
+        description="Are you sure delete this task?"
         open={open}
         onOpenChange={handleOpenChange}
         onConfirm={confirm}

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="删除任务"
+    description="Are you sure？"
+    icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+  >
     <a href="#">Delete</a>
   </Popconfirm>
 );

components/popconfirm/demo/locale.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popconfirm } from 'antd';
 
 const App: React.FC = () => (
-  <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
+  <Popconfirm title="删除任务" description="Are you sure？" okText="Yes" cancelText="No">
     <a href="#">Delete</a>
   </Popconfirm>
 );

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 = '删除任务';
 
 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"

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>
   );

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="你还好吗" description="Are you OK?" />
+    <InternalPopconfirm
+      title="你还好吗"
+      description="Are you OK?"
+      placement="bottomRight"
+      style={{ width: 250 }}
+    />
   </>
 );
 

components/popconfirm/index.en-US.md

@@ -40,6 +40,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 | - |  |
+| title | The description of the confirmation box title | ReactNode \| () => ReactNode | - |  |
 | onCancel | A callback of cancel | function(e) | - |  |
 | onConfirm | A callback of confirmation | function(e) | - |  |
 

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;

components/popconfirm/index.zh-CN.md

@@ -41,6 +41,7 @@ demo:
 | okType | 确认按钮类型 | string | `primary` |  |
 | showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
 | title | 确认框的描述 | ReactNode \| () => ReactNode | - |  |
+| description | 对确认框标题的描述 | ReactNode \| () => ReactNode | - |  |
 | onCancel | 点击取消的回调 | function(e) | - |  |
 | onConfirm | 点击确认的回调 | function(e) | - |  |
 

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`]: {