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

ant-design · Dec 5, 2022 · 0b77614 · 0b77614
1 parent 9147c97
commit 0b77614
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 }}
+    />
   </>
 );