Merge branch 'feat-3.10.3'

# Conflicts:
#	components/locale-provider/__tests__/__snapshots__/index.test.js.snap

.eslintignore

@@ -2,3 +2,4 @@ node_modules/
 **/*.spec.*
 **/style/
 *.html
+/components/test/*

CHANGELOG.en-US.md

@@ -2,6 +2,40 @@
 
 ---
 
+## 1.2.0
+`2018-12-16`
+### Synchronize with antd 3.10.x
+
+- 🔥🔥🔥 replaced font icons with svg icons which bring benefits below:：
+  - Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
+  - Much more display accuracy in lower-level screens.
+  - Support multiple colors for icon.
+  - No need to change built-in icons with overriding styles by providing more props in component.
+  - 🌟 Add the `theme` attribute to set the theme style of the icon.
+  - 🌟 Added `component` attribute, you can externally pass a component to customize the control rendering result. 
+  - 🌟 The `twoToneColor` property is added to control the theme color of the two-color icon.
+  - 🌟 Added static methods `Icon.getTowToneColor()` and `Icon.setTwoToneColor(...)` to globally get and set the theme color of all two-color icons.
+  - 🌟 The new static method `Icon.createFromIconfontCN({...})` is added to make it easier to use icons hosted on [`iconfont.cn`](http://iconfont.cn/).
+- 🔥 Added a new component `Skeleton`.
+- 🔥 Menu will automatically close up to fit width in `horizontal` mode.
+- 🔥 The `placement` of the drawer supports `top` and `bottom` to accommodate more scenes.
+- 🌟 The following components add a `suffixIcon` prop, which is used to set the icon behind the input box. For details, please refer to the documentation.
+  - Cascader
+  - DatePicker
+  - Select
+  - TreeSelect
+  - TimePicker
+- 🌟 Added Modal.open for optional icon dialog.
+- 🌟 Modal.info adds the configuration of `getContainer`.
+- 🌟 Improve RangePicker footer UI by merging them.
+- 🌟 The Anchor component adds `onClick` property.
+- 🌟 The Tab component adds the `renderTabBar` property.
+- 🌟 The Input component adds the `select` method.
+- 🌟 Steps adds the `initial` attribute.
+- 🌟 Upload adds `openFileDialogOnClick` prop to allow setting whether to open the upload dialog when the component is clicked.
+- 🌟 InputNumber adds `decimalSeparator` prop to allow setting a custom decimal.
+- 🐞 Fix a lot of hidden bugs that have not yet been issued, and then not list them one by one.
+
 ## 1.1.10
 
 `2018-12-7`

CHANGELOG.zh-CN.md

@@ -2,6 +2,40 @@
 
 ---
 
+## 1.2.0
+`2018-12-16`
+### 与antd 3.10.x同步
+
+- 🔥🔥🔥 使用了 svg 图标替换了原先的 font 图标，从而带来了以下优势：
+  可以离线化使用，不需要从支付宝 cdn 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
+  在低端设备上 svg 有更好的清晰度。
+  支持多色图标。
+  对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。
+  - 🌟 新增 `theme` 属性，可以设置图标的主题风格。
+  - 🌟 新增 `component` 属性，可以外部传入一个组件来自定义控制渲染结果。
+  - 🌟 新增 `twoToneColor` 属性，可以控制双色图标的主题色。
+  - 🌟 新增静态方法 `Icon.getTowToneColor()` 和 `Icon.setTwoToneColor(...)`，可以全局性的获取和设置所有双色图标的主题色。
+  - 🌟 新增静态方法 `Icon.createFromIconfontCN({...})`，可以更加方便地使用 [`iconfont.cn`](http://iconfont.cn/) 上托管的图标。
+- 🔥 增加了一个新组件`Skeleton`
+- 🔥 Menu 在 `horizontal` 模式下会自动收起来适应宽度。
+- 🔥 Drawer 的 `placement` 支持 `top` 和 `bottom`，可以适应更多场景。
+- 🌟 以下组件均新增了 `suffixIcon` 属性，用于设置输入框后面的图标，具体用法可以参考文档。
+  - Cascader
+  - DatePicker
+  - Select
+  - TreeSelect
+  - TimePicker
+- 🌟 新增 Modal.open 方法，用于可自定义图标的快捷对话框。
+- 🌟 Modal.info 增加 `getContainer` 的配置。
+- 🌟 合并优化了 RangePicker 的日历页脚 UI。
+- 🌟 Anchor 组件增加 `click` 事件。
+- 🌟 Tab 组件增加 `renderTabBar` 属性。
+- 🌟 Input 组件增加 `select` 方法。
+- 🌟 Steps 增加 `initial` 属性。
+- 🌟 Upload 组件新增 `openFileDialogOnClick` 属性，用于设置点击组件时是否打开上传对话框。
+- 🌟 InputNumber 组件新增 `decimalSeparator` 属性，用于设置自定义的小数点。
+- 🐞 修复众多隐蔽暂未提issue的bug，再此不在一一列出
+
 ## 1.1.10
 
 `2018-12-7`

components/_util/FormDecoratorDirective.js

@@ -1,7 +1,11 @@
+export function antDecorator (Vue) {
+  return Vue.directive('decorator', {
+  })
+}
+
 export default {
   // just for tag
   install: (Vue, options) => {
-    Vue.directive('decorator', {
+    antDecorator(Vue)
-    })
   },
 }

components/_util/antDirective.js

@@ -0,0 +1,9 @@
+import { antInput } from './antInputDirective'
+import { antDecorator } from './FormDecoratorDirective'
+
+export default {
+  install: (Vue, options) => {
+    antInput(Vue)
+    antDecorator(Vue)
+  },
+}

components/_util/antInputDirective.js

@@ -49,26 +49,30 @@ if (isIE9) {
   })
 }
 
-export default {
+export function antInput (Vue) {
-  install: (Vue, options) => {
+  return Vue.directive('ant-input', {
-    Vue.directive('ant-input', {
+    inserted (el, binding, vnode, oldVnode) {
-      inserted (el, binding, vnode, oldVnode) {
+      if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
-        if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
+        if (!binding.modifiers || !binding.modifiers.lazy) {
-          if (!binding.modifiers || !binding.modifiers.lazy) {
+          el.addEventListener('compositionstart', onCompositionStart)
-            el.addEventListener('compositionstart', onCompositionStart)
+          el.addEventListener('compositionend', onCompositionEnd)
-            el.addEventListener('compositionend', onCompositionEnd)
+          // Safari < 10.2 & UIWebView doesn't fire compositionend when
-            // Safari < 10.2 & UIWebView doesn't fire compositionend when
+          // switching focus before confirming composition choice
-            // switching focus before confirming composition choice
+          // this also fixes the issue where some browsers e.g. iOS Chrome
-            // this also fixes the issue where some browsers e.g. iOS Chrome
+          // fires "change" instead of "input" on autocomplete.
-            // fires "change" instead of "input" on autocomplete.
+          el.addEventListener('change', onCompositionEnd)
-            el.addEventListener('change', onCompositionEnd)
+          /* istanbul ignore if */
-            /* istanbul ignore if */
+          if (isIE9) {
-            if (isIE9) {
+            el.vmodel = true
-              el.vmodel = true
-            }
           }
         }
-      },
+      }
-    })
+    },
+  })
+}
+
+export default {
+  install: (Vue, options) => {
+    antInput(Vue)
   },
 }

components/_util/antRefDirective.js

@@ -1,15 +0,0 @@
-export default {
-  install: (Vue, options) => {
-    Vue.directive('ant-ref', {
-      bind: function (el, binding, vnode) {
-        binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
-      },
-      update: function (el, binding, vnode) {
-        binding.value(vnode.componentInstance ? vnode.componentInstance : vnode.elm)
-      },
-      unbind: function (el, binding, vnode) {
-        binding.value(null)
-      },
-    })
-  },
-}

components/_util/css-animation/Event.js

