From 0b77614371cab9678437610f8c5e26af679df722 Mon Sep 17 00:00:00 2001
From: xuhuihui <xhh0409@outlook.com>
Date: Mon, 5 Dec 2022 13:50:24 +0800
Subject: [PATCH] feat(popconfirm): make title bold and add description
 prop(update demos)

---
 components/popconfirm/demo/async.tsx          |  1 +
 .../popconfirm/demo/dynamic-trigger.tsx       |  3 +-
 components/popconfirm/demo/icon.tsx           |  6 +-
 components/popconfirm/demo/locale.tsx         |  2 +-
 components/popconfirm/demo/placement.tsx      | 61 +++++++++++++++++--
 components/popconfirm/demo/promise.tsx        |  7 ++-
 components/popconfirm/demo/render-panel.tsx   |  9 ++-
 7 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/components/popconfirm/demo/async.tsx b/components/popconfirm/demo/async.tsx
index ced50a3d591d..7164cc9ccc06 100644
--- 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 }}
diff --git a/components/popconfirm/demo/dynamic-trigger.tsx b/components/popconfirm/demo/dynamic-trigger.tsx
index dd4c2980842b..ae23fd1f9d71 100644
--- 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="删除任务"
+        description="Are you sure delete this task?"
         open={open}
         onOpenChange={handleOpenChange}
         onConfirm={confirm}
diff --git a/components/popconfirm/demo/icon.tsx b/components/popconfirm/demo/icon.tsx
index 625b9556987a..703aab070d40 100644
--- 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="删除任务"
+    description="Are you sure？"
+    icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+  >
     <a href="#">Delete</a>
   </Popconfirm>
 );
diff --git a/components/popconfirm/demo/locale.tsx b/components/popconfirm/demo/locale.tsx
index 478648e1fe77..4ca4d4287d31 100644
--- a/components/popconfirm/demo/locale.tsx
+++ b/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>
 );
diff --git a/components/popconfirm/demo/placement.tsx b/components/popconfirm/demo/placement.tsx
index 0f395e5ec3d4..d7c6fd2db6d9 100644
--- 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 = '删除任务';
 
 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"
diff --git a/components/popconfirm/demo/promise.tsx b/components/popconfirm/demo/promise.tsx
index cad5d7a9a63e..bfdcf554950b 100644
--- 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>
   );
diff --git a/components/popconfirm/demo/render-panel.tsx b/components/popconfirm/demo/render-panel.tsx
index 9fed2a6ba902..ae57935fe986 100644
--- 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="你还好吗" description="Are you OK?" />
+    <InternalPopconfirm
+      title="你还好吗"
+      description="Are you OK?"
+      placement="bottomRight"
+      style={{ width: 250 }}
+    />
   </>
 );