feat: update alert

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'affix', // dev components
+    componentName: 'alert', // dev components
   },
 };

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

@@ -7,7 +7,7 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
       </svg></i><span class="ant-alert-message">Warning text</span><span class="ant-alert-description"></span></div> <br>
   <div data-show="true" class="ant-alert ant-alert-warning ant-alert-banner ant-alert-closable"><i aria-label="icon: exclamation-circle" class="ant-alert-icon anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
         <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
-      </svg></i><span class="ant-alert-message">Very long warning text warning text text text text text text text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+      </svg></i><span class="ant-alert-message">Very long warning text warning text text text text text text text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
           <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
         </svg></i></a></div> <br>
   <div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-banner"><span class="ant-alert-message">Warning text without icon</span><span class="ant-alert-description"></span></div> <br>
@@ -21,16 +21,16 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `<div data-sho
 
 exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
 <div>
-  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
           <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
         </svg></i></a></div>
-  <div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Error Text</span><span class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+  <div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Error Text</span><span class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
           <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
         </svg></i></a></div>
 </div>
 `;
 
-exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `<div data-show="true" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Info Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon">Close Now</a></div>`;
+exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `<div data-show="true" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Info Text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><span class="ant-alert-close-text">Close Now</span></a></div>`;
 
 exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
 <div>
@@ -92,7 +92,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
 
 exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
 <div>
-  <div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Alert Message Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+  <div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Alert Message Text</span><span class="ant-alert-description"></span><a type="button" tabindex="0" class="ant-alert-close-icon"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
           <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
         </svg></i></a></div>
 </div>

components/alert/__tests__/index.test.js

@@ -28,10 +28,10 @@ describe('Alert', () => {
       },
     });
     wrapper.find('.ant-alert-close-icon').trigger('click');
-    expect(onClose).toBeCalled();
+    expect(onClose).toHaveBeenCalled();
     jest.runAllTimers();
     wrapper.vm.$refs.alert.animationEnd();
-    expect(afterClose).toBeCalled();
+    expect(afterClose).toHaveBeenCalled();
   });
 
   describe('data and aria props', () => {

components/alert/index.en-US.md

@@ -1,19 +1,19 @@
 ## API
 
-| Property | Description | Type | Default |
+| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
-| afterClose | Called when close animation is finished | () => void | - |
+| afterClose | Called when close animation is finished | () => void | - | - |
-| banner | Whether to show as banner | boolean | false |
+| banner | Whether to show as banner | boolean | false | - |
-| closable | Whether Alert can be closed | boolean | - |
+| closable | Whether Alert can be closed | boolean | - | - |
-| closeText | Close text to show | string\|slot | - |
+| closeText | Close text to show | string\|slot | - | - |
-| description | Additional content of Alert | string\|slot | - |
+| description | Additional content of Alert | string\|slot | - | - |
-| icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - |
+| icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - | - |
-| message | Content of Alert | string\|slot | - |
+| message | Content of Alert | string\|slot | - | - |
-| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
+| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | - |
-| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
+| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` | - |
 
 ### events
 
-| Events Name | Description                   | Arguments               |
+| Events Name | Description                   | Arguments               | Version |
-| ----------- | ----------------------------- | ----------------------- |
+| ----------- | ----------------------------- | ----------------------- | ------- |
-| close       | Callback when Alert is closed | (e: MouseEvent) => void |
+| close       | Callback when Alert is closed | (e: MouseEvent) => void | -       |

components/alert/index.jsx

@@ -7,6 +7,7 @@ import { getComponentFromProp, isValidElement } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
+
 function noop() {}
 export const AlertProps = {
   /**
@@ -42,7 +43,7 @@ const Alert = {
   },
   data() {
     return {
-      closing: true,
+      closing: false,
       closed: false,
     };
   },
@@ -56,14 +57,14 @@ const Alert = {
       dom.style.height = `${dom.offsetHeight}px`;
 
       this.setState({
-        closing: false,
+        closing: true,
       });
       this.$emit('close', e);
     },
     animationEnd() {
       this.setState({
+        closing: false,
         closed: true,
-        closing: true,
       });
       this.afterClose();
     },
@@ -84,8 +85,7 @@ const Alert = {
     // banner模式默认为警告
     type = banner && type === undefined ? 'warning' : type || 'info';
     let iconTheme = 'filled';
-    // should we give a warning?
+
-    // warning(!iconType, `The property 'iconType' is deprecated. Use the property 'icon' instead.`);
     if (!iconType) {
       switch (type) {
         case 'success':
@@ -117,7 +117,7 @@ const Alert = {
 
     const alertCls = classNames(prefixCls, {
       [`${prefixCls}-${type}`]: true,
-      [`${prefixCls}-close`]: !closing,
+      [`${prefixCls}-closing`]: closing,
       [`${prefixCls}-with-description`]: !!description,
       [`${prefixCls}-no-icon`]: !showIcon,
       [`${prefixCls}-banner`]: !!banner,
@@ -125,8 +125,12 @@ const Alert = {
     });
 
     const closeIcon = closable ? (
-      <a onClick={this.handleClose} class={`${prefixCls}-close-icon`}>
+      <a type="button" onClick={this.handleClose} class={`${prefixCls}-close-icon`} tabIndex={0}>
-        {closeText || <Icon type="close" />}
+        {closeText ? (
+          <span class={`${prefixCls}-close-text`}>{closeText}</span>
+        ) : (
+          <Icon type="close" />
+        )}
       </a>
     ) : null;
 
@@ -145,7 +149,7 @@ const Alert = {
     });
     return closed ? null : (
       <transition {...transitionProps}>
-        <div v-show={closing} class={alertCls} data-show={closing}>
+        <div v-show={!closing} class={alertCls} data-show={!closing}>
           {showIcon ? iconNode : null}
           <span class={`${prefixCls}-message`}>{message}</span>
           <span class={`${prefixCls}-description`}>{description}</span>

components/alert/index.zh-CN.md

@@ -1,19 +1,19 @@
 ## API
 
-| 参数 | 说明 | 类型 | 默认值 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
-| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
+| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | - |
-| banner | 是否用作顶部公告 | boolean | false |
+| banner | 是否用作顶部公告 | boolean | false | - |
-| closable | 默认不显示关闭按钮 | boolean | 无 |
+| closable | 默认不显示关闭按钮 | boolean | 无 | - |
-| closeText | 自定义关闭按钮 | string\|slot | 无 |
+| closeText | 自定义关闭按钮 | string\|slot | 无 | - |
-| description | 警告提示的辅助性文字介绍 | string\|slot | 无 |
+| description | 警告提示的辅助性文字介绍 | string\|slot | 无 | - |
-| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode \| slot | - |
+| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode \| slot | - | - |
-| message | 警告提示内容 | string\|slot | 无 |
+| message | 警告提示内容 | string\|slot | 无 | - |
-| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
+| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | - |
-| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
+| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | - |
 
 ### 事件
 
-| 事件名称 | 说明                 | 回调参数                |
+| 事件名称 | 说明                 | 回调参数                | 版本 |
-| -------- | -------------------- | ----------------------- |
+| -------- | -------------------- | ----------------------- | ---- |
-| close    | 关闭时触发的回调函数 | (e: MouseEvent) => void |
+| close    | 关闭时触发的回调函数 | (e: MouseEvent) => void | -    |