feat: update antd3.8.4

components/badge/demo/index.vue

@@ -52,7 +52,7 @@
 </script>
 
 <style>
-#components-badge-demo .ant-badge:not(.ant-badge-status) {
+#components-badge-demo .ant-badge:not(.ant-badge-not-a-wrapper) {
   margin-right: 20px;
 }
 #components-badge-demo .head-example {
@@ -62,4 +62,7 @@
   background: #eee;
   display: inline-block;
 }
+#components-badge-demo .ant-badge-not-a-wrapper:not(.ant-badge-status) {
+  margin-right: 8px;
+}
 </style>

components/badge/style/index.less

@@ -13,10 +13,7 @@
   color: unset;
 
   &-count {
-    position: absolute;
+    top: -@badge-height / 2;
-    transform: translate(50%, -50%);
-    top: 0;
-    right: 0;
     height: @badge-height;
     border-radius: @badge-height / 2;
     min-width: @badge-height;
@@ -28,7 +25,6 @@
     font-size: @badge-font-size;
     font-weight: @badge-font-weight;
     white-space: nowrap;
-    transform-origin: 0 center;
     box-shadow: 0 0 0 1px #fff;
     a,
     a:hover {
@@ -41,11 +37,7 @@
   }
 
   &-dot {
-    position: absolute;
+    top: -@badge-dot-size / 2;
-    transform: translate(50%, -50%);
-    transform-origin: 0 center;
-    top: 0;
-    right: 0;
     height: @badge-dot-size;
     width: @badge-dot-size;
     border-radius: 100%;
@@ -54,6 +46,14 @@
     box-shadow: 0 0 0 1px #fff;
   }
 
+  &-count,
+  &-dot {
+    position: absolute;
+    right: 0;
+    transform: translateX(50%);
+    transform-origin: 100%;
+  }
+
   &-status {
     line-height: inherit;
     vertical-align: baseline;
@@ -150,19 +150,19 @@
 @keyframes antZoomBadgeIn {
   0% {
     opacity: 0;
-    transform: scale(0) translateX(-50%);
+    transform: scale(0) translateX(50%);
   }
   100% {
-    transform: scale(1) translateX(-50%);
+    transform: scale(1) translateX(50%);
   }
 }
 
 @keyframes antZoomBadgeOut {
   0% {
-    transform: scale(1) translateX(-50%);
+    transform: scale(1) translateX(50%);
   }
   100% {
     opacity: 0;
-    transform: scale(0) translateX(-50%);
+    transform: scale(0) translateX(50%);
   }
 }

components/card/style/index.less

@@ -4,11 +4,12 @@
 @card-prefix-cls: ~"@{ant-prefix}-card";
 @card-head-height: 48px;
 @card-hover-border: rgba(0, 0, 0, 0.09);
+@card-radius: @border-radius-sm;
 
 .@{card-prefix-cls} {
   .reset-component;
   background: @component-background;
-  border-radius: @border-radius-sm;
+  border-radius: @card-radius;
   position: relative;
   transition: all .3s;
 
@@ -28,7 +29,7 @@
     background: @card-head-background;
     border-bottom: @border-width-base @border-style-base @border-color-split;
     padding: 0 @card-padding-base;
-    border-radius: @border-radius-sm @border-radius-sm 0 0;
+    border-radius: @card-radius @card-radius 0 0;
     .clearfix;
     margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
     min-height: @card-head-height;
@@ -101,9 +102,14 @@
     padding-bottom: 0;
   }
 
-  &-cover > * {
+  &-cover {
-    width: 100%;
+    > * {
-    display: block;
+      width: 100%;
+      display: block;
+    }
+    img {
+      border-radius: @card-radius @card-radius 0 0;
+    }
   }
 
   &-actions {
@@ -232,7 +238,7 @@
   &-loading-block {
     height: 14px;
     margin: 4px 0;
-    border-radius: @border-radius-sm;
+    border-radius: @card-radius;
     background: linear-gradient(90deg, rgba(207, 216, 220, .2), rgba(207, 216, 220, .4), rgba(207, 216, 220, .2));
     animation: card-loading 1.4s ease infinite;
     background-size: 600% 600%;

components/cascader/style/index.less

@@ -165,6 +165,8 @@
     padding: 0;
     border-right: @border-width-base @border-style-base @border-color-split;
     overflow: auto;
+    -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
+
     &:first-child {
       border-radius: @border-radius-base 0 0 @border-radius-base;
     }

components/checkbox/style/mixin.less

@@ -86,8 +86,8 @@
 
   // 半选状态
   .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
-    @indeterminate-width: @checkbox-size - 7px;
+    @indeterminate-width: @checkbox-size - 8px;
-    @indeterminate-height: @checkbox-size - 7px;
+    @indeterminate-height: @checkbox-size - 8px;
     content: ' ';
     transform: translate(-50%, -50%) scale(1);
     border: 0;

components/drawer/style/drawer.less

@@ -5,25 +5,29 @@
 .@{dawer-prefix-cls} {
   position: fixed;
   top: 0;
-  width: 100%;
+  width: 0%;
-  height: 100%;
-  pointer-events: none;
   z-index: @zindex-modal;
-  transition: transform 0.3s @ease-in-out-circ;
   > * {
-    transition: transform 0.3s @ease-in-out-circ;
+    transition: transform @animation-duration-slow @ease-base-in;
   }
 
   &-content-wrapper {
-    position: absolute;
+    position: fixed;
+  }
+  .@{dawer-prefix-cls}-content {
+    width: 100%;
+    height: 100%;
   }
-
   &-left,
   &-right {
-    .@{dawer-prefix-cls}-content-wrapper,
+    width: 0%;
-    .@{dawer-prefix-cls}-content {
+    height: 100%;
+    .@{dawer-prefix-cls}-content-wrapper {
       height: 100%;
     }
+    &.@{dawer-prefix-cls}-open {
+      width: 100%;
+    }
   }
   &-left {
     &.@{dawer-prefix-cls}-open {
@@ -44,13 +48,41 @@
       }
     }
   }
-  &.@{dawer-prefix-cls}-open {
+
-    > * {
+  &-top,
-      pointer-events: auto;
+  &-bottom {
+    .@{dawer-prefix-cls}-content-wrapper,
+    .@{dawer-prefix-cls}-content {
+      width: 100%;
     }
+  }
+  &-top {
+    &.@{dawer-prefix-cls}-open {
+      .@{dawer-prefix-cls}-content-wrapper {
+        box-shadow: @shadow-1-down;
+      }
+    }
+  }
+  &-bottom {
+    .@{dawer-prefix-cls} {
+      &-content-wrapper {
+        bottom: 0;
+      }
+    }
+    &.@{dawer-prefix-cls}-open {
+      .@{dawer-prefix-cls}-content-wrapper {
+        box-shadow: @shadow-1-up;
+      }
+    }
+  }
+
+  &.@{dawer-prefix-cls}-open {
     .@{dawer-prefix-cls} {
       &-mask {
         opacity: 0.3;
+        height: 100%;
+        animation: antdDrawerFadeIn @animation-duration-slow  @ease-base-out;
+        transition: none;
       }
     }
   }
@@ -82,7 +114,7 @@
     font-weight: 700;
     line-height: 1;
     text-decoration: none;
-    transition: color 0.3s;
+    transition: color @animation-duration-slow;
     color: @text-color-secondary;
     outline: 0;
     padding: 0;
@@ -129,21 +161,29 @@
 
   &-mask {
     position: fixed;
-    top: 0;
+    width: 100%;
-    right: 0;
+    height: 0;
-    left: 0;
-    bottom: 0;
     opacity: 0;
     background-color: @modal-mask-bg;
-    height: 100%;
-    transition: opacity 0.3s @ease-in-out-circ;
     filter: ~"alpha(opacity=50)";
+    transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
   }
-
   &-open {
-    overflow: hidden;
+    transition: transform @animation-duration-slow @ease-base-out;
+    > * {
+      transition: transform @animation-duration-slow @ease-base-out;
+    }
     &-content {
       box-shadow: @shadow-2;
     }
   }
 }
+
+@keyframes antdDrawerFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}

components/drawer/style/index.js

@@ -1,5 +1,5 @@
-import '../../style/index.less'
+import '../../style/index.less';
-import './index.less'
+import './index.less';
 
 // style dependencies
-import '../../button/style'
+import '../../button/style';

components/input-number/style/index.less

@@ -123,7 +123,7 @@
     cursor: pointer;
     &-inner {
       top: 50%;
-      margin-top: -6px;
+      margin-top: -5px;
       &:before {
         text-align: center;
         content: "\e61e";
@@ -136,7 +136,7 @@
 
   &-handler-down {
     border-top: @border-width-base @border-style-base @border-color-base;
-    top: -1px;
+    top: 0;
     cursor: pointer;
     &-inner {
       top: 50%;

components/input/style/mixin.less

@@ -271,6 +271,11 @@
       display: inline-block;
     }
 
+    // https://github.com/ant-design/ant-design/issues/11863
+    & > span > .@{inputClass} {
+      border-right-width: 0;
+    }
+
     // Undo float for .ant-input-group .ant-input
     .@{inputClass} {
       float: none;

components/menu/style/index.less

@@ -179,6 +179,16 @@
       position: absolute;
       border-radius: @border-radius-base;
       z-index: @zindex-dropdown;
+
+      &:before {
+        position: absolute;
+        top: -7px;
+        left: -6px;
+        right: -6px;
+        bottom: 0;
+        content: ' ';
+        opacity: .0001;
+      }
     }
 
     > .@{menu-prefix-cls} {
@@ -375,6 +385,7 @@
     width: @menu-collapsed-width;
     > .@{menu-prefix-cls}-item,
     > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
+    > .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title,
     > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       left: 0;
       text-overflow: clip;

components/steps/style/index.less

@@ -25,7 +25,7 @@
 @steps-small-icon-size: 24px;
 @steps-dot-size: 8px;
 @steps-current-dot-size: 10px;
-@steps-desciption-max-width: 140px;
+@steps-desciption-max-width: 150px;
 
 .@{steps-prefix-cls} {
   .reset-component;
@@ -147,6 +147,7 @@
     }
     &-description {
       max-width: @steps-desciption-max-width;
+      white-space: normal;
     }
   }
 }

components/style/core/motion/other.less

@@ -19,14 +19,15 @@
   right: -1px;
   border-radius: inherit;
   border: 0 solid @primary-color;
-  opacity: 0.4;
+  opacity: 0.2;
-  animation: waveEffect .4s cubic-bezier(.25, .8, .25, 1);
+  animation: fadeEffect 2s @ease-out-circ, waveEffect .4s @ease-out-circ;
+  animation-fill-mode: forwards;
   display: block;
+  pointer-events: none;
 }
 
 @keyframes waveEffect {
-  to {
+  100% {
-    opacity: 0;
     top: -@wave-animation-width;
     left: -@wave-animation-width;
     bottom: -@wave-animation-width;
@@ -34,3 +35,9 @@
     border-width: @wave-animation-width;
   }
 }
+
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}

components/style/themes/default.less

@@ -114,7 +114,7 @@
 // Shadow
 @shadow-color           : rgba(0, 0, 0, .15);
 @box-shadow-base        : @shadow-1-down;
-@shadow-1-up            : 0 2px 8px @shadow-color;
+@shadow-1-up            : 0 -2px 8px @shadow-color;
 @shadow-1-down          : 0 2px 8px @shadow-color;
 @shadow-1-left          : -2px 0 8px @shadow-color;
 @shadow-1-right         : 2px 0 8px @shadow-color;

components/tabs/style/index.less

@@ -205,26 +205,21 @@
       font-weight: 500;
     }
   }
-  &-large {
+
-    > .@{tab-prefix-cls}-bar {
+  &-large &-nav-container {
-        .@{tab-prefix-cls}-nav-container {
+    font-size: @tabs-title-font-size-lg;
-          font-size: @tabs-title-font-size-lg;
-        }
-        .@{tab-prefix-cls}-tab {
-          padding: 16px;
-        }
-    }
   }
 
-  &-small {
+  &-large &-tab {
-    > .@{tab-prefix-cls}-bar {
+    padding: 16px;
-        .@{tab-prefix-cls}-nav-container {
+  }
-          font-size: @tabs-title-font-size-sm;
+
-        }
+  &-small &-nav-container {
-        .@{tab-prefix-cls}-tab {
+    font-size: @tabs-title-font-size-sm;
-          padding: 8px 16px;
+  }
-        }
+
-    }
+  &-small &-tab {
+    padding: 8px 16px;
   }
 
   &:not(&-vertical) {

components/tag/Tag.jsx

@@ -1,82 +1,151 @@
-
+import PropTypes from '../_util/vue-types'
 import Icon from '../icon'
 import getTransitionProps from '../_util/getTransitionProps'
 import omit from 'omit.js'
+import Wave from '../_util/wave'
+import { hasProp, getOptionProps } from '../_util/props-util'
+import BaseMixin from '../_util/BaseMixin'
 
 export default {
   name: 'ATag',
+  mixins: [BaseMixin],
   props: {
-    prefixCls: {
+    prefixCls: PropTypes.string.def('ant-tag'),
-      default: 'ant-tag',
+    color: PropTypes.string,
-      type: String,
+    closable: PropTypes.bool,
-    },
+    visible: PropTypes.bool,
-    color: String,
+  },
-    closable: Boolean,
+  model: {
+    prop: 'visible',
+    event: 'close.visible',
   },
   data () {
-    return {
+    const props = getOptionProps(this)
-      closed: false,
+    let state = {}
+    if ('visible' in props) {
+      state = {
+        _visible: props.visible,
+        _closed: !props.visible,
+      }
     }
+    state = {
+      _closing: false,
+      _closed: false,
+      _visible: true,
+      ...state,
+    }
+    this.pre_visible = state._visible
+    return state
   },
-  computed: {
+  watch: {
-    isPresetColor () {
+    visible (val) {
-      const isPresetColor = (color) => {
+      this.setState({
-        if (!color) { return false }
+        _visible: val,
-        return /^(pink|red|yellow|orange|cyan|green|blue|purple)(-inverse)?$/.test(color)
+      })
-      }
-      return isPresetColor(this.color)
     },
-    classes () {
+  },
-      const { prefixCls, color, isPresetColor } = this
+  updated () {
-      return {
+    this.$nextTick(() => {
-        [`${prefixCls}`]: true,
+      if (this.pre_visible && !this.$data._visible) {
-        [`${prefixCls}-${color}`]: isPresetColor,
+        this.close()
-        [`${prefixCls}-has-color`]: (color && !isPresetColor),
+      } else if (!this.pre_visible && this.$data._visible) {
+        this.show()
       }
-    },
+      this.pre_visible = this.$data._visible
-    tagStyle () {
+    })
-      const { color, isPresetColor } = this
-      return {
-        backgroundColor: (color && !isPresetColor) ? color : null,
-      }
-    },
   },
   methods: {
-    animationEnd () {
+    handleIconClick (e) {
-      this.$emit('afterClose')
-    },
-    close (e) {
       this.$emit('close', e)
-      if (e.defaultPrevented) {
+      this.$emit('close.visible', false)
+      if (e.defaultPrevented || hasProp(this, 'visible')) {
         return
       }
-      this.closed = true
+      this.setState({ _visible: false })
+    },
+    close  () {
+      if (this.$data._closing || this.$data._closed) {
+        return
+      }
+      const dom = this.$el
+      dom.style.width = `${dom.getBoundingClientRect().width}px`
+      // It's Magic Code, don't know why
+      dom.style.width = `${dom.getBoundingClientRect().width}px`
+      this.setState({
+        _closing: true,
+      })
+    },
+
+    show  () {
+      this.setState({
+        _closed: false,
+      })
+    },
+
+    animationEnd  (_, existed) {
+      if (!existed && !this.$data._closed) {
+        this.setState({
+          _closed: true,
+          _closing: false,
+        })
+
+        const afterClose = this.afterClose
+        if (afterClose) {
+          afterClose()
+        }
+      } else {
+        this.setState({
+          _closed: false,
+        })
+      }
+    },
+
+    isPresetColor (color) {
+      if (!color) { return false }
+      return (
+        /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/
+          .test(color)
+      )
     },
   },
-  render () {
-    const { prefixCls, animationEnd, classes, tagStyle, closable, close, closed, $slots, $listeners } = this
-    const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
-      afterLeave: animationEnd,
-    })
-    // const tagProps = {
-    //   on
-    // }
-    return (
-      <transition
-        {...transitionProps}
-      >
-        {!closed
-          ? <div
 
-            class={classes}
+  render () {
-            style={tagStyle}
+    const { prefixCls, closable, color } = this.$props
-            {...{ on: omit($listeners, ['close', 'afterClose']) }}
+    const closeIcon = closable ? <Icon type='cross' onClick={this.handleIconClick} /> : ''
-          >
+    const isPresetColor = this.isPresetColor(color)
-            {$slots.default}
+    const cls = {
-            {closable ? <Icon type='cross' onClick={close} /> : null}
+      [`${prefixCls}`]: true,
-          </div> : null
+      [`${prefixCls}-${color}`]: isPresetColor,
-        }
+      [`${prefixCls}-has-color`]: (color && !isPresetColor),
-      </transition>
+      [`${prefixCls}-close`]: this.$data._closing,
+    }
+
+    const tagStyle = {
+      backgroundColor: (color && !isPresetColor) ? color : null,
+    }
+    const tag = this.$data._closed ? <span /> : (
+      <div
+        v-show={!this.$data._closing}
+        {...{ on: omit(this.$listeners, ['close']) }}
+        class={cls}
+        style={tagStyle}
+      >
+        {this.$slots.default}
+        {closeIcon}
+      </div>
+    )
+    const transitionProps = this.$data._closed ? {} : getTransitionProps(`${prefixCls}-zoom`, {
+      afterLeave: () => this.animationEnd(undefined, false),
+      afterEnter: () => this.animationEnd(undefined, true),
+    })
+    return (
+      <Wave>
+        <transition
+          {...transitionProps}
+        >
+          {tag}
+        </transition>
+      </Wave>
     )
   },
 }

components/tag/demo/controlled.md

@@ -0,0 +1,39 @@
+<cn>
+#### 控制关闭状态
+通过 `visible` 属性控制关闭状态。
+</cn>
+
+<us>
+#### Controlled
+By using the `visible` prop, you can control the close state of Tag.
+</us>
+
+```html
+<template>
+  <div>
+    <a-tag
+      closable
+      :visible="visible"
+    >
+      Movies
+    </a-tag>
+    <br />
+    <a-button
+      size="small"
+      @click="()=>{this.visible = !this.visible}"
+    >
+      Toggle
+    </a-button>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: true,
+    }
+  }
+}
+</script>
+```
+

components/tag/demo/index.vue

@@ -4,6 +4,7 @@ import Checkable from './checkable'
 import Colorful from './colorful'
 import Control from './control'
 import HotTags from './hot-tags'
+import Controlled from './controlled'
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
 
@@ -43,6 +44,7 @@ export default {
         <Colorful />
         <Control />
         <HotTags />
+        <Controlled />
         <api>
           <template slot='cn'>
             <CN/>

components/tag/index.en-US.md

@@ -7,8 +7,10 @@
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | afterClose | Callback executed when close animation is completed | () => void | - |
-| closable | Whether Tag can be closed | boolean | `false` |
+| closable | Whether the Tag can be closed | boolean | `false` |
 | color | Color of the Tag | string | - |
+| visible | Whether the Tag is closed or not | boolean | `true` |
+
 
 ### Tag Events
 | Events Name | Description | Arguments |

components/tag/index.zh-CN.md

@@ -9,6 +9,7 @@
 | afterClose | 关闭动画完成后的回调 | () => void | - |
 | closable | 标签是否可以关闭 | boolean | false |
 | color | 标签色 | string | - |
+| visible | 是否显示标签 | boolean | `true` |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |

components/tooltip/style/index.less

@@ -47,7 +47,7 @@
     border-radius: @border-radius-base;
     box-shadow: @box-shadow-base;
     min-height: 32px;
-    word-break: break-all;
+    word-wrap: break-word;
   }
 
   // Arrows

components/upload/style/index.less

@@ -64,9 +64,12 @@
     width: 100%;
     height: 100%;
     position: relative;
-    padding: 16px 0;
     background: @background-color-light;
 
+    .@{upload-prefix-cls} {
+      padding: 16px 0;
+    }
+
     &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
       border: 2px dashed @primary-5;
     }

scripts/syncStyleFromAntd.js

@@ -6,7 +6,7 @@ const path = require('path')
 
 const owner = 'ant-design'
 const repo = 'ant-design'
-const tag = '3.8.2'
+const tag = '3.8.4'
 const clientId = '5f6ccfdc4cdc69f8ba12'
 const clientSecret = process.env.CLIENT_SECRET