diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 78482fbad2d5..59a4a7a41fb7 100644 --- 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 | <QuestionCircle /> | | | keyboard | Whether support press esc to close | boolean | true | | diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index da5f803a5340..2f700f388a68 100644 --- 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 | <QuestionCircle /> | | | keyboard | 是否支持键盘 esc 关闭 | boolean | true | | diff --git a/components/popconfirm/PurePanel.tsx b/components/popconfirm/PurePanel.tsx index 3a6bc0efc792..9fb6bedee322 100644 --- 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 = (props) => { okButtonProps, cancelButtonProps, title, + description, cancelText, okText, okType = 'primary', @@ -60,8 +62,17 @@ export const Overlay: React.FC = (props) => {
{icon && {icon}} -
{getRenderPropValue(title)}
+
+ {getRenderPropValue(title)} +
+ {description && ( +
{getRenderPropValue(description)}
+ )}
{showCancel && (
+
+ Open Popconfirm with async logic +
@@ -155,11 +160,16 @@ Array [
- Are you sure to delete this task? + Delete the task
+
+ Are you sure to delete this task? +
@@ -248,11 +258,16 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.tsx extend context
- Are you sure delete this task? + Delete the task
+
+ Are you sure to delete this task? +
@@ -368,11 +383,16 @@ Array [
- Are you sure？ + Delete the task
+
+ Are you sure to delete this task? +
@@ -461,11 +481,16 @@ Array [
- Are you sure？ + Delete the task
+
+ Are you sure to delete this task? +
@@ -562,11 +587,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -653,11 +683,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -744,11 +779,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -839,11 +879,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -930,11 +975,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1021,11 +1071,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1116,11 +1171,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1207,11 +1267,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1298,11 +1363,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1393,11 +1463,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1484,11 +1559,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1575,11 +1655,16 @@ exports[`renders ./components/popconfirm/demo/placement.tsx extend context corre
Are you sure to delete this task?
+
+ Delete the task +
@@ -1672,11 +1757,16 @@ Array [
Title
+
+ Open Popconfirm with Promise +
@@ -1754,11 +1844,16 @@ Array [
Are you OK?
+
+ Does this look good? +
@@ -1832,11 +1927,16 @@ Array [
Are you OK?
+
+ Does this look good? +
diff --git a/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap b/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap index eb4fd32ea214..90dd6ef5b8fa 100644 --- a/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/popconfirm/__tests__/__snapshots__/demo.test.ts.snap @@ -246,11 +246,16 @@ Array [
Are you OK?
+
+ Does this look good? +
@@ -324,11 +329,16 @@ Array [
Are you OK?
+
+ Does this look good? +
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 ( `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`. diff --git a/components/popconfirm/demo/basic.tsx b/components/popconfirm/demo/basic.tsx index df18918abee5..70a999ad0190 100644 --- a/components/popconfirm/demo/basic.tsx +++ b/components/popconfirm/demo/basic.tsx @@ -13,7 +13,8 @@ const cancel = (e: React.MouseEvent) => { const App: React.FC = () => ( { return (
( - }> + } + > Delete ); diff --git a/components/popconfirm/demo/locale.tsx b/components/popconfirm/demo/locale.tsx index 478648e1fe77..3934e1de5512 100644 --- 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 = () => ( - + Delete ); diff --git a/components/popconfirm/demo/placement.tsx b/components/popconfirm/demo/placement.tsx index 0f395e5ec3d4..eb96641b4cd0 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 = 'Delete the task'; const confirm = () => { message.info('Clicked on Yes.'); @@ -10,15 +11,30 @@ const confirm = () => { const App: React.FC = () => (
- + - + (
- + - + ( - + ( - + { }); return ( - console.log('open change')}> + console.log('open change')} + > ); diff --git a/components/popconfirm/demo/render-panel.tsx b/components/popconfirm/demo/render-panel.tsx index 9fed2a6ba902..cb91a85c7f46 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 = () => ( <> - - + + ); diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md index 00714547ace3..738676f0de87 100644 --- 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) | - | | diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index cf0a4651ae1e..b33085e00ef0 100644 --- 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) => void; onCancel?: (e?: React.MouseEvent) => void; diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 35b3768fd8e6..fb89978d4b25 100644 --- 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) | - | | diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx index 8117e0a55cfa..324bbdac207e 100644 --- a/components/popconfirm/style/index.tsx +++ b/components/popconfirm/style/index.tsx @@ -17,6 +17,7 @@ const genBaseStyle: GenerateStyle = (token) => { colorWarning, marginXS, fontSize, + fontWeightStrong, lineHeight, } = token; @@ -49,6 +50,18 @@ const genBaseStyle: GenerateStyle = (token) => { flex: 'auto', marginInlineStart: marginXS, }, + + '&-title-only': { + fontWeight: fontWeightStrong, + }, + }, + + [`${componentCls}-description`]: { + position: 'relative', + marginInlineStart: fontSize + marginXS, + marginBottom: marginXS, + color: colorText, + fontSize, }, [`${componentCls}-buttons`]: {