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

@@ -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';

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 });

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%',
           },
         },