@@ -1,4 +1,22 @@
-const EVENT_NAME_MAP = {
+const START_EVENT_NAME_MAP = {
+  transitionstart: {
+    transition: 'transitionstart',
+    WebkitTransition: 'webkitTransitionStart',
+    MozTransition: 'mozTransitionStart',
+    OTransition: 'oTransitionStart',
+    msTransition: 'MSTransitionStart',
+  },
+
+  animationstart: {
+    animation: 'animationstart',
+    WebkitAnimation: 'webkitAnimationStart',
+    MozAnimation: 'mozAnimationStart',
+    OAnimation: 'oAnimationStart',
+    msAnimation: 'MSAnimationStart',
+  },
+}
+
+const END_EVENT_NAME_MAP = {
   transitionend: {
     transition: 'transitionend',
     WebkitTransition: 'webkitTransitionEnd',
@@ -16,6 +34,7 @@ const EVENT_NAME_MAP = {
   },
 }
 
+const startEvents = []
 const endEvents = []
 
 function detectEvents () {
@@ -23,24 +42,31 @@ function detectEvents () {
   const style = testEl.style
 
   if (!('AnimationEvent' in window)) {
-    delete EVENT_NAME_MAP.animationend.animation
+    delete START_EVENT_NAME_MAP.animationstart.animation
+    delete END_EVENT_NAME_MAP.animationend.animation
   }
 
   if (!('TransitionEvent' in window)) {
-    delete EVENT_NAME_MAP.transitionend.transition
+    delete START_EVENT_NAME_MAP.transitionstart.transition
+    delete END_EVENT_NAME_MAP.transitionend.transition
   }
 
-  for (const baseEventName in EVENT_NAME_MAP) {
+  function process (EVENT_NAME_MAP, events) {
-    if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
+    for (const baseEventName in EVENT_NAME_MAP) {
-      const baseEvents = EVENT_NAME_MAP[baseEventName]
+      if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) {
-      for (const styleName in baseEvents) {
+        const baseEvents = EVENT_NAME_MAP[baseEventName]
-        if (styleName in style) {
+        for (const styleName in baseEvents) {
-          endEvents.push(baseEvents[styleName])
+          if (styleName in style) {
-          break
+            events.push(baseEvents[styleName])
+            break
+          }
         }
       }
     }
   }
+
+  process(START_EVENT_NAME_MAP, startEvents)
+  process(END_EVENT_NAME_MAP, endEvents)
 }
 
 if (typeof window !== 'undefined' && typeof document !== 'undefined') {
@@ -56,6 +82,31 @@ function removeEventListener (node, eventName, eventListener) {
 }
 
 const TransitionEvents = {
+  // Start events
+  startEvents,
+
+  addStartEventListener (node, eventListener) {
+    if (startEvents.length === 0) {
+      window.setTimeout(eventListener, 0)
+      return
+    }
+    startEvents.forEach((startEvent) => {
+      addEventListener(node, startEvent, eventListener)
+    })
+  },
+
+  removeStartEventListener (node, eventListener) {
+    if (startEvents.length === 0) {
+      return
+    }
+    startEvents.forEach((startEvent) => {
+      removeEventListener(node, startEvent, eventListener)
+    })
+  },
+
+  // End events
+  endEvents,
+
   addEndEventListener (node, eventListener) {
     if (endEvents.length === 0) {
       window.setTimeout(eventListener, 0)
@@ -66,8 +117,6 @@ const TransitionEvents = {
     })
   },
 
-  endEvents,
-
   removeEndEventListener (node, eventListener) {
     if (endEvents.length === 0) {
       return
@@ -79,4 +128,3 @@ const TransitionEvents = {
 }
 
 export default TransitionEvents
-

components/_util/css-animation/index.js

@@ -1,3 +1,5 @@
+// https://github.com/yiminghe/css-animation 1.5.0
+
 import Event from './Event'
 import classes from 'component-classes'
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout'

components/_util/props-util.js

@@ -95,19 +95,22 @@ const getOptionProps = (instance) => {
   return filterProps($props, $options.propsData)
 }
 
-const getComponentFromProp = (instance, prop) => {
+const getComponentFromProp = (instance, prop, options = instance, execute = true) => {
   if (instance.$createElement) {
     const h = instance.$createElement
     const temp = instance[prop]
     if (temp !== undefined) {
-      return typeof temp === 'function' ? temp(h) : temp
+      return typeof temp === 'function' && execute ? temp(h, options) : temp
     }
-    return instance.$slots[prop]
+    return instance.$slots[prop] ||
+     (instance.$scopedSlots[prop] && execute && instance.$scopedSlots[prop](options)) ||
+     (instance.$scopedSlots[prop] && instance.$scopedSlots[prop]) ||
+     undefined
   } else {
     const h = instance.context.$createElement
     const temp = getPropsData(instance)[prop]
     if (temp !== undefined) {
-      return typeof temp === 'function' ? temp(h) : temp
+      return typeof temp === 'function' && execute ? temp(h, options) : temp
     }
     const slotsProp = []
     const componentOptions = instance.componentOptions || {};
@@ -231,7 +234,7 @@ const initDefaultProps = (propTypes, defaultProps) => {
 export function mergeProps () {
   const args = [].slice.call(arguments, 0)
   const props = {}
-  args.forEach((p, i) => {
+  args.forEach((p = {}, i) => {
     for (const [k, v] of Object.entries(p)) {
       props[k] = props[k] || {}
       if (isPlainObject(v)) {

components/_util/raf.js

@@ -0,0 +1,30 @@
+import raf from 'raf'
+
+let id = 0
+const ids = {}
+
+// Support call raf with delay specified frame
+export default function wrapperRaf (callback, delayFrames = 1) {
+  const myId = id++
+  let restFrames = delayFrames
+
+  function internalCallback () {
+    restFrames -= 1
+
+    if (restFrames <= 0) {
+      callback()
+      delete ids[id]
+    } else {
+      ids[id] = raf(internalCallback)
+    }
+  }
+
+  ids[id] = raf(internalCallback)
+
+  return myId
+}
+
+wrapperRaf.cancel = function (id) {
+  raf.cancel(ids[id])
+  delete ids[id]
+}

components/_util/store/connect.jsx

@@ -26,6 +26,7 @@ export default function connect (mapStateToProps) {
       },
       data () {
         this.store = this.storeContext.store
+        this.preProps = { ...omit(getOptionProps(this), ['__propsSymbol__']) }
         return {
           subscribed: finnalMapStateToProps(this.store.getState(), this.$props),
         }
@@ -49,10 +50,10 @@ export default function connect (mapStateToProps) {
           if (!this.unsubscribe) {
             return
           }
-
+          const props = getOptionProps(this)
-          const nextState = finnalMapStateToProps(this.store.getState(), this.$props)
+          const nextSubscribed = finnalMapStateToProps(this.store.getState(), props)
-          if (!shallowEqual(this.subscribed, nextState)) {
+          if (!shallowEqual(this.preProps, props) || !shallowEqual(this.subscribed, nextSubscribed)) {
-            this.subscribed = nextState
+            this.subscribed = nextSubscribed
           }
         },
 
@@ -74,8 +75,10 @@ export default function connect (mapStateToProps) {
         },
       },
       render () {
+        this.preProps = { ...this.$props }
         const { $listeners, $slots = {}, $attrs, $scopedSlots, subscribed, store } = this
         const props = getOptionProps(this)
+        this.preProps = { ...omit(props, ['__propsSymbol__']) }
         const wrapProps = {
           props: {
             ...props,

components/_util/vnode.js

@@ -51,7 +51,7 @@ export function cloneVNodes (vnodes, deep) {
   return res
 }
 
-export function cloneElement (n, nodeProps, deep) {
+export function cloneElement (n, nodeProps = {}, deep) {
   let ele = n
   if (Array.isArray(n)) {
     ele = filterEmpty(n)[0]

components/_util/wave.jsx

@@ -1,12 +1,26 @@
 
 import TransitionEvents from './css-animation/Event'
+import raf from '../_util/raf'
+let styleForPesudo
+
+// Where el is the DOM element you'd like to test for visibility
+function isHidden (element) {
+  if (process.env.NODE_ENV === 'test') {
+    return false
+  }
+  return !element || element.offsetParent === null
+}
 
 export default {
   name: 'Wave',
   props: ['insertExtraNode'],
   mounted () {
     this.$nextTick(() => {
-      this.instance = this.bindAnimationEvent(this.$el)
+      const node = this.$el
+      if (node.nodeType !== 1) {
+        return
+      }
+      this.instance = this.bindAnimationEvent(node)
     })
   },
 
@@ -14,6 +28,10 @@ export default {
     if (this.instance) {
       this.instance.cancel()
     }
+    if (this.clickWaveTimeoutId) {
+      clearTimeout(this.clickWaveTimeoutId)
+    }
+    this.destroy = true
   },
   methods: {
     isNotGrey (color) {
@@ -25,7 +43,7 @@ export default {
     },
 
     onClick (node, waveColor) {
-      if (node.className.indexOf('-leave') >= 0) {
+      if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
         return
       }
       this.removeExtraStyleNode()
@@ -37,6 +55,7 @@ export default {
       node.removeAttribute(attributeName)
       node.setAttribute(attributeName, 'true')
       // Not white or transparnt or grey
+      styleForPesudo = styleForPesudo || document.createElement('style')
       if (waveColor &&
           waveColor !== '#ffffff' &&
           waveColor !== 'rgb(255, 255, 255)' &&
@@ -44,14 +63,17 @@ export default {
           !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
           waveColor !== 'transparent') {
         extraNode.style.borderColor = waveColor
-        this.styleForPesudo = document.createElement('style')
+
-        this.styleForPesudo.innerHTML =
+        styleForPesudo.innerHTML =
           `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`
-        document.body.appendChild(this.styleForPesudo)
+        if (!document.body.contains(styleForPesudo)) {
+          document.body.appendChild(styleForPesudo)
+        }
       }
       if (insertExtraNode) {
         node.appendChild(extraNode)
       }
+      TransitionEvents.addStartEventListener(node, this.onTransitionStart)
       TransitionEvents.addEndEventListener(node, this.onTransitionEnd)
     },
 
@@ -64,7 +86,7 @@ export default {
       }
       const onClick = (e) => {
         // Fix radio button click twice
-        if (e.target.tagName === 'INPUT') {
+        if (e.target.tagName === 'INPUT' || isHidden(e.target)) {
           return
         }
         this.resetEffect(node)
@@ -74,6 +96,13 @@ export default {
           getComputedStyle(node).getPropertyValue('border-color') ||
           getComputedStyle(node).getPropertyValue('background-color')
         this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0)
+        raf.cancel(this.animationStartId)
+        this.animationStart = true
+
+        // Render to trigger transition event cost 3 frames. Let's delay 10 frames to reset this.
+        this.animationStartId = raf(() => {
+          this.animationStart = false
+        }, 10)
       }
       node.addEventListener('click', onClick, true)
       return {
@@ -98,9 +127,21 @@ export default {
       if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
         node.removeChild(this.extraNode)
       }
+      TransitionEvents.removeStartEventListener(node, this.onTransitionStart)
       TransitionEvents.removeEndEventListener(node, this.onTransitionEnd)
     },
+    onTransitionStart (e) {
+      if (this.destroy) return
 
+      const node = this.$el
+      if (!e || e.target !== node) {
+        return
+      }
+
+      if (!this.animationStart) {
+        this.resetEffect(node)
+      }
+    },
     onTransitionEnd (e) {
       if (!e || e.animationName !== 'fadeEffect') {
         return
@@ -108,9 +149,8 @@ export default {
       this.resetEffect(e.target)
     },
     removeExtraStyleNode () {
-      if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
+      if (styleForPesudo) {
-        document.body.removeChild(this.styleForPesudo)
+        styleForPesudo.innerHTML = ''
-        this.styleForPesudo = null
       }
     },
   },

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/__tests__/__snapshots__/demo.test.js.snap

@@ -2,10 +2,18 @@
 
 exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
 <div>
-  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-banner"><i class="anticon anticon-exclamation-circle ant-alert-icon"></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"><i 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" class="">
-  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-banner"><i class="anticon anticon-exclamation-circle ant-alert-icon"></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 class="anticon anticon-cross"></i></a></div> <br>
+        <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">Warning text</span><span class="ant-alert-description"></span></div> <br>
+  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-banner"><i 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" 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 class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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>
-  <div data-show="true" class="ant-alert ant-alert-error ant-alert-banner"><i class="anticon anticon-cross-circle ant-alert-icon"></i><span class="ant-alert-message">Error text</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-error ant-alert-banner"><i class="ant-alert-icon anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
+      </svg></i><span class="ant-alert-message">Error text</span><span class="ant-alert-description"></span></div>
 </div>
 `;
 
@@ -13,13 +21,31 @@ 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"><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 class="anticon anticon-cross"></i></a></div>
+  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon"><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 class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-  <div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"><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 class="anticon anticon-cross"></i></a></div>
+          <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"><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 class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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"><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/custom-icon.md correctly 1`] = `
+<div>
+  <div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon"><span class="ant-alert-message">showIcon = false</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-success"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Success Tips</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-info"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Informational Notes</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-warning"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Warning</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-error"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Error</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-success ant-alert-with-description"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Success Tips</span><span class="ant-alert-description">Detailed description and advices about successful copywriting.</span></div>
+  <div data-show="true" class="ant-alert ant-alert-info ant-alert-with-description"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Informational Notes</span><span class="ant-alert-description">Additional description and informations about copywriting.</span></div>
+  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-with-description"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Warning</span><span class="ant-alert-description">This is a warning notice about copywriting.</span></div>
+  <div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description"><span class="ant-alert-icon"><i class="anticon anticon-smile"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span><span class="ant-alert-message">Error</span><span class="ant-alert-description">This is an error message about copywriting.</span></div>
+</div>
+`;
+
 exports[`renders ./components/alert/demo/description.md correctly 1`] = `
 <div>
   <div data-show="true" class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"><span class="ant-alert-message">Success Text</span><span class="ant-alert-description"><p>
@@ -33,20 +59,42 @@ exports[`renders ./components/alert/demo/description.md correctly 1`] = `
 
 exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
 <div>
-  <div data-show="true" class="ant-alert ant-alert-success"><i class="anticon anticon-check-circle ant-alert-icon"></i><span class="ant-alert-message">Success Tips</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-success"><i class="ant-alert-icon anticon anticon-check-circle"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-  <div data-show="true" class="ant-alert ant-alert-info"><i class="anticon anticon-info-circle ant-alert-icon"></i><span class="ant-alert-message">Informational Notes</span><span class="ant-alert-description"></span></div>
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
-  <div data-show="true" class="ant-alert ant-alert-warning"><i class="anticon anticon-exclamation-circle ant-alert-icon"></i><span class="ant-alert-message">Warning</span><span class="ant-alert-description"></span></div>
+      </svg></i><span class="ant-alert-message">Success Tips</span><span class="ant-alert-description"></span></div>
-  <div data-show="true" class="ant-alert ant-alert-error"><i class="anticon anticon-cross-circle ant-alert-icon"></i><span class="ant-alert-message">Error</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-info"><i class="ant-alert-icon anticon anticon-info-circle"><svg viewBox="64 64 896 896" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-  <div data-show="true" class="ant-alert ant-alert-success ant-alert-with-description"><i class="anticon anticon-check-circle-o ant-alert-icon"></i><span class="ant-alert-message">Success Tips</span><span class="ant-alert-description">Detailed description and advices about successful copywriting.</span></div>
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
-  <div data-show="true" class="ant-alert ant-alert-info ant-alert-with-description"><i class="anticon anticon-info-circle-o ant-alert-icon"></i><span class="ant-alert-message">Informational Notes</span><span class="ant-alert-description">Additional description and informations about copywriting.</span></div>
+      </svg></i><span class="ant-alert-message">Informational Notes</span><span class="ant-alert-description"></span></div>
-  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-with-description"><i class="anticon anticon-exclamation-circle-o ant-alert-icon"></i><span class="ant-alert-message">Warning</span><span class="ant-alert-description">This is a warning notice about copywriting.</span></div>
+  <div data-show="true" class="ant-alert ant-alert-warning"><i 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" class="">
-  <div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description"><i class="anticon anticon-cross-circle-o ant-alert-icon"></i><span class="ant-alert-message">Error</span><span class="ant-alert-description">This is an error message about copywriting.</span></div>
+        <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">Warning</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-error"><i class="ant-alert-icon anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
+      </svg></i><span class="ant-alert-message">Error</span><span class="ant-alert-description"></span></div>
+  <div data-show="true" class="ant-alert ant-alert-success ant-alert-with-description"><i class="ant-alert-icon anticon anticon-check-circle"><svg viewBox="64 64 896 896" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path>
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+      </svg></i><span class="ant-alert-message">Success Tips</span><span class="ant-alert-description">Detailed description and advices about successful copywriting.</span></div>
+  <div data-show="true" class="ant-alert ant-alert-info ant-alert-with-description"><i class="ant-alert-icon anticon anticon-info-circle"><svg viewBox="64 64 896 896" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+        <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
+      </svg></i><span class="ant-alert-message">Informational Notes</span><span class="ant-alert-description">Additional description and informations about copywriting.</span></div>
+  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-with-description"><i 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" class="">
+        <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+        <path d="M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path>
+      </svg></i><span class="ant-alert-message">Warning</span><span class="ant-alert-description">This is a warning notice about copywriting.</span></div>
+  <div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description"><i class="ant-alert-icon anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path>
+        <path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+      </svg></i><span class="ant-alert-message">Error</span><span class="ant-alert-description">This is an error message about copywriting.</span></div>
 </div>
 `;
 
 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"><span class="ant-alert-message">Alert Message Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i class="anticon anticon-cross"></i></a></div>
+  <div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon"><span class="ant-alert-message">Alert Message Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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/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` |

components/alert/style/index.less

@@ -18,7 +18,7 @@
   }
 
   &-icon {
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
+    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
     left: 16px;
     position: absolute;
   }
@@ -30,34 +30,34 @@
   }
 
   &-success {
-    border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
+    border: @border-width-base @border-style-base @alert-success-border-color;
-    background-color: ~`colorPalette("@{success-color}", 1)`;
+    background-color: @alert-success-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @success-color;
+      color: @alert-success-icon-color;
     }
   }
 
   &-info {
-    border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
+    border: @border-width-base @border-style-base @alert-info-border-color;
-    background-color: ~`colorPalette("@{info-color}", 1)`;
+    background-color: @alert-info-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @info-color;
+      color: @alert-info-icon-color;
     }
   }
 
   &-warning {
-    border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
+    border: @border-width-base @border-style-base @alert-warning-border-color;
-    background-color: ~`colorPalette("@{warning-color}", 1)`;
+    background-color: @alert-warning-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @warning-color;
+      color: @alert-warning-icon-color;
     }
   }
 
   &-error {
-    border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
+    border: @border-width-base @border-style-base @alert-error-border-color;
-    background-color: ~`colorPalette("@{error-color}", 1)`;
+    background-color: @alert-error-bg-color;
     .@{alert-prefix-cls}-icon {
-      color: @error-color;
+      color: @alert-error-icon-color;
     }
   }
 
@@ -70,7 +70,7 @@
     overflow: hidden;
     cursor: pointer;
 
-    .@{iconfont-css-prefix}-cross {
+    .@{iconfont-css-prefix}-close {
       color: @alert-close-color;
       transition: color .3s;
       &:hover {

components/anchor/Anchor.jsx

@@ -4,7 +4,7 @@ import addEventListener from '../_util/Dom/addEventListener'
 import Affix from '../affix'
 import getScroll from '../_util/getScroll'
 import raf from 'raf'
-import { initDefaultProps, getClass, getStyle } from '../_util/props-util'
+import { initDefaultProps, getClass } from '../_util/props-util'
 import BaseMixin from '../_util/BaseMixin'
 
 function getDefaultContainer () {
@@ -71,7 +71,6 @@ function scrollTo (href, offsetTop = 0, getContainer, callback = () => { }) {
     }
   }
   raf(frameFunc)
-  history.pushState(null, '', href)
 }
 
 export const AnchorProps = {
@@ -117,6 +116,7 @@ export default {
         $data: this.$data,
         scrollTo: this.handleScrollTo,
       },
+      antAnchorContext: this,
     }
   },
 

components/anchor/AnchorLink.jsx

@@ -16,6 +16,7 @@ export default {
   }),
   inject: {
     antAnchor: { default: {}},
+    antAnchorContext: { default: {}},
   },
 
   mounted () {
@@ -32,8 +33,14 @@ export default {
     },
   },
   methods: {
-    handleClick () {
+    handleClick (e) {
       this.antAnchor.scrollTo(this.href)
+      const { scrollTo } = this.antAnchor
+      const { href, title } = this.$props
+      if (this.antAnchorContext.$emit) {
+        this.antAnchorContext.$emit('click', e, { title, href })
+      }
+      scrollTo(href)
     },
   },
   render () {

components/anchor/__tests__/Anchor.test.js

@@ -151,4 +151,31 @@ describe('Anchor Render', () => {
       expect(wrapper.vm.$refs.anchor.links).toEqual(['#API_1'])
     })
   })
+
+  it('Anchor onClick event', () => {
+    let event
+    let link
+    const handleClick = (...arg) => ([event, link] = arg)
+
+    const href = '#API'
+    const title = 'API'
+
+    const wrapper = mount(
+      {
+        render () {
+          return (
+            <Anchor ref='anchorRef' onClick={handleClick}>
+              <Link href={href} title={title} />
+            </Anchor>
+          )
+        },
+      }
+    )
+
+    wrapper.find(`a[href="${href}"]`).trigger('click')
+
+    wrapper.vm.$refs.anchorRef.handleScroll()
+    expect(event).not.toBe(undefined)
+    expect(link).toEqual({ href, title })
+  })
 })

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

@@ -18,6 +18,20 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/anchor/demo/onClick.md correctly 1`] = `
+<div class="ant-anchor-wrapper" style="max-height: 100vh;">
+  <div class="ant-anchor fixed">
+    <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
+    <div class="ant-anchor-link"><a href="#components-anchor-demo-basic" title="Basic demo" class="ant-anchor-link-title">Basic demo</a></div>
+    <div class="ant-anchor-link"><a href="#components-anchor-demo-static-anchor" title="Fixed demo" class="ant-anchor-link-title">Fixed demo</a></div>
+    <div class="ant-anchor-link"><a href="#API" title="API" class="ant-anchor-link-title">API</a>
+      <div class="ant-anchor-link"><a href="#Anchor-Props" title="Anchor Props" class="ant-anchor-link-title">Anchor Props</a></div>
+      <div class="ant-anchor-link"><a href="#Link-Props" title="Link Props" class="ant-anchor-link-title">Link Props</a></div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/anchor/demo/static.md correctly 1`] = `
 <div class="ant-anchor-wrapper" style="max-height: 100vh;">
   <div class="ant-anchor fixed">

components/anchor/demo/index.vue

@@ -1,6 +1,7 @@
 <script>
 import Basic from './basic'
 import Static from './static'
+import OnClick from './onClick'
 
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
@@ -27,6 +28,7 @@ export default {
   subtitle: '锚点',
   cols: 2,
   type: 'Other',
+  zhType: '其他',
   title: 'Anchor',
   render () {
     return (
@@ -34,6 +36,7 @@ export default {
         <md cn={md.cn} us={md.us}/>
         <Basic/>
         <Static/>
+        <OnClick />
         <api>
           <CN slot='cn' />
           <US/>

components/anchor/demo/onClick.md

@@ -0,0 +1,32 @@
+<cn>
+#### 自定义 click 事件
+点击锚点不记录历史。
+</cn>
+
+<us>
+#### Customize the click event
+Clicking on an anchor does not record history.
+</us>
+
+```html
+<template>
+  <a-anchor :affix="false" @click="handleClick">
+    <a-anchor-link href="#components-anchor-demo-basic" title="Basic demo" />
+    <a-anchor-link href="#components-anchor-demo-static-anchor" title="Fixed demo" />
+    <a-anchor-link href="#API" title="API">
+      <a-anchor-link href="#Anchor-Props" title="Anchor Props" />
+      <a-anchor-link href="#Link-Props" title="Link Props" />
+    </a-anchor-link>
+  </a-anchor>
+</template>
+<script>
+export default {
+  methods: {
+    handleClick (e, link) {
+      e.preventDefault();
+      console.log(link);
+    }
+  }
+}
+</script>
+```

components/anchor/index.en-US.md

@@ -12,6 +12,11 @@
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
 | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
 
+### Events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| click | set the handler to handle `click` event | Function(e: Event, link: Object) |
+
 ### Link Props
 
 | Property | Description | Type | Default |

components/anchor/index.zh-CN.md

@@ -12,6 +12,11 @@
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |
 | showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
 
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click | `click` 事件的 handler | Function(e: Event, link: Object) |
+
 ### Link Props
 
 | 成员 | 说明 | 类型 | 默认值 |

components/anchor/style/index.less

@@ -51,8 +51,8 @@
   }
 
   &-link {
-    padding: 8px 0 8px 16px;
+    padding: 7px 0 7px 16px;
-    line-height: 1;
+    line-height: 1.143;
 
     &-title {
       display: block;
@@ -62,7 +62,7 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      margin-bottom: 8px;
+      margin-bottom: 6px;
 
       &:only-child {
         margin-bottom: 0;
@@ -75,7 +75,7 @@
   }
 
   &-link &-link {
-    padding-top: 6px;
+    padding-top: 5px;
-    padding-bottom: 6px;
+    padding-bottom: 5px;
   }
 }

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -10,7 +10,7 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
           <div class="ant-select-search__field__wrap"><input value="" type="text" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
-    </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+    </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
   </div>
 </div>
 `;
@@ -23,10 +23,10 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
         <div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">input here</div>
         <ul>
           <li class="ant-select-search ant-select-search--inline">
-            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><i class="certain-category-icon anticon anticon-search"></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><i class="certain-category-icon anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
           </li>
         </ul>
-      </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+      </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
     </div>
   </div>
 </div>
@@ -41,7 +41,7 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
           <div class="ant-select-search__field__wrap"><textarea value="" placeholder="input here" class="custom ant-input ant-select-search__field" style="height: 50px;"></textarea><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
-    </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+    </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
   </div>
 </div>
 `;
@@ -56,7 +56,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
           <div class="ant-select-search__field__wrap"><input value="" type="text" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
-    </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+    </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
   </div>
 </div>
 `;
@@ -71,7 +71,7 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
           <div class="ant-select-search__field__wrap"><input value="" type="text" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
         </li>
       </ul>
-    </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+    </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
   </div>
 </div>
 `;
@@ -84,10 +84,10 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
         <div unselectable="on" class="ant-select-selection__placeholder" style="display: block;">input here</div>
         <ul>
           <li class="ant-select-search ant-select-search--inline">
-            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i class="anticon anticon-search"></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input value="" type="text" class="ant-input"><span class="ant-input-suffix"><button type="button" class="search-btn ant-btn ant-btn-primary ant-btn-lg"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i></button></span></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
           </li>
         </ul>
-      </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+      </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
     </div>
   </div>
 </div>

components/auto-complete/demo/index.vue

@@ -18,13 +18,14 @@ const md = {
         Autocomplete function of input field.
 ## When To Use
 When there is a need for autocomplete functionality.
-## Examples 
+## Examples
 `,
 }
 export default {
   category: 'Components',
   subtitle: '自动完成',
   type: 'Data Entry',
+  zhType: '数据录入',
   cols: 2,
   title: 'AutoComplete',
   render () {

components/auto-complete/index.en-US.md

@@ -12,12 +12,14 @@
 | slot="default" (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
 | dataSource | Data source for autocomplete | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |
-| defaultValue | Initial selected option. | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |
+| defaultValue | Initial selected option. | string\|string\[]\| - |
 | disabled | Whether disabled select | boolean | false |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
 | optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
 | placeholder | placeholder of input | string | - |
 | value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |
+| defaultOpen | Initial open state of dropdown | boolean | - |
+| open | Controlled open state of dropdown | boolean | - |
 
 ### events
 | Events Name | Description | Arguments |
@@ -27,6 +29,7 @@
 | focus | Called when entering the component | function() |
 | search | Called when searching items. | function(value) | - |
 | select | Called when a option is selected. param is option's value and option instance. | function(value, option) |
+| dropdownVisibleChange | Call when dropdown open | function(open) |
 
 ## Methods
 

components/auto-complete/index.jsx

@@ -122,9 +122,7 @@ const AutoComplete = {
       },
       class: cls,
       ref: 'select',
-      on: {
+      on: $listeners,
-        ...$listeners,
-      },
     }
     return (
       <Select

components/auto-complete/index.zh-CN.md

@@ -12,12 +12,14 @@
 | slot="default" (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` |
 | dataSource | 自动完成的数据源 | slot \| [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
-| defaultValue | 指定默认选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes}> | 无 |
+| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |
 | disabled | 是否禁用 | boolean | false |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
 | placeholder | 输入框提示 | string \| slot | - |
 | value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
+| open | 是否展开下拉菜单 | boolean | - |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |
@@ -27,6 +29,7 @@
 | focus | 获得焦点时的回调 | function() |
 | search | 搜索补全项的时候调用 | function(value) |
 | select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |
+| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
 
 ## 方法
 

components/auto-complete/style/index.less

@@ -52,6 +52,9 @@
       &:hover {
         .hover;
       }
+      &[disabled] {
+        .disabled;
+      }
     }
 
     &-lg {

components/avatar/Avatar.jsx

@@ -110,13 +110,11 @@ export default {
     } else {
       const childrenNode = this.$refs.avatarChildren
       if (childrenNode || (scale !== 1 && childrenNode)) {
+        const transformString = `scale(${scale}) translateX(-50%)`
         const childrenStyle = {
-          msTransform: `scale(${scale})`,
+          msTransform: transformString,
-          WebkitTransform: `scale(${scale})`,
+          WebkitTransform: transformString,
-          transform: `scale(${scale})`,
+          transform: transformString,
-          position: 'absolute',
-          display: 'inline-block',
-          left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
         }
         const sizeChildrenStyle = typeof size === 'number' ? {
           lineHeight: `${size}px`,

components/avatar/__tests__/Avatar.test.js

@@ -23,7 +23,7 @@ describe('Avatar Render', () => {
       },
       sync: false, attachToDocument: true,
     })
-    wrapper.vm.setScale = jest.fn(() => { wrapper.setData({ scale: 0.5 }) })
+    wrapper.vm.setScale = jest.fn(() => { wrapper.setData({ scale: 0.5 }); wrapper.vm.$forceUpdate() })
     await asyncExpect(() => {
       wrapper.find('img').trigger('error')
     }, 0)
@@ -33,14 +33,10 @@ describe('Avatar Render', () => {
       expect(children.at(0).text()).toBe('Fallback')
       expect(wrapper.vm.setScale).toBeCalled()
     })
-    // await asyncExpect(() => {
-    //   console.log(wrapper.vm.scale, document.body.querySelector('.ant-avatar-string'))
-    //   expect(global.document.body.querySelector('.ant-avatar-string').style.transform).toBe('scale(0.5)')
-    //   global.document.body.innerHTML = ''
-    // }, 1000)
     await asyncExpect(() => {
-
+      expect(global.document.body.querySelector('.ant-avatar-string').style.transform).toContain('scale(0.5)')
-    })
+      global.document.body.innerHTML = ''
+    }, 0)
   })
   it('should handle onError correctly', () => {
     global.document.body.innerHTML = ''

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `<div><span style="margin-right: 24px;"><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span><sup title="1" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></span> <span><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span></span></div>`;
+exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `<div><span style="margin-right: 24px;"><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span><sup title="1" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="current">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></span> <span><span class="ant-badge"><span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span></span></div>`;
 
 exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
 <div>
-  <div><span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span></div> <br>
+  <div><span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div> <br>
-  <div><span class="ant-avatar ant-avatar-square ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"></i></span></div>
+  <div><span class="ant-avatar ant-avatar-square ant-avatar-icon" style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div>
 </div>
 `;
 
 exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-lg ant-avatar-square" style="background-color: rgb(245, 106, 0); vertical-align: middle;"><span class="ant-avatar-string">U</span></span> <button type="button" class="ant-btn ant-btn-default ant-btn-sm" style="vertical-align: middle;"><span>改 变</span></button></div>`;
 
-exports[`renders ./components/avatar/demo/type.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"></i></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">USER</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span> <span class="ant-avatar ant-avatar-circle" style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="background-color: rgb(135, 208, 104);"><i class="anticon anticon-user"></i></span></div>`;
+exports[`renders ./components/avatar/demo/type.md correctly 1`] = `<div><span class="ant-avatar ant-avatar-circle ant-avatar-icon"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string">USER</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></span> <span class="ant-avatar ant-avatar-circle" style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);"><span class="ant-avatar-string">U</span></span> <span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="background-color: rgb(135, 208, 104);"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i></span></div>`;

components/avatar/demo/index.vue

@@ -9,16 +9,20 @@ import US from '../index.en-US.md'
 const md = {
   cn: `# Avatar头像
           用来代表用户或事物，支持图片、图标或字符展示。
+          ## 设计师专属
+安装 [Kitchen Sketch 插件 <EFBFBD>](https://kitchen.alipay.com)，一键填充高逼格头像和文本.
+
           ## 代码演示`,
   us: `# Avatar
           Avatars can be used to represent people or objects. It supports images, 'Icon's, or letters.
-          ## Examples 
+          ## Examples
           `,
 }
 export default {
   category: 'Components',
   subtitle: '头像',
   type: 'Data Display',
+  zhType: '数据展示',
   title: 'Avatar',
   render () {
     return (

components/avatar/style/index.less

@@ -49,6 +49,12 @@
     line-height: @size;
   }
 
+  &-string {
+    position: absolute;
+    left: 50%;
+    transform-origin: 0 center;
+  }
+
   &.@{avatar-prefix-cls}-icon {
     font-size: @font-size;
   }

components/back-top/demo/index.vue

@@ -21,6 +21,7 @@ const md = {
 export default {
   category: 'Components',
   type: 'Other',
+  zhType: '其他',
   subtitle: '回到顶部',
   title: 'BackTop',
   render () {

components/badge/Badge.jsx

@@ -73,7 +73,7 @@ export default {
       [`${prefixCls}-not-a-wrapper`]: !children.length,
     })
     const styleWithOffset = offset ? {
-      marginLeft: typeof offset[0] === 'number' ? `${offset[0]}px` : offset[0],
+      right: -parseInt(offset[0], 10),
       marginTop: typeof offset[1] === 'number' ? `${offset[1]}px` : offset[1],
       ...numberStyle,
     } : numberStyle

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

@@ -5,13 +5,17 @@ exports[`renders ./components/badge/demo/basic.md correctly 1`] = `<div><span cl
 exports[`renders ./components/badge/demo/change.md correctly 1`] = `
 <div>
   <div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>
-    <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"></i></button></div>
+    <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
+          </svg></i></button><button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
+          </svg></i></button></div>
   </div>
-  <div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <span tabindex="0" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></span></div>
+  <div style="margin-top: 10px;"><span class="ant-badge"><a href="#" class="head-example"></a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></div>
 </div>
 `;
 
-exports[`renders ./components/badge/demo/dot.md correctly 1`] = `<div id="components-badge-demo-dot"><span class="ant-badge"><i class="anticon anticon-notification"></i><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <span class="ant-badge"><i class="anticon anticon-notification"></i><!----></span> <span class="ant-badge"><a href="#">Link something</a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span></div>`;
+exports[`renders ./components/badge/demo/dot.md correctly 1`] = `<div id="components-badge-demo-dot"><span class="ant-badge"><i class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span> <span class="ant-badge"><i class="anticon anticon-notification"><svg viewBox="64 64 896 896" data-icon="notification" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"></path></svg></i><!----></span> <span class="ant-badge"><a href="#">Link something</a><sup class="ant-scroll-number ant-badge-dot ant-badge-zoom-enter"></sup></span></div>`;
 
 exports[`renders ./components/badge/demo/link.md correctly 1`] = `<a href="#"><span class="ant-badge"><span class="head-example"></span><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1500%);"><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="current">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="">0</p><p class="">1</p><p class="">2</p><p class="">3</p><p class="">4</p><p class="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></a>`;
 

components/badge/demo/index.vue

@@ -29,6 +29,7 @@
     category: 'Components',
     subtitle: '徽标数',
     type: 'Data Display',
+    zhType: '数据展示',
     title: 'Badge',
     render () {
       return (
@@ -61,6 +62,7 @@
   border-radius: 4px;
   background: #eee;
   display: inline-block;
+  vertical-align: middle;
 }
 #components-badge-demo .ant-badge-not-a-wrapper:not(.ant-badge-status) {
   margin-right: 8px;

components/badge/style/index.less

@@ -9,7 +9,6 @@
   position: relative;
   display: inline-block;
   line-height: 1;
-  vertical-align: middle;
   color: unset;
 
   &-count {
@@ -26,6 +25,7 @@
     font-weight: @badge-font-weight;
     white-space: nowrap;
     box-shadow: 0 0 0 1px #fff;
+    z-index: 10;
     a,
     a:hover {
       color: #fff;
@@ -81,7 +81,7 @@
         height: 100%;
         border-radius: 50%;
         border: 1px solid @processing-color;
-        content: '';
+        content: "";
         animation: antStatusProcessing 1.2s infinite ease-in-out;
       }
     }
@@ -112,14 +112,18 @@
     animation-fill-mode: both;
   }
 
-  &-not-a-wrapper .@{ant-prefix}-scroll-number {
+  &-not-a-wrapper {
-    top: auto;
+    vertical-align: middle;
-    display: block;
-    position: relative;
-  }
 
-  &-not-a-wrapper .@{badge-prefix-cls}-count {
+    .@{ant-prefix}-scroll-number {
-    transform: none;
+      top: auto;
+      display: block;
+      position: relative;
+    }
+
+    .@{badge-prefix-cls}-count {
+      transform: none;
+    }
   }
 }
 

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

@@ -12,7 +12,7 @@ exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
 `;
 
 exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
-<div class="ant-breadcrumb"><span class=""><a class="ant-breadcrumb-link"><i class="anticon anticon-home"></i></a><span class="ant-breadcrumb-separator">/</span></span><span class=""><a class="ant-breadcrumb-link"><i class="anticon anticon-user"></i> <span>Application List</span></a><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">
+<div class="ant-breadcrumb"><span class=""><a class="ant-breadcrumb-link"><i class="anticon anticon-home"><svg viewBox="64 64 896 896" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></i></a><span class="ant-breadcrumb-separator">/</span></span><span class=""><a class="ant-breadcrumb-link"><i class="anticon anticon-user"><svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></i> <span>Application List</span></a><span class="ant-breadcrumb-separator">/</span></span><span class=""><span class="ant-breadcrumb-link">
     Application
   </span><span class="ant-breadcrumb-separator">/</span></span></div>
 `;

components/breadcrumb/demo/index.vue

@@ -31,6 +31,7 @@
     category: 'Components',
     subtitle: '面包屑',
     type: 'Navigation',
+    zhType: '导航',
     title: 'Breadcrumb',
     render () {
       return (

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

@@ -11,10 +11,19 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
   <div class="ant-btn-group"><button type="button" disabled="disabled" class="ant-btn ant-btn-default"><span>L</span></button><button type="button" disabled="disabled" class="ant-btn ant-btn-default"><span>M</span></button><button type="button" disabled="disabled" class="ant-btn ant-btn-default"><span>R</span></button></div>
   <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-primary"><span>L</span></button><button type="button" class="ant-btn ant-btn-default"><span>M</span></button><button type="button" class="ant-btn ant-btn-default"><span>M</span></button><button type="button" class="ant-btn ant-btn-dashed"><span>R</span></button></div>
   <h4>With Icon</h4>
-  <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-left"></i>Go back
+  <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
+        </svg></i>Go back
     </button><button type="button" class="ant-btn ant-btn-primary">
-      Go forward<i class="anticon anticon-right"></i></button></div>
+      Go forward<i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-  <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-cloud"></i></button><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-cloud-download"></i></button></div>
+          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+        </svg></i></button></div>
+  <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-cloud"><svg viewBox="64 64 896 896" data-icon="cloud" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 0 1-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 0 1 140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0 1 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z"></path>
+        </svg></i></button><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-cloud-download"><svg viewBox="64 64 896 896" data-icon="cloud-download" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"></path>
+          <path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0 1 52.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 0 1-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"></path>
+        </svg></i></button></div>
 </div>
 `;
 
@@ -26,20 +35,60 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
 
 exports[`renders ./components/button/demo/ghost.md correctly 1`] = `<div style="background: rgb(190, 200, 200); padding: 26px 16px 16px;"><button type="button" class="ant-btn ant-btn-primary ant-btn-background-ghost"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Default</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-background-ghost"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-background-ghost"><span>danger</span></button></div>`;
 
-exports[`renders ./components/button/demo/icon.md correctly 1`] = `<div><button type="button" class="ant-btn ant-btn-primary ant-btn-circle"><i class="anticon anticon-search"></i></button> <button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-search"></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-circle"><i class="anticon anticon-search"></i></button> <button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-circle"><i class="anticon anticon-search"></i></button> <button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-circle"><i class="anticon anticon-search"></i></button> <button type="button" class="ant-btn ant-btn-dashed"><i class="anticon anticon-search"></i><span>Search</span></button></div>`;
+exports[`renders ./components/button/demo/icon.md correctly 1`] = `
+<div><button type="button" class="ant-btn ant-btn-primary ant-btn-circle"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-circle"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-circle"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i><span>Search</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-circle"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-dashed"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+      </svg></i><span>Search</span></button></div>
+`;
 
-exports[`renders ./components/button/demo/loading.md correctly 1`] = `<div><button type="button" class="ant-btn ant-btn-primary ant-btn-loading"><i class="anticon anticon-loading anticon-spin"></i><span>Loading</span></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"><i class="anticon anticon-loading anticon-spin"></i><span>Loading</span></button> <br> <button type="button" class="ant-btn ant-btn-primary"><span>mouseenter me!</span></button> <button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-poweroff"></i><span>延迟1s</span></button> <br> <button type="button" class="ant-btn ant-btn-default ant-btn-circle ant-btn-loading"><i class="anticon anticon-loading anticon-spin"></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading"><i class="anticon anticon-loading anticon-spin"></i></button></div>`;
+exports[`renders ./components/button/demo/loading.md correctly 1`] = `
+<div><button type="button" class="ant-btn ant-btn-primary ant-btn-loading"><i class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin">
+        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+      </svg></i><span>Loading</span></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"><i class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin">
+        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+      </svg></i><span>Loading</span></button> <br> <button type="button" class="ant-btn ant-btn-primary"><span>mouseenter me!</span></button> <button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-poweroff"><svg viewBox="64 64 896 896" data-icon="poweroff" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path>
+      </svg></i><span>延迟1s</span></button> <br> <button type="button" class="ant-btn ant-btn-default ant-btn-circle ant-btn-loading"><i class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin">
+        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading"><i class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin">
+        <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+      </svg></i></button></div>
+`;
 
 exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default"><span>secondary</span></button> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger">
-    Actions <i class="anticon anticon-down"></i></button></div>
+    Actions <i class="anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      </svg></i></button></div>
 `;
 
 exports[`renders ./components/button/demo/size.md correctly 1`] = `
 <div>
-  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg"><i class="anticon anticon-download"></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><i class="anticon anticon-download"></i><span>Download</span></button> <br>
+  <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><span>Primary</span></button> <button type="button" class="ant-btn ant-btn-default ant-btn-lg"><span>Normal</span></button> <button type="button" class="ant-btn ant-btn-dashed ant-btn-lg"><span>Dashed</span></button> <button type="button" class="ant-btn ant-btn-danger ant-btn-lg"><span>Danger</span></button> <br> <button type="button" class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg"><i class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-  <div class="ant-btn-group ant-btn-group-lg"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-left"></i>Backward
+        <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
+      </svg></i></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-lg"><i class="anticon anticon-download"><svg viewBox="64 64 896 896" data-icon="download" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        <path d="M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>
+      </svg></i><span>Download</span></button> <br>
+  <div class="ant-btn-group ant-btn-group-lg"><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
+        </svg></i>Backward
     </button><button type="button" class="ant-btn ant-btn-primary">
-      Forward<i class="anticon anticon-right"></i></button></div>
+      Forward<i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+        </svg></i></button></div>
 </div>
 `;

components/button/__tests__/__snapshots__/index.test.js.snap

@@ -6,15 +6,35 @@ exports[`Button fixbug renders {0} , 0 and {false} 2`] = `<button type="button"
 
 exports[`Button fixbug renders {0} , 0 and {false} 3`] = `<button type="button" class="ant-btn ant-btn-default"></button>`;
 
-exports[`Button renders Chinese characters correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"></i><span>按钮</span></button>`;
+exports[`Button renders Chinese characters correctly 1`] = `
+<button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+    </svg></i><span>按钮</span></button>
+`;
 
-exports[`Button renders Chinese characters correctly 2`] = `<button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"></i>按钮</button>`;
+exports[`Button renders Chinese characters correctly 2`] = `
+<button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+    </svg></i>按钮</button>
+`;
 
-exports[`Button renders Chinese characters correctly 3`] = `<button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"></i><span>按钮</span></button>`;
+exports[`Button renders Chinese characters correctly 3`] = `
+<button type="button" class="ant-btn ant-btn-default"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path>
+    </svg></i><span>按钮</span></button>
+`;
 
-exports[`Button renders Chinese characters correctly 4`] = `<button type="button" class="ant-btn ant-btn-default ant-btn-loading"><i class="anticon anticon-loading anticon-spin"></i><span>按钮</span></button>`;
+exports[`Button renders Chinese characters correctly 4`] = `
+<button type="button" class="ant-btn ant-btn-default ant-btn-loading"><i class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin">
+      <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+    </svg></i><span>按钮</span></button>
+`;
 
-exports[`Button renders Chinese characters correctly 5`] = `<button type="button" class="ant-btn ant-btn-default ant-btn-loading"><i class="anticon anticon-loading anticon-spin"></i><span>按 钮</span></button>`;
+exports[`Button renders Chinese characters correctly 5`] = `
+<button type="button" class="ant-btn ant-btn-default ant-btn-loading"><i class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin">
+      <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+    </svg></i><span>按 钮</span></button>
+`;
 
 exports[`Button renders correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Follow</span></button>`;
 

components/button/button.jsx

@@ -65,7 +65,10 @@ export default {
   methods: {
     fixTwoCNChar () {
       // Fix for HOC usage like <FormatMessage />
-      const node = this.$el
+      const node = this.$refs.buttonNode
+      if (!node) {
+        return
+      }
       const buttonText = node.textContent || node.innerText
       if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
         if (!this.hasTwoCNChar) {
@@ -76,9 +79,10 @@ export default {
       }
     },
     handleClick (event) {
-      // this.clicked = true
+      const { sLoading } = this.$data
-      // clearTimeout(this.timeout)
+      if (sLoading) {
-      // this.timeout = setTimeout(() => (this.clicked = false), 500)
+        return
+      }
       this.$emit('click', event)
     },
     insertSpace (child, needInserted) {
@@ -101,6 +105,9 @@ export default {
     const { htmlType, classes, icon,
       disabled, handleClick,
       sLoading, $slots, $attrs, $listeners } = this
+    const now = new Date()
+    const isChristmas = now.getMonth() === 11 && now.getDate() === 25
+    const title = isChristmas ? 'Ho Ho Ho!' : $attrs.title
     const buttonProps = {
       props: {
       },
@@ -108,8 +115,9 @@ export default {
         ...$attrs,
         type: htmlType,
         disabled,
+        title,
       },
-      class: classes,
+      class: { ...classes, christmas: isChristmas },
       on: {
         ...$listeners,
         click: handleClick,
@@ -118,16 +126,17 @@ export default {
     const iconType = sLoading ? 'loading' : icon
     const iconNode = iconType ? <Icon type={iconType} /> : null
     const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], this.isNeedInserted()) : $slots.default
+
     if ('href' in $attrs) {
       return (
-        <a {...buttonProps}>
+        <a {...buttonProps} ref='buttonNode'>
           {iconNode}{kids}
         </a>
       )
     } else {
       return (
         <Wave>
-          <button {...buttonProps}>
+          <button {...buttonProps} ref='buttonNode'>
             {iconNode}{kids}
           </button>
         </Wave>

components/button/demo/index.vue

@@ -26,6 +26,7 @@ const md = {
 export default {
   category: 'Components',
   type: 'General',
+  zhType: '通用',
   title: 'Button',
   subtitle: '按钮',
   render () {

components/button/index.en-US.md

@@ -17,7 +17,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 ### events
 | Events Name | Description | Arguments |
 | --- | --- | --- |
-| click | set the handler to handle `click` event | function(e) |
+| click | set the handler to handle `click` event | (event) => void |
 
 `<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
 

components/button/index.zh-CN.md

@@ -19,7 +19,7 @@
 ### 事件
 | 事件名称 | 说明 | 回调参数 |
 | --- | --- | --- |
-| click | `click` 事件的 handler  | function(e) |
+| click | 点击按钮时的回调 | (event) => void |
 
-`<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。
+`<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到原生 button 上。
 

components/button/style/index.less

@@ -12,7 +12,10 @@
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
-  line-height: @line-height-base;
+  // Fixing https://github.com/ant-design/ant-design/issues/12978
+  // It is a render problem of chrome, which is only happened in the codesandbox demo
+  // 0.001px solution works and I don't why
+  line-height: @line-height-base - 0.001;
   .btn;
   .btn-default;
 
@@ -21,6 +24,7 @@
   > i,
   > span {
     pointer-events: none;
+    display: inline-block;
   }
 
   &-primary {
@@ -78,7 +82,7 @@
     right: -1px;
     background: #fff;
     opacity: 0.35;
-    content: '';
+    content: "";
     border-radius: inherit;
     z-index: 1;
     transition: opacity .2s;
@@ -149,7 +153,7 @@
     letter-spacing: .34em;
   }
 
-  &-two-chinese-chars > * {
+  &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
     letter-spacing: .34em;
     margin-right: -.34em;
   }
@@ -157,6 +161,31 @@
   &-block {
     width: 100%;
   }
+
+  .christmas&-primary:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -6px;
+    left: 0;
+    right: 0;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAXCAYAAABOHMIhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABiZJREFUeNrsWMtPlFcUvzPMwIDysLyRR4uATDHWCiVgSmRlios2DeiiXUFs0nRBd6arxqQhJDapkYXhP4BqDKTQhZaFNQSCaBEVJjwdHsNr5DUMDDPDzPT3u7nTDEgRKrKgc5KT+z3uufec33de99P4fD4RpL2RNgjB3kn35MkTeRERESFiYmLkGBoaKnQ6nWSNRvPPZFxr+vv7k6KioiIdDsfa8vLyQkFBgcP3Bnel3MDAQArWI0eFhISE87nb7bZ7PJ4VvLYuLi5O5+fnu9+kMNfq6+tLjIyMzMY6KeBEbK/XarXReI3lPDZMWcc4v7GxYV1dXR3Jy8ub2E5HPvJ6vRSSDH0ku1wuAfsEZOV1IEFHoeNFdHS0yMrK2knR0Lm5uR+hxLdQMjbwHTZbB41h8RGwCdc9MzMzneHh4bGJiYlf4SN8ijkfwqiIncCAAR7Iz2GPSShudjqdfeCeqampvwBQfFxc3JdYqwTv8gB8/F48A8BgKecE14V+L7ju2tpae05OzkuCCZvkPOj8mizmC6vVKtmPu+bx48cC3qI1mUyFUOyywWD4SHlELBaLJmCHNcwAghuAOujtuF4FqHO4nsX4EsAS3I4TJ04ME1h8PDE9PS09TYZoY2Pj1729vd6lpSVfkDYTPG0UkfNDRUWFgQ5Gb2Mh0N29e9eG/GQfHh4W8/PzwUy/ObQ/gMfVVlZW1iAiZdQxp3nv3LljRoL/5erVq1UIxzSiiVD9X4EDYATynCwAzGO858hCQRoaGmJFZNJz8YIcBc4BF966dau6sLAwBxVSJCUlCSThQwuU3W6XkYUok1Vzm5znQx5bbm9v77p+/frPeNSNRzZ/ISBwrG4ZR48eLamtrf2+uLjYSEG9Xi/wTISFhQlWGXohyzO/CJlVl23KQRLbABoaHx+/Z1lUZ/Hq1SsJFj3JT3hmHx8fnydPTEzMj46OziHPW2w22wxeD4Kfgadh/4YEzU8Az4DhffAn5eXlX1y6dKkEoCTspAQ9Mjs7+0BBo8Fms1lkZGTsOo0QLLRNkvnR+fEJzIMHD0xtbW39CL8JTFtSbAOvBIyLHIGVm9VzE2gKuDAMSSpcT6KXyT137lx2cnLyMXhcGDb3wq3XuWF3d/fCzZs3P0c4v5eSknJQbYLo7Ox0gC2lpaVZ3Be67Th/dnZWoAJKsJC3XA8fPhxoamp6hMb+BaaMgWcUMGtszZjiFDNmvcDI91pzG0iY4ARwkwrxkcHBwUdgNrRMbnrqoRbkVzDcvn3bl5qaWsmcgFH4G8XdEGUWFhak51AuISFBnkoCTyFbyWKxCJwIxlC0fq2rq7tcVFRkRKskjh8/Lr0+kBjCCDV/knfdv3//WX19/R8IRRNemxlu4AXwKqM+EJwdj1HbPYSwh3sCPAJDABm2LLchCjS+5/kirKGhwWk0GrMuXrxYQuX9hm/XXTMXMY+srKwI5ApZrbYmZh7deEJhAUKjLe/pLTzSsCuHrK+1tbUJVe3P6upq87Vr174rKysrYHVj/uW+OH3IfEuw4F3ee/fuPQfAvwOs5yyE4CnlFOu7BWrTCWlreO6FACpBZGwUw4BvkANLobReHb3kGZYGsGzTq/zlO8AT1ru6uoZbWlqeA6gINJAfnz59OlVLoX8Jtebm5raampqfcMvQYgTknz9//sKVK1c+y83NTdIEuCnaKMuNGzd+6+np6cCtSTkAw9D9X8Dyh+dbgaaAC1XAnUlPTy+qqqq6cPbs2UzkmWjNljiDJzpwHFnCkW2yo6NjCKW8H54wjlezKvRT09LSTsJrz5w6dSoN+Yp51ADAPUj8VoDbDq9pxrwuJcNIYQllJTIi/xopBw/VA7DJp0+f9hA78CgL5F5C8J2CpoCj8sfA6WCe/FPRhsRlZmbGIs8Y4FFO5CJgtrSsvrRVGW1V93b1myoGnKAKEcHgnwsWpg1lNI0fphwrmdqbckeU18WrnlOjqp5/j7W3BWvfQVPKa5SBkcrYCNVB65TRTlWZ1lXiXVU5xbtlDb2SPaLWYwrgHIcqPg6Vc7fbX69Yoyqfa7/AeiegbWOEVhmsVcWDwPn224iDJgla8Hd38Hd3ELQgaIeI/hZgAIPEp0vmQJdoAAAAAElFTkSuQmCC) no-repeat 50% 0;
+    background-size: 64px;
+    opacity: 1;
+  }
+
+  .christmas&-primary&-lg:before {
+    background-size: 72px;
+  }
+
+  .christmas&-primary&-sm:before {
+    background-size: 56px;
+  }
+
+  // https://github.com/ant-design/ant-design/issues/12681
+  &:empty {
+    vertical-align: top;
+  }
 }
 
 a.@{btn-prefix-cls} {

components/button/style/mixin.less

@@ -16,12 +16,17 @@
     &:active,
     &.active {
       .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+      text-shadow: none;
+      box-shadow: none;
     }
   }
 }
 
 .button-variant-primary(@color; @background) {
   .button-color(@color; @background; @background);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
+
   &:hover,
   &:focus {
     .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
@@ -72,6 +77,7 @@
 
 .button-variant-ghost(@color) {
   .button-color(@color; transparent; @color);
+  text-shadow: none;
 
   &:hover,
   &:focus {
@@ -95,7 +101,7 @@
   > a:only-child {
     color: currentColor;
     &:after {
-      content: '';
+      content: "";
       position: absolute;
       top: 0;
       left: 0;
@@ -112,7 +118,6 @@
   > .@{btnClassName},
   > span > .@{btnClassName} {
     position: relative;
-    line-height: @btn-height-base - 2px;
 
     &:hover,
     &:focus,
@@ -158,6 +163,7 @@
   user-select: none;
   transition: all .3s @ease-in-out;
   position: relative;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
 
   > .@{iconfont-css-prefix} {
     line-height: 1;
@@ -175,7 +181,7 @@
 
   &:not([disabled]):active {
     outline: 0;
-    transition: none;
+    box-shadow: none;
   }
 
   &.disabled,

components/calendar/Header.jsx

@@ -84,7 +84,7 @@ export default {
         const currentYear = value.get('year')
         if (rangeEnd.get('year') === currentYear) {
           end = rangeEnd.get('month') + 1
-        } else {
+        } else if (rangeStart.get('year') === currentYear) {
           start = rangeStart.get('month')
         }
       }

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

@@ -7,14 +7,14 @@ exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
       <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
         <div class="ant-select-selection__rendered">
           <div title="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
-        </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+        </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
       </div>
     </div>
     <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
       <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
         <div class="ant-select-selection__rendered">
           <div title="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
-        </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+        </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
       </div>
     </div>
     <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
@@ -313,14 +313,14 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
         <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
           <div class="ant-select-selection__rendered">
             <div title="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
-          </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+          </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
         </div>
       </div>
       <div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
         <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
           <div class="ant-select-selection__rendered">
             <div title="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
-          </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+          </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
         </div>
       </div>
       <div class="ant-radio-group ant-radio-group-outline ant-radio-group-small"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
@@ -619,14 +619,14 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
       <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
         <div class="ant-select-selection__rendered">
           <div title="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
-        </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+        </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
       </div>
     </div>
     <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
       <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
         <div class="ant-select-selection__rendered">
           <div title="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
-        </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+        </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
       </div>
     </div>
     <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
@@ -1032,14 +1032,14 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
           <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
             <div class="ant-select-selection__rendered">
               <div title="2017" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2017</div>
-            </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+            </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
           </div>
         </div>
         <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
           <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
             <div class="ant-select-selection__rendered">
               <div title="Jan" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Jan</div>
-            </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+            </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
           </div>
         </div>
         <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>
@@ -1336,14 +1336,14 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
           <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
             <div class="ant-select-selection__rendered">
               <div title="2017" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2017</div>
-            </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+            </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
           </div>
         </div>
         <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
           <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
             <div class="ant-select-selection__rendered">
               <div title="Jan" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Jan</div>
-            </div><span unselectable="unselectable" class="ant-select-arrow"><b></b></span>
+            </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
           </div>
         </div>
         <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>Month</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>Year</span></label></div>

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

@@ -0,0 +1,306 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Calendar Calendar should support locale 1`] = `
+<div class=" ant-fullcalendar-fullscreen">
+  <div class="ant-fullcalendar-header">
+    <div class="ant-select ant-select-enabled ant-fullcalendar-year-select">
+      <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
+        <div class="ant-select-selection__rendered">
+          <div title="2018年" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2018年</div>
+        </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+      </div>
+    </div>
+    <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
+      <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
+        <div class="ant-select-selection__rendered">
+          <div title="Oct" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Oct</div>
+        </div><span unselectable="unselectable" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span>
+      </div>
+    </div>
+    <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="date"><span class="ant-radio-button-inner"></span></span><span>月</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>年</span></label></div>
+  </div>
+  <div tabindex="0" class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen">
+    <div class="ant-fullcalendar-calendar-body">
+      <table cellspacing="0" role="grid" class="ant-fullcalendar-table">
+        <thead>
+          <tr role="row">
+            <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
+            <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
+            <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
+            <th role="columnheader" title="Wed" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">We</span></th>
+            <th role="columnheader" title="Thu" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Th</span></th>
+            <th role="columnheader" title="Fri" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Fr</span></th>
+            <th role="columnheader" title="Sat" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Sa</span></th>
+          </tr>
+        </thead>
+        <tbody class="ant-fullcalendar-tbody">
+          <tr role="row" class="">
+            <td role="gridcell" title="September 30, 2018" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">30</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 1, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">01</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 2, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">02</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 3, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">03</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 4, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">04</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 5, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">05</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 6, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">06</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+          </tr>
+          <tr role="row" class="">
+            <td role="gridcell" title="October 7, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">07</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 8, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">08</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 9, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">09</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 10, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">10</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 11, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">11</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 12, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">12</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 13, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">13</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+          </tr>
+          <tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
+            <td role="gridcell" title="October 14, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">14</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 15, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">15</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 16, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">16</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 17, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">17</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 18, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">18</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 19, 2018" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">19</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 20, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">20</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+          </tr>
+          <tr role="row" class="">
+            <td role="gridcell" title="October 21, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">21</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 22, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">22</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 23, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">23</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 24, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">24</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 25, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">25</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 26, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">26</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 27, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">27</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+          </tr>
+          <tr role="row" class="">
+            <td role="gridcell" title="October 28, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">28</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 29, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">29</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 30, 2018" class="ant-fullcalendar-cell">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">30</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="October 31, 2018" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">31</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 1, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">01</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 2, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">02</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 3, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">03</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+          </tr>
+          <tr role="row" class="">
+            <td role="gridcell" title="November 4, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">04</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 5, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">05</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 6, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">06</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 7, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">07</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 8, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">08</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 9, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">09</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+            <td role="gridcell" title="November 10, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
+              <div class="ant-fullcalendar-date">
+                <div class="ant-fullcalendar-value">10</div>
+                <div class="ant-fullcalendar-content"></div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;

components/calendar/__tests__/index.test.js

@@ -1,14 +1,14 @@
 import Moment from 'moment'
 import { mount } from '@vue/test-utils'
 import { asyncExpect } from '@/tests/utils'
-import Vue from 'vue'
+import MockDate from 'mockdate'
 import Calendar from '..'
 
 function $$ (className) {
   return document.body.querySelectorAll(className)
 }
 describe('Calendar', () => {
-  it('Calendar should be selectable', () => {
+  it('Calendar should be selectable', async () => {
     const onSelect = jest.fn()
     const wrapper = mount(
       {
@@ -18,13 +18,17 @@ describe('Calendar', () => {
       },
       { sync: false }
     )
-    wrapper.findAll('.ant-fullcalendar-cell').at(0).trigger('click')
+    await asyncExpect(() => {
-    expect(onSelect).toBeCalledWith(expect.anything())
+      wrapper.findAll('.ant-fullcalendar-cell').at(0).trigger('click')
-    const value = onSelect.mock.calls[0][0]
+    })
-    expect(Moment.isMoment(value)).toBe(true)
+    await asyncExpect(() => {
+      expect(onSelect).toBeCalledWith(expect.anything())
+      const value = onSelect.mock.calls[0][0]
+      expect(Moment.isMoment(value)).toBe(true)
+    })
   })
 
-  it('only Valid range should be selectable', () => {
+  it('only Valid range should be selectable', async () => {
     const onSelect = jest.fn()
     const validRange = [Moment('2018-02-02'), Moment('2018-02-18')]
     const wrapper = mount(
@@ -35,12 +39,14 @@ describe('Calendar', () => {
       },
       { sync: false }
     )
-    wrapper.findAll('[title="February 1, 2018"]').at(0).trigger('click')
+    await asyncExpect(() => {
-    wrapper.findAll('[title="February 2, 2018"]').at(0).trigger('click')
+      wrapper.findAll('[title="February 1, 2018"]').at(0).trigger('click')
-    expect(onSelect.mock.calls.length).toBe(1)
+      wrapper.findAll('[title="February 2, 2018"]').at(0).trigger('click')
+      expect(onSelect.mock.calls.length).toBe(1)
+    })
   })
 
-  it('dates other than in valid range should be disabled', () => {
+  it('dates other than in valid range should be disabled', async () => {
     const onSelect = jest.fn()
     const validRange = [Moment('2018-02-02'), Moment('2018-02-18')]
     const wrapper = mount(
@@ -51,12 +57,14 @@ describe('Calendar', () => {
       },
       { sync: false }
     )
-    wrapper.findAll('[title="February 20, 2018"]').at(0).trigger('click')
+    await asyncExpect(() => {
-    expect(wrapper.find('[title="February 20, 2018"]').classes()).toContain('ant-fullcalendar-disabled-cell')
+      wrapper.findAll('[title="February 20, 2018"]').at(0).trigger('click')
-    expect(onSelect.mock.calls.length).toBe(0)
+      expect(wrapper.find('[title="February 20, 2018"]').classes()).toContain('ant-fullcalendar-disabled-cell')
+      expect(onSelect.mock.calls.length).toBe(0)
+    })
   })
 
-  it('months other than in valid range should be disabled', () => {
+  it('months other than in valid range should be disabled', async () => {
     const onSelect = jest.fn()
     const validRange = [Moment('2018-02-02'), Moment('2018-05-18')]
     const wrapper = mount(
@@ -67,12 +75,14 @@ describe('Calendar', () => {
       },
       { sync: false }
     )
-    expect(wrapper.findAll('[title="Jan"]').at(0).classes()).toContain('ant-fullcalendar-month-panel-cell-disabled')
+    await asyncExpect(() => {
-    expect(wrapper.findAll('[title="Feb"]').at(0).classes()).not.toContain('ant-fullcalendar-month-panel-cell-disabled')
+      expect(wrapper.findAll('[title="Jan"]').at(0).classes()).toContain('ant-fullcalendar-month-panel-cell-disabled')
-    expect(wrapper.findAll('[title="Jun"]').at(0).classes()).toContain('ant-fullcalendar-month-panel-cell-disabled')
+      expect(wrapper.findAll('[title="Feb"]').at(0).classes()).not.toContain('ant-fullcalendar-month-panel-cell-disabled')
-    wrapper.findAll('[title="Jan"]').at(0).trigger('click')
+      expect(wrapper.findAll('[title="Jun"]').at(0).classes()).toContain('ant-fullcalendar-month-panel-cell-disabled')
-    wrapper.findAll('[title="Mar"]').at(0).trigger('click')
+      wrapper.findAll('[title="Jan"]').at(0).trigger('click')
-    expect(onSelect.mock.calls.length).toBe(1)
+      wrapper.findAll('[title="Mar"]').at(0).trigger('click')
+      expect(onSelect.mock.calls.length).toBe(1)
+    })
   })
 
   it('months other than in valid range should not be shown in header', async () => {
@@ -92,15 +102,9 @@ describe('Calendar', () => {
     await asyncExpect(() => {
       $$('.ant-select-dropdown-menu-item')[0].click()
     }, 0)
-    // await asyncExpect(() => {
-    //   wrapper.find('.ant-fullcalendar-month-select').trigger('click')
-    // })
-    // await asyncExpect(() => {
-    //   expect($$('.ant-select-dropdown-menu-item').length).toBe(13)
-    // })
   })
 
-  it('getDateRange should returns a disabledDate function', () => {
+  it('getDateRange should returns a disabledDate function', async () => {
     const validRange = [Moment('2018-02-02'), Moment('2018-05-18')]
     const wrapper = mount(
       Calendar, {
@@ -111,25 +115,28 @@ describe('Calendar', () => {
         sync: false,
       }
     )
-    const instance = wrapper.vm
+    await asyncExpect(() => {
-    const disabledDate = instance.getDateRange(validRange)
+      const instance = wrapper.vm
-    expect(disabledDate(Moment('2018-06-02'))).toBe(true)
+      const disabledDate = instance.getDateRange(validRange)
-    expect(disabledDate(Moment('2018-04-02'))).toBe(false)
+      expect(disabledDate(Moment('2018-06-02'))).toBe(true)
-  })
+      expect(disabledDate(Moment('2018-04-02'))).toBe(false)
-
-  it('Calendar should change mode by prop', (done) => {
-    const monthMode = 'month'
-    const yearMode = 'year'
-    const wrapper = mount(Calendar, { sync: false })
-    expect(wrapper.vm.sMode).toEqual(monthMode)
-    wrapper.setProps({ mode: 'year' })
-    Vue.nextTick(() => {
-      expect(wrapper.vm.sMode).toEqual(yearMode)
-      done()
     })
   })
 
-  it('Calendar should switch mode', (done) => {
+  it('Calendar should change mode by prop', async () => {
+    const monthMode = 'month'
+    const yearMode = 'year'
+    const wrapper = mount(Calendar, { sync: false })
+    await asyncExpect(() => {
+      expect(wrapper.vm.sMode).toEqual(monthMode)
+      wrapper.setProps({ mode: 'year' })
+    })
+    await asyncExpect(() => {
+      expect(wrapper.vm.sMode).toEqual(yearMode)
+    })
+  })
+
+  it('Calendar should switch mode', async () => {
     const monthMode = 'month'
     const yearMode = 'year'
     const onPanelChangeStub = jest.fn()
@@ -144,12 +151,26 @@ describe('Calendar', () => {
         sync: false,
       }
     )
-    expect(wrapper.vm.sMode).toEqual(yearMode)
+    await asyncExpect(() => {
-    wrapper.vm.setType('date')
+      expect(wrapper.vm.sMode).toEqual(yearMode)
-    Vue.nextTick(() => {
+      wrapper.vm.setType('date')
+    })
+    await asyncExpect(() => {
       expect(wrapper.vm.sMode).toEqual(monthMode)
       expect(onPanelChangeStub).toHaveBeenCalledTimes(1)
-      done()
+    })
+  })
+
+  it('Calendar should support locale', async () => {
+    MockDate.set(Moment('2018-10-19'))
+    // eslint-disable-next-line
+    const zhCN = require('../locale/zh_CN').default;
+    const wrapper = mount(Calendar, { propsData: {
+      locale: zhCN,
+    }, sync: false })
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      MockDate.reset()
     })
   })
 })

components/calendar/demo/index.vue

@@ -28,6 +28,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 export default {
   category: 'Components',
   type: 'Data Display',
+  zhType: '数据展示',
   subtitle: '日历',
   cols: 1,
   title: 'Calendar',

components/calendar/index.en-US.md

@@ -4,7 +4,7 @@
 **Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `moment` correctly.
 
 ````html
-// The default locale is en-US, if you want to use other locale, just set locale in entry file globaly.
+// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
 // import moment from 'moment';
 // import 'moment/locale/zh-cn';
 // moment.locale('zh-cn');

components/calendar/index.jsx

@@ -41,7 +41,7 @@ export const CalendarProps = () => ({
   // monthCellRender: PropTypes.func,
   // dateFullCellRender: PropTypes.func,
   // monthFullCellRender: PropTypes.func,
-  locale: PropTypes.any,
+  locale: PropTypes.object,
   // onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
   // onSelect?: (date?: moment.Moment) => void;
   disabledDate: PropTypes.func,
@@ -226,13 +226,24 @@ const Calendar = {
         </div>
       )
     },
+    getDefaultLocale () {
+      const result = {
+        ...enUS,
+        ...this.$props.locale,
+      }
+      result.lang = {
+        ...result.lang,
+        ...(this.$props.locale || {}).lang,
+      }
+      return result
+    },
   },
 
   render () {
     return (
       <LocaleReceiver
         componentName='Calendar'
-        defaultLocale={enUS}
+        defaultLocale={this.getDefaultLocale}
         scopedSlots={
           { default: this.renderCalendar }
         }

components/calendar/locale/mn_MN.js

@@ -0,0 +1,2 @@
+import mn_MN from '../../date-picker/locale/mn_MN'
+export default mn_MN

components/card/Card.jsx

@@ -4,7 +4,7 @@ import Row from '../row'
 import Col from '../col'
 import PropTypes from '../_util/vue-types'
 import addEventListener from '../_util/Dom/addEventListener'
-import { getComponentFromProp, getSlotOptions, isEmptyElement, filterEmpty } from '../_util/props-util'
+import { getComponentFromProp, getSlotOptions, filterEmpty } from '../_util/props-util'
 import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'
 import BaseMixin from '../_util/BaseMixin'
 

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

@@ -33,16 +33,6 @@ exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/card/demo/concise.md correctly 1`] = `
-<div class="ant-card ant-card-bordered" style="width: 300px;">
-  <div class="ant-card-body">
-    <p>Card content</p>
-    <p>Card content</p>
-    <p>Card content</p>
-  </div>
-</div>
-`;
-
 exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = `
 <div class="ant-card ant-card-bordered ant-card-hoverable" style="width: 240px;">
   <div class="ant-card-cover"><img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"></div>
@@ -236,9 +226,9 @@ exports[`renders ./components/card/demo/meta.md correctly 1`] = `
     </div>
   </div>
   <ul class="ant-card-actions">
-    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-setting"></i></span></li>
+    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-setting"><svg viewBox="64 64 896 896" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></i></span></li>
-    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-edit"></i></span></li>
+    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></span></li>
-    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-ellipsis"></i></span></li>
+    <li style="width: 33.333333333333336%;"><span><i class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path></svg></i></span></li>
   </ul>
 </div>
 `;
@@ -262,13 +252,13 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
         <div class="ant-card-extra"><a href="#">More</a></div>
       </div>
       <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs no-flex">
-        <div role="tablist" tabindex="0" class="ant-tabs-bar">
+        <div role="tablist" tabindex="0" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar">
-          <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+          <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><i class="ant-tabs-tab-prev-icon-target anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><i class="ant-tabs-tab-next-icon-target anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></span>
             <div class="ant-tabs-nav-wrap">
               <div class="ant-tabs-nav-scroll">
                 <div class="ant-tabs-nav ant-tabs-nav-animated">
                   <div>
-                    <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab"><span><i class="anticon anticon-home"></i>tab1
+                    <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab"><span><i class="anticon anticon-home"><svg viewBox="64 64 896 896" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 0 0-44.4 0L77.5 505a63.9 63.9 0 0 0-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0 0 18.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></i>tab1
     </span></div>
                     <div role="tab" aria-disabled="false" aria-selected="false" class=" ant-tabs-tab">tab2</div>
                   </div>
@@ -278,10 +268,15 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left: 0%;">
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
-          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
+        <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: 0%;">
+          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+          </div>
           <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
         </div>
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
       </div>
     </div>
     <div class="ant-card-body">
@@ -292,8 +287,8 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
     <div class="ant-card-head">
       <div class="ant-card-head-wrapper"></div>
       <div class="ant-tabs ant-tabs-top ant-tabs-large ant-tabs-line ant-card-head-tabs no-flex">
-        <div role="tablist" tabindex="0" class="ant-tabs-bar">
+        <div role="tablist" tabindex="0" class="ant-tabs-bar ant-tabs-top-bar ant-tabs-large-bar">
-          <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+          <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"><i class="ant-tabs-tab-prev-icon-target anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"><i class="ant-tabs-tab-next-icon-target anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></span>
             <div class="ant-tabs-nav-wrap">
               <div class="ant-tabs-nav-scroll">
                 <div class="ant-tabs-nav ant-tabs-nav-animated">
@@ -308,11 +303,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
             </div>
           </div>
         </div>
-        <div class="ant-tabs-content ant-tabs-content-animated" style="margin-left: -100%;">
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+        <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: -100%;">
           <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
-          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active"></div>
+          <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
+          </div>
           <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
         </div>
+        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden;"></div>
       </div>
     </div>
     <div class="ant-card-body">

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -59,3 +59,17 @@ exports[`Card should still have padding when card which set padding to 0 is load
   </div>
 </div>
 `;
+
+exports[`Card title should be vertically aligned 1`] = `
+<div class="ant-card ant-card-bordered" style="width: 300px;">
+  <div class="ant-card-head">
+    <div class="ant-card-head-wrapper">
+      <div class="ant-card-head-title">Card title</div>
+      <div class="ant-card-extra"><button type="button" class="ant-btn ant-btn-default"><span>Button</span></button></div>
+    </div>
+  </div>
+  <div class="ant-card-body">
+    <p>Card content</p>
+  </div>
+</div>
+`;

components/card/__tests__/index.test.js

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import Card from '../index'
+import Button from '../../button/index'
 
 const testMethod = typeof window !== 'undefined' ? it : xit
 
@@ -46,4 +47,15 @@ describe('Card', () => {
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('title should be vertically aligned', () => {
+    const wrapper = mount({
+      render () {
+        return <Card title='Card title' extra={<Button>Button</Button>} style={{ width: '300px' }}>
+          <p>Card content</p>
+        </Card>
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })

components/card/demo/concise.md

@@ -1,19 +0,0 @@
-<cn>
-  #### 简洁卡片
-  只包含内容区域
-</cn>
-
-<us>
-  #### Simple card
-  A simple card only containing a content area.
-</us>
-
-```html
-<template>
-  <a-card style="width:300px">
-    <p>Card content</p>
-    <p>Card content</p>
-    <p>Card content</p>
-  </a-card>
-</template>
-```

components/card/demo/index.vue

@@ -1,7 +1,6 @@
 <script>
 import Basic from './basic.md'
 import BorderLess from './border-less.md'
-import Concise from './concise.md'
 import FlexibleContent from './flexible-content.md'
 import GridCard from './grid-card.md'
 import InColumn from './in-column.md'
@@ -33,6 +32,7 @@ const md = {
 export default {
   category: 'Components',
   type: 'Data Display',
+  zhType: '数据展示',
   title: 'Card',
   subtitle: '卡片',
   cols: 1,
@@ -42,7 +42,6 @@ export default {
         <md cn={md.cn} us={md.us} />
         <Basic/>
         <BorderLess/>
-        <Concise/>
         <FlexibleContent/>
         <GridCard/>
         <InColumn/>

components/card/style/index.less

@@ -33,26 +33,30 @@
     .clearfix;
     margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
     min-height: @card-head-height;
+    font-size: @font-size-lg;
+    color: @card-head-color;
+    font-weight: 500;
 
     &-wrapper {
       display: flex;
+      align-items: center;
     }
 
     &-title {
-      font-size: @font-size-lg;
       padding: @card-head-padding 0;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
-      color: @card-head-color;
-      font-weight: 500;
-      display: inline-block;
       flex: 1;
+      display: inline-block;
     }
 
     .@{ant-prefix}-tabs {
       margin-bottom: -17px;
       clear: both;
+      font-size: @font-size-base;
+      color: @text-color;
+      font-weight: normal;
 
       &-bar {
         border-bottom: @border-width-base @border-style-base @border-color-split;
@@ -63,6 +67,9 @@
   &-extra {
     float: right;
     padding: @card-head-padding + 1.5px 0;
+    font-size: @font-size-base;
+    color: @text-color;
+    font-weight: normal;
     text-align: right;
     // https://stackoverflow.com/a/22429853/3040605
     margin-left: auto;
@@ -73,7 +80,7 @@
     .clearfix;
   }
 
-  &-contain-grid:not(&-loading) {
+  &-contain-grid:not(&-loading) &-body {
     margin: -1px 0 0 -1px;
     padding: 0;
   }
@@ -93,7 +100,7 @@
     }
   }
 
-  &-contain-tabs &-head-title {
+  &-contain-tabs > &-head &-head-title {
     padding-bottom: 0;
     min-height: @card-head-height - @card-head-padding;
   }
@@ -142,8 +149,6 @@
         & > .anticon {
           font-size: 16px;
           line-height: 22px;
-          display: block;
-          width: 100%;
         }
 
         a {

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

@@ -163,7 +163,10 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
 exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
 <div class="ant-carousel">
   <div class="slick-slider slick-initialized">
-    <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><i class="anticon anticon-left-circle"></i></div>
+    <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><i class="anticon anticon-left-circle"><svg viewBox="64 64 896 896" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M603.3 327.5l-246 178a7.95 7.95 0 0 0 0 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path>
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+        </svg></i></div>
     <div class="slick-list">
       <div class="slick-track" style="width: 900%; left: -100%;">
         <div tabindex="-1" data-index="-1" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
@@ -231,7 +234,10 @@ exports[`renders ./components/carousel/demo/customArrows.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <div class="custom-slick-arrow slick-arrow slick-next" style="right: 10px; display: block;"><i class="anticon anticon-right-circle"></i></div>
+    <div class="custom-slick-arrow slick-arrow slick-next" style="right: 10px; display: block;"><i class="anticon anticon-right-circle"><svg viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+          <path d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path>
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+        </svg></i></div>
     <ul class="slick-dots" style="display: block;">
       <li class="slick-active"><button class="">1</button></li>
       <li class=""><button class="">2</button></li>

components/carousel/demo/index.vue

@@ -34,6 +34,7 @@ const md = {
 export default {
   category: 'Components',
   type: 'Data Display',
+  zhType: '数据展示',
   title: 'Carousel',
   subtitle: '走马灯',
   render () {

components/carousel/index.en-US.md

@@ -14,7 +14,7 @@
 
 | Name | Description |
 | ---- | ----------- |
-| goTo(slideNumber) | Change current slide to given slide number |
+| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
 | next() | Change current slide to next slide |
 | prev() | Change current slide to previous slide |
 

components/carousel/index.jsx

@@ -119,8 +119,8 @@ const Carousel = {
       this.$refs.slick.slickPrev()
     },
 
-    goTo (slide) {
+    goTo (slide, dontAnimate = false) {
-      this.$refs.slick.slickGoTo(slide)
+      this.$refs.slick.slickGoTo(slide, dontAnimate)
     },
   },
 

components/carousel/index.zh-CN.md

@@ -14,7 +14,7 @@
 
 | 名称 | 描述 |
 | --- | --- |
-| goTo(slideNumber) | 切换到指定面板 |
+| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
 | next() | 切换到下一面板 |
 | prev() | 切换到上一面板 |
 

components/carousel/style/index.less

@@ -27,6 +27,14 @@
     &.dragging {
       cursor: pointer;
     }
+
+    .slick-slide {
+      pointer-events: none;
+
+      &.slick-active {
+        pointer-events: auto;
+      }
+    }
   }
   .slick-slider .slick-track,
   .slick-slider .slick-list {

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

@@ -1,8 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
-exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
 exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
 <span tabindex="0" class="ant-cascader-picker" style="width: 100%;"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"><span><span>
@@ -11,7 +19,11 @@ exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
         Hangzhou / 
       </span></span><span><span>
       West Lake (<a>752100</a>)
-      </span></span></span><i class="anticon anticon-cross-circle ant-cascader-picker-clear"></i><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>
+      </span></span></span><i class="ant-cascader-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
+  </svg></i><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
 `;
 
 exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
@@ -21,16 +33,56 @@ exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
   <a href="#" tabindex="0" class="">Change city</a></span>
 `;
 
-exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="anticon anticon-cross-circle ant-cascader-picker-clear"></i><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="ant-cascader-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
+  </svg></i><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
-exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
-exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/fields-name.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
-exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
-exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
-exports[`renders ./components/cascader/demo/search.md correctly 1`] = `<span tabindex="0" class="ant-cascader-picker ant-cascader-picker-show-search"><span class="ant-cascader-picker-label"></span><input value="" placeholder="Please select" type="text" class="ant-input ant-cascader-input  ant-cascader-input "><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
+<span tabindex="0" class="ant-cascader-picker ant-cascader-picker-show-search"><span class="ant-cascader-picker-label"></span><input value="" placeholder="Please select" type="text" class="ant-input ant-cascader-input  ant-cascader-input "><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;
 
-exports[`renders ./components/cascader/demo/size.md correctly 1`] = `<div><span tabindex="0" class="ant-cascader-picker ant-cascader-picker-large"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input ant-input-lg ant-cascader-input ant-input-lg"><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span><br><br> <span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span><br><br> <span tabindex="0" class="ant-cascader-picker ant-cascader-picker-small"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input ant-input-sm ant-cascader-input ant-input-sm"><span class="ant-cascader-picker-label"></span><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span><br><br></div>`;
+exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
+<div><span tabindex="0" class="ant-cascader-picker ant-cascader-picker-large"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input ant-input-lg ant-cascader-input ant-input-lg"><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+    </svg></i></span><br><br> <span tabindex="0" class="ant-cascader-picker"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+    </svg></i></span><br><br> <span tabindex="0" class="ant-cascader-picker ant-cascader-picker-small"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input ant-input-sm ant-cascader-input ant-input-sm"><span class="ant-cascader-picker-label"></span><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+    </svg></i></span><br><br></div>
+`;
+
+exports[`renders ./components/cascader/demo/suffix.md correctly 1`] = `
+<div><span tabindex="0" class="ant-cascader-picker" style="margin-top: 1rem;"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><i class="test anticon anticon-smile ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path>
+    </svg></i></span> <span tabindex="0" class="ant-cascader-picker" style="margin-top: 1rem;"><input value="" placeholder="Please select" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"></span><span class="ant-cascader-picker-arrow">ab</span></span></div>
+`;

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -5,11 +5,11 @@ exports[`Cascader can be selected 1`] = `
   <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
     <div class="ant-cascader-menus-content">
       <ul class="ant-cascader-menu">
-        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
-        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
       <ul class="ant-cascader-menu">
-        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou</li>
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
     </div>
   </div>
@@ -21,11 +21,11 @@ exports[`Cascader can be selected 2`] = `
   <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
     <div class="ant-cascader-menus-content">
       <ul class="ant-cascader-menu">
-        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
-        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
       <ul class="ant-cascader-menu">
-        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
       <ul class="ant-cascader-menu">
         <li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
@@ -40,11 +40,11 @@ exports[`Cascader can be selected 3`] = `
   <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="display: none;">
     <div class="ant-cascader-menus-content">
       <ul class="ant-cascader-menu">
-        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
-        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
       <ul class="ant-cascader-menu">
-        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
       <ul class="ant-cascader-menu">
         <li title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">West Lake</li>
@@ -67,8 +67,8 @@ exports[`Cascader popup correctly when panel is open 1`] = `
   <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
     <div class="ant-cascader-menus-content">
       <ul class="ant-cascader-menu">
-        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang</li>
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
-        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
     </div>
   </div>
@@ -80,11 +80,11 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
   <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
     <div class="ant-cascader-menus-content">
       <ul class="ant-cascader-menu">
-        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
-        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
       <ul class="ant-cascader-menu">
-        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><i class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></span></li>
       </ul>
       <ul class="ant-cascader-menu">
         <li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
@@ -94,4 +94,10 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
 </div>
 `;
 
-exports[`Cascader support controlled mode 1`] = `<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="anticon anticon-cross-circle ant-cascader-picker-clear"></i><i class="anticon anticon-down ant-cascader-picker-arrow"></i></span>`;
+exports[`Cascader support controlled mode 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><i class="ant-cascader-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
+  </svg></i><i class="ant-cascader-picker-arrow anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+  </svg></i></span>
+`;

components/cascader/demo/index.vue

@@ -10,6 +10,7 @@ import Lazy from './lazy'
 import Search from './search'
 import Size from './size'
 import FieldsName from './fields-name'
+import Suffix from './suffix'
 
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
@@ -33,6 +34,7 @@ const md = {
 export default {
   category: 'Components',
   type: 'Data Entry',
+  zhType: '数据录入',
   title: 'Cascader',
   subtitle: '级联选择',
   render () {
@@ -50,6 +52,7 @@ export default {
         <Search/>
         <Size/>
         <FieldsName />
+        <Suffix />
         <api>
           <CN slot='cn' />
           <US/>

components/cascader/demo/suffix.md

@@ -0,0 +1,58 @@
+
+<cn>
+#### 后缀图标
+省市区级联。
+</cn>
+
+<us>
+#### Suffix
+Cascade selection box for selecting province/city/district.
+</us>
+
+```html
+<template>
+  <div>
+    <a-cascader style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select">
+      <a-icon type="smile" slot="suffixIcon" class="test"/>
+    </a-cascader>
+    <a-cascader suffixIcon="ab" style="margin-top: 1rem" :options="options" @change="onChange" placeholder="Please select" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      options: [{
+        value: 'zhejiang',
+        label: 'Zhejiang',
+        children: [{
+          value: 'hangzhou',
+          label: 'Hangzhou',
+          children: [{
+            value: 'xihu',
+            label: 'West Lake',
+          }],
+        }],
+      }, {
+        value: 'jiangsu',
+        label: 'Jiangsu',
+        children: [{
+          value: 'nanjing',
+          label: 'Nanjing',
+          children: [{
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          }],
+        }],
+      }]
+    }
+  },
+  methods: {
+    onChange(value) {
+      console.log(value);
+    }
+  }
+}
+</script>
+```
+

components/cascader/index.en-US.md

@@ -26,6 +26,7 @@
 | popupVisible | set visible of cascader popup | boolean | - |
 | showSearch | Whether show search input in single mode. | boolean\|object | false |
 | size | input size, one of `large` `default` `small` | string | `default` |
+| suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
 | value(v-model) | selected value | string\[] | - |
 
 Fields in `showSearch`:

components/cascader/index.jsx

@@ -7,8 +7,9 @@ import omit from 'omit.js'
 import KeyCode from '../_util/KeyCode'
 import Input from '../input'
 import Icon from '../icon'
-import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs } from '../_util/props-util'
+import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs, getComponentFromProp, isValidElement } from '../_util/props-util'
 import BaseMixin from '../_util/BaseMixin'
+import { cloneElement } from '../_util/vnode'
 
 const CascaderOptionType = PropTypes.shape({
   value: PropTypes.string,
@@ -74,6 +75,7 @@ const CascaderProps = {
   popupVisible: PropTypes.bool,
   fieldNames: FieldNamesType,
   autoFocus: PropTypes.bool,
+  suffixIcon: PropTypes.any,
 }
 
 function defaultFilterOption (inputValue, path, names) {
@@ -88,7 +90,7 @@ function defaultSortFilteredOption (a, b, inputValue, names) {
   return a.findIndex(callback) - b.findIndex(callback)
 }
 
-function getFilledFieldNames (fieldNames = {}) {
+function getFilledFieldNames ({ fieldNames = {}}) {
   const names = {
     children: fieldNames.children || 'children',
     label: fieldNames.label || 'label',
@@ -110,13 +112,13 @@ const Cascader = {
   },
   data () {
     this.cachedOptions = []
-    const { value, defaultValue, popupVisible, showSearch, options, changeOnSelect, flattenTree, fieldNames } = this
+    const { value, defaultValue, popupVisible, showSearch, options, flattenTree } = this
     return {
       sValue: value || defaultValue || [],
       inputValue: '',
       inputFocused: false,
       sPopupVisible: popupVisible,
-      flattenOptions: showSearch ? flattenTree(options, changeOnSelect, fieldNames) : undefined,
+      flattenOptions: showSearch ? flattenTree(options, this.$props) : undefined,
     }
   },
   mounted () {
@@ -135,7 +137,7 @@ const Cascader = {
     },
     options (val) {
       if (this.showSearch) {
-        this.setState({ flattenOptions: this.flattenTree(this.options, this.changeOnSelect, this.fieldNames) })
+        this.setState({ flattenOptions: this.flattenTree(this.options, this.$props) })
       }
     },
   },
@@ -218,8 +220,8 @@ const Cascader = {
     },
 
     getLabel () {
-      const { options, $scopedSlots, fieldNames } = this
+      const { options, $scopedSlots } = this
-      const names = getFilledFieldNames(fieldNames)
+      const names = getFilledFieldNames(this.$props)
       const displayRender = this.displayRender || $scopedSlots.displayRender || defaultDisplayRender
       const value = this.sValue
       const unwrappedValue = Array.isArray(value[0]) ? value[0] : value
@@ -242,18 +244,18 @@ const Cascader = {
       }
     },
 
-    flattenTree (options, changeOnSelect, fieldNames, ancestor = []) {
+    flattenTree (options, props, ancestor = []) {
-      const names = getFilledFieldNames(fieldNames)
+      const names = getFilledFieldNames(props)
       let flattenOptions = []
       const childrenName = names.children
       options.forEach((option) => {
         const path = ancestor.concat(option)
-        if (changeOnSelect || !option[childrenName] || !option[childrenName].length) {
+        if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
           flattenOptions.push(path)
         }
         if (option[childrenName]) {
           flattenOptions = flattenOptions.concat(
-            this.flattenTree(option[childrenName], changeOnSelect, fieldNames, path)
+            this.flattenTree(option[childrenName], props, path)
           )
         }
       })
@@ -261,8 +263,8 @@ const Cascader = {
     },
 
     generateFilteredOptions (prefixCls) {
-      const { showSearch, notFoundContent, $scopedSlots, fieldNames } = this
+      const { showSearch, notFoundContent, $scopedSlots } = this
-      const names = getFilledFieldNames(fieldNames)
+      const names = getFilledFieldNames(this.$props)
       const {
         filter = defaultFilterOption,
         // render = this.defaultRenderFilteredOption,
@@ -308,6 +310,8 @@ const Cascader = {
     const { $slots, sPopupVisible, inputValue, $listeners } = this
     const { sValue: value, inputFocused } = this.$data
     const props = getOptionProps(this)
+    let suffixIcon = getComponentFromProp(this, 'suffixIcon')
+    suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
     const {
       prefixCls, inputPrefixCls, placeholder, size, disabled,
       allowClear, showSearch = false, ...otherProps } = props
@@ -318,7 +322,8 @@ const Cascader = {
     })
     const clearIcon = (allowClear && !disabled && value.length > 0) || inputValue ? (
       <Icon
-        type='cross-circle'
+        type='close-circle'
+        theme='filled'
         class={`${prefixCls}-picker-clear`}
         onClick={this.clearSelection}
         key='clear-icon'
@@ -403,6 +408,19 @@ const Cascader = {
       attrs: getAttrs(this),
     }
     const children = filterEmpty($slots.default)
+    const inputIcon = suffixIcon && (
+      isValidElement(suffixIcon)
+        ? cloneElement(
+          suffixIcon,
+          {
+            class: {
+              [`${prefixCls}-picker-arrow`]: true,
+            },
+          },
+        ) : <span class={`${prefixCls}-picker-arrow`}>{suffixIcon}</span>) || (
+      <Icon type='down' class={arrowCls} />
+    )
+
     const input = children.length ? children : (
       <span
         class={pickerCls}
@@ -417,7 +435,17 @@ const Cascader = {
           {this.getLabel()}
         </span> : null}
         {clearIcon}
-        <Icon type='down' key='down-icon' class={arrowCls} />
+        {inputIcon}
+      </span>
+    )
+
+    const expandIcon = (
+      <Icon type='right' />
+    )
+
+    const loadingIcon = (
+      <span class={`${prefixCls}-menu-item-loading-icon`}>
+        <Icon type='redo' spin />
       </span>
     )
     const cascaderProps = {
@@ -427,6 +455,8 @@ const Cascader = {
         value: value,
         popupVisible: sPopupVisible,
         dropdownMenuColumnStyle: dropdownMenuColumnStyle,
+        expandIcon,
+        loadingIcon,
       },
       on: {
         ...$listeners,

components/cascader/index.zh-CN.md

@@ -26,6 +26,7 @@
 | popupVisible | 控制浮层显隐 | boolean | - |
 | showSearch | 在选择框中显示搜索框 | boolean | false |
 | size | 输入框大小，可选 `large` `default` `small` | string | `default` |
+| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
 | value(v-model) | 指定选中项 | string\[] | - |
 
 `showSearch` 为对象时，其中的字段：

components/cascader/style/index.less

@@ -13,7 +13,7 @@
     background-color: transparent !important;
     cursor: pointer;
     width: 100%;
-    position: static;
+    position: relative;
   }
 
   &-picker-show-search &-input.@{ant-prefix}-input {
@@ -101,13 +101,9 @@
       margin-top: -6px;
       line-height: 12px;
       color: @disabled-color;
-      &:before {
+      transition: transform .2s;
-        transition: transform .2s;
-      }
       &&-expand {
-        &:before {
+        transform: rotate(180deg);
-          transform: rotate(180deg);
-        }
       }
     }
   }
@@ -205,17 +201,14 @@
     &-expand {
       position: relative;
       padding-right: 24px;
-      &:after {
-        .iconfont-font("\e61f");
-        .iconfont-size-under-12px(8px);
-        color: @text-color-secondary;
-        position: absolute;
-        right: @control-padding-horizontal;
-      }
     }
-    &-loading:after {
+
-      .iconfont-font("\e64d");
+    &-expand &-expand-icon,
-      animation: loadingCircle 1s infinite linear;
+    &-expand &-loading-icon {
+      .iconfont-size-under-12px(10px);
+      color: @text-color-secondary;
+      position: absolute;
+      right: @control-padding-horizontal;
     }
 
     & &-keyword {

components/checkbox/Checkbox.jsx

@@ -55,7 +55,10 @@ export default {
     } = props
     const checkboxProps = { props: { ...restProps, prefixCls }, on: restListeners, attrs: getAttrs(this) }
     if (checkboxGroup) {
-      checkboxProps.on.change = () => checkboxGroup.toggleOption({ label: children, value: props.value })
+      checkboxProps.on.change = (...args) => {
+        this.$emit('change', ...args)
+        checkboxGroup.toggleOption({ label: children, value: props.value })
+      }
       checkboxProps.props.checked = checkboxGroup.sValue.indexOf(props.value) !== -1
       checkboxProps.props.disabled = props.disabled || checkboxGroup.disabled
     } else {
@@ -63,6 +66,8 @@ export default {
     }
     const classString = classNames({
       [`${prefixCls}-wrapper`]: true,
+      [`${prefixCls}-wrapper-checked`]: checkboxProps.props.checked,
+      [`${prefixCls}-wrapper-disabled`]: checkboxProps.props.disabled,
     })
     const checkboxClass = classNames({
       [`${prefixCls}-indeterminate`]: indeterminate,
@@ -78,7 +83,7 @@ export default {
           class={checkboxClass}
           ref='vcCheckbox'
         />
-        {children !== undefined ? <span>{children}</span> : null}
+        {children !== undefined && <span>{children}</span>}
       </label>
     )
   },

components/checkbox/Group.jsx

@@ -1,6 +1,7 @@
 
 import Checkbox from './Checkbox'
 import hasProp from '../_util/props-util'
+function noop () {}
 export default {
   name: 'ACheckboxGroup',
   props: {
@@ -82,7 +83,7 @@ export default {
           disabled={'disabled' in option ? option.disabled : props.disabled}
           value={option.value}
           checked={state.sValue.indexOf(option.value) !== -1}
-          onChange={() => this.toggleOption(option)}
+          onChange={option.onChange || noop}
           class={`${groupPrefixCls}-item`}
         >
           {option.label}

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

@@ -7,27 +7,27 @@ exports[`renders ./components/checkbox/demo/check-all.md correctly 1`] = `
   <div style="border-bottom: 1px solid #E9E9E9;"><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-indeterminate"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
       Check all
     </span></label></div> <br>
-  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
+  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
 </div>
 `;
 
 exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
 <div>
-  <p style="margin-bottom: 20px;"><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
+  <p style="margin-bottom: 20px;"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
       Checked-Enabled
     </span></label></p>
   <p><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>Uncheck</span></button> <button type="button" class="ant-btn ant-btn-primary ant-btn-sm" style="margin-left: 10px;"><span>Disable</span></button></p>
 </div>
 `;
 
-exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `<div><label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> <br> <label class="ant-checkbox-wrapper"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></div>`;
+exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `<div><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label> <br> <label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></div>`;
 
 exports[`renders ./components/checkbox/demo/group.md correctly 1`] = `
 <div>
   <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div> <br>
-  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div> <br>
+  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div> <br>
-  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div> <br>
+  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div> <br>
-  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
+  <div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
 </div>
 `;
 

components/checkbox/__tests__/group.test.js

@@ -103,4 +103,21 @@ describe('CheckboxGroup', () => {
       expect(wrapper.vm.sValue).toEqual(['Apple'])
     })
   })
+
+  // https://github.com/ant-design/ant-design/issues/12642
+  it('should trigger onChange in sub Checkbox', () => {
+    const onChange = jest.fn()
+    const wrapper = mount({
+      render () {
+        return (
+          <Checkbox.Group>
+            <Checkbox value='my' onChange={onChange} />
+          </Checkbox.Group>
+        )
+      },
+    })
+    wrapper.findAll('.ant-checkbox-input').at(0).trigger('change')
+    expect(onChange).toBeCalled()
+    expect(onChange.mock.calls[0][0].target.value).toEqual('my')
+  })
 })

components/checkbox/demo/index.vue

@@ -29,6 +29,7 @@
     category: 'Components',
     subtitle: '多选框',
     type: 'Data Entry',
+    zhType: '数据录入',
     title: 'Checkbox',
     render () {
       return (

components/checkbox/index.en-US.md

@@ -23,7 +23,7 @@
 | -------- | ----------- | ---- | ------- |
 | defaultValue | Default selected value | string\[] | \[] |
 | disabled | Disable all checkboxes | boolean | false |
-| options | Specifies options | string\[] \| Array<{ label: string value: string disabled?: boolean }> | \[] |
+| options | Specifies options | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
 | value | Used for setting the currently selected value. | string\[] | \[] |
 
 #### events

components/checkbox/index.zh-CN.md

@@ -25,9 +25,8 @@
 | --- | --- | --- | --- |
 | defaultValue | 默认选中的选项 | string\[] | \[] |
 | disabled | 整组失效 | boolean | false |
-| options | 指定可选项 | string\[] \| Array<{ label: string value: string disabled?: boolean }> | \[] |
+| options | 指定可选项 | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
 | value | 指定选中的选项 | string\[] | \[] |
-| onChange | 变化时回调函数 | Function(checkedValue) | - |
 
 #### 事件
 | 事件名称 | 说明 | 回调参数 |

components/checkbox/style/mixin.less

@@ -28,7 +28,7 @@
       height: 100%;
       border-radius: @border-radius-sm;
       border: 1px solid @checkbox-color;
-      content: '';
+      content: "";
       animation: antCheckboxEffect 0.36s ease-in-out;
       animation-fill-mode: both;
       visibility: hidden;
@@ -46,10 +46,13 @@
       display: block;
       width: @checkbox-size;
       height: @checkbox-size;
-      border: @border-width-base @border-style-base @border-color-base;
+      border: @checkbox-border-width @border-style-base @border-color-base;
       border-radius: @border-radius-sm;
       background-color: @checkbox-check-color;
       transition: all .3s;
+      // Fix IE checked style
+      // https://github.com/ant-design/ant-design/issues/12597
+      border-collapse: separate;
 
       &:after {
         @check-width: (@checkbox-size / 14) * 5px;
@@ -84,25 +87,6 @@
     }
   }
 
-  // 半选状态
-  .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
-    @indeterminate-width: @checkbox-size - 8px;
-    @indeterminate-height: @checkbox-size - 8px;
-    content: ' ';
-    transform: translate(-50%, -50%) scale(1);
-    border: 0;
-    left: 50%;
-    top: 50%;
-    width: @indeterminate-width;
-    height: @indeterminate-height;
-    background-color: @checkbox-color;
-    opacity: 1;
-  }
-
-  .@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
-    border-color: @disabled-color;
-  }
-
   // 选中状态
   .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
     transform: rotate(45deg) scale(1);
@@ -143,6 +127,7 @@
       &:after {
         animation-name: none;
         border-color: @input-disabled-bg;
+        border-collapse: separate;
       }
     }
 
@@ -182,6 +167,32 @@
       margin-left: 0;
     }
   }
+
+  // 半选状态
+  .@{checkbox-prefix-cls}-indeterminate {
+    .@{checkbox-inner-prefix-cls} {
+      background-color: #fff;
+      border-color: @border-color-base;
+    }
+    .@{checkbox-inner-prefix-cls}:after {
+      @indeterminate-width: @checkbox-size - 8px;
+      @indeterminate-height: @checkbox-size - 8px;
+      content: ' ';
+      transform: translate(-50%, -50%) scale(1);
+      border: 0;
+      left: 50%;
+      top: 50%;
+      width: @indeterminate-width;
+      height: @indeterminate-height;
+      background-color: @checkbox-color;
+      opacity: 1;
+    }
+
+    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
+      border-color: @disabled-color;
+      background-color: @disabled-color;
+    }
+  }
 }
 
 @keyframes antCheckboxEffect {

components/collapse/Collapse.jsx

@@ -1,9 +1,7 @@
-
-import PropTypes from '../_util/vue-types'
 import animation from '../_util/openAnimation'
 import { getOptionProps, initDefaultProps } from '../_util/props-util'
 import VcCollapse, { collapseProps } from '../vc-collapse'
-
+import Icon from '../icon'
 export default {
   name: 'ACollapse',
   model: {
@@ -15,6 +13,13 @@ export default {
     bordered: true,
     openAnimation: animation,
   }),
+  methods: {
+    renderExpandIcon () {
+      return (
+        <Icon type='right' class='arrow' />
+      )
+    },
+  },
   render () {
     const { prefixCls, bordered, $listeners } = this
     const collapseClassName = {
@@ -23,6 +28,7 @@ export default {
     const rcCollapeProps = {
       props: {
         ...getOptionProps(this),
+        expandIcon: this.renderExpandIcon,
       },
       class: collapseClassName,
       on: $listeners,

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

@@ -4,15 +4,21 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
 <div>
   <div role="tablist" class="ant-collapse">
     <div role="tablist" class="ant-collapse-item">
-      <div role="tab" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 1</div>
+      <div role="tab" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 1</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item">
-      <div role="tab" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 2</div>
+      <div role="tab" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 2</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item">
-      <div role="tab" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 3</div>
+      <div role="tab" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 3</div>
       <!---->
     </div>
   </div>
@@ -23,7 +29,9 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
 <div>
   <div class="ant-collapse">
     <div role="tablist" class="ant-collapse-item ant-collapse-item-active">
-      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow"></i>This is panel header 1</div>
+      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 1</div>
       <div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
         <div class="ant-collapse-content-box">
           <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
@@ -31,11 +39,15 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
       </div>
     </div>
     <div role="tablist" class="ant-collapse-item">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 2</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 2</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item ant-collapse-item-disabled">
-      <div role="button" tabindex="-1" class="ant-collapse-header"><i class="arrow"></i>This is panel header 3</div>
+      <div role="button" tabindex="-1" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 3</div>
       <!---->
     </div>
   </div>
@@ -46,7 +58,9 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
 <div>
   <div class="ant-collapse ant-collapse-borderless">
     <div role="tablist" class="ant-collapse-item ant-collapse-item-active">
-      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow"></i>This is panel header 1</div>
+      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 1</div>
       <div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
         <div class="ant-collapse-content-box">
           <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
@@ -54,11 +68,15 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
       </div>
     </div>
     <div role="tablist" class="ant-collapse-item">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 2</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 2</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 3</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 3</div>
       <!---->
     </div>
   </div>
@@ -69,8 +87,13 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 <div>
   <div class="ant-collapse ant-collapse-borderless">
     <div role="tablist" class="ant-collapse-item ant-collapse-item-active" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
-      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow"></i>
+      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-        This is panel header 1<i class="anticon anticon-question-circle-o"></i></div>
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>
+        This is panel header 1<i class="anticon anticon-question-circle-o"><svg viewBox="64 64 896 896" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+            <path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path>
+          </svg></i></div>
       <div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
         <div class="ant-collapse-content-box">
           <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>
@@ -78,11 +101,15 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
       </div>
     </div>
     <div role="tablist" class="ant-collapse-item" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 2</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 2</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item" style="background: rgb(247, 247, 247); border-radius: 4px; margin-bottom: 24px; border: 0px; overflow: hidden;">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 3</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 3</div>
       <!---->
     </div>
   </div>
@@ -93,15 +120,21 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
 <div>
   <div class="ant-collapse">
     <div role="tablist" class="ant-collapse-item">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 1</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 1</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 2</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 2</div>
       <!---->
     </div>
     <div role="tablist" class="ant-collapse-item">
-      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow"></i>This is panel header 3</div>
+      <div role="button" tabindex="0" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header 3</div>
       <!---->
     </div>
   </div>
@@ -112,7 +145,9 @@ exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
 <div>
   <div class="ant-collapse">
     <div role="tablist" class="ant-collapse-item ant-collapse-item-active">
-      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow"></i>This is panel header with arrow icon</div>
+      <div role="button" tabindex="0" aria-expanded="true" class="ant-collapse-header"><i class="arrow anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+            <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+          </svg></i>This is panel header with arrow icon</div>
       <div class="ant-collapse-content ant-collapse-content-active ant-motion-collapse" style="height: 0px; opacity: 0;">
         <div class="ant-collapse-content-box">
           <p>A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.</p>

components/collapse/demo/index.vue

@@ -29,6 +29,7 @@ const md = {
 export default {
   category: 'Components',
   type: 'Data Display',
+  zhType: '数据展示',
   title: 'Collapse',
   subtitle: '折叠面板',
   cols: 1,

components/collapse/style/index.less

@@ -37,17 +37,17 @@
 
       .arrow {
         .iconfont-mixin();
-        .collapse-close();
         font-size: @font-size-sm;
         position: absolute;
         display: inline-block;
         line-height: 46px;
         vertical-align: top;
-        transition: transform 0.24s;
+        top: 50%;
-        top: 0;
+        transform: translateY(-50%);
         left: @padding-md;
-        &:before {
+        & svg {
-          content: "\E61F";
+          .collapse-close();
+          transition: transform 0.24s;
         }
       }
 
@@ -89,7 +89,7 @@
   }
 
   & > &-item > &-header[aria-expanded="true"] {
-    .arrow {
+    .anticon-right svg {
       .collapse-open();
     }
   }