fix: Alert message could be nullable (#32057)

* fix: Alert message could be nullable

close #32047

* update snapshot

components/alert/__tests__/__snapshots__/demo.test.ts.snap

@@ -34,9 +34,6 @@ Array [
       >
         Success Tips
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <div
       class="ant-alert-action"
@@ -143,9 +140,6 @@ Array [
       >
         Warning Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <div
       class="ant-alert-action"
@@ -308,9 +302,6 @@ Array [
       >
         Warning text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <br />,
@@ -346,9 +337,6 @@ Array [
       >
         Very long warning text warning text text text text text text text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -390,9 +378,6 @@ Array [
       >
         Warning text without icon
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <br />,
@@ -428,9 +413,6 @@ Array [
       >
         Error text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
 ]
@@ -450,9 +432,6 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
     >
       Success Text
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -472,9 +451,6 @@ Array [
       >
         Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -564,9 +540,6 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
     >
       Info Text
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
   <button
     class="ant-alert-close-icon"
@@ -597,9 +570,6 @@ Array [
       >
         showIcon = false
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -634,9 +604,6 @@ Array [
       >
         Success Tips
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -671,9 +638,6 @@ Array [
       >
         Informational Notes
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -708,9 +672,6 @@ Array [
       >
         Warning
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -745,9 +706,6 @@ Array [
       >
         Error
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1039,9 +997,6 @@ Array [
       >
         Success Tips
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1076,9 +1031,6 @@ Array [
       >
         Informational Notes
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1113,9 +1065,6 @@ Array [
       >
         Warning
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -1175,9 +1124,6 @@ Array [
       >
         Error
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1424,9 +1370,6 @@ exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -1446,9 +1389,6 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
       >
         Alert Message Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
     <button
       class="ant-alert-close-icon"
@@ -1497,9 +1437,6 @@ Array [
       >
         Success Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1515,9 +1452,6 @@ Array [
       >
         Info Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1533,9 +1467,6 @@ Array [
       >
         Warning Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div
@@ -1551,9 +1482,6 @@ Array [
       >
         Error Text
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
 ]

components/alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -33,9 +33,6 @@ exports[`Alert action of Alert custom action 1`] = `
     >
       Success Tips
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
   <div
     class="ant-alert-action"
@@ -96,9 +93,6 @@ exports[`Alert could accept none react element icon 1`] = `
     >
       Success Tips
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -111,13 +105,6 @@ exports[`Alert rtl render component should be rendered correctly in RTL directio
 >
   <div
     class="ant-alert-content"
-  >
-    <div
-      class="ant-alert-message"
-    />
-    <div
-      class="ant-alert-description"
-    />
-  </div>
+  />
 </div>
 `;

components/alert/__tests__/index.test.tsx

@@ -76,6 +76,8 @@ describe('Alert', () => {
   });
 
   it('ErrorBoundary', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    expect(console.error).toBeCalledTimes(0);
     // @ts-expect-error
     // eslint-disable-next-line react/jsx-no-undef
     const ThrowError = () => <NotExisted />;
@@ -86,6 +88,8 @@ describe('Alert', () => {
     );
     // eslint-disable-next-line jest/no-standalone-expect
     expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined');
+    // eslint-disable-next-line no-console
+    (console.error as any).mockRestore();
   });
 
   it('could be used with Tooltip', async () => {
@@ -126,4 +130,9 @@ describe('Alert', () => {
     const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
     expect(wrapper).toMatchRenderedSnapshot();
   });
+
+  it('should not render message div when no message', () => {
+    const wrapper = mount(<Alert description="description" />);
+    expect(wrapper.exists('.ant-alert-message')).toBe(false);
+  });
 });

components/alert/index.tsx

@@ -24,7 +24,7 @@ export interface AlertProps {
   /** Close text to show */
   closeText?: React.ReactNode;
   /** Content of Alert */
-  message: React.ReactNode;
+  message?: React.ReactNode;
   /** Additional content of Alert */
   description?: React.ReactNode;
   /** Callback when close Alert */
@@ -177,12 +177,10 @@ const Alert: AlertInterface = ({
         >
           {isShowIcon ? renderIconNode() : null}
           <div className={`${prefixCls}-content`}>
-            <div className={`${prefixCls}-message`}>{message}</div>
-            <div className={`${prefixCls}-description`}>{description}</div>
+            {message ? <div className={`${prefixCls}-message`}>{message}</div> : null}
+            {description ? <div className={`${prefixCls}-description`}>{description}</div> : null}
           </div>
-
           {action ? <div className={`${prefixCls}-action`}>{action}</div> : null}
-
           {renderCloseIcon()}
         </div>
       )}

components/calendar/__tests__/__snapshots__/demo.test.js.snap

@@ -4213,9 +4213,6 @@ Array [
       >
         You selected date: 2017-01-25
       </div>
-      <div
-        class="ant-alert-description"
-      />
     </div>
   </div>,
   <div

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -14,9 +14,6 @@ exports[`ConfigProvider components Alert configProvider 1`] = `
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="config-alert-description"
-    />
   </div>
 </div>
 `;
@@ -35,9 +32,6 @@ exports[`ConfigProvider components Alert configProvider componentSize large 1`]
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="config-alert-description"
-    />
   </div>
 </div>
 `;
@@ -56,9 +50,6 @@ exports[`ConfigProvider components Alert configProvider componentSize middle 1`]
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="config-alert-description"
-    />
   </div>
 </div>
 `;
@@ -77,9 +68,6 @@ exports[`ConfigProvider components Alert configProvider virtual and dropdownMatc
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -98,9 +86,6 @@ exports[`ConfigProvider components Alert normal 1`] = `
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="ant-alert-description"
-    />
   </div>
 </div>
 `;
@@ -119,9 +104,6 @@ exports[`ConfigProvider components Alert prefixCls 1`] = `
     >
       Bamboo is Little Light
     </div>
-    <div
-      class="prefix-Alert-description"
-    />
   </div>
 </div>
 `;