Merge pull request #11893 from ant-design/3.8.4

add 3.8.4 changelog

CHANGELOG.en-US.md

@@ -14,6 +14,32 @@ timeline: true
 * Major version release is not included in this schedule for breaking change and new features.
 
 ---
+
+## 3.8.4
+
+`2018-08-27`
+
+- 🐞 Fixed an issue where the Tag component would cause a line break after deleting the tag.
+
+## 3.8.3
+
+`2018-08-26`
+
+- 📖 Rewrite the documentation of [Customize Theme](https://ant.design/docs/react/customize-theme) and provider instruction for major `Less` variables. [6fd5e9](https://github.com/ant-design/ant-design/commit/6fd5e95cec2f1c936dcf857a72446ec956a5c7ad) [53dd82](https://github.com/ant-design/ant-design/commit/53dd82e4e3dd39d7ccc4f752901cb182b5b90555)
+- 🐞 Fix the zoom animation style for Badge. [#11870](https://github.com/ant-design/ant-design/issues/11870)
+- 🐞 Fix the abnormal width in IE and Edge for Cascader. [#11857](https://github.com/ant-design/ant-design/issues/11857)
+- 🐞 Fix the blurry style in Windows Chrome for Checkbox. [#11797](https://github.com/ant-design/ant-design/issues/11797)
+- 🐞 Fix that `style` prop is not effective for DatePicker.WeekPicker. [#11738](https://github.com/ant-design/ant-design/issues/11738)
+- 🐞 Fix the flash style for Drawer. [#11813](https://github.com/ant-design/ant-design/issues/11813)
+- 🐞 Fix the border style for compact Input.Group with `prefix` or `suffix`. [#11863](https://github.com/ant-design/ant-design/issues/11863)
+- Menu
+	- 🐞 Fix the gap style between SubMenu and that Menu disappears when hovering over the tap. [#11725](https://github.com/ant-design/ant-design/issues/11725)
+	- 🐞 Fix the displayed error when ItemGroup wraps the first SubMenu and the Menu is collapsed. [a52370](https://github.com/ant-design/ant-design/commit/a523706625bd695f44401579d980089292089dda) [@ohhoney1](https://github.com/ohhoney1)
+- 🐞 Fix that overlong `description` is cut off for Steps. [#11864](https://github.com/ant-design/ant-design/issues/11864)
+- 🐞 Fix that the word maybe break in overlong `title` for Tooltip. [#11722](https://github.com/ant-design/ant-design/issues/11722)
+- 🐞 Fix that `custom prop` of TreeNode cannot be accepted for Tree. [#11423](https://github.com/ant-design/ant-design/issues/11423)
+- 🐞 Fix the effective area for Upload.Dragger. [#11869](https://github.com/ant-design/ant-design/issues/11869)
+
 ## 3.8.2
 
 `2018-8-18`

CHANGELOG.zh-CN.md

@@ -15,6 +15,31 @@ timeline: true
 
 ---
 
+## 3.8.4
+
+`2018-08-27`
+
+- 🐞 修复 Tag 组件删除 tag 后会造成换行的问题。
+
+## 3.8.3
+
+`2018-08-26`
+
+- 📖 重新编写了 [定制主题](https://ant.design/docs/react/customize-theme-cn) 文档，并提供了主要的 `Less` 变量说明。
+- 🐞 修复 Badge 组件动画出现位置不正确的问题。[#11870](https://github.com/ant-design/ant-design/issues/11870)
+- 🐞 修复 Cascader 组件在 IE 和 Edge 浏览器中浮层与数据列宽度不一致的问题。[#11857](https://github.com/ant-design/ant-design/issues/11857)
+- 🐞 修复 Checkbox 组件在 Windows Chrome 下样式模糊的问题。[#11797](https://github.com/ant-design/ant-design/issues/11797)
+- 🐞 修复 DatePicker.WeekPicker 组件的 `style` 属性无法生效的问题。[#11738](https://github.com/ant-design/ant-design/issues/11738)
+- 🐞 修复 Drawer 组件在多层状态下切换出现的背景闪烁的问题。[#11813](https://github.com/ant-design/ant-design/issues/11813)
+- 🐞 修复带有前缀或后缀的 Input.Group 组件在紧凑模式下右边框宽度过宽的问题。[#11863](https://github.com/ant-design/ant-design/issues/11863)
+- Menu
+	- 🐞 修复子菜单之间存在间隙导致鼠标 hover 时菜单消失的问题。[#11725](https://github.com/ant-design/ant-design/issues/11725)
+	- 🐞 修复当分组菜单包含了第一个菜单项，并且在菜单收起时出现错误的问题。[a52370](https://github.com/ant-design/ant-design/commit/a523706625bd695f44401579d980089292089dda) [@ohhoney1](https://github.com/ohhoney1)
+- 🐞 修复 Steps 组件中过长的 `description` 会被截断，无法完整展示的问题。[#11864](https://github.com/ant-design/ant-design/issues/11864)
+- 🐞 修复 Tooltip 组件在 `title` 过长时会将单词拆分到两行的问题。[#11722](https://github.com/ant-design/ant-design/issues/11722)
+- 🐞 修复 Tree 组件中的树节点无法接收自定义属性的问题。[#11423](https://github.com/ant-design/ant-design/issues/11423)
+- 🐞 修复 Upload.Dragger 组件的有效拖拽区域不匹配的问题。[#11869](https://github.com/ant-design/ant-design/issues/11869)
+
 ## 3.8.2
 
 `2018-8-18`

components/_util/wave.tsx

@@ -7,6 +7,8 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     cancel: () => void;
   };
 
+  private extraNode: HTMLDivElement;
+  private clickWaveTimeoutId: number;
   private styleForPesudo: HTMLStyleElement | null;
 
   isNotGrey(color: string) {
@@ -17,22 +19,17 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     return true;
   }
 
-  onClick = (node: HTMLElement) => {
+  onClick = (node: HTMLElement, waveColor: string) => {
     if (node.className.indexOf('-leave') >= 0) {
       return;
     }
-    this.removeExtraStyleNode();
     const { insertExtraNode } = this.props;
-    const extraNode = document.createElement('div');
+    this.extraNode = document.createElement('div');
+    const extraNode = this.extraNode;
     extraNode.className = 'ant-click-animating-node';
-    const attributeName = insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
+    const attributeName = this.getAttributeName();
     node.removeAttribute(attributeName);
     node.setAttribute(attributeName, 'true');
-    // Get wave color from target
-    const waveColor =
-      getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
-      getComputedStyle(node).getPropertyValue('border-color') ||
-      getComputedStyle(node).getPropertyValue('background-color');
     // Not white or transparnt or grey
     if (waveColor &&
         waveColor !== '#ffffff' &&
@@ -49,19 +46,13 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     if (insertExtraNode) {
       node.appendChild(extraNode);
     }
-    const transitionEnd = () => {
-      node.removeAttribute(attributeName);
-      this.removeExtraStyleNode();
-      if (insertExtraNode) {
-        node.removeChild(extraNode);
-      }
-      TransitionEvents.removeEndEventListener(node, transitionEnd);
-    };
-    TransitionEvents.addEndEventListener(node, transitionEnd);
+    TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
   }
 
   bindAnimationEvent = (node: HTMLElement) => {
-    if (node.getAttribute('disabled') ||
+    if (!node ||
+        !node.getAttribute ||
+        node.getAttribute('disabled') ||
         node.className.indexOf('disabled') >= 0) {
       return;
     }
@@ -70,7 +61,13 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
       if ((e.target as HTMLElement).tagName === 'INPUT') {
         return;
       }
-      setTimeout(() => this.onClick(node), 0);
+      this.resetEffect(node);
+      // Get wave color from target
+      const waveColor =
+        getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
+        getComputedStyle(node).getPropertyValue('border-color') ||
+        getComputedStyle(node).getPropertyValue('background-color');
+      this.clickWaveTimeoutId = window.setTimeout(() => this.onClick(node, waveColor), 0);
     };
     node.addEventListener('click', onClick, true);
     return {
@@ -80,6 +77,32 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     };
   }
 
+  getAttributeName() {
+    const { insertExtraNode } = this.props;
+    return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
+  }
+
+  resetEffect(node: HTMLElement) {
+    if (!node || node === this.extraNode) {
+      return;
+    }
+    const { insertExtraNode } = this.props;
+    const attributeName = this.getAttributeName();
+    node.removeAttribute(attributeName);
+    this.removeExtraStyleNode();
+    if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
+      node.removeChild(this.extraNode);
+    }
+    TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
+  }
+
+  onTransitionEnd = (e: AnimationEvent) => {
+    if (!e || e.animationName !== 'fadeEffect') {
+      return;
+    }
+    this.resetEffect(e.target as HTMLElement);
+  }
+
   removeExtraStyleNode() {
     if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
       document.body.removeChild(this.styleForPesudo);
@@ -95,6 +118,9 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     if (this.instance) {
       this.instance.cancel();
     }
+    if (this.clickWaveTimeoutId) {
+      clearTimeout(this.clickWaveTimeoutId);
+    }
   }
 
   render() {

components/badge/demo/basic.md

@@ -29,7 +29,7 @@ ReactDOM.render(
 ````
 
 <style>
-.ant-badge:not(.ant-badge-status) {
+.ant-badge:not(.ant-badge-not-a-wrapper) {
   margin-right: 20px;
 }
 .head-example {

components/badge/demo/no-wrapper.md

@@ -26,3 +26,9 @@ ReactDOM.render(
   </div>,
   mountNode);
 ````
+
+<style>
+.ant-badge-not-a-wrapper:not(.ant-badge-status) {
+  margin-right: 8px;
+}
+</style>

components/badge/demo/title.md

@@ -26,7 +26,7 @@ ReactDOM.render(
 ````
 
 <style>
-.ant-badge:not(.ant-badge-status) {
+.ant-badge:not(.ant-badge-not-a-wrapper) {
   margin-right: 20px;
 }
 .head-example {

components/badge/style/index.less

@@ -13,10 +13,7 @@
   color: unset;
 
   &-count {
-    position: absolute;
-    transform: translate(50%, -50%);
-    top: 0;
-    right: 0;
+    top: -@badge-height / 2;
     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;
-    transform: translate(50%, -50%);
-    transform-origin: 0 center;
-    top: 0;
-    right: 0;
+    top: -@badge-dot-size / 2;
     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/button/__tests__/index.test.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { render, mount } from 'enzyme';
+import renderer from 'react-test-renderer';
 import Button from '..';
 import Icon from '../../icon';
 
@@ -11,6 +12,16 @@ describe('Button', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('mount correctly', () => {
+    const wrapper = mount(
+      <Button>Follow</Button>
+    );
+    if (process.env.REACT === '15') {
+      return;
+    }
+    expect(() => renderer.create(wrapper).toJSON()).not.toThrow();
+  });
+
   it('renders Chinese characters correctly', () => {
     const wrapper = render(
       <Button>按钮</Button>

components/button/demo/ghost.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
+幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
 
 ## en-US
 

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 > * {
-    width: 100%;
-    display: block;
+  &-cover {
+    > * {
+      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-height: @checkbox-size - 7px;
+    @indeterminate-width: @checkbox-size - 8px;
+    @indeterminate-height: @checkbox-size - 8px;
     content: ' ';
     transform: translate(-50%, -50%) scale(1);
     border: 0;

components/date-picker/WeekPicker.tsx

@@ -87,7 +87,7 @@ class WeekPicker extends React.Component<any, any> {
     const {
       prefixCls, className, disabled, pickerClass, popupStyle,
       pickerInputClass, format, allowClear, locale, localeCode, disabledDate,
-      style, onFocus, onBlur,
+      style, onFocus, onBlur, id,
     } = this.props;
 
     const pickerValue = this.state.value;
@@ -129,7 +129,6 @@ class WeekPicker extends React.Component<any, any> {
             className={pickerInputClass}
             onFocus={onFocus}
             onBlur={onBlur}
-            style={style}
           />
           {clearIcon}
           <span className={`${prefixCls}-picker-icon`} />
@@ -137,7 +136,11 @@ class WeekPicker extends React.Component<any, any> {
       );
     };
     return (
-      <span className={classNames(className, pickerClass)} id={this.props.id}>
+      <span
+        className={classNames(className, pickerClass)}
+        style={style}
+        id={id}
+      >
         <RcDatePicker
           {...this.props}
           calendar={calendar}

components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap

@@ -3,13 +3,13 @@
 exports[`WeekPicker should support style prop 1`] = `
 <span
   class="ant-calendar-picker"
+  style="width: 400px;"
 >
   <span>
     <input
       class="ant-calendar-picker-input ant-input"
       placeholder="Select date"
       readonly=""
-      style="width: 400px;"
       value=""
     />
     <span

components/drawer/index.tsx

@@ -75,14 +75,14 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
     push: false,
   };
 
-  praentDrawer: Drawer;
+  parentDrawer: Drawer;
   destoryClose: boolean;
   public componentDidUpdate(preProps: DrawerProps) {
-    if (preProps.visible !== this.props.visible && this.praentDrawer) {
+    if (preProps.visible !== this.props.visible && this.parentDrawer) {
       if (this.props.visible) {
-        this.praentDrawer.push();
+        this.parentDrawer.push();
       } else {
-        this.praentDrawer.pull();
+        this.parentDrawer.pull();
       }
     }
   }
@@ -187,7 +187,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
         transform: `translateX(${placement === 'left' ? 180 : -180}px)`,
       }
       : { zIndex };
-    this.praentDrawer = value;
+    this.parentDrawer = value;
     return (
       <DrawerContext.Provider value={this}>
         <RcDrawer

components/drawer/style/drawer.less

@@ -7,7 +7,6 @@
   top: 0;
   width: 0%;
   z-index: @zindex-modal;
-  transition: transform @animation-duration-slow @ease-base-in;
   > * {
     transition: transform @animation-duration-slow @ease-base-in;
   }
@@ -18,8 +17,6 @@
   .@{dawer-prefix-cls}-content {
     width: 100%;
     height: 100%;
-    opacity: 0;
-    transition: opacity @animation-duration-slow linear;
   }
   &-left,
   &-right {
@@ -81,9 +78,6 @@
 
   &.@{dawer-prefix-cls}-open {
     .@{dawer-prefix-cls} {
-      &-content {
-        opacity: 1;
-      }
       &-mask {
         opacity: 0.3;
         height: 100%;

components/form/Form.tsx

@@ -117,8 +117,8 @@ export type WrappedFormUtils = {
   isFieldsTouched(names?: Array<string>): boolean;
   /** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
   resetFields(names?: Array<string>): void;
-
-  getFieldDecorator(id: string, options?: GetFieldDecoratorOptions): (node: React.ReactNode) => React.ReactNode;
+  // tslint:disable-next-line:max-line-length
+  getFieldDecorator<T extends Object = {}>(id: keyof T, options?: GetFieldDecoratorOptions): (node: React.ReactNode) => React.ReactNode;
 };
 
 export interface FormComponentProps {

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/layout/index.en-US.md

@@ -99,7 +99,6 @@ The sidebar.
 | trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
 | width | width of the sidebar | number\|string | 200 |
 | onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
-| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
 | onBreakpoint | the callback function, executed when [breakpoints](/components/grid#api) changed | (broken) => {} | - |
 
 #### breakpoint width

components/locale-provider/demo/all.md

@@ -107,7 +107,6 @@ class Page extends React.Component {
   }
 }
 
-let forceRerender = 0;
 class App extends React.Component {
   constructor() {
     super();
@@ -127,6 +126,7 @@ class App extends React.Component {
   }
 
   render() {
+    const { locale } = this.state;
     return (
       <div>
         <div className="change-locale">
@@ -136,8 +136,8 @@ class App extends React.Component {
             <Radio.Button key="cn" value={zhCN}>中文</Radio.Button>
           </Radio.Group>
         </div>
-        <LocaleProvider locale={this.state.locale}>
-          <Page key={forceRerender++ /* HACK: just refresh in production environment */} />
+        <LocaleProvider locale={locale}>
+          <Page key={locale ? locale.locale : 'en'/* Have to refresh for production environment */} />
         </LocaleProvider>
       </div>
     );

components/locale-provider/index.en-US.md

@@ -45,4 +45,4 @@ This component aims for localization of the built-in text, if you want to suppor
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | - |
+| locale | language package setting, you can find the packages in [antd/lib/locale-provider](http://unpkg.com/antd/lib/locale-provider/) | object | - |

components/locale-provider/index.zh-CN.md

@@ -45,4 +45,4 @@ return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| locale | 语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找 | object | - |
+| locale | 语言包配置，语言包可到 [antd/lib/locale-provider](http://unpkg.com/antd/lib/locale-provider/) 目录下寻找 | object | - |

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/progress/demo/linecap.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-`strokeLinecap="square|round"` 可以调整进度条边缘的形状。
+通过设定 `strokeLinecap="square|round"` 可以调整进度条边缘的形状。
 
 ## en-US
 
-By setting `strokeLinecap="square`, you can change the linecaps from round to square.
+By setting `strokeLinecap="square"`, you can change the linecaps from round to square.
 
 ````jsx
 import { Progress } from 'antd';

components/progress/style/index.less

@@ -69,6 +69,7 @@
     margin-left: 8px;
     vertical-align: middle;
     display: inline-block;
+    white-space: nowrap;
     color: @text-color-secondary;
     line-height: 1;
     .@{iconfont-css-prefix} {

components/spin/index.zh-CN.md

@@ -18,7 +18,7 @@ subtitle: 加载中
 | delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
 | indicator | 加载指示符 | ReactElement | - |
 | size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
-| spinning | 是否旋转 | boolean | true |
+| spinning | 是否为加载中状态 | boolean | true |
 | tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
 | wrapperClassName | 包装器的类属性 | string | - |
 

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;
-  animation: waveEffect .4s cubic-bezier(.25, .8, .25, 1);
+  opacity: 0.2;
+  animation: fadeEffect 2s @ease-out-circ, waveEffect .4s @ease-out-circ;
+  animation-fill-mode: forwards;
   display: block;
+  pointer-events: none;
 }
 
 @keyframes waveEffect {
-  to {
-    opacity: 0;
+  100% {
     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/tag/__tests__/__snapshots__/index.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<div />`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<span />`;
 
 exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `
 <div
@@ -9,11 +9,7 @@ exports[`Tag visibility can be controlled by visible with hidden as initial valu
 />
 `;
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `
-<div
-  style="width: 0px;"
-/>
-`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<span />`;
 
 exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `
 <div
@@ -22,16 +18,11 @@ exports[`Tag visibility can be controlled by visible with visible as initial val
 />
 `;
 
-exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `
-<div
-  style="width: 0px;"
-/>
-`;
+exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<span />`;
 
 exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `
 <div
   class="ant-tag"
   data-show="true"
-  style="width: 0px;"
 />
 `;

components/tag/index.tsx

@@ -147,7 +147,7 @@ class Tag extends React.Component<TagProps, TagState> {
       backgroundColor: (color && !isPresetColor) ? color : null,
       ...style,
     };
-    const tag = this.state.closed ? <div /> : (
+    const tag = this.state.closed ? <span/> : (
       <div
         data-show={!this.state.closing}
         {...divProps}

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/tree/Tree.tsx

@@ -37,6 +37,8 @@ export interface AntTreeNodeProps {
   selectable?: boolean;
   icon?: ((treeNode: AntdTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
   children?: React.ReactNode;
+
+  [customProp: string]: any;
 }
 
 export interface AntTreeNode extends React.Component<AntTreeNodeProps, {}> { }
@@ -100,7 +102,7 @@ export interface TreeProps {
   /** 展开/收起节点时触发 */
   onExpand?: (expandedKeys: string[], info: AntTreeNodeExpandedEvent) => void | PromiseLike<any>;
   /** 点击复选框触发 */
-  onCheck?: (checkedKeys: string[], e: AntTreeNodeCheckedEvent) => void;
+  onCheck?: (checkedKeys: string[] | { checked: string[]; halfChecked: string[] }, e: AntTreeNodeCheckedEvent) => void;
   /** 点击树节点触发 */
   onSelect?: (selectedKeys: string[], e: AntTreeNodeSelectedEvent) => void;
   /** 单击树节点触发 */

components/upload/interface.tsx

@@ -22,7 +22,6 @@ export interface UploadFile {
   status?: UploadFileStatus;
   percent?: number;
   thumbUrl?: string;
-  isNotImage?: boolean;
   originFileObj?: File;
   response?: any;
   error?: any;

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;
     }

docs/react/customize-theme.en-US.md

@@ -7,57 +7,106 @@ Ant Design allows you to customize some basic design aspects in order to meet th
 
 ![customized themes](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
 
-## Less variables
+## Ant Design Less variables
 
 We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
 
-- [Default Variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)
+There are some major variables below, all less variables could be found in [Default Variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less).
+
+```less
+@primary-color: #1890ff;                         // primary color for all components
+@link-color: #1890ff;                            // link color
+@success-color: #52c41a;                         // success state color
+@warning-color: #faad14;                         // warning state color
+@error-color: #f5222d;                           // error state color
+@font-size-base: 14px;                           // major text font size
+@heading-color: rgba(0, 0, 0, .85);              // heading text color
+@text-color: rgba(0, 0, 0, .65);                 // major text color
+@text-color-secondary : rgba(0, 0, 0, .45);      // secondary text color
+@disabled-color : rgba(0, 0, 0, .25);            // disable state color
+@border-radius-base: 4px;                        // major border radius
+@border-color-base: #d9d9d9;                     // major border color
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // major shadow for layers
+```
 
 Please report an issue if the existing list of variables is not enough for you.
 
 ## How to do it
 
-We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice.
+We will use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to override the default values of the variables, You can use this [example](https://github.com/ant-design/create-react-app-antd) as a live playground. We now introduce some popular way to do it depends on different workflow.
 
-You can use this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) as a playground.
+### Customize in webpack
 
-### 1) Using `theme` property (recommended way)
+We take a typical `webpack.config.js` file as example to customize it's [less-loader](https://github.com/webpack-contrib/less-loader) options.
+
+```diff
+// webpack.config.js
+module.exports = {
+  rules: [{
+    test: /\.less$/,
+    use: [{
+      loader: 'style-loader',
+    }, {
+      loader: 'css-loader', // translates CSS into CommonJS
+    }, {
+      loader: 'less-loader', // compiles Less to CSS
++     options: {
++       modifyVars: {
++         'primary-color': '#1DA57A',
++         'link-color': '#1DA57A',
++         'border-radius-base': '2px',
++       },
++       javascriptEnabled: true,
++     },
+    }],
+    // ...other rules
+  }],
+  // ...other config
+}
+```
+
+Note that do not exclude antd package in node_modules when using less-loader.
+
+### Customize in roadhog or Umi
+
+You can easily use `theme` field in `.webpackrc` file of your project root directory if you are using [roadhog](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)，which could be a object or a javascript file path.
 
-Specify the `theme` property in the `package.json` or `.webpackrc` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables:
-- example of directly specifying the custom values as an object:
 ```js
 "theme": {
   "primary-color": "#1DA57A",
 },
 ```
-- example of specifying a [file path](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js) to a JS file:
+
+Or just [a javascript file path](https://github.com/ant-design/ant-design-pro/blob/3c2a056ef0dac06ce3b4389192691bb1f5c448e2/.webpackrc.js#L19):
+
 ```js
 "theme": "./theme.js",
 ```
 
-This approach is available only when using [antd-init](https://github.com/ant-design/antd-init) or [dva-cli](https://github.com/dvajs/dva-cli). If you choose other boilerplates, you can write a webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does.
+### Customize in create-react-app
 
-Note:
+Follow [Use in create-react-app](/docs/react/create-react-app).
 
-- Importing styles from less files is necessary.
-  - If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
-  - If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`.
-- When using `dva-cli@0.7.0+`, you should add the `theme` block to [.roadhogrc](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) instead of `package.json`.
-- If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)).
+### Customize in less file
 
-### 2) Overriding Less variables (alternative way)
+Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
 
-Override variables via less definition files.
-
-Create a standalone less file like the one below, and import it in your project.
-
-   ```css
-   @import "~antd/dist/antd.less";   // import official less entry file
-   @import "your-theme-file.less";   // override variables here
-   ```
+```css
+@import "~antd/dist/antd.less";   // Import Ant Design styles by less entry
+@import "your-theme-file.less";   // variables to override above
+```
 
 Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
 
+## Not working?
+
+You must import styles as less format. A common mistake would be importing multiple copied of styles that some of them are css format to override the less styles.
+
+- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
+- If you import styles from `'antd/dist/antd.css'`, change it to `antd/dist/antd.less`.
+
+If you want to override `@icon-url`, the value must be contained in quotes like `"@icon-url": "'your-icon-font-path'"` ([A fix sample](https://github.com/visvadw/dvajs-user-dashboard/pull/2)).
+
 ## Related Articles
 
 - [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/)

docs/react/customize-theme.zh-CN.md

@@ -7,24 +7,69 @@ Ant Design 设计规范上支持一定程度的样式定制，以满足业务和
 
 ![一些配置好的主题](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
 
-## 样式变量
+## Ant Design 的样式变量
 
 antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
 
-- [默认样式变量](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less)
+以下是一些最常用的通用变量，所有样式变量可以在 [这里](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) 找到。
+
+```less
+@primary-color: #1890ff;                         // 全局主色
+@link-color: #1890ff;                            // 链接色
+@success-color: #52c41a;                         // 成功色
+@warning-color: #faad14;                         // 警告色
+@error-color: #f5222d;                           // 错误色
+@font-size-base: 14px;                           // 主字号
+@heading-color: rgba(0, 0, 0, .85);              // 标题色
+@text-color: rgba(0, 0, 0, .65);                 // 主文本色
+@text-color-secondary : rgba(0, 0, 0, .45);      // 次文本色
+@disabled-color : rgba(0, 0, 0, .25);            // 失效色
+@border-radius-base: 4px;                        // 组件/浮层圆角
+@border-color-base: #d9d9d9;                     // 边框色
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // 浮层阴影
+```
 
 如果以上变量不能满足你的定制需求，可以给我们提 issue。
 
 ## 定制方式
 
-我们使用 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式来覆盖变量。
-在具体工程实践中，有 `package.theme` 和 `less` 两种方案，选择一种即可。
+原理上是使用 less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式进行覆盖变量，可以在本地运行 [例子](https://github.com/ant-design/create-react-app-antd) 查看定制效果。下面将针对不同的场景提供一些常用的定制方式。
 
-可以在本地运行 [例子](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) 查看定制效果。
+### 在 webpack 中定制主题
 
-### 1) theme 属性（推荐）
+我们以 webpack@4 为例进行说明，以下是一个 `webpack.config.js` 的典型例子，对 [less-loader](https://github.com/webpack-contrib/less-loader) 的 options 属性进行相应配置。
 
-配置在 `package.json` 或 `.webpackrc` 下的 `theme` 字段。theme 可以配置为一个对象或文件路径。
+```diff
+// webpack.config.js
+module.exports = {
+  rules: [{
+    test: /\.less$/,
+    use: [{
+      loader: 'style-loader',
+    }, {
+      loader: 'css-loader', // translates CSS into CommonJS
+    }, {
+      loader: 'less-loader', // compiles Less to CSS
++     options: {
++       modifyVars: {
++         'primary-color': '#1DA57A',
++         'link-color': '#1DA57A',
++         'border-radius-base': '2px',
++       },
++       javascriptEnabled: true,
++     },
+    }],
+    // ...other rules
+  }],
+  // ...other config
+}
+```
+
+注意 less-loader 的处理范围不要过滤掉 `node_modules` 下的 antd 包。
+
+### 在 roadhog 或 Umi 里配置主题
+
+如果你在使用 [roadhog](https://github.com/sorrycc/roadhog) 或者 [Umi](http://umijs.org/)，那么可以很方便地在项目根目录的 `.webpackrc` 文件中 `theme` 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。
 
 ```js
 "theme": {
@@ -32,34 +77,35 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定
 },
 ```
 
-或者 [一个 js 文件](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js)：
+或者 [一个 js 文件](https://github.com/ant-design/ant-design-pro/blob/3c2a056ef0dac06ce3b4389192691bb1f5c448e2/.webpackrc.js#L19)：
 
 ```js
 "theme": "./theme.js",
 ```
 
-定义 `theme` 属性时，需要配合使用（[antd-init](https://github.com/ant-design/antd-init) 或 [dva-cli](https://github.com/dvajs/dva-cli)。如果你使用的是其他脚手架，可以参考 [atool-build 中 less-loader 的 webpack 相关配置 ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138)，利用 [less-loader](https://github.com/webpack/less-loader#less-options) 的 `modifyVars` 配置来覆盖原来的样式变量。
+### 在 create-react-app 中定制主题
 
-注意：
+参考 [在 create-react-app 中使用](/docs/react/create-react-app) 进行配置即可。
 
-- 样式必须加载 less 格式。
-  - 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。
-  - 如果你是通过 `'antd/dist/antd.css'` 引入样式的，改为 `antd/dist/antd.less`。
-- `dva-cli@0.7.0+` 的 `theme` 属性需要写在 [.roadhogrc](https://github.com/dvajs/dva-example-user-dashboard/commit/d6da33b3a6e18eb7f003752a4b00b5a660747c31) 文件里。
-- 如果要覆盖 `@icon-url` 变量，内容需要包括引号 `"@icon-url": "'your-icon-font-path'"`（[修正示例](https://github.com/visvadw/dvajs-user-dashboard/pull/2)）。
+### 配置 less 变量文件
 
-### 2) less
+另外一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `antd.less` 里的变量。
 
-用 less 文件进行变量覆盖。
+```css
+@import "~antd/dist/antd.less";   // 引入官方提供的 less 样式入口文件
+@import "your-theme-file.less";   // 用于覆盖上面定义的变量
+```
 
-建立一个单独的 `less` 文件如下，再引入这个文件。
+注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
 
-   ```css
-   @import "~antd/dist/antd.less";   // 引入官方提供的 less 样式入口文件
-   @import "your-theme-file.less";   // 用于覆盖上面定义的变量
-   ```
+## 没有生效？
 
-注意：这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
+注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。
+
+- 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。
+- 如果你是通过 `'antd/dist/antd.css'` 引入样式的，改为 `antd/dist/antd.less`。
+
+如果要覆盖 `@icon-url` 变量，内容需要包括引号 `"@icon-url": "'your-icon-font-path'"`（[修正示例](https://github.com/visvadw/dvajs-user-dashboard/pull/2)）。
 
 ## 社区教程
 

docs/react/use-with-create-react-app.en-US.md

@@ -104,7 +104,7 @@ Now we need to customize the default webpack config. We can achieve that by usin
 Import react-app-rewired and modify the `scripts` field in package.json.
 
 ```
-$ yarn add react-app-rewired --dev
+$ yarn add react-app-rewired
 ```
 
 ```diff
@@ -133,14 +133,17 @@ module.exports = function override(config, env) {
 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/docs/react/getting-started#Import-on-Demand)). We are now trying to install it and modify `config-overrides.js`.
 
 ```bash
-$ yarn add babel-plugin-import --dev
+$ yarn add babel-plugin-import
 ```
 
 ```diff
 + const { injectBabelPlugin } = require('react-app-rewired');
 
   module.exports = function override(config, env) {
-+   config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
++   config = injectBabelPlugin(
++     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
++     config,
++   );
     return config;
   };
 ```
@@ -174,7 +177,7 @@ Then reboot with `yarn start` and visit the demo page, you should not find any [
 According to the [Customize Theme documentation](/docs/react/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader). We can also use [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) to achieve this. Import it and modify `config-overrides.js` like below.
 
 ```bash
-$ yarn add react-app-rewire-less --dev
+$ yarn add react-app-rewire-less
 ```
 
 ```diff
@@ -182,11 +185,14 @@ $ yarn add react-app-rewire-less --dev
 + const rewireLess = require('react-app-rewire-less');
 
   module.exports = function override(config, env) {
--   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
-+   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);  // change importing css to less
+    config = injectBabelPlugin(
+-     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
++     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
+      config,
+    );
 +   config = rewireLess.withLoaderOptions({
-+     javascriptEnabled: true,
 +     modifyVars: { "@primary-color": "#1DA57A" },
++     javascriptEnabled: true,
 +   })(config, env);
     return config;
   };

docs/react/use-with-create-react-app.zh-CN.md

@@ -101,7 +101,7 @@ export default App;
 引入 react-app-rewired 并修改 package.json 里的启动配置。
 
 ```
-$ yarn add react-app-rewired --dev
+$ yarn add react-app-rewired
 ```
 
 ```diff
@@ -130,14 +130,17 @@ module.exports = function override(config, env) {
 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/react/getting-started#按需加载)），现在我们尝试安装它并修改 `config-overrides.js` 文件。
 
 ```bash
-$ yarn add babel-plugin-import --dev
+$ yarn add babel-plugin-import
 ```
 
 ```diff
 + const { injectBabelPlugin } = require('react-app-rewired');
 
   module.exports = function override(config, env) {
-+   config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
++   config = injectBabelPlugin(
++     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
++     config,
++   );
     return config;
   };
 ```
@@ -171,7 +174,7 @@ $ yarn add babel-plugin-import --dev
 按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到 less 变量覆盖功能。我们可以引入 react-app-rewire 的 less 插件 [react-app-rewire-less](http://npmjs.com/react-app-rewire-less) 来帮助加载 less 样式，同时修改 `config-overrides.js` 文件。
 
 ```bash
-$ yarn add react-app-rewire-less --dev
+$ yarn add react-app-rewire-less
 ```
 
 ```diff
@@ -179,11 +182,14 @@ $ yarn add react-app-rewire-less --dev
 + const rewireLess = require('react-app-rewire-less');
 
   module.exports = function override(config, env) {
--   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
-+   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
+    config = injectBabelPlugin(
+-     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
++     ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
+      config,
+    );
 +   config = rewireLess.withLoaderOptions({
-+     javascriptEnabled: true,
 +     modifyVars: { "@primary-color": "#1DA57A" },
++     javascriptEnabled: true,
 +   })(config, env);
     return config;
   };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "3.8.2",
+  "version": "3.8.4",
   "title": "Ant Design",
   "description": "An enterprise-class UI design language and React-based implementation",
   "homepage": "http://ant.design/",
@@ -137,7 +137,7 @@
     "immutability-helper": "^2.5.0",
     "intersection-observer": "^0.5.0",
     "jest": "^23.2.0",
-    "jsdom": "^11.12.0",
+    "jsdom": "^12.0.0",
     "jsonml.js": "^0.1.0",
     "lint-staged": "^7.0.0",
     "lz-string": "^1.4.4",
@@ -172,7 +172,7 @@
     "reqwest": "^2.0.5",
     "rimraf": "^2.5.4",
     "scrollama": "^1.4.1",
-    "stylelint": "9.4.0",
+    "stylelint": "^9.5.0",
     "stylelint-config-standard": "^18.0.0",
     "typescript": "~3.0.1",
     "unified": "^7.0.0",

site/theme/static/template.html

@@ -12,11 +12,6 @@
     <style id="nprogress-style">
       #nprogress { display: none }
     </style>
-  </head>
-  <body>
-    <div id="react-content">
-      {{ content | safe }}
-    </div>
     <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less"/>
     <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
     <!--[if lte IE 10]>
@@ -78,6 +73,11 @@
       document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
     })()
     </script>
+  </head>
+  <body>
+    <div id="react-content">
+      {{ content | safe }}
+    </div>
     <script src="{{ root }}common.js"></script>
     <script src="{{ root }}index.js"></script>
     <!-- Global site tag (gtag.js) - Google Analytics -->

site/theme/template/Content/Demo.jsx

@@ -133,13 +133,15 @@ export default class Demo extends React.Component {
     const codepenPrefillConfig = {
       title: `${localizedTitle} - Ant Design Demo`,
       html,
-      js: state.sourceCode.replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'antd';/, 'const { $1 } = antd;'),
+      js: state.sourceCode
+        .replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'antd';/, 'const { $1 } = antd;')
+        .replace("import moment from 'moment';", ''),
       css: prefillStyle,
       editors: '001',
       css_external: 'https://unpkg.com/antd/dist/antd.css',
       js_external: [
-        'react@15.x/dist/react.js',
-        'react-dom@15.x/dist/react-dom.js',
+        'react@16.x/umd/react.development.js',
+        'react-dom@16.x/umd/react-dom.development.js',
         'moment/min/moment-with-locales.js',
         'antd/dist/antd-with-locales.js',
       ].map(url => `https://unpkg.com/${url}`).join(';'),

site/theme/template/Home/index.jsx

@@ -68,11 +68,11 @@ class Home extends React.Component {
     return (
       <DocumentTitle title={`Ant Design - ${intl.formatMessage({ id: 'app.home.slogan' })}`}>
         <div className="main-wrapper">
+          <style dangerouslySetInnerHTML={{ __html: getStyle() }} />
           <Banner {...childProps} />
           <Page1 {...childProps} />
           <Page2 {...childProps} />
           <Page3 {...childProps} />
-          <style dangerouslySetInnerHTML={{ __html: getStyle() }} />
         </div>
       </DocumentTitle>
     );

site/theme/zh-CN.js

@@ -75,7 +75,7 @@ module.exports = {
     'app.footer.company': 'AFX',
     'app.footer.ant-design': '蚂蚁 UI 体系',
     'app.footer.yuque': '语雀',
-    'app.footer.yuque.slogan': '企业文档管理平台',
+    'app.footer.yuque.slogan': '知识创作·协作平台',
     'app.footer.fengdie': '云凤蝶',
     'app.footer.fengdie.slogan': '移动建站平台',
     'app.footer.zhihu': '知乎专栏',