feat: Popconfirm title and description props

feat: Popconfirm title and description props(update partial docs) feat: Popconfirm title and description props(change the title display logicv) feat: Popconfirm title and description props(change the title display logic )2
ant-design · Dec 5, 2022 · c6728e0 · c6728e0
1 parent e85da35
commit c6728e0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 2 deletions.
diff --git 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,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}>

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

diff --git a/components/popconfirm/index.en-US.md b/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) | - |  |
 

diff --git 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;

diff --git a/components/popconfirm/index.zh-CN.md b/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) | - |  |
 

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