demo: update Alert deprecated api (#55472)

.dumi/pages/index/components/BannerRecommends.tsx

@@ -155,7 +155,7 @@ const BannerRecommends: React.FC = () => {
       <Alert
         showIcon
         type="error"
-        message={error.message}
+        title={error.message}
         description={process.env.NODE_ENV !== 'production' ? error.stack : undefined}
       />
     );

.dumi/theme/builtins/ResourceArticles/index.tsx

@@ -156,7 +156,7 @@ const ResourceArticles: React.FC = () => {
       <Alert
         showIcon
         type="error"
-        message={error.message}
+        title={error.message}
         description={process.env.NODE_ENV !== 'production' ? error.stack : undefined}
       />
     );

.dumi/theme/slots/Header/index.tsx

@@ -412,9 +412,8 @@ const Header: React.FC = () => {
             }
             type="info"
             banner
-            closable
             showIcon={false}
-            onClose={onBannerClose}
+            closable={{ closeIcon: true, onClose: onBannerClose }}
           />
         </ConfigProvider>
       )}

components/alert/design/demo/action.tsx

@@ -54,22 +54,21 @@ const locales = {
 
 const Demo: React.FC = () => {
   const [locale] = useLocale(locales);
-
   const [expandA, setExpandA] = React.useState(false);
   const [expandB, setExpandB] = React.useState(true);
   return (
     <Flex gap="large" vertical style={{ maxWidth: 600 }}>
       <Flex gap="middle" vertical>
         <div>{locale.closeAlertTitle}</div>
-        <Alert showIcon closable message={locale.welcomeMessage} />
-        <Alert showIcon closable message={locale.helpTitle} description={locale.helpDescription} />
+        <Alert showIcon closable title={locale.welcomeMessage} />
+        <Alert showIcon closable title={locale.helpTitle} description={locale.helpDescription} />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.expandCollapseTitle}</div>
         <Alert
           showIcon
           closable
-          message={
+          title={
             <div>
               <Typography.Paragraph ellipsis={!expandA && { rows: 2 }} style={{ marginBottom: 8 }}>
                 {locale.longMessage}
@@ -84,7 +83,7 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           closable
-          message={
+          title={
             <div>
               <Typography.Paragraph ellipsis={!expandB && { rows: 2 }} style={{ marginBottom: 8 }}>
                 {locale.longMessage}
@@ -102,13 +101,13 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           closable
-          message={locale.singleLineMessage}
+          title={locale.singleLineMessage}
           action={<Typography.Link>{locale.relatedAction}</Typography.Link>}
         />
         <Alert
           showIcon
           closable
-          message={
+          title={
             <div>
               <Typography.Paragraph style={{ marginBottom: 8 }}>
                 {locale.multiLineMessage}
@@ -124,7 +123,7 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           closable
-          message={locale.alertTitle}
+          title={locale.alertTitle}
           description={
             <div>
               <Typography.Paragraph style={{ marginBottom: 8 }}>

components/alert/design/demo/content.tsx

@@ -23,8 +23,8 @@ const Demo: React.FC = () => {
   const [locale] = useLocale(locales);
   return (
     <Flex gap="middle" vertical style={{ maxWidth: 600 }}>
-      <Alert message={locale.welcomeMessage} />
-      <Alert message={locale.helpTitle} description={locale.helpDescription} />
+      <Alert title={locale.welcomeMessage} />
+      <Alert title={locale.helpTitle} description={locale.helpDescription} />
     </Flex>
   );
 };

components/alert/design/demo/type.tsx

@@ -63,37 +63,37 @@ const Demo: React.FC = () => {
         <Alert
           showIcon
           type="success"
-          message={locale.successMessage2}
+          title={locale.successMessage2}
           description={locale.successDescription2}
         />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.infoTitle}</div>
-        <Alert showIcon type="info" message={locale.infoMessage1} />
+        <Alert showIcon type="info" title={locale.infoMessage1} />
         <Alert
           showIcon
           type="info"
-          message={locale.infoMessage2}
+          title={locale.infoMessage2}
           description={locale.infoDescription2}
         />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.warningTitle}</div>
-        <Alert showIcon type="warning" message={locale.warningMessage1} />
+        <Alert showIcon type="warning" title={locale.warningMessage1} />
         <Alert
           showIcon
           type="warning"
-          message={locale.warningMessage2}
+          title={locale.warningMessage2}
           description={locale.warningDescription2}
         />
       </Flex>
       <Flex gap="middle" vertical>
         <div>{locale.errorTitle}</div>
-        <Alert showIcon type="error" message={locale.errorMessage1} />
+        <Alert showIcon type="error" title={locale.errorMessage1} />
         <Alert
           showIcon
           type="error"
-          message={locale.errorMessage2}
+          title={locale.errorMessage2}
           description={locale.errorDescription2}
         />
       </Flex>

components/config-provider/__tests__/style.test.tsx

@@ -987,12 +987,8 @@ describe('ConfigProvider support style and className props', () => {
 
   it('Should Alert style works', () => {
     const { container } = render(
-      <ConfigProvider
-        alert={{
-          style: { color: 'rgb(255, 0, 0)' },
-        }}
-      >
-        <Alert style={{ fontSize: '16px' }} message="Test Message" />
+      <ConfigProvider alert={{ style: { color: 'rgb(255, 0, 0)' } }}>
+        <Alert style={{ fontSize: '16px' }} title="Test Message" />
       </ConfigProvider>,
     );