From a8fc6e893a2d924b494941a575bc0825add00596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 13 Sep 2022 18:09:58 +0800
Subject: [PATCH] fix: Fix icon set `null` not hide icon (#37532)

* fix: Modal confirm can set icon to null

* test: add test case
---
 components/modal/ConfirmDialog.tsx          |  5 +++--
 components/modal/__tests__/confirm.test.tsx | 22 +++++++++++++++++++++
 components/modal/style/index.tsx            |  8 ++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index 9b864d8ec9..38d041795d 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/components/modal/ConfirmDialog.tsx
@@ -54,7 +54,9 @@ export function ConfirmContent(
 
   // Icon
   let mergedIcon: React.ReactNode = icon;
-  if (!icon) {
+
+  // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
+  if (!icon && icon !== null) {
     switch (type) {
       case 'info':
         mergedIcon = <InfoCircleFilled />;
@@ -73,7 +75,6 @@ export function ConfirmContent(
     }
   }
 
-  // 支持传入{ icon: null }来隐藏`Modal.confirm`默认的Icon
   const okType = props.okType || 'primary';
   // 默认为 true，保持向下兼容
   const mergedOkCancel = okCancel ?? type === 'confirm';
diff --git a/components/modal/__tests__/confirm.test.tsx b/components/modal/__tests__/confirm.test.tsx
index 27eb575262..e4823687dc 100644
--- a/components/modal/__tests__/confirm.test.tsx
+++ b/components/modal/__tests__/confirm.test.tsx
@@ -570,6 +570,28 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
+  it('icon can be null to hide icon', async () => {
+    jest.useFakeTimers();
+    confirm({
+      title: 'some title',
+      content: 'some descriptions',
+      icon: null,
+    });
+
+    await act(async () => {
+      jest.runAllTimers();
+      await sleep();
+    });
+
+    // We check icon is not exist in the body
+    expect(document.querySelector('.ant-modal-confirm-body')!.children).toHaveLength(2);
+    expect(
+      document.querySelector('.ant-modal-confirm-body')!.querySelector('.anticon'),
+    ).toBeFalsy();
+
+    jest.useRealTimers();
+  });
+
   it('ok button should trigger onOk once when click it many times quickly', async () => {
     const onOk = jest.fn();
     open({ onOk });
diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
index 6828613859..00456c9fa1 100644
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -262,7 +262,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
         alignItems: 'center',
 
         [`${confirmComponentCls}-title`]: {
-          flex: 1,
+          flex: '0 0 100%',
           display: 'block',
           // create BFC to avoid
           // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
@@ -276,6 +276,7 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
         [`${confirmComponentCls}-content`]: {
           color: token.colorText,
           fontSize: token.fontSizeBase,
+          marginBlockStart: token.marginXS,
         },
 
         [`> ${token.iconCls}`]: {
@@ -283,10 +284,13 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = token => {
           marginInlineEnd: token.marginSM,
           fontSize: token.modalConfirmIconSize,
 
+          [`+ ${confirmComponentCls}-title`]: {
+            flex: 1,
+          },
+
           // `content` after `icon` should set marginLeft
           [`+ ${confirmComponentCls}-title + ${confirmComponentCls}-content`]: {
             marginInlineStart: token.modalConfirmIconSize + token.marginSM,
-            marginBlockStart: token.marginXS,
             flexBasis: '100%',
           },
         },