Merge pull request #398 from vueComponent/feat-1.3.0

Feat 1.3.0
2019-01-12 11:03:36 +08:00 · 2019-01-12 11:03:36 +08:00 · b4d9bfd8d9
parent 661f8a2209 e43c0c3bcc
commit b4d9bfd8d9
417 changed files with 10383 additions and 3495 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -1,7 +1,59 @@
 # Change Log

+`ant-design-vue` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).
+
+#### Release Schedule
+
+* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
+* Monthly release: minor version for new features.
+* Major version release is not included in this schedule for breaking change and new features.
+
 ---

+## 1.3.0
+`2019-01-12`
+
+- 🎉 🎉 🎉 Publish the vscode plugin [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
+
+### Component features and styles are synchronized to antd version 3.11.6.
+1.3.0 brings two new Components, a lot of exciting changes and new features.
+
+- 🔥 Added a new component [Comment](https://vuecomponent.github.io/ant-design-vue/components/comment/)。
+- 🔥 dded a new component [ConfigProvider](https://vuecomponent.github.io/ant-design-vue/components/config-provider/) for user to customize some global setting.
+
+Component Fixes / Enhancements:
+
+- 🌟 Avatar Added `srcSet` prop that is a list of sources to use for different screen resolutions.
+- 🌟 Notification Added `onClick` prop that is called when the notification is clicked. 
+- Transfer
+  - 🌟 Added `search` event that is executed when search field are changed and deprecated `searchChange` event.
+  - 🌟 Added `disabled` prop that whether disable transfer. 
+- 🌟 Refactor Badge, support `count` as custom component.
+- Slider 
+  - 🌟 Added `tooltipVisible` prop that whether Tooltip will always show.
+  - 🌟 Optimize the focus effect
+  - 🐞 Fix tooltip does not display the problem when focus through the keyboard tab.
+  - 🐞 Fix the hidden switch problem of Tooltip while dragging.
+- Calendar
+  - 🌟 Support multiple date format.
+  - 🌟 showSearch added `limit` prop that support limit filtered item count.
+- Table
+  - 🌟 Added `expandIcon` prop that custom the default expand icon.
+  - 🌟 customCell added `index` prop.
+- Select
+  - 🌟 Added `removeIcon`、`clearIcon`、`menuItemSelectedIcon` prop，allow setting `remove`、`clear`、`menuItemSelected` custom icons.
+  - 🌟 Added `dropdownRender` prop that custom dropdown content. 
+  - 🌟 Added `loading` prop that indicate loading state.
+- 🌟 Optimize the display of the Button when it contains an Icon. 
+- ⚡️ Refactor Tag component with less code and better performance.
+- 💄 Added `title` prop that Menu.Item support tooltip title when collapsed.
+- 💄 Chore Card header and loading UI.
+- 💄 Optimized Spin wrapper styles and improve performance slightly.
+- 🐞 Fix TextArea use resize observer to check textarea size.
+- 🐞 Fix Tooltip in the disabled state, the style error problem.[#389](https://github.com/vueComponent/ant-design-vue/issues/389)
+- 🐞 Fix some component TypeScript definitions.
+
+
 ## 1.2.5
 `2019-01-06`

--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -1,7 +1,59 @@
 # 更新日志

+`ant-design-vue` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
+
+#### 发布周期
+
+* 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
+* 次版本号：带有新特性的向下兼容的版本。
+* 主版本号：含有破坏性更新和新特性，不在发布周期内。
+
 ---

+## 1.3.0
+`2019-01-12`
+
+- 🎉 🎉 🎉 发布 vscode 插件 [ant-design-vue-helper](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper)
+
+### 组件功能和样式同步到 antd 3.11.6 版本。
+1.3.0 版本带来了两个新组件，还有很多激动人心的变化和新特性。
+
+- 🔥 增加了一个新组件 [Comment](https://vuecomponent.github.io/ant-design-vue/components/comment-cn/)。
+- 🔥 增加了一个新组件 [ConfigProvider](https://vuecomponent.github.io/ant-design-vue/components/config-provider-cn/) 为组件提供统一的全局化配置。
+
+组件修复/功能增强：
+
+- 🌟 Avatar 组件增加 `srcSet` 属性，用于设置图片类头像响应式资源地址。
+- 🌟 Notification 组件增加 `onClick` 属性，点击通知时触发的回调函数。
+- Transfer
+  - 🌟 增加 `search` 事件，搜索框内容时改变时的回调函数，并废弃 `searchChange` 事件。
+  - 🌟 增加 `disabled` 属性，用于禁用搜索框。
+- 🌟 Badge 进行了重构，`count` 支持自定义组件。
+- Slider 
+  - 🌟 增加 `tooltipVisible` 属性，用于 Tooltip 是否始终显示。
+  - 🌟 优化focus效果
+  - 🐞 修复键盘tab键聚焦时，Tooltip不显示问题。
+  - 🐞 修复拖动时Tooltip不停的显隐切换问题。
+- Calendar
+  - 🌟 支持多种时间格式。
+  - 🌟 showSearch 方法增加 `limit` 参数，用于限制搜索结果展示数量。
+- Table
+  - 🌟 增加 `expandIcon` 属性，用于自定义表格展开图标。
+  - 🌟 customCell 方法增加 `index` 参数。
+- Select
+  - 🌟 增加 `removeIcon`、`clearIcon`、`menuItemSelectedIcon` 属性，用于自定义删除、清空、选中的图标。
+  - 🌟 增加 `dropdownRender` 属性， 用于自定义下拉框内容。
+  - 🌟 增加 `loading` 属性， 用于展示加载中状态。
+- 🌟 优化 Button 在含有Icon时的显示效果。 
+- ⚡️ 重构 Tag 组件，简化代码并提升性能。
+- 💄 Menu.Item 组件增加 `title` 属性，用于在收缩时展示的悬浮标题。
+- 💄 微调 Card 头部和加载中的样式细节。
+- 💄 优化 Spin 样式并略微提升了切换状态的性能。
+- 🐞 修复 TextArea 组件高度不能自适应问题。
+- 🐞 修复 Tooltip 在disabled状态下Button中，样式错误问题。[#389](https://github.com/vueComponent/ant-design-vue/issues/389)
+- 🐞 修复一些组件 TypeScript 定义。
+
+
 ## 1.2.5
 `2019-01-06`

--- a/components/_util/BaseMixin.js
+++ b/components/_util/BaseMixin.js
@ -1,21 +1,21 @@

 export default {
-  directives: {
-    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)
-      },
-    },
-  },
+  // directives: {
+  //   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)
+  //     },
+  //   },
+  // },
  methods: {
    setState (state, callback) {
-      const newState = typeof state === 'function' ? state(this.$data) : state
+      const newState = typeof state === 'function' ? state(this.$data, this.$props) : state
      // if (this.getDerivedStateFromProps) {
      //   Object.assign(newState, this.getDerivedStateFromProps(getOptionProps(this), { ...this.$data, ...newState }, true) || {})
      // }
--- a/components/_util/Dom/addEventListener.js
+++ b/components/_util/Dom/addEventListener.js
@ -1,5 +1,5 @@
 import addDOMEventListener from 'add-dom-event-listener'

-export default function addEventListenerWrap (target, eventType, cb) {
-  return addDOMEventListener(target, eventType, cb)
+export default function addEventListenerWrap (target, eventType, cb, option) {
+  return addDOMEventListener(target, eventType, cb, option)
 }
--- a/components/_util/props-util.js
+++ b/components/_util/props-util.js
@ -52,9 +52,11 @@ const getSlots = (ele) => {
  const children = ele.children || componentOptions.children || []
  const slots = {}
  children.forEach(child => {
-    const name = (child.data && child.data.slot) || 'default'
-    slots[name] = slots[name] || []
-    slots[name].push(child)
+    if (!isEmptyElement(child)) {
+      const name = (child.data && child.data.slot) || 'default'
+      slots[name] = slots[name] || []
+      slots[name].push(child)
+    }
  })
  return slots
 }
@ -215,12 +217,12 @@ export function getComponentName (opts) {
  return opts && (opts.Ctor.options.name || opts.tag)
 }

-export function isEmptyElement (ele) {
-  return !(ele.tag || ele.text.trim() !== '')
+export function isEmptyElement (c) {
+  return !(c.tag || (c.text && c.text.trim() !== ''))
 }

 export function filterEmpty (children = []) {
-  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+  return children.filter(c => !isEmptyElement(c))
 }
 const initDefaultProps = (propTypes, defaultProps) => {
  Object.keys(defaultProps).forEach(k => {
@ -252,7 +254,11 @@ export function mergeProps () {
 }

 function isValidElement (element) {
-  return element && element.context && element.context._isVue
+  return element &&
+    typeof element === 'object' &&
+    'componentOptions' in element &&
+    'context' in element &&
+    element.tag !== undefined // remove text node
 }

 export {
--- a/components/_util/wave.jsx
+++ b/components/_util/wave.jsx
@ -117,7 +117,7 @@ export default {
    },

    resetEffect (node) {
-      if (!node || node === this.extraNode) {
+      if (!node || node === this.extraNode || !(node instanceof Element)) {
        return
      }
      const { insertExtraNode } = this.$props
--- a/components/affix/index.jsx
+++ b/components/affix/index.jsx
@ -83,6 +83,8 @@ const Affix = {
    // Wait for parent component ref has its value
    this.timeout = setTimeout(() => {
      this.setTargetEventListeners(target)
+      // Mock Event object.
+      this.updatePosition({})
    })
  },
  watch: {
--- a/components/affix/style/index.less
+++ b/components/affix/style/index.less
@ -1,4 +1,4 @@
-@import "../../style/themes/default";
+@import '../../style/themes/default';

 .@{ant-prefix}-affix {
  position: fixed;
--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
@ -5,7 +5,7 @@ exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
  <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">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 ant-alert-closable"><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>
@ -21,16 +21,16 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `<div data-sho

 exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
 <div>
-  <div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon"><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-warning ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i 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 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="">
+  <div data-show="true" class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Error Text</span><span class="ant-alert-description">Error Description Error Description Error Description Error Description Error Description Error Description</span><a class="ant-alert-close-icon"><i 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/close-text.md correctly 1`] = `<div data-show="true" class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Info Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon">Close Now</a></div>`;

 exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
 <div>
@ -92,7 +92,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `

 exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
 <div>
-  <div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon"><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="">
+  <div data-show="true" class="ant-alert ant-alert-success ant-alert-no-icon ant-alert-closable"><span class="ant-alert-message">Alert Message Text</span><span class="ant-alert-description"></span><a class="ant-alert-close-icon"><i 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>
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@ -103,19 +103,20 @@ const Alert = {
      }
    }

+    // closeable when closeText is assigned
+    if (closeText) {
+      closable = true
+    }
+
    const alertCls = classNames(prefixCls, {
      [`${prefixCls}-${type}`]: true,
      [`${prefixCls}-close`]: !closing,
      [`${prefixCls}-with-description`]: !!description,
      [`${prefixCls}-no-icon`]: !showIcon,
      [`${prefixCls}-banner`]: !!banner,
+      [`${prefixCls}-closable`]: closable,
    })

-    // closeable when closeText is assigned
-    if (closeText) {
-      closable = true
-    }
-
    const closeIcon = closable ? (
      <a onClick={this.handleClose} class={`${prefixCls}-close-icon`}>
        {closeText || <Icon type='close' />}
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@ -1,11 +1,12 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@alert-prefix-cls: ~"@{ant-prefix}-alert";
+@alert-prefix-cls: ~'@{ant-prefix}-alert';

@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;
+@alert-close-hover-color: #404040;

 .@{alert-prefix-cls} {
  .reset-component;
@ -17,6 +18,10 @@
    padding: 8px 15px;
  }

+  &&-closable {
+    padding-right: 30px;
+  }
+
  &-icon {
    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
    left: 16px;
@ -72,9 +77,9 @@

    .@{iconfont-css-prefix}-close {
      color: @alert-close-color;
-      transition: color .3s;
+      transition: color 0.3s;
      &:hover {
-        color: #404040;
+        color: @alert-close-hover-color;
      }
    }
  }
@ -127,12 +132,12 @@
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
-    transition: all .3s @ease-in-out-circ;
+    transition: all 0.3s @ease-in-out-circ;
    transform-origin: 50% 0;
  }

  &-slide-up-leave {
-    animation: antAlertSlideUpOut .3s @ease-in-out-circ;
+    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
    animation-fill-mode: both;
  }

--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@ -1,5 +1,5 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

@anchor-border-width: 2px;

@ -38,7 +38,7 @@
      border: 2px solid @primary-color;
      background-color: @component-background;
      left: 50%;
-      transition: top .3s ease-in-out;
+      transition: top 0.3s ease-in-out;
      transform: translateX(-50%);
      &.visible {
        display: inline-block;
@ -57,7 +57,7 @@
    &-title {
      display: block;
      position: relative;
-      transition: all .3s;
+      transition: all 0.3s;
      color: @text-color;
      white-space: nowrap;
      overflow: hidden;
--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
@ -2,15 +2,15 @@

 exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 <div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
-  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--single">
+  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
    <div class="ant-select-selection__rendered">
      <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"><input value="" type="text" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          <div class="ant-select-search__field__wrap"><input type="text" value="" 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"><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><span unselectable="on" 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>
 `;
@ -18,15 +18,15 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
 <div class="certain-category-search-wrapper" style="width: 250px;">
  <div class="certain-category-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
-    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--single">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
      <div class="ant-select-selection__rendered">
        <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"><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>
+            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" 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"><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><span unselectable="on" 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>
@ -34,44 +34,44 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1

 exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
 <div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
-  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--single">
+  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
    <div class="ant-select-selection__rendered">
      <ul>
        <li class="ant-select-search ant-select-search--inline">
-          <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>
+          <div class="ant-select-search__field__wrap"><textarea placeholder="input here" value="" 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"><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><span unselectable="on" 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>
 `;

 exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
 <div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
-  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--single">
+  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
    <div class="ant-select-selection__rendered">
      <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"><input value="" type="text" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          <div class="ant-select-search__field__wrap"><input type="text" value="" 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"><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><span unselectable="on" 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>
 `;

 exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 <div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
-  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--single">
+  <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
    <div class="ant-select-selection__rendered">
      <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"><input value="" type="text" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+          <div class="ant-select-search__field__wrap"><input type="text" value="" 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"><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><span unselectable="on" 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>
 `;
@ -79,15 +79,15 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
 <div class="global-search-wrapper" style="width: 300px;">
  <div class="global-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
-    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="ant-select-selection ant-select-selection--single">
+    <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
      <div class="ant-select-selection__rendered">
        <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"><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>
+            <div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" 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"><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><span unselectable="on" 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>
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@ -1,10 +1,10 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
-@import "../../input/style/mixin";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';

-@input-prefix-cls: ~"@{ant-prefix}-input";
-@select-prefix-cls: ~"@{ant-prefix}-select";
-@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
+@input-prefix-cls: ~'@{ant-prefix}-input';
+@select-prefix-cls: ~'@{ant-prefix}-select';
+@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';

 .@{autocomplete-prefix-cls} {
  .reset-component;
--- a/components/avatar/Avatar.jsx
+++ b/components/avatar/Avatar.jsx
@ -19,6 +19,8 @@ export default {
      default: 'default',
    },
    src: String,
+    /** Srcset of image avatar */
+    srcSet: String,
    icon: String,
    alt: String,
    loadError: Function,
@ -71,7 +73,7 @@ export default {
  },
  render () {
    const {
-      prefixCls, shape, size, src, icon, alt,
+      prefixCls, shape, size, src, icon, alt, srcSet,
    } = this.$props

    const { isImgExist, scale } = this.$data
@ -101,6 +103,7 @@ export default {
      children = (
        <img
          src={src}
+          srcSet={srcSet}
          onError={this.handleImgLoadError}
          alt={alt}
        />
--- a/components/avatar/tests/snapshots/demo.test.js.snap
+++ b/components/avatar/tests/snapshots/demo.test.js.snap
@ -1,6 +1,6 @@
 // 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"><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/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" data-show="true"><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" data-show="true"></sup></span></span></div>`;

 exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
 <div>
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -6,6 +6,7 @@
 | shape | the shape of avatar | `circle` \| `square` | `circle` |
 | size | the size of the avatar | number \| string: `large` `small` `default` | `default` |
 | src | the address of the image for an image avatar | string | - |
+| srcSet | a list of sources to use for different screen resolutions | string | - |
 | alt | This attribute defines the alternative text describing the image | string | - |
 | loadError | handler when img load error，return false to prevent default fallback behavior | () => boolean | - |

--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -6,6 +6,7 @@
 | shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
 | size | 设置头像的大小 | number \| Enum{ 'large', 'small', 'default' } | `default` |
 | src | 图片类头像的资源地址 | string | - |
+| srcSet | 设置图片类头像响应式资源地址 | string | - |
 | alt | 图像无法显示时的替代文本 | string | - |
 | loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |

--- a/components/avatar/style/index.less
+++ b/components/avatar/style/index.less
@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
+@avatar-prefix-cls: ~'@{ant-prefix}-avatar';

 .@{avatar-prefix-cls} {
  .reset-component;
@ -45,10 +45,6 @@
  line-height: @size;
  border-radius: 50%;

-  & > * {
-    line-height: @size;
-  }
-
  &-string {
    position: absolute;
    left: 50%;
--- a/components/back-top/tests/index.test.js
+++ b/components/back-top/tests/index.test.js
@ -2,15 +2,7 @@ import { mount } from '@vue/test-utils'
 import BackTop from '..'

 describe('BackTop', () => {
-  beforeAll(() => {
-    jest.useFakeTimers()
-  })
-
-  afterAll(() => {
-    jest.useRealTimers()
-  })
-
-  it('should scroll to top after click it', () => {
+  it('should scroll to top after click it', async () => {
    const wrapper = mount(BackTop, {
      propsData: {
        visibilityHeight: -1,
@ -19,9 +11,9 @@ describe('BackTop', () => {
    document.documentElement.scrollTop = 400
    // trigger scroll manually
    wrapper.vm.handleScroll()
-    jest.runAllTimers()
+    await new Promise(resolve => setTimeout(resolve, 0))
    wrapper.find('.ant-back-top').trigger('click')
-    jest.runAllTimers()
+    await new Promise(resolve => setTimeout(resolve, 1000))
    expect(Math.abs(Math.round(document.documentElement.scrollTop))).toBe(0)
  })
 })
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@backtop-prefix-cls: ~"@{ant-prefix}-back-top";
+@backtop-prefix-cls: ~'@{ant-prefix}-back-top';

 .@{backtop-prefix-cls} {
  .reset-component;
@ -20,12 +20,12 @@
    background-color: @back-top-bg;
    color: @back-top-color;
    text-align: center;
-    transition: all .3s @ease-in-out;
+    transition: all 0.3s @ease-in-out;
    overflow: hidden;

    &:hover {
      background-color: @back-top-hover-bg;
-      transition: all .3s @ease-in-out;
+      transition: all 0.3s @ease-in-out;
    }
  }

@ -33,7 +33,8 @@
    margin: 12px auto;
    width: 14px;
    height: 16px;
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) ~"100%/100%" no-repeat;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC)
+      ~'100%/100%' no-repeat;
  }
 }

--- a/components/badge/Badge.jsx
+++ b/components/badge/Badge.jsx
@ -2,12 +2,14 @@
 import PropTypes from '../_util/vue-types'
 import ScrollNumber from './ScrollNumber'
 import classNames from 'classnames'
-import { initDefaultProps, filterEmpty } from '../_util/props-util'
+import { initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
 import getTransitionProps from '../_util/getTransitionProps'
+import isNumeric from '../_util/isNumeric'

 export const BadgeProps = {
  /** Number to show in badge */
-  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
+  count: PropTypes.any,
  showZero: PropTypes.bool,
  /** Max count to show */
  overflowCount: PropTypes.number,
@ -27,85 +29,162 @@ export default {
  props: initDefaultProps(BadgeProps, {
    prefixCls: 'ant-badge',
    scrollNumberPrefixCls: 'ant-scroll-number',
-    count: null,
    showZero: false,
    dot: false,
    overflowCount: 99,
  }),
+  methods: {
+    getBadgeClassName () {
+      const { prefixCls, status } = this.$props
+      const children = filterEmpty(this.$slots.default)
+      return classNames(prefixCls, {
+        [`${prefixCls}-status`]: !!status,
+        [`${prefixCls}-not-a-wrapper`]: !children.length,
+      })
+    },
+
+    isZero () {
+      const numberedDispayCount = this.getNumberedDispayCount()
+      return numberedDispayCount === '0' || numberedDispayCount === 0
+    },
+
+    isDot () {
+      const { dot, status } = this.$props
+      const isZero = this.isZero()
+      return (dot && !isZero) || status
+    },
+
+    isHidden () {
+      const { showZero } = this.$props
+      const displayCount = this.getDispayCount()
+      const isZero = this.isZero()
+      const isDot = this.isDot()
+      const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
+      return (isEmpty || (isZero && !showZero)) && !isDot
+    },
+
+    getNumberedDispayCount () {
+      const { overflowCount } = this.$props
+      const count = this.badgeCount
+      const displayCount =
+        count > overflowCount ? `${overflowCount}+` : count
+      return displayCount
+    },
+
+    getDispayCount () {
+      const isDot = this.isDot()
+      // dot mode don't need count
+      if (isDot) {
+        return ''
+      }
+      return this.getNumberedDispayCount()
+    },
+
+    getScollNumberTitle () {
+      const { title } = this.$props
+      const count = this.badgeCount
+      if (title) {
+        return title
+      }
+      return typeof count === 'string' || typeof count === 'number' ? count : undefined
+    },
+
+    getStyleWithOffset () {
+      const { offset, numberStyle } = this.$props
+      return offset
+        ? {
+          right: `${-parseInt(offset[0], 10)}px`,
+          marginTop: isNumeric(offset[1]) ? `${offset[1]}px` : offset[1],
+          ...numberStyle,
+        }
+        : numberStyle
+    },
+
+    renderStatusText () {
+      const { prefixCls, text } = this.$props
+      const hidden = this.isHidden()
+      return hidden || !text ? null : <span class={`${prefixCls}-status-text`}>{text}</span>
+    },
+
+    renderDispayComponent () {
+      const count = this.badgeCount
+      const customNode = count
+      if (!customNode || typeof customNode !== 'object') {
+        return undefined
+      }
+      return cloneElement(customNode, {
+        style: this.getStyleWithOffset(),
+      })
+    },
+
+    renderBadgeNumber () {
+      const { prefixCls, scrollNumberPrefixCls, status } = this.$props
+      const count = this.badgeCount
+      const displayCount = this.getDispayCount()
+      const isDot = this.isDot()
+      const hidden = this.isHidden()
+
+      const scrollNumberCls = {
+        [`${prefixCls}-dot`]: isDot,
+        [`${prefixCls}-count`]: !isDot,
+        [`${prefixCls}-multiple-words`]:
+          !isDot && count && count.toString && count.toString().length > 1,
+        [`${prefixCls}-status-${status}`]: !!status,
+      }
+
+      return hidden ? null : (
+        <ScrollNumber
+          prefixCls={scrollNumberPrefixCls}
+          data-show={!hidden}
+          v-show={!hidden}
+          className={scrollNumberCls}
+          count={displayCount}
+          displayComponent={this.renderDispayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
+          title={this.getScollNumberTitle()}
+          style={this.getStyleWithOffset()}
+          key='scrollNumber'
+        />
+      )
+    },
+  },

  render () {
    const {
-      count,
-      showZero,
      prefixCls,
-      scrollNumberPrefixCls,
-      overflowCount,
-      dot,
      status,
      text,
-      offset,
      $slots,
-      numberStyle,
-      title,
    } = this
-    let displayCount = count > overflowCount ? `${overflowCount}+` : count
-    const isZero = displayCount === '0' || displayCount === 0
-    const isDot = (dot && !isZero) || status
-    // dot mode don't need count
-    if (isDot) {
-      displayCount = ''
-    }
    const children = filterEmpty($slots.default)
-    const isEmpty = displayCount === null || displayCount === undefined || displayCount === ''
-    const hidden = (isEmpty || (isZero && !showZero)) && !isDot
+    let count = getComponentFromProp(this, 'count')
+    if (Array.isArray(count)) {
+      count = count[0]
+    }
+    this.badgeCount = count
+    const scrollNumber = this.renderBadgeNumber()
+    const statusText = this.renderStatusText()
    const statusCls = classNames({
      [`${prefixCls}-status-dot`]: !!status,
      [`${prefixCls}-status-${status}`]: !!status,
    })
-    const scrollNumberCls = classNames({
-      [`${prefixCls}-dot`]: isDot,
-      [`${prefixCls}-count`]: !isDot,
-      [`${prefixCls}-multiple-words`]: !isDot && count && count.toString && count.toString().length > 1,
-      [`${prefixCls}-status-${status}`]: !!status,
-    })
-    const badgeCls = classNames(prefixCls, {
-      [`${prefixCls}-status`]: !!status,
-      [`${prefixCls}-not-a-wrapper`]: !children.length,
-    })
-    const styleWithOffset = offset ? {
-      right: -parseInt(offset[0], 10),
-      marginTop: typeof offset[1] === 'number' ? `${offset[1]}px` : offset[1],
-      ...numberStyle,
-    } : numberStyle
-    // <Badge status="success" />

+    // <Badge status="success" />
    if (!children.length && status) {
      return (
-        <span {...{ on: this.$listeners }} class={badgeCls} style={styleWithOffset}>
+        <span
+          {...{ on: this.$listeners }}
+          class={this.getBadgeClassName()}
+          style={this.getStyleWithOffset()}
+        >
          <span class={statusCls} />
          <span class={`${prefixCls}-status-text`}>{text}</span>
        </span>
      )
    }

-    const scrollNumber = hidden ? null : (
-      <ScrollNumber
-        prefixCls={scrollNumberPrefixCls}
-        v-show={!hidden}
-        class={scrollNumberCls}
-        count={displayCount}
-        title={title || count}
-        style={styleWithOffset}
-        key='scrollNumber'
-      />
-    )
-
-    const statusText = (hidden || !text) ? null : (
-      <span class={`${prefixCls}-status-text`}>{text}</span>
-    )
    const transitionProps = getTransitionProps(children.length ? `${prefixCls}-zoom` : '')

-    return (<span {...{ on: this.$listeners }} class={badgeCls}>
+    return (<span {...{ on: this.$listeners }} class={this.getBadgeClassName()}>
      {children}
      <transition {...transitionProps}>
        {scrollNumber}
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@ -1,8 +1,9 @@
-
+import classNames from 'classnames'
 import PropTypes from '../_util/vue-types'
 import BaseMixin from '../_util/BaseMixin'
 import { getStyle } from '../_util/props-util'
 import omit from 'omit.js'
+import { cloneElement } from '../_util/vnode'

 function getNumberArray (num) {
  return num
@ -14,9 +15,11 @@ function getNumberArray (num) {

 const ScrollNumberProps = {
  prefixCls: PropTypes.string.def('ant-scroll-number'),
-  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]).def(null),
+  count: PropTypes.any,
  component: PropTypes.string,
  title: PropTypes.oneOfType([PropTypes.number, PropTypes.string, null]),
+  displayComponent: PropTypes.any,
+  className: PropTypes.object,
 }

 export default {
@ -105,13 +108,19 @@ export default {
  },

  render () {
-    const { prefixCls, title, component: Tag = 'sup' } = this
+    const { prefixCls, title, component: Tag = 'sup', displayComponent, className } = this
+    if (displayComponent) {
+      return cloneElement(displayComponent, {
+        class: `${prefixCls}-custom-component`,
+      })
+    }
    const style = getStyle(this, true)
    // fix https://fb.me/react-unknown-prop
    const restProps = omit(this.$props, [
      'count',
      'component',
      'prefixCls',
+      'displayComponent',
    ])
    const newProps = {
      props: {
@ -120,8 +129,8 @@ export default {
      attrs: {
        title,
      },
-      class: prefixCls,
      style,
+      class: classNames(prefixCls, className),
    }
    // allow specify the border
    // mock border-color by box-shadow for compatible with old usage:
@ -129,6 +138,7 @@ export default {
    if (style && style.borderColor) {
      newProps.style.boxShadow = `0 0 0 1px ${style.borderColor} inset`
    }
+
    return (
      <Tag {...newProps} >
        { this.renderNumberElement()}
--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
@ -1,28 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`renders ./components/badge/demo/basic.md correctly 1`] = `<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> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="0" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><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="current">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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span></div>`;
+exports[`renders ./components/badge/demo/basic.md correctly 1`] = `<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" data-show="true"><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> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="0" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><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="current">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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><i class="anticon anticon-clock-circle ant-scroll-number-custom-component ant-badge-zoom-enter" style="color: rgb(245, 34, 45);" data-show="true"><svg viewBox="64 64 896 896" data-icon="clock-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="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span></div>`;

 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><span class="ant-badge"><a href="#" class="head-example"></a><sup title="5" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><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"><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> <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked"><span class="ant-switch-inner"></span></button></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" data-show="true"></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"><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/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" data-show="true"></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" data-show="true"></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>`;
+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" data-show="true"><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>`;

-exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `<div><span class="ant-badge ant-badge-not-a-wrapper"><sup title="25" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter"><span class="ant-scroll-number-only" style="transform: translateY(-1200%);"><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="current">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><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> <span class="ant-badge ant-badge-not-a-wrapper"><sup title="4" class="ant-scroll-number ant-badge-count -enter" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); box-shadow: 0 0 0 1px #d9d9d9 inset;"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><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="current">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 class="ant-badge ant-badge-not-a-wrapper"><sup title="109" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter" style="background-color: rgb(82, 196, 26);">99+</sup></span></div>`;
+exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `<div><span class="ant-badge ant-badge-not-a-wrapper"><sup title="25" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1200%);"><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="current">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><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> <span class="ant-badge ant-badge-not-a-wrapper"><sup title="4" class="ant-scroll-number ant-badge-count -enter" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); box-shadow: 0 0 0 1px #d9d9d9 inset;" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><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="current">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 class="ant-badge ant-badge-not-a-wrapper"><sup title="109" class="ant-scroll-number ant-badge-count ant-badge-multiple-words -enter" style="background-color: rgb(82, 196, 26);" data-show="true">99+</sup></span></div>`;

-exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter"><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">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><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">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 class="ant-badge"><a href="#" class="head-example"></a><sup title="100" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter">99+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter">10+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="1000" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter">999+</sup></span></div>`;
+exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `<div><span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">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><span class="ant-scroll-number-only" style="transform: translateY(-1900%);"><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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="current">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 class="ant-badge"><a href="#" class="head-example"></a><sup title="100" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true">99+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="99" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true">10+</sup></span> <span class="ant-badge"><a href="#" class="head-example"></a><sup title="1000" class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-zoom-enter" data-show="true">999+</sup></span></div>`;

 exports[`renders ./components/badge/demo/status.md correctly 1`] = `<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"></span></span> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"></span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span> <br> <span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span></div>`;

-exports[`renders ./components/badge/demo/title.md correctly 1`] = `<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup title="Custom hover text" 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>`;
+exports[`renders ./components/badge/demo/title.md correctly 1`] = `<div id="components-badge-demo-title"><span class="ant-badge"><a href="#" class="head-example"></a><sup title="Custom hover text" class="ant-scroll-number ant-badge-count ant-badge-zoom-enter" data-show="true"><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>`;
--- a/components/badge/tests/snapshots/index.test.js.snap
+++ b/components/badge/tests/snapshots/index.test.js.snap
@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Badge should be compatible with borderColor style 1`] = `<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" class="ant-scroll-number ant-badge-count"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><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="current">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>`;
+exports[`Badge should be compatible with borderColor style 1`] = `<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-1400%);"><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="current">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>`;

-exports[`Badge should render when count is changed 1`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-2100%);"><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="">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></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">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>`;
+exports[`Badge should render when count is changed 1`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-2100%);"><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="">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></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p><p class="current">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>`;

-exports[`Badge should render when count is changed 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><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><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>`;
+exports[`Badge should render when count is changed 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><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><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>`;

-exports[`Badge should render when count is changed 3`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><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><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>`;
+exports[`Badge should render when count is changed 3`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><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><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>`;

-exports[`Badge should render when count is changed 4`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><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><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><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="current">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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;
+exports[`Badge should render when count is changed 4`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" data-show="true"><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><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><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="current">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="">5</p><p class="">6</p><p class="">7</p><p class="">8</p><p class="">9</p></span></sup></span>`;

-exports[`Badge should render when count is changed 5`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="9" class="ant-scroll-number ant-badge-count"><span class="ant-scroll-number-only" style="transform: translateY(-900%);"><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="current">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><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>`;
+exports[`Badge should render when count is changed 5`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="9" class="ant-scroll-number ant-badge-count" data-show="true"><span class="ant-scroll-number-only" style="transform: translateY(-900%);"><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="current">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><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>`;
+
+exports[`Badge should support offset when count is a ReactNode 1`] = `<span class="ant-badge"><a href="#" class="head-example"></a><span class="custom ant-scroll-number-custom-component" style="color: rgb(245, 34, 45); right: -10px; margin-top: 20px;" data-show="true"></span></span>`;
--- a/components/badge/tests/index.test.js
+++ b/components/badge/tests/index.test.js
@ -85,4 +85,18 @@ describe('Badge', () => {

    expect(wrapper.html()).toMatchSnapshot()
  })
+
+  // https://github.com/ant-design/ant-design/issues/13694
+  it('should support offset when count is a ReactNode', () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Badge count={<span class='custom' style={{ color: '#f5222d' }} />} offset={[10, 20]}>
+            <a href='#' class='head-example' />
+          </Badge>
+        )
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@ -17,6 +17,10 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
    <a-badge count="0" showZero>
      <a href="#" class="head-example"></a>
    </a-badge>
+    <a-badge>
+      <a-icon slot="count" type="clock-circle" style="color: #f5222d" />
+      <a href="#" class="head-example"></a>
+    </a-badge>
  </div>
 </template>
 ```
--- a/components/badge/index.en_US.md
+++ b/components/badge/index.en_US.md
@ -12,7 +12,7 @@

 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| count | Number to show in badge | number\|string |  |
+| count | Number to show in badge | number\|string \| slot |  |
 | dot | Whether to display a red dot instead of `count` | boolean | `false` |
 | offset | set offset of the badge dot, like [x, y] | [number\|string, number\|string] | - |
 | overflowCount | Max count to show | number | 99 |
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -13,7 +13,7 @@

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number\|string  |  |
+| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |
 | offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - |
 | overflowCount | 展示封顶的数字值 | number | 99 |
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@ -1,8 +1,8 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@badge-prefix-cls: ~"@{ant-prefix}-badge";
-@number-prefix-cls: ~"@{ant-prefix}-scroll-number";
+@badge-prefix-cls: ~'@{ant-prefix}-badge';
+@number-prefix-cls: ~'@{ant-prefix}-scroll-number';

 .@{badge-prefix-cls} {
  .reset-component;
@ -47,13 +47,18 @@
  }

  &-count,
-  &-dot {
+  &-dot,
+  .@{number-prefix-cls}-custom-component {
    position: absolute;
    right: 0;
    transform: translateX(50%);
    transform-origin: 100%;
  }

+  .@{number-prefix-cls}-custom-component {
+    transform: translate(50%, -50%);
+  }
+
  &-status {
    line-height: inherit;
    vertical-align: baseline;
@ -81,7 +86,7 @@
        height: 100%;
        border-radius: 50%;
        border: 1px solid @processing-color;
-        content: "";
+        content: '';
        animation: antStatusProcessing 1.2s infinite ease-in-out;
      }
    }
@ -103,12 +108,12 @@

  &-zoom-appear,
  &-zoom-enter {
-    animation: antZoomBadgeIn .3s @ease-out-back;
+    animation: antZoomBadgeIn 0.3s @ease-out-back;
    animation-fill-mode: both;
  }

  &-zoom-leave {
-    animation: antZoomBadgeOut .3s @ease-in-back;
+    animation: antZoomBadgeOut 0.3s @ease-in-back;
    animation-fill-mode: both;
  }

@ -142,7 +147,7 @@
  overflow: hidden;
  &-only {
    display: inline-block;
-    transition: all .3s @ease-in-out;
+    transition: all 0.3s @ease-in-out;
    height: @badge-height;
    > p {
      height: @badge-height;
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";
+@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';

 .@{breadcrumb-prefix-cls} {
  .reset-component;
@ -14,7 +14,7 @@

  a {
    color: @breadcrumb-link-color;
-    transition: color .3s;
+    transition: color 0.3s;
    &:hover {
      color: @breadcrumb-link-color-hover;
    }
--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
@ -8,14 +8,12 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
 <div id="components-button-demo-button-group">
  <h4>Basic</h4>
  <div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-default"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary"><span>OK</span></button></div>
-  <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 disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>L</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>M</span></button><button disabled="disabled" type="button" 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"><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"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        </svg></i><span>Go back</span></button><button type="button" class="ant-btn ant-btn-primary"><span>Go forward</span><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 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="">
@ -28,8 +26,8 @@ exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
 `;

 exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button type="button" disabled="disabled" class="ant-btn ant-btn-primary"><span>Primary(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-default"><span>Default</span></button> <button type="button" disabled="disabled" class="ant-btn ant-btn-default"><span>Default(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-dashed"><span>Dashed</span></button> <button type="button" disabled="disabled" class="ant-btn ant-btn-dashed"><span>Dashed(disabled)</span></button>
-  <div style="padding: 8px 8px 0px 8px; background: rgb(190, 200, 200);"><button type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Ghost</span></button> <button type="button" disabled="disabled" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Ghost(disabled)</span></button></div>
+<div><button type="button" class="ant-btn ant-btn-primary"><span>Primary</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-primary"><span>Primary(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-default"><span>Default</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Default(disabled)</span></button> <br> <button type="button" class="ant-btn ant-btn-dashed"><span>Dashed</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-dashed"><span>Dashed(disabled)</span></button>
+  <div style="padding: 8px 8px 0px 8px; background: rgb(190, 200, 200);"><button type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Ghost</span></button> <button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-btn-background-ghost"><span>Ghost(disabled)</span></button></div>
 </div>
 `;

@ -70,8 +68,7 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
 `;

 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"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+<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"><span>Actions</span><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>
 `;
@ -85,9 +82,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
      </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"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+        </svg></i><span>Backward</span></button><button type="button" class="ant-btn ant-btn-primary"><span>Forward</span><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>
--- a/components/button/tests/snapshots/index.test.js.snap
+++ b/components/button/tests/snapshots/index.test.js.snap
@ -15,7 +15,7 @@ exports[`Button renders Chinese characters correctly 1`] = `
 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>
+    </svg></i><span>按钮</span></button>
 `;

 exports[`Button renders Chinese characters correctly 3`] = `
@ -38,4 +38,6 @@ exports[`Button renders Chinese characters correctly 5`] = `

 exports[`Button renders correctly 1`] = `<button type="button" class="ant-btn ant-btn-default"><span>Follow</span></button>`;

-exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" type="button" class="ant-btn ant-btn-default"><span>link button</span></a>`;
+exports[`Button should not render as link button when href is undefined 1`] = `<button type="button" class="ant-btn ant-btn-primary"><span>button</span></button>`;
+
+exports[`Button should support link button 1`] = `<a target="_blank" href="http://ant.design" class="ant-btn ant-btn-default"><span>link button</span></a>`;
--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@ -173,4 +173,15 @@ describe('Button', () => {
    })
    expect(wrapper2.html()).toMatchSnapshot()
  })
+
+  it('should not render as link button when href is undefined', async () => {
+    const wrapper = mount({
+      render () {
+        return (
+          <Button type='primary' href={undefined}>button</Button>
+        )
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })
--- a/components/button/button.jsx
+++ b/components/button/button.jsx
@ -3,13 +3,13 @@ import Icon from '../icon'
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
 import buttonTypes from './buttonTypes'
+import { filterEmpty } from '../_util/props-util'
 const props = buttonTypes()
 export default {
+  inheritAttrs: false,
  name: 'AButton',
  __ANT_BUTTON: true,
-  props: {
-    ...props,
-  },
+  props,
  data () {
    return {
      sizeMap: {
@ -48,13 +48,15 @@ export default {
  computed: {
    classes () {
      const { prefixCls, type, shape, size, hasTwoCNChar,
-        sLoading, ghost, block, sizeMap } = this
+        sLoading, ghost, block, sizeMap, icon, $slots } = this
      const sizeCls = sizeMap[size] || ''
+      const children = filterEmpty($slots.default)
      return {
        [`${prefixCls}`]: true,
        [`${prefixCls}-${type}`]: type,
        [`${prefixCls}-${shape}`]: shape,
        [`${prefixCls}-${sizeCls}`]: sizeCls,
+        [`${prefixCls}-icon-only`]: !children && children !== 0 && icon,
        [`${prefixCls}-loading`]: sLoading,
        [`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
        [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
@ -106,11 +108,8 @@ export default {
      disabled, handleClick,
      sLoading, $slots, $attrs, $listeners } = this
    const buttonProps = {
-      props: {
-      },
      attrs: {
        ...$attrs,
-        type: htmlType,
        disabled,
      },
      class: classes,
@ -121,9 +120,10 @@ 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
+    const children = filterEmpty($slots.default)
+    const kids = children.map(child => this.insertSpace(child, this.isNeedInserted()))

-    if ('href' in $attrs) {
+    if ($attrs.href !== undefined) {
      return (
        <a {...buttonProps} ref='buttonNode'>
          {iconNode}{kids}
@ -132,7 +132,7 @@ export default {
    } else {
      return (
        <Wave>
-          <button {...buttonProps} ref='buttonNode'>
+          <button {...buttonProps} ref='buttonNode' type={htmlType || 'button'}>
            {iconNode}{kids}
          </button>
        </Wave>
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -1,8 +1,8 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
-@import "./mixin";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+@import './mixin';

-@btn-prefix-cls: ~"@{ant-prefix}-btn";
+@btn-prefix-cls: ~'@{ant-prefix}-btn';

 // for compatible
@btn-ghost-color: @text-color;
@ -82,16 +82,24 @@
    right: -1px;
    background: #fff;
    opacity: 0.35;
-    content: "";
+    content: '';
    border-radius: inherit;
    z-index: 1;
-    transition: opacity .2s;
+    transition: opacity 0.2s;
    pointer-events: none;
    display: none;
  }

  .@{iconfont-css-prefix} {
-    transition: margin-left .3s @ease-in-out;
+    transition: margin-left 0.3s @ease-in-out;
+    // Follow icon blur under windows. Change the render.
+    // https://github.com/ant-design/ant-design/issues/13924
+    &.@{iconfont-css-prefix}-plus,
+    &.@{iconfont-css-prefix}-minus {
+      > svg {
+        shape-rendering: optimizeSpeed;
+      }
+    }
  }

  &&-loading:before {
@ -102,7 +110,7 @@
    padding-left: 29px;
    pointer-events: none;
    position: relative;
-    .@{iconfont-css-prefix} {
+    .@{iconfont-css-prefix}:not(:last-child) {
      margin-left: -14px;
    }
  }
@ -150,12 +158,12 @@
  }

  &-two-chinese-chars:first-letter {
-    letter-spacing: .34em;
+    letter-spacing: 0.34em;
  }

  &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
-    letter-spacing: .34em;
-    margin-right: -.34em;
+    letter-spacing: 0.34em;
+    margin-right: -0.34em;
  }

  &-block {
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@ -24,17 +24,21 @@

 .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);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);

  &:hover,
  &:focus {
-    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
+    .button-color(
+      @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
+    );
  }

  &:active,
  &.active {
-    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
+    .button-color(
+      @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
+    );
  }

  .button-disabled();
@ -60,16 +64,20 @@
  .button-color(@color; @background; @border);

  &:hover {
-    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
+    .button-color(
+      @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) `
+    );
  }

  &:focus {
-    .button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`);
+    .button-color(~`colorPalette('@{color}', 5) `; #fff; ~`colorPalette('@{color}', 5) `);
  }

  &:active,
  &.active {
-    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
+    .button-color(
+      @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) `
+    );
  }

  .button-disabled();
@ -81,12 +89,12 @@

  &:hover,
  &:focus {
-    .button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`);
+    .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
  }

  &:active,
  &.active {
-    .button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`);
+    .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
  }

  .button-disabled();
@ -101,7 +109,7 @@
  > a:only-child {
    color: currentColor;
    &:after {
-      content: "";
+      content: '';
      position: absolute;
      top: 0;
      left: 0;
@ -161,9 +169,9 @@
  white-space: nowrap;
  .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
  user-select: none;
-  transition: all .3s @ease-in-out;
+  transition: all 0.3s @ease-in-out;
  position: relative;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);

  > .@{iconfont-css-prefix} {
    line-height: 1;
--- a/components/calendar/tests/snapshots/demo.test.js.snap
+++ b/components/calendar/tests/snapshots/demo.test.js.snap
@ -4,17 +4,17 @@ exports[`renders ./components/calendar/demo/basic.md correctly 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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>
@ -310,17 +310,17 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
  <div class="">
    <div class="ant-fullcalendar-header">
      <div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
-        <div role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="0" class="ant-select-selection ant-select-selection--single">
+        <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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>
@ -616,17 +616,17 @@ exports[`renders ./components/calendar/demo/notice-calendar.md correctly 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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>
@ -1029,17 +1029,17 @@ exports[`renders ./components/calendar/demo/select.md correctly 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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>
@ -1333,17 +1333,17 @@ exports[`renders ./components/calendar/demo/select.md correctly 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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"><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><span unselectable="on" 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>
--- a/components/calendar/tests/snapshots/index.test.js.snap
+++ b/components/calendar/tests/snapshots/index.test.js.snap
@ -4,17 +4,17 @@ 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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><span unselectable="on" 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 role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" 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><span unselectable="on" 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>
--- a/components/calendar/locale/da_DK.js
+++ b/components/calendar/locale/da_DK.js
@ -0,0 +1,2 @@
+import da_DK from '../../date-picker/locale/da_DK'
+export default da_DK
--- a/components/calendar/locale/he_IL.js
+++ b/components/calendar/locale/he_IL.js
@ -0,0 +1,2 @@
+import he_IL from '../../date-picker/locale/he_IL'
+export default he_IL
--- a/components/calendar/locale/hu_HU.js
+++ b/components/calendar/locale/hu_HU.js
@ -0,0 +1,2 @@
+import hu_HU from '../../date-picker/locale/hu_HU'
+export default hu_HU
--- a/components/calendar/locale/id_ID.js
+++ b/components/calendar/locale/id_ID.js
@ -0,0 +1,2 @@
+import id_ID from '../../date-picker/locale/id_ID'
+export default id_ID
--- a/components/calendar/style/index.less
+++ b/components/calendar/style/index.less
@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@full-calendar-prefix-cls: ~"@{ant-prefix}-fullcalendar";
+@full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';

 .@{full-calendar-prefix-cls} {
  .reset-component;
@ -84,7 +84,7 @@
  &-month,
  &-date {
    text-align: center;
-    transition: all .3s;
+    transition: all 0.3s;
  }

  &-value {
@ -97,7 +97,7 @@
    padding: 0;
    background: transparent;
    line-height: 24px;
-    transition: all .3s;
+    transition: all 0.3s;

    &:hover {
      background: @item-hover-bg;
@ -180,7 +180,7 @@
    height: 116px;
    padding: 4px 8px;
    border-top: 2px solid @border-color-split;
-    transition: background .3s;
+    transition: background 0.3s;

    &:hover {
      background: @item-hover-bg;
--- a/components/card/tests/snapshots/demo.test.js.snap
+++ b/components/card/tests/snapshots/demo.test.js.snap
@ -268,15 +268,15 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
            </div>
          </div>
        </div>
-        <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; position: absolute;"></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 tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></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 tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
      </div>
    </div>
    <div class="ant-card-body">
@ -303,16 +303,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
            </div>
          </div>
        </div>
-        <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; position: absolute;"></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 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 tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
+            <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></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 tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
      </div>
    </div>
    <div class="ant-card-body">
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@card-prefix-cls: ~"@{ant-prefix}-card";
+@card-prefix-cls: ~'@{ant-prefix}-card';
@card-head-height: 48px;
@card-hover-border: rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-sm;
@ -11,7 +11,7 @@
  background: @component-background;
  border-radius: @card-radius;
  position: relative;
-  transition: all .3s;
+  transition: all 0.3s;

  &-hoverable {
    cursor: pointer;
@ -66,11 +66,10 @@

  &-extra {
    float: right;
-    padding: @card-head-padding + 1.5px 0;
+    padding: @card-head-padding 0;
    font-size: @font-size-base;
    color: @text-color;
    font-weight: normal;
-    text-align: right;
    // https://stackoverflow.com/a/22429853/3040605
    margin-left: auto;
  }
@ -88,11 +87,13 @@
  &-grid {
    border-radius: 0;
    border: 0;
-    box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, 0 1px 0 0 @border-color-split inset;
+    box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
+      1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
+      0 1px 0 0 @border-color-split inset;
    width: 33.33%;
    float: left;
    padding: @card-padding-base;
-    transition: all .3s;
+    transition: all 0.3s;
    &:hover {
      position: relative;
      z-index: 1;
@ -143,7 +144,7 @@

        &:hover {
          color: @primary-color;
-          transition: color .3s;
+          transition: color 0.3s;
        }

        & > .anticon {
@ -179,7 +180,7 @@

  &-padding-transition &-head,
  &-padding-transition &-body {
-    transition: padding .3s;
+    transition: padding 0.3s;
  }

  &-type-inner &-head {
@ -230,6 +231,21 @@
    }
  }

+  &-loading {
+    overflow: hidden;
+    position: relative;
+
+    &:after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: @card-padding-base;
+      background: @component-background;
+      content: '';
+    }
+  }
+
  &-loading &-body {
    user-select: none;
  }
@ -244,7 +260,12 @@
    height: 14px;
    margin: 4px 0;
    border-radius: @card-radius;
-    background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
+    background: linear-gradient(
+      90deg,
+      rgba(207, 216, 220, 0.2),
+      rgba(207, 216, 220, 0.4),
+      rgba(207, 216, 220, 0.2)
+    );
    animation: card-loading 1.4s ease infinite;
    background-size: 600% 600%;
  }
@ -253,9 +274,9 @@
@keyframes card-loading {
  0%,
  100% {
-		background-position: 0 50%;
-	}
-	50% {
-		background-position: 100% 50%;
-	}
+    background-position: 0 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
 }
--- a/components/carousel/tests/index.test.js
+++ b/components/carousel/tests/index.test.js
@ -77,7 +77,7 @@ describe('Carousel', () => {
      sync: true,
    }
    const wrapper = mount(Carousel, props)
-    const onWindowResized = wrapper.vm.onWindowResized
+    const { onWindowResized } = wrapper.vm
    const spy = jest.spyOn(wrapper.vm.onWindowResized, 'cancel')
    const spy2 = jest.spyOn(window, 'removeEventListener')
    wrapper.destroy()
--- a/components/carousel/style/index.less
+++ b/components/carousel/style/index.less
@ -1,5 +1,5 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

 .@{ant-prefix}-carousel {
  .reset-component;
@ -49,7 +49,7 @@

    &:before,
    &:after {
-      content: "";
+      content: '';
      display: table;
    }

@ -65,7 +65,7 @@
    float: left;
    height: 100%;
    min-height: 1px;
-    [dir="rtl"] & {
+    [dir='rtl'] & {
      float: right;
    }
    img {
@ -133,14 +133,14 @@
  .slick-prev {
    left: -25px;
    &:before {
-      content: "←";
+      content: '←';
    }
  }

  .slick-next {
    right: -25px;
    &:before {
-      content: "→";
+      content: '→';
    }
  }

@ -174,7 +174,7 @@
        outline: none;
        font-size: 0;
        color: transparent;
-        transition: all .5s;
+        transition: all 0.5s;
        padding: 0;
        &:hover,
        &:focus {
--- a/components/cascader/tests/snapshots/demo.test.js.snap
+++ b/components/cascader/tests/snapshots/demo.test.js.snap
@ -1,19 +1,19 @@
 // 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="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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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="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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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>
+<span tabindex="0" class="ant-cascader-picker" style="width: 100%;"><input type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label"><span><span>
        Zhejiang / 
      </span></span><span><span>
        Hangzhou / 
@ -34,7 +34,7 @@ exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
 `;

 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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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>
@ -42,47 +42,47 @@ exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
 `;

 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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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="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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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="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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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="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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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="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="">
+<span tabindex="0" class="ant-cascader-picker ant-cascader-picker-show-search"><span class="ant-cascader-picker-label"></span><input 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="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="">
+<div><span tabindex="0" class="ant-cascader-picker ant-cascader-picker-large"><input 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="">
+    </svg></i></span><br><br> <span tabindex="0" class="ant-cascader-picker"><input 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="">
+    </svg></i></span><br><br> <span tabindex="0" class="ant-cascader-picker ant-cascader-picker-small"><input 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="">
+<div><span tabindex="0" class="ant-cascader-picker" style="margin-top: 1rem;"><input 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>
+    </svg></i></span> <span tabindex="0" class="ant-cascader-picker" style="margin-top: 1rem;"><input 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>
 `;
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@ -95,7 +95,7 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
 `;

 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="">
+<span tabindex="0" class="ant-cascader-picker"><input 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>
--- a/components/cascader/tests/index.test.js
+++ b/components/cascader/tests/index.test.js
@ -4,6 +4,9 @@ import KeyCode from '../../_util/KeyCode'
 import Cascader from '..'
 import focusTest from '../../../tests/shared/focusTest'

+function $$ (className) {
+  return document.body.querySelectorAll(className)
+}
 const options = [{
  value: 'zhejiang',
  label: 'Zhejiang',
@ -28,6 +31,10 @@ const options = [{
  }],
 }]

+function filter (inputValue, path) {
+  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
+}
+
 describe('Cascader', () => {
  focusTest(Cascader)

@ -187,4 +194,60 @@ describe('Cascader', () => {
      expect(wrapper.vm.inputValue).toBe('123')
    })
  })
+
+  describe('limit filtered item count', () => {
+    beforeEach(() => {
+      document.body.outerHTML = ''
+    })
+
+    afterEach(() => {
+      document.body.outerHTML = ''
+    })
+
+    it('limit with positive number', async () => {
+      const wrapper = mount(Cascader, {
+        propsData: { options, showSearch: { filter, limit: 1 }},
+        sync: false,
+        attachToDocument: true,
+      })
+      wrapper.find('input').trigger('click')
+      wrapper.find('input').element.value = 'a'
+      wrapper.find('input').trigger('input')
+      await asyncExpect(() => {
+        expect($$('.ant-cascader-menu-item').length).toBe(1)
+      }, 0)
+    })
+
+    it('not limit', async () => {
+      const wrapper = mount(Cascader, {
+        propsData: { options, showSearch: { filter, limit: false }},
+        sync: false,
+        attachToDocument: true,
+      })
+      wrapper.find('input').trigger('click')
+      wrapper.find('input').element.value = 'a'
+      wrapper.find('input').trigger('input')
+      await asyncExpect(() => {
+        expect($$('.ant-cascader-menu-item').length).toBe(2)
+      }, 0)
+    })
+
+    it('negative limit', async () => {
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+      const wrapper = mount(Cascader, {
+        propsData: { options, showSearch: { filter, limit: -1 }},
+        sync: false,
+        attachToDocument: true,
+      })
+      wrapper.find('input').trigger('click')
+      wrapper.find('input').element.value = 'a'
+      wrapper.find('input').trigger('input')
+      await asyncExpect(() => {
+        expect($$('.ant-cascader-menu-item').length).toBe(2)
+      }, 0)
+      expect(errorSpy).toBeCalledWith(
+        "Warning: 'limit' of showSearch in Cascader should be positive number or false.",
+      )
+    })
+  })
 })
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -34,6 +34,7 @@ Fields in `showSearch`:
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | filter | 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. | `function(inputValue, path): boolean` |  |
+| limit | Set the count of filtered items | number \| false | 50 |
 | matchInputWidth | Whether the width of result list equals to input's | boolean |  |
 | render | Used to render filtered options, you can use slot="showSearchRender" and slot-scope="{inputValue, path}" | `function({inputValue, path}): vNode` |  |
 | sort | Used to sort filtered options. | `function(a, b, inputValue)` |  |
--- a/components/cascader/index.jsx
+++ b/components/cascader/index.jsx
@ -10,6 +10,7 @@ import Icon from '../icon'
 import { hasProp, filterEmpty, getOptionProps, getStyle, getClass, getAttrs, getComponentFromProp, isValidElement } from '../_util/props-util'
 import BaseMixin from '../_util/BaseMixin'
 import { cloneElement } from '../_util/vnode'
+import warning from '../_util/warning'

 const CascaderOptionType = PropTypes.shape({
  value: PropTypes.string,
@ -32,6 +33,7 @@ const ShowSearchType = PropTypes.shape({
  render: PropTypes.func,
  sort: PropTypes.func,
  matchInputWidth: PropTypes.bool,
+  limit: PropTypes.oneOfType([Boolean, Number]),
 }).loose
 function noop () {}

@ -78,6 +80,9 @@ const CascaderProps = {
  suffixIcon: PropTypes.any,
 }

+// We limit the filtered item count by default
+const defaultLimit = 50
+
 function defaultFilterOption (inputValue, path, names) {
  return path.some(option => option[names.label].indexOf(inputValue) > -1)
 }
@ -99,6 +104,26 @@ function getFilledFieldNames ({ fieldNames = {}}) {
  return names
 }

+function flattenTree (
+  options = [],
+  props,
+  ancestor = [],
+) {
+  const names = getFilledFieldNames(props)
+  let flattenOptions = []
+  const childrenName = names.children
+  options.forEach(option => {
+    const path = ancestor.concat(option)
+    if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
+      flattenOptions.push(path)
+    }
+    if (option[childrenName]) {
+      flattenOptions = flattenOptions.concat(flattenTree(option[childrenName], props, path))
+    }
+  })
+  return flattenOptions
+}
+
 const defaultDisplayRender = ({ labels }) => labels.join(' / ')

 const Cascader = {
@ -110,9 +135,13 @@ const Cascader = {
    prop: 'value',
    event: 'change',
  },
+  inject: {
+    configProvider: { default: {}},
+    localeData: { default: {}},
+  },
  data () {
    this.cachedOptions = []
-    const { value, defaultValue, popupVisible, showSearch, options, flattenTree } = this
+    const { value, defaultValue, popupVisible, showSearch, options } = this
    return {
      sValue: value || defaultValue || [],
      inputValue: '',
@ -137,7 +166,7 @@ const Cascader = {
    },
    options (val) {
      if (this.showSearch) {
-        this.setState({ flattenOptions: this.flattenTree(this.options, this.$props) })
+        this.setState({ flattenOptions: flattenTree(val, this.$props) })
      }
    },
  },
@ -171,11 +200,11 @@ const Cascader = {

    handlePopupVisibleChange (popupVisible) {
      if (!hasProp(this, 'popupVisible')) {
-        this.setState({
+        this.setState(state => ({
          sPopupVisible: popupVisible,
          inputFocused: popupVisible,
-          inputValue: popupVisible ? this.inputValue : '',
-        })
+          inputValue: popupVisible ? state.inputValue : '',
+        }))
      }
      this.$emit('popupVisibleChange', popupVisible)
    },
@ -244,24 +273,6 @@ const Cascader = {
      }
    },

-    flattenTree (options, props, ancestor = []) {
-      const names = getFilledFieldNames(props)
-      let flattenOptions = []
-      const childrenName = names.children
-      options.forEach((option) => {
-        const path = ancestor.concat(option)
-        if (props.changeOnSelect || !option[childrenName] || !option[childrenName].length) {
-          flattenOptions.push(path)
-        }
-        if (option[childrenName]) {
-          flattenOptions = flattenOptions.concat(
-            this.flattenTree(option[childrenName], props, path)
-          )
-        }
-      })
-      return flattenOptions
-    },
-
    generateFilteredOptions (prefixCls) {
      const { showSearch, notFoundContent, $scopedSlots } = this
      const names = getFilledFieldNames(this.$props)
@ -269,11 +280,35 @@ const Cascader = {
        filter = defaultFilterOption,
        // render = this.defaultRenderFilteredOption,
        sort = defaultSortFilteredOption,
+        limit = defaultLimit,
      } = showSearch
-      const { flattenOptions = [], inputValue } = this.$data
      const render = showSearch.render || $scopedSlots.showSearchRender || this.defaultRenderFilteredOption
-      const filtered = flattenOptions.filter((path) => filter(inputValue, path, names))
-        .sort((a, b) => sort(a, b, inputValue, names))
+      const { flattenOptions = [], inputValue } = this.$data
+
+      // Limit the filter if needed
+      let filtered
+      if (limit > 0) {
+        filtered = []
+        let matchCount = 0
+
+        // Perf optimization to filter items only below the limit
+        flattenOptions.some(path => {
+          const match = filter(inputValue, path, names)
+          if (match) {
+            filtered.push(path)
+            matchCount += 1
+          }
+          return matchCount >= limit
+        })
+      } else {
+        warning(
+          typeof limit !== 'number',
+          "'limit' of showSearch in Cascader should be positive number or false.",
+        )
+        filtered = flattenOptions.filter(path => filter(inputValue, path, names))
+      }
+
+      filtered.sort((a, b) => sort(a, b, inputValue, names))

      if (filtered.length > 0) {
        return filtered.map((path) => {
@ -307,14 +342,22 @@ const Cascader = {
  },

  render () {
-    const { $slots, sPopupVisible, inputValue, $listeners } = this
+    const { $slots, sPopupVisible, inputValue, $listeners, configProvider, localeData } = this
    const { sValue: value, inputFocused } = this.$data
    const props = getOptionProps(this)
    let suffixIcon = getComponentFromProp(this, 'suffixIcon')
    suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon
+    const { getPopupContainer: getContextPopupContainer } = configProvider
    const {
-      prefixCls, inputPrefixCls, placeholder, size, disabled,
-      allowClear, showSearch = false, ...otherProps } = props
+      prefixCls,
+      inputPrefixCls,
+      placeholder = localeData.placeholder,
+      size,
+      disabled,
+      allowClear,
+      showSearch = false,
+      ...otherProps
+    } = props

    const sizeCls = classNames({
      [`${inputPrefixCls}-lg`]: size === 'large',
@ -448,9 +491,11 @@ const Cascader = {
        <Icon type='redo' spin />
      </span>
    )
+    const getPopupContainer = props.getPopupContainer || getContextPopupContainer
    const cascaderProps = {
      props: {
        ...props,
+        getPopupContainer,
        options: options,
        value: value,
        popupVisible: sPopupVisible,
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -34,6 +34,7 @@
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` |  |
+| limit | 搜索结果展示数量 | number \| false | 50 |
 | matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean |  |
 | render | 用于渲染 filter 后的选项,可使用slot="showSearchRender" 和 slot-scope="{inputValue, path}" | `function({inputValue, path}): vNode` |  |
 | sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` |  |
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@ -1,8 +1,8 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
-@import "../../input/style/mixin";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';

-@cascader-prefix-cls: ~"@{ant-prefix}-cascader";
+@cascader-prefix-cls: ~'@{ant-prefix}-cascader';

 .@{cascader-prefix-cls} {
  .reset-component;
@ -28,7 +28,7 @@
    background-color: @component-background;
    border-radius: @border-radius-base;
    outline: 0;
-    transition: color .3s;
+    transition: color 0.3s;

    &-with-value &-label {
      color: transparent;
@ -101,7 +101,7 @@
      margin-top: -6px;
      line-height: 12px;
      color: @disabled-color;
-      transition: transform .2s;
+      transition: transform 0.2s;
      &&-expand {
        transform: rotate(180deg);
      }
--- a/components/checkbox/Group.jsx
+++ b/components/checkbox/Group.jsx
@ -44,7 +44,7 @@ export default {
  },
  methods: {
    getOptions () {
-      const { options } = this.$props
+      const { options, $scopedSlots } = this
      return options.map(option => {
        if (typeof option === 'string') {
          return {
@ -52,7 +52,11 @@ export default {
            value: option,
          }
        }
-        return option
+        let label = option.label
+        if (label === undefined && $scopedSlots.label) {
+          label = $scopedSlots.label(option)
+        }
+        return { ...option, label }
      })
    },
    toggleOption (option) {
--- a/components/checkbox/tests/snapshots/demo.test.js.snap
+++ b/components/checkbox/tests/snapshots/demo.test.js.snap
@ -27,7 +27,7 @@ exports[`renders ./components/checkbox/demo/group.md correctly 1`] = `
  <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-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-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-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 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><span style="color: red;">Apple</span></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>
 `;

--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@ -17,7 +17,9 @@ Generate a group of checkboxes from an array
    <br />
    <a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
    <br />
-    <a-checkbox-group :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
+    <a-checkbox-group :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange">
+      <span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
+    </a-checkbox-group>
  </div>
 </template>
 <script>
@ -28,7 +30,7 @@ const options = [
  { label: 'Orange', value: 'Orange' },
 ]
 const optionsWithDisabled = [
-  { label: 'Apple', value: 'Apple' },
+  { value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: false },
 ]
--- a/components/checkbox/index.en-US.md
+++ b/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&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
+| options | Specifies options, you can customize `label` with slot = "label" slot-scope = "option" | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
 | value | Used for setting the currently selected value. | string\[] | \[] |

 #### events
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@ -25,7 +25,7 @@
 | --- | --- | --- | --- |
 | defaultValue | 默认选中的选项 | string\[] | \[] |
 | disabled | 整组失效 | boolean | false |
-| options | 指定可选项 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
+| options | 指定可选项，可以通过 slot="label" slot-scope="option" 定制`label` | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
 | value | 指定选中的选项 | string\[] | \[] |

 #### 事件
--- a/components/checkbox/style/index.less
+++ b/components/checkbox/style/index.less
@ -1,4 +1,4 @@
-@import "../../style/themes/default";
-@import "./mixin";
+@import '../../style/themes/default';
+@import './mixin';

 .antCheckboxFn();
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@ -1,7 +1,7 @@
-@import "../../style/mixins/index";
+@import '../../style/mixins/index';

-.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
-  @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
+.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
+  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
  // 一般状态
  .@{checkbox-prefix-cls} {
    .reset-component;
@ -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;
@ -49,7 +49,7 @@
      border: @checkbox-border-width @border-style-base @border-color-base;
      border-radius: @border-radius-sm;
      background-color: @checkbox-check-color;
-      transition: all .3s;
+      transition: all 0.3s;
      // Fix IE checked style
      // https://github.com/ant-design/ant-design/issues/12597
      border-collapse: separate;
@ -68,7 +68,7 @@
        border-top: 0;
        border-left: 0;
        content: ' ';
-        transition: all .1s @ease-in-back, opacity .1s;
+        transition: all 0.1s @ease-in-back, opacity 0.1s;
        opacity: 0;
      }
    }
@ -96,7 +96,7 @@
    border-top: 0;
    border-left: 0;
    content: ' ';
-    transition: all .2s @ease-out-back .1s;
+    transition: all 0.2s @ease-out-back 0.1s;
    opacity: 1;
  }

--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@ -1,7 +1,7 @@
-@import "../../style/themes/default";
-@import "../../style/mixins/index";
+@import '../../style/themes/default';
+@import '../../style/mixins/index';

-@collapse-prefix-cls: ~"@{ant-prefix}-collapse";
+@collapse-prefix-cls: ~'@{ant-prefix}-collapse';

 .collapse-close() {
  transform: rotate(0);
@ -33,7 +33,7 @@
      color: @heading-color;
      cursor: pointer;
      position: relative;
-      transition: all .3s;
+      transition: all 0.3s;

      .arrow {
        .iconfont-mixin();
@ -64,7 +64,7 @@
  }

  &-anim-active {
-    transition: height .2s @ease-out;
+    transition: height 0.2s @ease-out;
  }

  &-content {
@ -88,7 +88,7 @@
    }
  }

-  & > &-item > &-header[aria-expanded="true"] {
+  & > &-item > &-header[aria-expanded='true'] {
    .anticon-right svg {
      .collapse-open();
    }
--- a/components/comment/tests/snapshots/demo.test.js.snap
+++ b/components/comment/tests/snapshots/demo.test.js.snap
@ -0,0 +1,167 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
+<div class="ant-comment">
+  <div class="ant-comment-inner">
+    <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+    <div class="ant-comment-content">
+      <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span><span class="ant-comment-content-author-time"><span class="">a few seconds ago</span></span></div>
+      <div class="ant-comment-content-detail">
+        <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+      </div>
+      <ul class="ant-comment-actions">
+        <li><span><i class="anticon anticon-like"><svg viewBox="64 64 896 896" data-icon="like" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 0 0 471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 0 1 6.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0 1 42.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"></path></svg></i> <span style="cursor: 'auto';">
+        0
+      </span></span></li>
+        <li> </li>
+        <li><span><i class="anticon anticon-dislike"><svg viewBox="64 64 896 896" data-icon="dislike" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M885.9 490.3c3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-28.3-9.3-55.5-26.1-77.7 3.6-12 5.4-24.4 5.4-37 0-51.6-30.7-98.1-78.3-118.4a66.1 66.1 0 0 0-26.5-5.4H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h129.3l85.8 310.8C372.9 889 418.9 924 470.9 924c29.7 0 57.4-11.8 77.9-33.4 20.5-21.5 31-49.7 29.5-79.4l-6-122.9h239.9c12.1 0 23.9-3.2 34.3-9.3 40.4-23.5 65.5-66.1 65.5-111 0-28.3-9.3-55.5-26.1-77.7zM184 456V172h81v284h-81zm627.2 160.4H496.8l9.6 198.4c.6 11.9-4.7 23.1-14.6 30.5-6.1 4.5-13.6 6.8-21.1 6.7a44.28 44.28 0 0 1-42.2-32.3L329 459.2V172h415.4a56.85 56.85 0 0 1 33.6 51.8c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-13.9 25.4 21.9 19a56.76 56.76 0 0 1 19.6 43c0 9.7-2.3 18.9-6.9 27.3l-14 25.5 21.9 19a56.76 56.76 0 0 1 19.6 43c0 19.1-11 37.5-28.8 48.4z"></path></svg></i> <span style="cursor: 'auto';">
+        0
+      </span></span></li>
+        <li> </li>
+        <li><span>Reply to</span></li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
+<div>
+  <!---->
+  <div class="ant-comment">
+    <div class="ant-comment-inner">
+      <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+      <div class="ant-comment-content">
+        <div class="ant-comment-content-author"></div>
+        <div class="ant-comment-content-detail">
+          <div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea rows="4" class="ant-input"></textarea></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Add Comment</span></button></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/comment/demo/list.md correctly 1`] = `
+<div class="comment-list ant-list ant-list-split">
+  <div class="ant-list-header">2 replies</div>
+  <div class="ant-spin-nested-loading">
+    <div class="ant-spin-container">
+      <div class="ant-list-item">
+        <div class="ant-list-item-content ant-list-item-content-single">
+          <div class="ant-comment">
+            <div class="ant-comment-inner">
+              <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
+              <div class="ant-comment-content">
+                <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">a day ago</span></span></div>
+                <div class="ant-comment-content-detail">
+                  <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+                </div>
+                <ul class="ant-comment-actions">
+                  <li><span>Reply to</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-list-item">
+        <div class="ant-list-item-content ant-list-item-content-single">
+          <div class="ant-comment">
+            <div class="ant-comment-inner">
+              <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
+              <div class="ant-comment-content">
+                <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time"><span class="">2 days ago</span></span></div>
+                <div class="ant-comment-content-detail">
+                  <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+                </div>
+                <ul class="ant-comment-actions">
+                  <li><span>Reply to</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/comment/demo/nested.md correctly 1`] = `
+<div class="ant-comment">
+  <div class="ant-comment-inner">
+    <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+    <div class="ant-comment-content">
+      <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+      <div class="ant-comment-content-detail">
+        <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+      </div>
+      <ul class="ant-comment-actions">
+        <li><span>Reply to</span></li>
+      </ul>
+    </div>
+  </div>
+  <div class="ant-comment-nested">
+    <div class="ant-comment">
+      <div class="ant-comment-inner">
+        <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+        <div class="ant-comment-content">
+          <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+          <div class="ant-comment-content-detail">
+            <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+          </div>
+          <ul class="ant-comment-actions">
+            <li><span>Reply to</span></li>
+          </ul>
+        </div>
+      </div>
+      <div class="ant-comment-nested">
+        <div class="ant-comment">
+          <div class="ant-comment-inner">
+            <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+            <div class="ant-comment-content">
+              <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+              <div class="ant-comment-content-detail">
+                <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+              </div>
+              <ul class="ant-comment-actions">
+                <li><span>Reply to</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div class="ant-comment">
+          <div class="ant-comment-inner">
+            <div class="ant-comment-avatar"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo"></span></div>
+            <div class="ant-comment-content">
+              <div class="ant-comment-content-author"><span class="ant-comment-content-author-name"><a>Han Solo</a></span></div>
+              <div class="ant-comment-content-detail">
+                <p>We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+              </div>
+              <ul class="ant-comment-actions">
+                <li><span>Reply to</span></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/components/comment/tests/demo.test.js
+++ b/components/comment/tests/demo.test.js
@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest'
+
+demoTest('comment')
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@ -0,0 +1,78 @@
+<cn>
+#### 基本评论
+一个基本的评论组件，带有作者、头像、时间和操作。
+</cn>
+
+<us>
+#### Basic comment
+A basic comment with author, avatar, time and actions.
+</us>
+
+```html
+<template>
+  <a-comment>
+    <template slot="actions">
+      <span>
+        <a-tooltip title="Like">
+          <a-icon
+            type="like"
+            :theme="action === 'liked' ? 'filled' : 'outlined'"
+            @click="like"
+          />
+        </a-tooltip>
+        <span style="padding-left: '8px';cursor: 'auto'">
+          {{likes}}
+        </span>
+      </span>
+      <span>
+        <a-tooltip title="Dislike">
+          <a-icon
+            type="dislike"
+            :theme="action === 'disliked' ? 'filled' : 'outlined'"
+            @click="dislike"
+          />
+        </a-tooltip>
+        <span style="padding-left: '8px';cursor: 'auto'">
+          {{dislikes}}
+        </span>
+      </span>
+      <span>Reply to</span>
+    </template>
+    <a slot="author">Han Solo</a>
+    <a-avatar
+      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+      alt="Han Solo"
+      slot="avatar"
+    />
+    <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.</p>
+    <a-tooltip slot="datetime" :title="moment().format('YYYY-MM-DD HH:mm:ss')">
+      <span>{{moment().fromNow()}}</span>
+    </a-tooltip>
+  </a-comment>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  data () {
+    return {
+      likes: 0,
+      dislikes: 0,
+      action: null,
+      moment,
+    }
+  },
+  methods: {
+    like() {
+      this.likes = 1
+      this.dislikes = 0
+      this.action = 'liked'
+    },
+    dislike() {
+      this.likes = 0
+      this.dislikes = 1
+      this.action = 'disliked'
+    }
+  }
+}
+</script>
+```
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@ -0,0 +1,93 @@
+<cn>
+#### 回复框
+评论编辑器组件提供了相同样式的封装以支持自定义评论编辑器。
+</cn>
+
+<us>
+#### Reply Editor
+Comment can be used as editor, user can customize the editor component.
+</us>
+
+```html
+<template>
+  <div>
+    <a-list
+      v-if="comments.length"
+      :dataSource="comments"
+      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
+      itemLayout="horizontal"
+    >
+      <a-list-item slot="renderItem" slot-scope="item, index">
+        <a-comment
+          :author="item.author"
+          :avatar="item.avatar"
+          :content="item.content"
+          :datetime="item.datetime"
+        >
+        </a-comment>
+      </a-list-item>
+    </a-list>
+    <a-comment>
+      <a-avatar
+        slot="avatar"
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+        alt="Han Solo"
+      />
+      <div slot="content">
+        <a-form-item>
+          <a-textarea :rows="4" @change="handleChange" :value="value" ></a-textarea>
+        </a-form-item>
+        <a-form-item>
+          <a-button
+            htmlType="submit"
+            :loading="submitting"
+            @click="handleSubmit"
+            type="primary"
+          >
+            Add Comment
+          </a-button>
+        </a-form-item>
+      </div>
+    </a-comment>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  data () {
+    return {
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+    }
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.value) {
+        return;
+      }
+
+      this.submitting = true
+
+      setTimeout(() => {
+        this.submitting = false
+        this.comments = [
+          {
+            author: 'Han Solo',
+            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+            content: this.value,
+            datetime: moment().fromNow(),
+          },
+          ...this.comments,
+        ]
+        this.value = ''
+      }, 1000)
+    },
+    handleChange(e) {
+      this.value = e.target.value
+    }
+  },
+}
+</script>
+```
--- a/components/comment/demo/index.vue
+++ b/components/comment/demo/index.vue
@ -0,0 +1,52 @@
+<script>
+import Basic from './basic'
+import Editor from './editor'
+import List from './list'
+import Nested from './nested'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# Comment评论
+对网站内容的反馈、评价和讨论。
+
+## 何时使用
+
+评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。`,
+  us: `# Comment
+A comment displays user feedback and discussion to website content.
+
+## When To Use
+
+Comments can be used to enable discussions on an entity such as a page, blog post, issue or other.`,
+}
+export default {
+  category: 'Components',
+  type: 'Data Display',
+  zhType: '数据展示',
+  title: 'Comment',
+  subtitle: '评论',
+  cols: 1,
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <Basic/>
+        <br/>
+        <List/>
+        <br/>
+        <Nested/>
+        <br/>
+        <Editor/>
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@ -0,0 +1,61 @@
+<cn>
+#### 配合 List 组件
+配合 List 组件展现评论列表。
+</cn>
+
+<us>
+#### Usage with list
+Displaying a series of comments using the `antd` List Component.
+</us>
+
+```html
+<template>
+  <a-list
+    class="comment-list"
+    :header="`${data.length} replies`"
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+    <a-list-item slot="renderItem" slot-scope="item, index">
+      <a-comment
+        :author="item.author"
+        :avatar="item.avatar"
+      >
+        <template slot="actions">
+          <span v-for="action in item.actions">{{action}}</span>
+        </template>
+        <p slot="content">{{item.content}}</p>
+        <a-tooltip slot="datetime" :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
+          <span>{{item.datetime.fromNow()}}</span>
+        </a-tooltip>
+      </a-comment>
+    </a-list-item>
+  </a-list>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  data () {
+    return {
+      data: [
+        {
+          actions: ['Reply to'],
+          author: 'Han Solo',
+          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+          content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+          datetime: moment().subtract(1, 'days'),
+        },
+        {
+          actions: ['Reply to'],
+          author: 'Han Solo',
+          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+          content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
+          datetime: moment().subtract(2, 'days'),
+        },
+      ],
+      moment,
+    }
+  },
+}
+</script>
+```
--- a/components/comment/demo/nested.md
+++ b/components/comment/demo/nested.md
@ -0,0 +1,54 @@
+<cn>
+#### 嵌套评论
+评论可以嵌套。
+</cn>
+
+<us>
+#### Nested comments
+Comments can be nested.
+</us>
+
+```html
+<template>
+  <a-comment>
+    <span slot="actions">Reply to</span>
+    <a slot="author">Han Solo</a>
+    <a-avatar
+      slot="avatar"
+      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+      alt="Han Solo"
+    />
+    <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+    <a-comment>
+      <span slot="actions">Reply to</span>
+      <a slot="author">Han Solo</a>
+      <a-avatar
+        slot="avatar"
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+        alt="Han Solo"
+      />
+      <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+      <a-comment>
+        <span slot="actions">Reply to</span>
+        <a slot="author">Han Solo</a>
+        <a-avatar
+          slot="avatar"
+          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+          alt="Han Solo"
+        />
+        <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+      </a-comment>
+      <a-comment>
+        <span slot="actions">Reply to</span>
+        <a slot="author">Han Solo</a>
+        <a-avatar
+          slot="avatar"
+          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+          alt="Han Solo"
+        />
+        <p slot="content">We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure).</p>
+      </a-comment>
+    </a-comment>
+  </a-comment>
+</template>
+```
--- a/components/comment/index.en-US.md
+++ b/components/comment/index.en-US.md
@ -0,0 +1,9 @@
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| actions | List of action items rendered below the comment content | Array \| slot | - |
+| author | The element to display as the comment author | string\|slot | - |
+| avatar | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|slot | - |
+| content | The main content of the comment | string\|slot | - |
+| datetime | A datetime element containing the time to be displayed | string\|slot | - |
--- a/components/comment/index.jsx
+++ b/components/comment/index.jsx
@ -0,0 +1,95 @@
+import PropsTypes from '../_util/vue-types'
+import { initDefaultProps, getComponentFromProp } from '../_util/props-util'
+
+export const CommentProps = {
+  actions: PropsTypes.array,
+  /** The element to display as the comment author. */
+  author: PropsTypes.any,
+  /** The element to display as the comment avatar - generally an antd Avatar */
+  avatar: PropsTypes.any,
+  /** The main content of the comment */
+  content: PropsTypes.any,
+  /** Comment prefix defaults to '.ant-comment' */
+  prefixCls: PropsTypes.string,
+  /** A datetime element containing the time to be displayed */
+  datetime: PropsTypes.any,
+}
+
+const Comment = {
+  name: 'AComment',
+  props: initDefaultProps(CommentProps, {
+    prefixCls: 'ant-comment',
+  }),
+  methods: {
+    getAction (actions) {
+      if (!actions || !actions.length) {
+        return null
+      }
+      const actionList = actions.map((action, index) => <li key={`action-${index}`}>{action}</li>)
+      return actionList
+    },
+    renderNested (children) {
+      const { prefixCls } = this.$props
+
+      return <div class={`${prefixCls}-nested`}>{children}</div>
+    },
+  },
+
+  render () {
+    const {
+      prefixCls,
+    } = this.$props
+
+    const actions = getComponentFromProp(this, 'actions')
+    const author = getComponentFromProp(this, 'author')
+    const avatar = getComponentFromProp(this, 'avatar')
+    const content = getComponentFromProp(this, 'content')
+    const datetime = getComponentFromProp(this, 'datetime')
+
+    const avatarDom = (
+      <div class={`${prefixCls}-avatar`}>
+        {typeof avatar === 'string' ? <img src={avatar} /> : avatar}
+      </div>
+    )
+
+    const actionDom =
+      actions && actions.length ? (
+        <ul class={`${prefixCls}-actions`}>{this.getAction(actions)}</ul>
+      ) : null
+
+    const authorContent = (
+      <div class={`${prefixCls}-content-author`}>
+        {author && <span class={`${prefixCls}-content-author-name`}>{author}</span>}
+        {datetime && <span class={`${prefixCls}-content-author-time`}>{datetime}</span>}
+      </div>
+    )
+
+    const contentDom = (
+      <div class={`${prefixCls}-content`}>
+        {authorContent}
+        <div class={`${prefixCls}-content-detail`}>{content}</div>
+        {actionDom}
+      </div>
+    )
+
+    const comment = (
+      <div class={`${prefixCls}-inner`}>
+        {avatarDom}
+        {contentDom}
+      </div>
+    )
+    const children = this.$slots.default
+    return (
+      <div class={prefixCls} {...{ on: this.$listeners }}>
+        {comment}
+        {children ? this.renderNested(children) : null}
+      </div>
+    )
+  },
+}
+
+/* istanbul ignore next */
+Comment.install = function (Vue) {
+  Vue.component(Comment.name, Comment)
+}
+export default Comment
--- a/components/comment/index.zh-CN.md
+++ b/components/comment/index.zh-CN.md
@ -0,0 +1,9 @@
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| actions | 在评论内容下面呈现的操作项列表 | Array\|slot | - |
+| author | 要显示为注释作者的元素 | string\|slot | - |
+| avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者src | string\|slot | - |
+| content | 评论的主要内容 | string\|slot | - |
+| datetime | 展示时间描述 | string\|slot | - |
--- a/components/comment/style/index.js
+++ b/components/comment/style/index.js
@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
--- a/components/comment/style/index.less
+++ b/components/comment/style/index.less
@ -0,0 +1,93 @@
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+
+@comment-prefix-cls: ~'@{ant-prefix}-comment';
+
+.@{comment-prefix-cls} {
+  position: relative;
+
+  &-inner {
+    padding: @comment-padding-base;
+    display: flex;
+  }
+
+  &-avatar {
+    flex-shrink: 0;
+    position: relative;
+    margin-right: 12px;
+    cursor: pointer;
+    img {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
+  }
+
+  &-content {
+    position: relative;
+    font-size: 14px;
+    flex: 1 1 auto;
+    min-width: 1px;
+    word-wrap: break-word;
+
+    &-author {
+      margin-bottom: 4px;
+      font-size: 14px;
+      display: flex;
+      justify-content: flex-start;
+      & > a,
+      & > span {
+        height: 18px;
+        font-size: 12px;
+        line-height: 18px;
+        padding-right: 8px;
+      }
+
+      &-name {
+        transition: color 0.3s;
+        font-size: 14px;
+        color: @comment-author-name-color;
+        > * {
+          color: @comment-author-name-color;
+          &:hover {
+            color: @comment-author-name-color;
+          }
+        }
+      }
+
+      &-time {
+        cursor: auto;
+        color: @comment-author-time-color;
+        white-space: nowrap;
+      }
+    }
+
+    &-detail p {
+      white-space: pre-wrap;
+    }
+  }
+
+  &-actions {
+    margin-top: 12px;
+    padding-left: 0;
+    > li {
+      display: inline-block;
+      color: @comment-action-color;
+      > span {
+        padding-right: 10px;
+        transition: color 0.3s;
+        font-size: 12px;
+        color: @comment-action-color;
+        cursor: pointer;
+        user-select: none;
+        &:hover {
+          color: @comment-action-hover-color;
+        }
+      }
+    }
+  }
+
+  &-nested {
+    margin-left: @comment-nest-indent;
+  }
+}
--- a/components/config-provider/demo/index.vue
+++ b/components/config-provider/demo/index.vue
@ -0,0 +1,32 @@
+<script>
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# ConfigProvider 全局化配置
+为组件提供统一的全局化配置。`,
+  us: `# ConfigProvider
+\`ConfigProvider\` provides a uniform configuration support for components.
+`,
+}
+export default {
+  category: 'Components',
+  subtitle: '全局化配置',
+  cols: 1,
+  type: '其他',
+  title: 'ConfigProvider',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -0,0 +1,16 @@
+
+## Usage
+
+This component provides a configuration to all Vue components underneath itself via the [provide / inject](https://vuejs.org/v2/api/#provide-inject), In the render tree all components will have access to the provided config.
+
+````html
+<a-config-provider :getPopupContainer="getPopupContainer">
+  <app />
+</a-config-provider>
+````
+
+## API
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` |
--- a/components/config-provider/index.jsx
+++ b/components/config-provider/index.jsx
@ -0,0 +1,25 @@
+
+import PropTypes from '../_util/vue-types'
+
+const ConfigProvider = {
+  name: 'AConfigProvider',
+  props: {
+    getPopupContainer: PropTypes.func,
+  },
+  provide () {
+    return {
+      configProvider: this.$props,
+    }
+  },
+  render () {
+    return this.$slots.default ? this.$slots.default[0] : null
+  },
+}
+
+/* istanbul ignore next */
+ConfigProvider.install = function (Vue) {
+  Vue.component(ConfigProvider.name, ConfigProvider)
+}
+
+export default ConfigProvider
+
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -0,0 +1,15 @@
+## 使用
+
+ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provide-inject) 特性，只需在应用外围包裹一次即可全局生效。
+
+````html
+<a-config-provider :getPopupContainer="getPopupContainer">
+  <app />
+</a-config-provider>
+````
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body |
--- a/components/config-provider/style/index.js
+++ b/components/config-provider/style/index.js
@ -0,0 +1 @@
+import './index.less';
--- a/components/config-provider/style/index.less
+++ b/components/config-provider/style/index.less
@ -0,0 +1,2 @@
+// placeholder
+@import '../../style/themes/default';
--- a/components/date-picker/RangePicker.jsx
+++ b/components/date-picker/RangePicker.jsx
@ -50,11 +50,12 @@ function fixLocale (value, localeCode) {
  if (!value || value.length === 0) {
    return
  }
-  if (value[0]) {
-    value[0].locale(localeCode)
+  const [start, end] = value
+  if (start) {
+    start.locale(localeCode)
  }
-  if (value[1]) {
-    value[1].locale(localeCode)
+  if (end) {
+    end.locale(localeCode)
  }
 }

@ -73,9 +74,10 @@ export default {
  },
  data () {
    const value = this.value || this.defaultValue || []
+    const [start, end] = value
    if (
-      value[0] && !interopDefault(moment).isMoment(value[0]) ||
-      value[1] && !interopDefault(moment).isMoment(value[1])
+      start && !interopDefault(moment).isMoment(start) ||
+      end && !interopDefault(moment).isMoment(end)
    ) {
      throw new Error(
        'The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' +
@ -127,11 +129,11 @@ export default {
          sShowDate: getShowDateFromValue(value) || sShowDate,
        }))
      }
+      const [start, end] = value
      this.$emit('change', value, [
-        formatValue(value[0], this.format),
-        formatValue(value[1], this.format),
+        formatValue(start, this.format),
+        formatValue(end, this.format),
      ])
-      this.focus()
    },

    handleOpenChange (open) {
@ -143,6 +145,10 @@ export default {
        this.clearHoverValue()
      }
      this.$emit('openChange', open)
+
+      if (!open) {
+        this.focus()
+      }
    },

    handleShowDateChange (showDate) {
@ -160,7 +166,8 @@ export default {
    },

    handleCalendarInputSelect (value) {
-      if (!value[0]) {
+      const [start] = value
+      if (!start) {
        return
      }
      this.setState(({ sShowDate }) => ({
@ -317,8 +324,8 @@ export default {
    if (props.showTime) {
      pickerStyle.width = '350px'
    }
-
-    const clearIcon = (!props.disabled && props.allowClear && value && (value[0] || value[1])) ? (
+    const [startValue, endValue] = value
+    const clearIcon = (!props.disabled && props.allowClear && value && (startValue || endValue)) ? (
      <Icon
        type='close-circle'
        class={`${prefixCls}-picker-clear`}
@ -339,8 +346,7 @@ export default {
    )

    const input = ({ value: inputValue }) => {
-      const start = inputValue[0]
-      const end = inputValue[1]
+      const [start, end] = inputValue
      return (
        <span class={props.pickerInputClass}>
          <input
--- a/components/date-picker/WeekPicker.jsx
+++ b/components/date-picker/WeekPicker.jsx
@ -40,18 +40,22 @@ export default {
      )
    }
    return {
-      sValue: value,
+      _value: value,
+      _open: this.open,
    }
  },
  watch: {
    value (val) {
-      this.setState({ sValue: val })
+      this.setState({ _value: val })
+    },
+    open (val) {
+      this.setState({ _open: val })
    },
  },

  methods: {
    weekDateRender (current) {
-      const selectedValue = this.sValue
+      const selectedValue = this.$data._value
      const { prefixCls } = this
      if (selectedValue &&
        current.year() === selectedValue.year() &&
@ -72,10 +76,19 @@ export default {
    },
    handleChange  (value) {
      if (!hasProp(this, 'value')) {
-        this.setState({ sValue: value })
+        this.setState({ _value: value })
      }
      this.$emit('change', value, formatValue(value, this.format))
-      this.focus()
+    },
+    handleOpenChange (open) {
+      if (!hasProp(this, 'open')) {
+        this.setState({ _open: open })
+      }
+      this.$emit('openChange', open)
+
+      if (!open) {
+        this.focus()
+      }
    },
    clearSelection (e) {
      e.preventDefault()
@ -99,8 +112,9 @@ export default {
    const {
      prefixCls, disabled, pickerClass, popupStyle,
      pickerInputClass, format, allowClear, locale, localeCode, disabledDate,
-      sValue: pickerValue, $listeners, $scopedSlots,
+      $data, $listeners, $scopedSlots,
    } = this
+    const { _value: pickerValue, _open: open } = $data
    const { focus = noop, blur = noop } = $listeners

    if (pickerValue && localeCode) {
@ -121,7 +135,7 @@ export default {
        disabledDate={disabledDate}
      />
    )
-    const clearIcon = (!disabled && allowClear && this.sValue) ? (
+    const clearIcon = (!disabled && allowClear && $data._value) ? (
      <Icon
        type='close-circle'
        class={`${prefixCls}-picker-clear`}
@ -143,7 +157,7 @@ export default {

    const input = ({ value }) => {
      return (
-        <span>
+        <span style={{ display: 'inline-block', width: '100%' }}>
          <input
            ref='input'
            disabled={disabled}
@ -165,10 +179,12 @@ export default {
        calendar,
        prefixCls: `${prefixCls}-picker-container`,
        value: pickerValue,
+        open,
      },
      on: {
        ...$listeners,
        change: this.handleChange,
+        openChange: this.handleOpenChange,
      },
      style: popupStyle,
    }
--- a/components/date-picker/tests/snapshots/RangePicker.test.js.snap
+++ b/components/date-picker/tests/snapshots/RangePicker.test.js.snap
@ -686,7 +686,7 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
        <div class="ant-calendar-footer ant-calendar-range-bottom ant-calendar-footer-show-ok">
          <div class="ant-calendar-footer-btn">
            <div class="ant-calendar-footer-extra ant-calendar-range-quick-selector">
-              <div data-show="true" class="ant-tag ant-tag-blue">My Birthday</div>
+              <div class="ant-tag ant-tag-blue">My Birthday</div>
            </div><a role="button" class="ant-calendar-time-picker-btn ant-calendar-time-picker-btn-disabled">select time</a><a role="button" class="ant-calendar-ok-btn ant-calendar-ok-btn-disabled">Ok</a>
          </div>
        </div>
--- a/components/date-picker/tests/snapshots/WeekPicker.test.js.snap
+++ b/components/date-picker/tests/snapshots/WeekPicker.test.js.snap
@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;
+exports[`WeekPicker should support style prop 1`] = `<span class="ant-calendar-picker" style="width: 400px;"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>`;
--- a/components/date-picker/tests/snapshots/demo.test.js.snap
+++ b/components/date-picker/tests/snapshots/demo.test.js.snap
@ -3,13 +3,13 @@
 exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
 <div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
      <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
-    </svg></i></span></span> <br> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span></div>
+    </svg></i></span></span> <br> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span></div>
 `;

 exports[`renders ./components/date-picker/demo/date-render.md correctly 1`] = `
 <div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
      <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
-    </svg></i></span></span> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span></div>
+    </svg></i></span></span> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span></div>
 `;

 exports[`renders ./components/date-picker/demo/disabled.md correctly 1`] = `
@ -58,7 +58,7 @@ exports[`renders ./components/date-picker/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"><span class="ant-radio-button"><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 ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><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> <span class="ant-calendar-picker ant-calendar-picker-default"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span class="ant-calendar-picker ant-calendar-picker-default"><div class=""><input readonly="true" placeholder="Select Month" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker ant-calendar-picker-default"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
      <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>
-    </svg></i></span></span> <br> <span class="ant-calendar-picker ant-calendar-picker-default"><span class=""><input readonly="true" placeholder="Select Week" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>
+    </svg></i></span></span> <br> <span class="ant-calendar-picker ant-calendar-picker-default"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select Week" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></span></span>
 </div>
 `;

@ -67,7 +67,7 @@ exports[`renders ./components/date-picker/demo/start-end.md correctly 1`] = `<di
 exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
 <div><span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><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></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><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></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><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> <br> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><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> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon">ab</span></span></span> <br> <span class="ant-calendar-picker"><span class=""><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></span></span></div>
+    </svg></i></span></span> <br> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><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> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon">ab</span></span></span> <br> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></span></span></div>
 `;

 exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
--- a/components/date-picker/tests/showTime.test.js
+++ b/components/date-picker/tests/showTime.test.js
@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
 import { asyncExpect } from '@/tests/utils'
+import moment from 'moment'
 import DatePicker from '../'

 const { RangePicker } = DatePicker
@ -34,7 +35,14 @@ describe('DatePicker with showTime', () => {
    const onChangeFn = jest.fn()
    const wrapper = mount({
      render () {
-        return <DatePicker showTime open onChange={onChangeFn} onOk={onOkFn} onOpenChange={onOpenChangeFn} />
+        return <DatePicker
+          showTime
+          open
+          onChange={onChangeFn}
+          onOk={onOkFn}
+          onOpenChange={onOpenChangeFn}
+          defaultValue={moment()}
+        />
      },
    }, { sync: false })

--- a/components/date-picker/createPicker.js
+++ b/components/date-picker/createPicker.js
@ -92,7 +92,6 @@ export default function createPicker (TheCalendar, props) {
          })
        }
        this.$emit('change', value, (value && value.format(this.format)) || '')
-        this.focus()
      },

      handleCalendarChange (value) {
@ -104,6 +103,9 @@ export default function createPicker (TheCalendar, props) {
          this.setState({ _open: open })
        }
        this.$emit('openChange', open)
+        if (!open) {
+          this.focus()
+        }
      },
      focus () {
        this.$refs.input.focus()
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -80,7 +80,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | -------- | ----------- | ---- | ------- |
 | defaultValue | to set default date | [moment](http://momentjs.com/) | - |
 | defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
-| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
+| format | to set the date format. When an array is provided, all values are used for parsing and first value for display. refer to [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM" |
 | monthCellContentRender | Custom month cell content render method by setting a scoped slot | slot="monthCellContentRender" slot-scope="date, locale" | - |
 | renderExtraFooter | render extra footer in panel by setting a scoped slot | slot="renderExtraFooter" | - |
 | value(v-model) | to set date | [moment](http://momentjs.com/) | - |
@ -110,18 +110,18 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | -------- | ----------- | ---- | ------- |
 | defaultValue | to set default date | [moment](http://momentjs.com/)\[] | - |
 | defaultPickerValue | to set default picker date | [moment](http://momentjs.com/)\[] | - |
-| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
+| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment\], partial: `'start'|'end'`) | - |
 | format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
 | ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |
 | renderExtraFooter | render extra footer in panel by setting a scoped slot| slot="renderExtraFooter" | - |
 | showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker/#API) |
-| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
+| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |
 | value(v-model) | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |

 ### RangePicker Events
 | Events Name | Description | Arguments |
 | --- | --- | --- |
-| calendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
+| calendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) |
 | change | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) |
-| ok | callback when click ok button | function() |
+| ok | callback when click ok button | function(dates: [moment](http://momentjs.com/)\[]) |

--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -60,7 +60,7 @@ moment.locale('zh-cn');
 | defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 |
 | disabledTime | 不可选择的时间 | function(date) | 无 |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" |
 | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker-cn/#API) |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/) | moment() |
@ -112,19 +112,19 @@ moment.locale('zh-cn');
 | --- | --- | --- | --- |
 | defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 |
-| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
+| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 |
 | format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
 | ranges       | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 |
 | renderExtraFooter | 在面板中添加额外的页脚 | slot="renderExtraFooter" | - |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/ant-design-vue/components/time-picker-cn/#API) |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒 | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |
 | value(v-model) | 日期 | [moment](http://momentjs.com/)\[] | 无 |

 ### RangePicker事件

 | 事件名称 | 说明 | 回调参数 |
 | --- | --- | --- |
-| calendarChange | 待选日期发生变化的回调 | function(dates: [moment, moment], dateStrings: [string, string]) |
-| change | 日期范围发生变化的回调 | function(dates: [moment, moment], dateStrings: [string, string]) | 无 |
-| ok | 点击确定按钮的回调 | function() |
+| calendarChange | 待选日期发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) |
+| change | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 |
+| ok | 点击确定按钮的回调 | function(dates: [moment](http://momentjs.com/)\[]) |

--- a/components/date-picker/interface.js
+++ b/components/date-picker/interface.js
@ -13,7 +13,7 @@ export const PickerProps = () => ({
  transitionName: PropTypes.string,
  prefixCls: PropTypes.string,
  inputPrefixCls: PropTypes.string,
-  format: PropTypes.string,
+  format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  disabled: PropTypes.bool,
  allowClear: PropTypes.bool,
  suffixIcon: PropTypes.any,
--- a/components/date-picker/locale/da_DK.js
+++ b/components/date-picker/locale/da_DK.js
@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/da_DK'
+import TimePickerLocale from '../../time-picker/locale/da_DK'
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Vælg dato',
+    rangePlaceholder: ['Startdato', 'Slutdato'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+}
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale
--- a/components/date-picker/locale/he_IL.js
+++ b/components/date-picker/locale/he_IL.js
@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/he_IL'
+import TimePickerLocale from '../../time-picker/locale/he_IL'
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'בחר תאריך',
+    rangePlaceholder: ['תאריך התחלה', 'תאריך סיום'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+}
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale
--- a/components/date-picker/locale/hu_HU.js
+++ b/components/date-picker/locale/hu_HU.js
@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/hu_HU'
+import TimePickerLocale from '../../time-picker/locale/hu_HU'
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Válasszon dátumot',
+    rangePlaceholder: ['Kezdő dátum', 'Befejezés dátuma'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+}
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale
--- a/components/date-picker/locale/id_ID.js
+++ b/components/date-picker/locale/id_ID.js
@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/id_ID'
+import TimePickerLocale from '../../time-picker/locale/id_ID'
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Pilih tanggal',
+    rangePlaceholder: ['Mulai tanggal', 'Tanggal akhir'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+}
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale
--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
@ -38,7 +38,7 @@
    position: absolute;
    top: 0;
    color: @text-color-secondary;
-    font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif;
+    font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
    padding: 0 5px;
    font-size: 16px;
    display: inline-block;
@ -214,7 +214,9 @@
    background: tint(@primary-color, 80%);
  }

-  &-selected-date, &-selected-start-date, &-selected-end-date {
+  &-selected-date,
+  &-selected-start-date,
+  &-selected-end-date {
    .@{calendar-prefix-cls}-date {
      background: @primary-color;
      color: #fff;
@ -240,10 +242,10 @@
  }
  &-disabled-cell&-today &-date {
    position: relative;
-    margin-right: 5px;
+    padding-right: 5px;
    padding-left: 5px;
    &:before {
-      content: " ";
+      content: ' ';
      position: absolute;
      top: -1px;
      left: 5px;
--- a/components/date-picker/style/DecadePanel.less
+++ b/components/date-picker/style/DecadePanel.less
@ -15,11 +15,11 @@
 }

 .@{calendar-prefix-cls}-decade-panel-header {
-  .calendarPanelHeader(~"@{calendar-prefix-cls}-decade-panel");
+  .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
 }

 .@{calendar-prefix-cls}-decade-panel-body {
-  height: ~"calc(100% - 40px)";
+  height: ~'calc(100% - 40px)';
 }

 .@{calendar-prefix-cls}-decade-panel-table {
--- a/components/date-picker/style/MonthPanel.less
+++ b/components/date-picker/style/MonthPanel.less
@ -9,7 +9,8 @@
  background: @component-background;
  outline: none;

-  > div { // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
+  > div {
+    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
    height: 100%;
  }
 }
@ -19,11 +20,11 @@
 }

 .@{calendar-prefix-cls}-month-panel-header {
-  .calendarPanelHeader(~"@{calendar-prefix-cls}-month-panel");
+  .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
 }

 .@{calendar-prefix-cls}-month-panel-body {
-  height: ~"calc(100% - 40px)";
+  height: ~'calc(100% - 40px)';
 }

 .@{calendar-prefix-cls}-month-panel-table {
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
@ -1,4 +1,4 @@
-@import "../../button/style/mixin";
+@import '../../button/style/mixin';

 .@{calendar-prefix-cls}-picker-container {
  .reset-component;
@ -65,7 +65,7 @@
    margin-top: -7px;
    line-height: 14px;
    font-size: @font-size-sm;
-    transition: all .3s;
+    transition: all 0.3s;
    user-select: none;
    z-index: 1;
  }
@ -89,7 +89,7 @@
  }

  &-icon {
-    font-family: "anticon";
+    font-family: 'anticon';
    font-size: @font-size-base;
    color: @disabled-color;
    display: inline-block;
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@ -28,7 +28,7 @@

  .@{calendar-prefix-cls}-date-panel {
    &::after {
-      content: ".";
+      content: '.';
      display: block;
      height: 0;
      clear: both;
@ -134,7 +134,7 @@
      z-index: 1;
    }
    &:before {
-      content: "";
+      content: '';
      display: block;
      background: @item-active-bg;
      border-radius: 0;
--- a/Show More
+++ b/Show More