feat: update alert

components/affix/demo/index.vue

@@ -21,6 +21,7 @@ Please note that Affix should not cover other content on the page, especially wh
 export default {
   category: 'Components',
   subtitle: '固钉',
+  zhType: '导航',
   type: 'Navigation',
   title: 'Affix',
   render () {

components/affix/index.jsx

@@ -147,8 +147,8 @@ const Affix = {
     },
 
     updatePosition (e) {
-      let { offsetTop } = this
       const { offsetBottom, offset, target = getDefaultTarget } = this
+      let { offsetTop } = this
       const targetNode = target()
 
       // Backwards support

components/alert/demo/custom-icon.md

@@ -0,0 +1,63 @@
+<cn>
+#### 自定义图标
+可口的图标让信息类型更加醒目。
+</cn>
+
+<us>
+#### Custom Icon
+Decent icon make information more clear and more friendly.
+</us>
+
+```html
+<template>
+  <div>
+    <a-alert message="showIcon = false" type="success" >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert message="Success Tips" type="success" showIcon >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert message="Informational Notes" type="info" showIcon >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert message="Warning" type="warning" showIcon >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert message="Error" type="error" showIcon >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert
+      message="Success Tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      showIcon
+    >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert
+      message="Informational Notes"
+      description="Additional description and informations about copywriting."
+      type="info"
+      showIcon
+    >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert
+      message="Warning"
+      description="This is a warning notice about copywriting."
+      type="warning"
+      showIcon
+    >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+    <a-alert
+      message="Error"
+      description="This is an error message about copywriting."
+      type="error"
+      showIcon
+    >
+      <a-icon type="smile" slot="icon" />
+    </a-alert>
+  </div>
+</template>
+```

components/alert/demo/index.vue

@@ -29,6 +29,7 @@ export default {
   category: 'Components',
   subtitle: '警告提示',
   type: 'Feedback',
+  zhType: '反馈',
   title: 'Alert',
   render () {
     return (

components/alert/demo/smooth-closed.md

@@ -1,6 +1,6 @@
 <cn>
 #### 平滑地卸载
-平滑、自然的卸载提示
+平滑、自然的卸载提示。
 </cn>
 
 <us>

components/alert/index.en-US.md

@@ -8,7 +8,7 @@
 | closable | Whether Alert can be closed | boolean | - |
 | closeText | Close text to show | string\|slot | - |
 | description | Additional content of Alert | string\|slot | - |
-| iconType | Icon type, effective when `showIcon` is `true` | string | - |
+| icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - |
 | message | Content of Alert | string\|slot | - |
 | 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` |

components/alert/index.jsx

@@ -4,7 +4,8 @@ import classNames from 'classnames'
 import BaseMixin from '../_util/BaseMixin'
 import PropTypes from '../_util/vue-types'
 import getTransitionProps from '../_util/getTransitionProps'
-import { getComponentFromProp } from '../_util/props-util'
+import { getComponentFromProp, isValidElement } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
 function noop () { }
 export const AlertProps = {
   /**
@@ -28,6 +29,7 @@ export const AlertProps = {
   iconType: PropTypes.string,
   prefixCls: PropTypes.string,
   banner: PropTypes.bool,
+  icon: PropTypes.any,
 }
 
 const Alert = {
@@ -69,11 +71,14 @@ const Alert = {
     const closeText = getComponentFromProp(this, 'closeText')
     const description = getComponentFromProp(this, 'description')
     const message = getComponentFromProp(this, 'message')
+    const icon = getComponentFromProp(this, 'icon')
     // banner模式默认有 Icon
     showIcon = banner && showIcon === undefined ? true : showIcon
     // 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':
@@ -83,7 +88,7 @@ const Alert = {
           iconType = 'info-circle'
           break
         case 'error':
-          iconType = 'cross-circle'
+          iconType = 'close-circle'
           break
         case 'warning':
           iconType = 'exclamation-circle'
@@ -94,7 +99,7 @@ const Alert = {
 
       // use outline icon in alert with description
       if (description) {
-        iconType += '-o'
+        iconTheme = 'outlined'
       }
     }
 
@@ -113,9 +118,21 @@ const Alert = {
 
     const closeIcon = closable ? (
       <a onClick={this.handleClose} class={`${prefixCls}-close-icon`}>
-        {closeText || <Icon type='cross' />}
+        {closeText || <Icon type='close' />}
       </a>
     ) : null
+
+    const iconNode = icon && (
+      isValidElement(icon)
+        ? cloneElement(
+          icon,
+          {
+            class: `${prefixCls}-icon`,
+          },
+        ) : <span class={`${prefixCls}-icon`}>{icon}</span>) || (
+      <Icon class={`${prefixCls}-icon`} type={iconType} theme={iconTheme} />
+    )
+
     const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, {
       appear: false,
       afterLeave: this.animationEnd,
@@ -123,7 +140,7 @@ const Alert = {
     return closed ? null : (
       <transition {...transitionProps}>
         <div v-show={closing} class={alertCls} data-show={closing}>
-          {showIcon ? <Icon class={`${prefixCls}-icon`} type={iconType} /> : null}
+          {showIcon ? iconNode : null}
           <span class={`${prefixCls}-message`}>{message}</span>
           <span class={`${prefixCls}-description`}>{description}</span>
           {closeIcon}

components/alert/index.zh-CN.md

@@ -8,7 +8,7 @@
 | closable | 默认不显示关闭按钮 | boolean | 无 |
 | closeText | 自定义关闭按钮 | string\|slot | 无 |
 | description | 警告提示的辅助性文字介绍 | string\|slot | 无 |
-| iconType | 自定义图标类型，`showIcon` 为 `true` 时有效 | string | - |
+| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode \| slot | - |
 | message | 警告提示内容 | string\|slot | 无 |
 | showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
 | type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |