From 5e37710ecba79890330de4ab95a3d4eda0043be9 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 20 Aug 2018 20:59:48 +0800
Subject: [PATCH 01/36] improve click effect :star:

---
 components/_util/wave.tsx               |  5 ++++-
 components/style/core/motion/other.less | 14 ++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 3642555fd5..9951373fc7 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -49,7 +49,10 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     if (insertExtraNode) {
       node.appendChild(extraNode);
     }
-    const transitionEnd = () => {
+    const transitionEnd = (e: AnimationEvent) => {
+      if (e.animationName !== 'fadeEffect') {
+        return;
+      }
       node.removeAttribute(attributeName);
       this.removeExtraStyleNode();
       if (insertExtraNode) {
diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less
index 310fb4bc25..932640a653 100644
--- a/components/style/core/motion/other.less
+++ b/components/style/core/motion/other.less
@@ -19,14 +19,14 @@
   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 cubic-bezier(0.2, 1, 0.3, 1), waveEffect .4s cubic-bezier(0.2, 1, 0.3, 1);
+  animation-fill-mode: forwards;
   display: block;
 }
 
 @keyframes waveEffect {
-  to {
-    opacity: 0;
+  100% {
     top: -@wave-animation-width;
     left: -@wave-animation-width;
     bottom: -@wave-animation-width;
@@ -34,3 +34,9 @@
     border-width: @wave-animation-width;
   }
 }
+
+@keyframes fadeEffect {
+  100% {
+    opacity: 0;
+  }
+}

From 041173f05955532f1766c36cb67d54862a19ea70 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 20 Aug 2018 21:02:51 +0800
Subject: [PATCH 02/36] tweak animation arguments

---
 components/style/core/motion/other.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less
index 932640a653..130dcbbf56 100644
--- a/components/style/core/motion/other.less
+++ b/components/style/core/motion/other.less
@@ -19,8 +19,8 @@
   right: -1px;
   border-radius: inherit;
   border: 0 solid @primary-color;
-  opacity: 0.2;
-  animation: fadeEffect 2s cubic-bezier(0.2, 1, 0.3, 1), waveEffect .4s cubic-bezier(0.2, 1, 0.3, 1);
+  opacity: 0.16;
+  animation: fadeEffect 2.2s cubic-bezier(0.2, 1, 0.3, 1), waveEffect .4s cubic-bezier(0.2, 1, 0.3, 1);
   animation-fill-mode: forwards;
   display: block;
 }

From 60cff5de4082a1f41d5e9d7f6ffc199a3d0a100d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 20 Aug 2018 23:55:35 +0800
Subject: [PATCH 03/36] tweak wave effect detail

---
 components/_util/wave.tsx               | 62 ++++++++++++++++---------
 components/style/core/motion/other.less |  4 +-
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 9951373fc7..24b40c4c9f 100644
--- a/components/_util/wave.tsx
+++ b/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,18 +46,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     if (insertExtraNode) {
       node.appendChild(extraNode);
     }
-    const transitionEnd = (e: AnimationEvent) => {
-      if (e.animationName !== 'fadeEffect') {
-        return;
-      }
-      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) => {
@@ -73,7 +59,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 {
@@ -83,6 +75,29 @@ 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) {
+    const { insertExtraNode } = this.props;
+    const attributeName = this.getAttributeName();
+    node.removeAttribute(attributeName);
+    this.removeExtraStyleNode();
+    if (insertExtraNode) {
+      node.removeChild(this.extraNode);
+    }
+    TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
+  }
+
+  onTransitionEnd = (e: AnimationEvent) => {
+    if (e.animationName !== 'fadeEffect') {
+      return;
+    }
+    this.resetEffect(e.target as HTMLElement);
+  }
+
   removeExtraStyleNode() {
     if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
       document.body.removeChild(this.styleForPesudo);
@@ -98,6 +113,9 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
     if (this.instance) {
       this.instance.cancel();
     }
+    if (this.clickWaveTimeoutId) {
+      clearTimeout(this.clickWaveTimeoutId);
+    }
   }
 
   render() {
diff --git a/components/style/core/motion/other.less b/components/style/core/motion/other.less
index 130dcbbf56..606529686d 100644
--- a/components/style/core/motion/other.less
+++ b/components/style/core/motion/other.less
@@ -19,8 +19,8 @@
   right: -1px;
   border-radius: inherit;
   border: 0 solid @primary-color;
-  opacity: 0.16;
-  animation: fadeEffect 2.2s cubic-bezier(0.2, 1, 0.3, 1), waveEffect .4s cubic-bezier(0.2, 1, 0.3, 1);
+  opacity: 0.2;
+  animation: fadeEffect 2.4s @ease-out-circ, waveEffect .48s @ease-out-circ;
   animation-fill-mode: forwards;
   display: block;
 }

From 6fd5e95cec2f1c936dcf857a72446ec956a5c7ad Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 21 Aug 2018 00:32:11 +0800
Subject: [PATCH 04/36] docs: renew <Customize Theme> documentation

---
 docs/react/customize-theme.en-US.md | 80 ++++++++++++++++++++---------
 docs/react/customize-theme.zh-CN.md | 74 ++++++++++++++++++--------
 2 files changed, 109 insertions(+), 45 deletions(-)

diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index 8bbe66f454..437b896561 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -7,7 +7,7 @@ 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.
 
@@ -17,47 +17,81 @@ 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 roadhug or Umi
+
+You can easily use `theme` field in `.webpackrc` file of your project root directory if you are using 如果你在使用 [roadhug](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`.
+- 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)).
+
 ## Related Articles
 
 - [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/)
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index fe61ee9eb4..a738a08ac4 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -7,7 +7,7 @@ Ant Design 设计规范上支持一定程度的样式定制，以满足业务和
 
 ![一些配置好的主题](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
 
-## 样式变量
+## Ant Design 的样式变量
 
 antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
 
@@ -17,14 +17,43 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定
 
 ## 定制方式
 
-我们使用 [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 包。
+
+### 在 roadhug 或 Umi 里配置主题
+
+如果你在使用 [roadhug](https://github.com/sorrycc/roadhog) 或者 [Umi](http://umijs.org/)，那么可以很方便地在项目根目录的 `.webpackrc` 文件中 `theme` 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。
 
 ```js
 "theme": {
@@ -32,34 +61,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)）。
 
 ## 社区教程
 

From 53dd82e4e3dd39d7ccc4f752901cb182b5b90555 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 21 Aug 2018 14:04:18 +0800
Subject: [PATCH 05/36] docs: add major less variables instruction

---
 docs/react/customize-theme.en-US.md | 19 ++++++++++++++++++-
 docs/react/customize-theme.zh-CN.md | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index 437b896561..2ae4ad4568 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -11,7 +11,24 @@ Ant Design allows you to customize some basic design aspects in order to meet th
 
 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.
 
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index a738a08ac4..972f6e072b 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -11,7 +11,24 @@ 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。
 

From 6bb8d26a3beb4aedb40048d8272c8e829c1630f9 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 21 Aug 2018 15:23:41 +0800
Subject: [PATCH 06/36] fix typo

---
 docs/react/customize-theme.en-US.md | 3 +--
 docs/react/customize-theme.zh-CN.md | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index 2ae4ad4568..b47384797c 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -11,8 +11,7 @@ Ant Design allows you to customize some basic design aspects in order to meet th
 
 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.
 
-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)
-).
+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
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index 972f6e072b..fa91c23b05 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -11,8 +11,7 @@ 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;                         // 全局主色

From c2f7257c3ff38a2a8aab62f081ed7c69b58e1fd9 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 21 Aug 2018 15:26:00 +0800
Subject: [PATCH 07/36] fix typo

---
 docs/react/customize-theme.en-US.md | 4 ++--
 docs/react/customize-theme.zh-CN.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index b47384797c..94361bc957 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -67,9 +67,9 @@ module.exports = {
 
 Note that do not exclude antd package in node_modules when using less-loader.
 
-### Customize in roadhug or Umi
+### Customize in roadhog or Umi
 
-You can easily use `theme` field in `.webpackrc` file of your project root directory if you are using 如果你在使用 [roadhug](https://github.com/sorrycc/roadhog) or [Umi](http://umijs.org/)， which could be a object or a javascript file path.
+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.
 
 ```js
 "theme": {
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index fa91c23b05..67efa1b878 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -67,9 +67,9 @@ module.exports = {
 
 注意 less-loader 的处理范围不要过滤掉 `node_modules` 下的 antd 包。
 
-### 在 roadhug 或 Umi 里配置主题
+### 在 roadhog 或 Umi 里配置主题
 
-如果你在使用 [roadhug](https://github.com/sorrycc/roadhog) 或者 [Umi](http://umijs.org/)，那么可以很方便地在项目根目录的 `.webpackrc` 文件中 `theme` 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。
+如果你在使用 [roadhog](https://github.com/sorrycc/roadhog) 或者 [Umi](http://umijs.org/)，那么可以很方便地在项目根目录的 `.webpackrc` 文件中 `theme` 字段进行主题配置。`theme` 可以配置为一个对象或文件路径。
 
 ```js
 "theme": {

From eecc5b0f9c0841bf7d78427659783d025530f5fa Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 21 Aug 2018 15:44:05 +0800
Subject: [PATCH 08/36] tweak doc bugs

---
 docs/react/customize-theme.en-US.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index 94361bc957..b3131071b4 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -69,7 +69,7 @@ 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.
+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.
 
 ```js
 "theme": {
@@ -104,7 +104,6 @@ You must import styles as less format. A common mistake would be importing multi
 
 - 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)).
 

From aba2f5e091836d997a0ea1042105d04d8c5e7419 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 21 Aug 2018 15:59:24 +0800
Subject: [PATCH 09/36] fix test case

---
 components/_util/wave.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 24b40c4c9f..9869cb9d83 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -92,7 +92,7 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
   }
 
   onTransitionEnd = (e: AnimationEvent) => {
-    if (e.animationName !== 'fadeEffect') {
+    if (!e || e.animationName !== 'fadeEffect') {
       return;
     }
     this.resetEffect(e.target as HTMLElement);

From 611c127f6b820d9398d15546c41e13b14d950ad6 Mon Sep 17 00:00:00 2001
From: mofelee <mofe@me.com>
Date: Tue, 21 Aug 2018 16:54:46 +0800
Subject: [PATCH 10/36] Update index.zh-CN.md

---
 components/spin/index.zh-CN.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md
index d3f01600a0..95a434913f 100644
--- a/components/spin/index.zh-CN.md
+++ b/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 | - |
 

From c9901acb7ffd10f07dd3f158e11387b6558906fc Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 22 Aug 2018 00:41:29 +0800
Subject: [PATCH 11/36] Fix WeekPicker style, close #11738

---
 components/date-picker/WeekPicker.tsx                    | 9 ++++++---
 .../__tests__/__snapshots__/WeekPicker.test.js.snap      | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/components/date-picker/WeekPicker.tsx b/components/date-picker/WeekPicker.tsx
index 1d8a5063cb..8fbab34490 100644
--- a/components/date-picker/WeekPicker.tsx
+++ b/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}
diff --git a/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap b/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap
index c720581f20..6c87656f86 100644
--- a/components/date-picker/__tests__/__snapshots__/WeekPicker.test.js.snap
+++ b/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

From 90b401e97b4fbd9cbe7d9f9e049db659bd5f3753 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 22 Aug 2018 00:49:53 +0800
Subject: [PATCH 12/36] Fix submenu lap between menu, close #11725

---
 components/menu/style/index.less | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index 1b3c004300..5bd14cd96d 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -179,6 +179,16 @@
       position: absolute;
       border-radius: @border-radius-base;
       z-index: @zindex-dropdown;
+
+      &:after {
+        position: absolute;
+        top: -7px;
+        left: -6px;
+        right: -6px;
+        bottom: 0;
+        content: ' ';
+        opacity: .0001;
+      }
     }
 
     > .@{menu-prefix-cls} {

From 09aaafe5738f35a0902f538b9c853f7912adacc2 Mon Sep 17 00:00:00 2001
From: mmmveggies <jakeselig@gmail.com>
Date: Tue, 21 Aug 2018 14:16:47 -0600
Subject: [PATCH 13/36] export specific TreeSelect treeData types

---
 components/tree-select/interface.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/tree-select/interface.tsx b/components/tree-select/interface.tsx
index 86a7438d9c..3f1dad9aca 100644
--- a/components/tree-select/interface.tsx
+++ b/components/tree-select/interface.tsx
@@ -3,7 +3,7 @@ import { AbstractSelectProps } from '../select';
 
 export type TreeNode = TreeNodeNormal | TreeNodeSimpleMode;
 
-interface TreeNodeNormal {
+export interface TreeNodeNormal {
   value: string;
   /**
    * @deprecated Please use `title` instead.
@@ -18,12 +18,12 @@ interface TreeNodeNormal {
   children?: TreeNodeNormal[];
 }
 
-interface TreeNodeSimpleMode {
+export interface TreeNodeSimpleMode {
   /* It is possible to change `id` and `pId` prop keys using TreeDataSimpleMode so those keys can be anything */
   [key: string]: string | boolean | React.ReactNode;
 }
 
-interface TreeDataSimpleMode {
+export interface TreeDataSimpleMode {
   id?: string;
   pId?: string;
   rootPId?: string;

From a523706625bd695f44401579d980089292089dda Mon Sep 17 00:00:00 2001
From: ohhoney1 <1269075501@qq.com>
Date: Wed, 22 Aug 2018 09:49:20 +0800
Subject: [PATCH 14/36] fix bug: If ItemGroup wraps the first menu, an error is
 displayed when the menu is collapsed

---
 components/menu/style/index.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index 5bd14cd96d..d9ff7d021c 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -385,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;

From db736843ffd88bcb45a5db54f4d6d1f03ddce23b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 22 Aug 2018 13:53:57 +0800
Subject: [PATCH 15/36] Add Steps[initial], close #11180

---
 components/steps/index.en-US.md | 1 +
 components/steps/index.zh-CN.md | 1 +
 package.json                    | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
index 00823e19a8..b9acb4283a 100644
--- a/components/steps/index.en-US.md
+++ b/components/steps/index.en-US.md
@@ -33,6 +33,7 @@ The whole of the step bar.
 | progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
 | size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
 | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
+| initial | set the initial step, counting from 0 | number | 0 |
 
 ### Steps.Step
 
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index 56fc397e91..c7c32466bc 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -34,6 +34,7 @@ title: Steps
 | progressDot | 点状步骤条，可以设置为一个 function,labelPlacement 将强制为`vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
 | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
 | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
+| initial | 起始序号，从 0 开始记数 | number | 0 |
 
 ### Steps.Step
 
diff --git a/package.json b/package.json
index 6e7c3ca96c..766bc61e0f 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "rc-rate": "~2.4.0",
     "rc-select": "~8.1.1",
     "rc-slider": "~8.6.0",
-    "rc-steps": "~3.1.0",
+    "rc-steps": "~3.2.0",
     "rc-switch": "~1.6.0",
     "rc-table": "~6.2.0",
     "rc-tabs": "~9.3.3",

From 2e759e2bea9d23247e7e38f6f21aae4ffbfcd7d7 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 22 Aug 2018 13:54:51 +0800
Subject: [PATCH 16/36] Add initial prop for TypeScript, ref #11180

---
 components/steps/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index bdbd71ea54..5a8f85fbcc 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -6,6 +6,7 @@ export interface StepsProps {
   prefixCls?: string;
   iconPrefix?: string;
   current?: number;
+  initial?: number;
   status?: 'wait' | 'process' | 'finish' | 'error';
   size?: 'default' | 'small';
   direction?: 'horizontal' | 'vertical';

From fa89c79d8028e1e7148fde962fe922d99f95371f Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Wed, 22 Aug 2018 14:23:20 +0800
Subject: [PATCH 17/36] fix: word error praentDrawer => parentDrawer

---
 components/drawer/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index a2c3c5e7b1..e97fc822c2 100644
--- a/components/drawer/index.tsx
+++ b/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

From 110e65d74d6658f192f66fbbd893ec814fe6beb1 Mon Sep 17 00:00:00 2001
From: jiang <155259966@qq.com>
Date: Wed, 22 Aug 2018 16:06:33 +0800
Subject: [PATCH 18/36] Fix drawer flash (#11833)

* fix drawer flash

* remove drawer transition
---
 components/drawer/style/drawer.less | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index f341eb1d35..1d12654099 100644
--- a/components/drawer/style/drawer.less
+++ b/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%;

From f20a1e4e5d3ee74e17345488d152b2da22cd9e91 Mon Sep 17 00:00:00 2001
From: Bradley Xu <xgheaven@gmail.com>
Date: Wed, 22 Aug 2018 16:17:33 +0800
Subject: [PATCH 19/36] docs: update button demo doc

---
 components/button/demo/ghost.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index 9cff4953e9..7c7f77a522 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
+幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。
 
 ## en-US
 

From 3ffc7f6ac207f45f1743b1b943dd24586b91152b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8B=8F=E7=A7=A6?= <646382806@qq.com>
Date: Wed, 22 Aug 2018 17:04:12 +0800
Subject: [PATCH 20/36] Upload: remove necessary signatures

---
 components/upload/interface.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index dc8841a5d3..bd82edd1bc 100755
--- a/components/upload/interface.tsx
+++ b/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;

From 11d29fb5224d74af978102d9fbe3034c720caa43 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 22 Aug 2018 23:05:16 +0800
Subject: [PATCH 21/36] use break-word over break-all, close #11722

---
 components/tooltip/style/index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/tooltip/style/index.less b/components/tooltip/style/index.less
index b54ed7c5b4..c272377532 100644
--- a/components/tooltip/style/index.less
+++ b/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

From 83790dfee524a1ca47edea7bb964bdc8e90542a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Fri, 10 Aug 2018 11:48:23 +0800
Subject: [PATCH 22/36] fix #11583 #11443 remove pointer-events

---
 components/drawer/style/drawer.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index f341eb1d35..981afcc9e0 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -5,7 +5,6 @@
 .@{dawer-prefix-cls} {
   position: fixed;
   top: 0;
-  width: 0%;
   z-index: @zindex-modal;
   transition: transform @animation-duration-slow @ease-base-in;
   > * {

From 2ca3661e87533794aecafd8da8a00d6204565d0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Fri, 10 Aug 2018 13:32:33 +0800
Subject: [PATCH 23/36] placement add top and bottom

---
 components/drawer/__tests__/Drawer.test.js    | 14 ++++
 .../drawer/__tests__/MultiDrawer.test.js      |  2 +-
 .../__snapshots__/Drawer.test.js.snap         | 40 ++++++++++
 .../__snapshots__/DrawerEvent.test.js.snap    |  2 +-
 components/drawer/demo/basic-left.md          | 57 --------------
 components/drawer/demo/placement.md           | 75 +++++++++++++++++++
 components/drawer/index.en-US.md              |  3 +-
 components/drawer/index.tsx                   | 15 +++-
 components/drawer/index.zh-CN.md              |  3 +-
 9 files changed, 147 insertions(+), 64 deletions(-)
 delete mode 100644 components/drawer/demo/basic-left.md
 create mode 100644 components/drawer/demo/placement.md

diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js
index f366715c9c..cb65152e4b 100644
--- a/components/drawer/__tests__/Drawer.test.js
+++ b/components/drawer/__tests__/Drawer.test.js
@@ -16,6 +16,20 @@ describe('Drawer', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('render top drawer', () => {
+    const wrapper = render(
+      <Drawer
+        visible
+        height={400}
+        placement="top"
+        getContainer={false}
+      >
+        Here is content of Drawer
+      </Drawer>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('have a title', () => {
     const wrapper = render(
       <Drawer
diff --git a/components/drawer/__tests__/MultiDrawer.test.js b/components/drawer/__tests__/MultiDrawer.test.js
index 266cdea656..9cd18836cc 100644
--- a/components/drawer/__tests__/MultiDrawer.test.js
+++ b/components/drawer/__tests__/MultiDrawer.test.js
@@ -105,7 +105,7 @@ describe('Drawer', () => {
     expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
   });
 
-  it('render right MultiDrawer', () => {
+  it('render left MultiDrawer', () => {
     const wrapper = mount(<MultiDrawer placement="left" />);
     wrapper.find('button#open_drawer').simulate('click');
     wrapper.find('button#open_two_drawer').simulate('click');
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index c581ee9a4b..70c72479fd 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -205,3 +205,43 @@ exports[`Drawer render correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Drawer render top drawer 1`] = `
+<div
+  class=""
+>
+  <div
+    class="ant-drawer ant-drawer-top"
+  >
+    <div
+      class="ant-drawer-mask"
+    />
+    <div
+      class="ant-drawer-content-wrapper"
+      style="transform:translateY(-100%);-ms-transform:translateY(-100%);height:400px"
+    >
+      <div
+        class="ant-drawer-content"
+      >
+        <div
+          class="ant-drawer-wrapper-body"
+        >
+          <button
+            aria-label="Close"
+            class="ant-drawer-close"
+          >
+            <span
+              class="ant-drawer-close-x"
+            />
+          </button>
+          <div
+            class="ant-drawer-body"
+          >
+            Here is content of Drawer
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index fdf8f3e5d7..875ab4c752 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Drawer render correctly 1`] = `
 <div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-clicked"
     type="button"
   >
     <span>
diff --git a/components/drawer/demo/basic-left.md b/components/drawer/demo/basic-left.md
deleted file mode 100644
index 1caf745dea..0000000000
--- a/components/drawer/demo/basic-left.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 左侧滑出
-  en-US: Left Slider
----
-
-## zh-CN
-
-基础抽屉，点击触发按钮抽屉从左滑出，点击遮罩区关闭
-
-## en-US
-
-Basic drawer.
-
-```jsx
-import { Drawer, Button } from 'antd';
-
-class App extends React.Component {
-  state = { visible: false };
-
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
-  };
-
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
-  };
-
-  render() {
-    return (
-      <div>
-        <Button type="primary" onClick={this.showDrawer}>
-          Open
-        </Button>
-        <Drawer
-          title="Basic Drawer"
-          placement="left"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </div>
-    );
-  }
-}
-
-ReactDOM.render(<App />, mountNode);
-```
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
new file mode 100644
index 0000000000..a1a5907a0b
--- /dev/null
+++ b/components/drawer/demo/placement.md
@@ -0,0 +1,75 @@
+---
+order: 1
+title:
+  zh-CN: 自定义位置
+  en-US: Custom Placement
+---
+
+## zh-CN
+
+自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭
+
+## en-US
+
+Basic drawer.
+
+```jsx
+import { Drawer, Button, Radio } from 'antd';
+
+const RadioGroup = Radio.Group;
+
+class App extends React.Component {
+  state = { visible: false, placement: 'left' };
+
+  showDrawer = () => {
+    this.setState({
+      visible: true,
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  onChange = (e) => {
+    this.setState({
+      placement: e.target.value,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <RadioGroup
+          style={{ marginRight: 8 }}
+          defaultValue={this.state.placement}
+          onChange={this.onChange}
+        >
+          <Radio value="top">top</Radio>
+          <Radio value="right">right</Radio>
+          <Radio value="bottom">bottom</Radio>
+          <Radio value="left">left</Radio>
+        </RadioGroup>
+        <Button type="primary" onClick={this.showDrawer}>
+          Open
+        </Button>
+        <Drawer
+          title="Basic Drawer"
+          placement={this.state.placement}
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index 2b7bfc60b5..eb9b33bac4 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -27,9 +27,10 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | title | The title for Drawer. | string\|ReactNode | - |
 | visible | Whether the Drawer dialog is visible or not. | boolean | false |
 | width | Width of the Drawer dialog. | string\|number | 256 |
+| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
 | className | The class name of the container of the Drawer dialog. | string | - |
 | zIndex | The `z-index` of the Drawer. | Number | 1000 |
-| placement | The placement of the Drawer. | 'left' \| 'right' | 'right'
+| placement | The placement of the Drawer. | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right' |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
 
 <style>
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index a2c3c5e7b1..5cbc32fb5d 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import RcDrawer from 'rc-drawer';
-import * as PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 import createReactContext, { Context } from 'create-react-context';
 import warning from 'warning';
 import classNames from 'classnames';
@@ -24,12 +24,13 @@ export interface DrawerProps {
   title?: React.ReactNode;
   visible?: boolean;
   width?: number | string;
+  height?: number | string;
   /* deprecated, use className instead */
   wrapClassName?: string;
   zIndex?: number;
   prefixCls?: string;
   push?: boolean;
-  placement?: 'left' | 'right';
+  placement?: 'top' | 'right' | 'bottom' | 'left';
   onClose?: (e: EventType) => void;
   className?: string;
 }
@@ -65,6 +66,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
   static defaultProps = {
     prefixCls: 'ant-drawer',
     width: 256,
+    height: 256,
     closable: true,
     placement: 'right',
     maskClosable: true,
@@ -179,7 +181,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
     );
   }
   renderProvider = (value: Drawer) => {
-    let { zIndex, style, placement, className, wrapClassName, ...rest } = this.props;
+    let { zIndex, style, placement, className, wrapClassName, width, height, ...rest } = this.props;
     warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
     const RcDrawerStyle = this.state.push
       ? {
@@ -188,10 +190,17 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       }
       : { zIndex };
     this.praentDrawer = value;
+    const offsetStyle: any = {};
+    if (placement === 'left' || placement === 'right') {
+      offsetStyle.width = width;
+    } else {
+      offsetStyle.height = height;
+    }
     return (
       <DrawerContext.Provider value={this}>
         <RcDrawer
           {...rest}
+          {...offsetStyle}
           handler={false}
           open={this.props.visible}
           onMaskClick={this.onMaskClick}
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index e1ac2987cb..1cac34c55f 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -28,9 +28,10 @@ title: Drawer
 | title | 标题 | string \| ReactNode | - |
 | visible | Drawer 是否可见 | boolean | - |
 | width | 宽度 | string \| number | 256 |
+| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
 | className | 对话框外层容器的类名 | string | - |
 | zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
-| placement | 抽屉的方向 | 'left' \| 'right' | 'right'
+| placement | 抽屉的方向 | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right'
 | onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
 
 <style>

From 4233c5541819a91b995617d50d85c321e3f33c24 Mon Sep 17 00:00:00 2001
From: jljsj33 <liangjun.jiang@alipay.com>
Date: Fri, 10 Aug 2018 16:47:44 +0800
Subject: [PATCH 24/36] fix drawer scroll bar no animation

---
 components/drawer/style/drawer.less | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index 981afcc9e0..97670cf001 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -5,6 +5,8 @@
 .@{dawer-prefix-cls} {
   position: fixed;
   top: 0;
+  width: 0%;
+  height: 100%;
   z-index: @zindex-modal;
   transition: transform @animation-duration-slow @ease-base-in;
   > * {
@@ -53,10 +55,14 @@
 
   &-top,
   &-bottom {
-    .@{dawer-prefix-cls}-content-wrapper,
-    .@{dawer-prefix-cls}-content {
+    width: 100%;
+    height: 0%;
+    .@{dawer-prefix-cls}-content-wrapper {
       width: 100%;
     }
+    &.@{dawer-prefix-cls}-open {
+      height: 100%;
+    }
   }
   &-top {
     &.@{dawer-prefix-cls}-open {

From 5676a10726fcb7b5a23655eb552310153fb5ffdd Mon Sep 17 00:00:00 2001
From: jljsj33 <liangjun.jiang@alipay.com>
Date: Fri, 10 Aug 2018 16:59:47 +0800
Subject: [PATCH 25/36] add ease-base-in ease-base-out

---
 .../drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap     | 2 +-
 components/drawer/style/drawer.less                             | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index 875ab4c752..fdf8f3e5d7 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Drawer render correctly 1`] = `
 <div>
   <button
-    class="ant-btn ant-btn-clicked"
+    class="ant-btn"
     type="button"
   >
     <span>
diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index 97670cf001..8c7222a567 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -181,7 +181,6 @@
   }
   &-open {
     transition: transform @animation-duration-slow @ease-base-out;
-    > * {
       transition: transform @animation-duration-slow @ease-base-out;
     }
     &-content {

From cc2bd76595091dbc0bf58a9a5a687d22fec8686f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B8=85?= <qixian.cs@outlook.com>
Date: Sun, 19 Aug 2018 14:51:28 +0800
Subject: [PATCH 26/36] add top MultiDrawer

---
 .../drawer/__tests__/MultiDrawer.test.js      | 14 +++++-
 components/drawer/index.tsx                   | 43 ++++++++++++++-----
 components/drawer/style/drawer.less           |  4 +-
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/components/drawer/__tests__/MultiDrawer.test.js b/components/drawer/__tests__/MultiDrawer.test.js
index 9cd18836cc..ea9330dc66 100644
--- a/components/drawer/__tests__/MultiDrawer.test.js
+++ b/components/drawer/__tests__/MultiDrawer.test.js
@@ -42,7 +42,6 @@ class MultiDrawer extends React.Component {
           title="Multi-level drawer"
           className="test_drawer"
           width={520}
-          closable={false}
           onClose={this.onClose}
           getContainer={false}
           placement={placement}
@@ -54,7 +53,7 @@ class MultiDrawer extends React.Component {
           <Drawer
             title="Two-level Drawer"
             width={320}
-            closable={false}
+            className="Two-level"
             getContainer={false}
             placement={placement}
             onClose={this.onChildrenDrawerClose}
@@ -112,5 +111,16 @@ describe('Drawer', () => {
     const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
     expect(translateX).toEqual('translateX(180px)');
     expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
+    wrapper.find('.Two-level .ant-drawer-close').simulate('click');
+    expect(wrapper.state().childrenDrawer).toBe(false);
+  });
+
+  it('render left MultiDrawer', () => {
+    const wrapper = mount(<MultiDrawer placement="top" />);
+    wrapper.find('button#open_drawer').simulate('click');
+    wrapper.find('button#open_two_drawer').simulate('click');
+    const translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    expect(translateX).toEqual('translateY(180px)');
+    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
   });
 });
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 5cbc32fb5d..1213202bca 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import RcDrawer from 'rc-drawer';
-import PropTypes from 'prop-types';
 import createReactContext, { Context } from 'create-react-context';
 import warning from 'warning';
 import classNames from 'classnames';
@@ -13,6 +13,7 @@ type EventType =
 
 type getContainerfunc = () => HTMLElement;
 
+type placementType =  'top' | 'right' | 'bottom' | 'left';
 export interface DrawerProps {
   closable?: boolean;
   destroyOnClose?: boolean;
@@ -30,7 +31,7 @@ export interface DrawerProps {
   zIndex?: number;
   prefixCls?: string;
   push?: boolean;
-  placement?: 'top' | 'right' | 'bottom' | 'left';
+  placement?: placementType;
   onClose?: (e: EventType) => void;
   className?: string;
 }
@@ -125,6 +126,16 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
 
   getDestoryOnClose = () => (this.props.destroyOnClose && !this.props.visible);
 
+  // get drawar push width or height
+  getPushTransform = (placement?: placementType) => {
+    if (placement === 'left' || placement === 'right') {
+      return `translateX(${placement === 'left' ? 180 : -180}px)`;
+    }
+    if (placement === 'top' || placement === 'bottom') {
+      return `translateY(${placement === 'top' ? 180 : -180}px)`;
+    }
+  }
+  // render drawer body dom
   renderBody = () => {
     if (this.destoryClose && !this.props.visible) {
       return null;
@@ -139,12 +150,15 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       } : {};
 
     const isDestroyOnClose = this.getDestoryOnClose();
+
     if (isDestroyOnClose) {
       // Increase the opacity transition, delete children after closing.
       containerStyle.opacity = 0;
       containerStyle.transition = 'opacity .3s';
     }
     const { prefixCls, title, closable } = this.props;
+
+    // is have header dom
     let header;
     if (title) {
       header = (
@@ -153,6 +167,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
         </div>
       );
     }
+    // is have closer button
     let closer;
     if (closable) {
       closer = (
@@ -180,15 +195,22 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       </div>
     );
   }
+
+  getRcDrawerStyle = () => {
+    const { zIndex, placement } = this.props;
+    return this.state.push
+    ? {
+      zIndex,
+      transform: this.getPushTransform(placement),
+    }
+    : { zIndex };
+  }
+
+  // render Provider for Multi-level drawe
   renderProvider = (value: Drawer) => {
     let { zIndex, style, placement, className, wrapClassName, width, height, ...rest } = this.props;
     warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
-    const RcDrawerStyle = this.state.push
-      ? {
-        zIndex,
-        transform: `translateX(${placement === 'left' ? 180 : -180}px)`,
-      }
-      : { zIndex };
+
     this.praentDrawer = value;
     const offsetStyle: any = {};
     if (placement === 'left' || placement === 'right') {
@@ -199,14 +221,14 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
     return (
       <DrawerContext.Provider value={this}>
         <RcDrawer
+          handler={false}
           {...rest}
           {...offsetStyle}
-          handler={false}
           open={this.props.visible}
           onMaskClick={this.onMaskClick}
           showMask={this.props.mask}
           placement={placement}
-          style={RcDrawerStyle}
+          style={this.getRcDrawerStyle()}
           className={classNames(wrapClassName, className)}
         >
           {this.renderBody()}
@@ -214,6 +236,7 @@ export default class Drawer extends React.Component<DrawerProps, IDrawerState> {
       </DrawerContext.Provider>
     );
   }
+
   render() {
     return (
       <DrawerContext.Consumer>{this.renderProvider}</DrawerContext.Consumer>
diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index 8c7222a567..9c2c560447 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -92,7 +92,7 @@
       &-mask {
         opacity: 0.3;
         height: 100%;
-        animation: antdDrawerFadeIn @animation-duration-slow  @ease-base-out;
+        animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
         transition: none;
       }
     }
@@ -181,8 +181,6 @@
   }
   &-open {
     transition: transform @animation-duration-slow @ease-base-out;
-      transition: transform @animation-duration-slow @ease-base-out;
-    }
     &-content {
       box-shadow: @shadow-2;
     }

From 563e34994654fd66a188ad47b6a0153c21f829be Mon Sep 17 00:00:00 2001
From: Nikolay <veseliy07@gmail.com>
Date: Mon, 20 Aug 2018 14:16:11 +0300
Subject: [PATCH 27/36] add strict mode for submit object property names

This feature adds a posibility to validate property names in TypeScript by inserting required object interface.
---
 components/form/Form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index db569f0fbf..bc4f0925c8 100755
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -118,7 +118,7 @@ export type WrappedFormUtils = {
   /** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
   resetFields(names?: Array<string>): void;
 
-  getFieldDecorator(id: string, options?: GetFieldDecoratorOptions): (node: React.ReactNode) => React.ReactNode;
+  getFieldDecorator<T extends Object = {}>(id: keyof T, options?: GetFieldDecoratorOptions): (node: React.ReactNode) => React.ReactNode;
 };
 
 export interface FormComponentProps {

From 7bf50c85e1bba6bc202f8e3946e33b0cc196817e Mon Sep 17 00:00:00 2001
From: Nikolay <veseliy07@gmail.com>
Date: Mon, 20 Aug 2018 14:26:29 +0300
Subject: [PATCH 28/36] Update Form.tsx

---
 components/form/Form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From 796b56dbc4786291cfd681eb68ef3fdc3f56d7c6 Mon Sep 17 00:00:00 2001
From: zombieJ <smith3816@gmail.com>
Date: Wed, 22 Aug 2018 23:34:36 +0800
Subject: [PATCH 29/36] New Component Skeleton (#11226)

* Add new component Skeleton
* Add related doc
* Add sample
* Add test case

ref: https://github.com/ant-design/ant-design/issues/10308
---
 .../__snapshots__/index.test.js.snap          |   1 +
 .../__tests__/__snapshots__/demo.test.js.snap | 209 ++++---------
 components/card/demo/loading.md               |  32 +-
 components/index.tsx                          |   2 +
 .../__tests__/__snapshots__/demo.test.js.snap |  14 +-
 components/list/demo/loadmore.md              |  46 +--
 components/skeleton/Avatar.tsx                |  37 +++
 components/skeleton/Paragraph.tsx             |  78 +++++
 components/skeleton/Title.tsx                 |  28 ++
 .../__tests__/__snapshots__/demo.test.js.snap | 204 +++++++++++++
 .../__snapshots__/index.test.js.snap          | 279 ++++++++++++++++++
 components/skeleton/__tests__/demo.test.js    |   3 +
 components/skeleton/__tests__/index.test.js   |  50 ++++
 components/skeleton/demo/active.md            |  22 ++
 components/skeleton/demo/basic.md             |  22 ++
 components/skeleton/demo/children.md          |  58 ++++
 components/skeleton/demo/list.md              |  86 ++++++
 components/skeleton/index.en-US.md            |  44 +++
 components/skeleton/index.tsx                 | 155 ++++++++++
 components/skeleton/index.zh-CN.md            |  46 +++
 components/skeleton/style/index.less          | 113 +++++++
 components/skeleton/style/index.tsx           |   2 +
 components/style/themes/default.less          |   4 +
 tests/__snapshots__/index.test.js.snap        |   1 +
 24 files changed, 1343 insertions(+), 193 deletions(-)
 create mode 100644 components/skeleton/Avatar.tsx
 create mode 100644 components/skeleton/Paragraph.tsx
 create mode 100644 components/skeleton/Title.tsx
 create mode 100644 components/skeleton/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/skeleton/__tests__/__snapshots__/index.test.js.snap
 create mode 100644 components/skeleton/__tests__/demo.test.js
 create mode 100644 components/skeleton/__tests__/index.test.js
 create mode 100644 components/skeleton/demo/active.md
 create mode 100644 components/skeleton/demo/basic.md
 create mode 100644 components/skeleton/demo/children.md
 create mode 100644 components/skeleton/demo/list.md
 create mode 100644 components/skeleton/index.en-US.md
 create mode 100644 components/skeleton/index.tsx
 create mode 100644 components/skeleton/index.zh-CN.md
 create mode 100644 components/skeleton/style/index.less
 create mode 100644 components/skeleton/style/index.tsx

diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap
index 53f98628bc..072e985c04 100644
--- a/components/__tests__/__snapshots__/index.test.js.snap
+++ b/components/__tests__/__snapshots__/index.test.js.snap
@@ -41,6 +41,7 @@ Array [
   "Rate",
   "Row",
   "Select",
+  "Skeleton",
   "Slider",
   "Spin",
   "Steps",
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index 6d7c6f3147..fc7c064605 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -372,174 +372,83 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
 
 exports[`renders ./components/card/demo/loading.md correctly 1`] = `
 <div>
-  <div
-    class="ant-card ant-card-loading ant-card-bordered"
+  <span
+    class="ant-switch"
+    tabindex="0"
+  >
+    <span
+      class="ant-switch-inner"
+    />
+  </span>
+  <div
+    class="ant-card ant-card-bordered"
+    style="width:300px;margin-top:16px"
   >
-    <div
-      class="ant-card-head"
-    >
-      <div
-        class="ant-card-head-wrapper"
-      >
-        <div
-          class="ant-card-head-title"
-        >
-          Card title
-        </div>
-      </div>
-    </div>
     <div
       class="ant-card-body"
     >
       <div
-        class="ant-card-loading-content"
+        class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
       >
         <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
+          class="ant-skeleton-header"
         >
-          <div
-            class="ant-col-22"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
+          <span
+            class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
+          />
         </div>
         <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
+          class="ant-skeleton-content"
         >
-          <div
-            class="ant-col-8"
-            style="padding-left:4px;padding-right:4px"
+          <h3
+            class="ant-skeleton-title"
+            style="width:50%"
+          />
+          <ul
+            class="ant-skeleton-paragraph"
           >
-            <div
-              class="ant-card-loading-block"
+            <li
+              style="width:100%"
             />
-          </div>
-          <div
-            class="ant-col-15"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
+            <li
+              style="width:100%"
             />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col-6"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col-18"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col-13"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col-9"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col-4"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col-3"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col-16"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-        </div>
-        <div
-          class="ant-row"
-          style="margin-left:-4px;margin-right:-4px"
-        >
-          <div
-            class="ant-col-8"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col-6"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
-          <div
-            class="ant-col-8"
-            style="padding-left:4px;padding-right:4px"
-          >
-            <div
-              class="ant-card-loading-block"
-            />
-          </div>
+          </ul>
         </div>
       </div>
     </div>
+    <ul
+      class="ant-card-actions"
+    >
+      <li
+        style="width:33.333333333333336%"
+      >
+        <span>
+          <i
+            class="anticon anticon-setting"
+          />
+        </span>
+      </li>
+      <li
+        style="width:33.333333333333336%"
+      >
+        <span>
+          <i
+            class="anticon anticon-edit"
+          />
+        </span>
+      </li>
+      <li
+        style="width:33.333333333333336%"
+      >
+        <span>
+          <i
+            class="anticon anticon-ellipsis"
+          />
+        </span>
+      </li>
+    </ul>
   </div>
-  <button
-    class="ant-btn"
-    style="margin-top:16px"
-    type="button"
-  >
-    <span>
-      Toggle loading
-    </span>
-  </button>
 </div>
 `;
 
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index 408d44d240..c3e39deb0a 100644
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -14,30 +14,42 @@ title:
 Shows a loading indicator while the contents of the card is being fetched.
 
 ````jsx
-import { Card, Button } from 'antd';
+import { Skeleton, Switch, Card, Icon, Avatar } from 'antd';
 
-class LoadingCard extends React.Component {
+const { Meta } = Card;
+
+class App extends React.Component {
   state = {
     loading: true,
   }
 
-  handleClick = () => {
-    this.setState({ loading: !this.state.loading });
+  onChange = (checked) => {
+    this.setState({ loading: !checked });
   }
 
   render() {
+    const { loading } = this.state;
+
     return (
       <div>
-        <Card loading={this.state.loading} title="Card title">
-          Whatever content
+        <Switch checked={!loading} onChange={this.onChange} />
+
+        <Card
+          style={{ width: 300, marginTop: 16 }}
+          actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
+        >
+          <Skeleton loading={loading} avatar active>
+            <Meta
+              avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+              title="Card title"
+              description="This is the description"
+            />
+          </Skeleton>
         </Card>
-        <Button onClick={this.handleClick} style={{ marginTop: 16 }}>Toggle loading</Button>
       </div>
     );
   }
 }
 
-ReactDOM.render(
-  <LoadingCard />,
-  mountNode);
+ReactDOM.render(<App />, mountNode);
 ````
diff --git a/components/index.tsx b/components/index.tsx
index bbb3c7bebf..9882a27327 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -91,6 +91,8 @@ export { default as Row } from './row';
 
 export { default as Select } from './select';
 
+export { default as Skeleton } from './skeleton';
+
 export { default as Slider } from './slider';
 
 export { default as Spin } from './spin';
diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
index 8a28d3822d..be4e0a8ab9 100644
--- a/components/list/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -365,7 +365,7 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
 
 exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
 <div
-  class="ant-list demo-loadmore-list ant-list-split ant-list-loading ant-list-something-after-last-item"
+  class="ant-list demo-loadmore-list ant-list-split ant-list-loading"
 >
   <div
     class="ant-spin-nested-loading"
@@ -392,18 +392,6 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
       />
     </div>
   </div>
-  <div
-    style="text-align:center;margin-top:12px;height:32px;line-height:32px"
-  >
-    <button
-      class="ant-btn"
-      type="button"
-    >
-      <span>
-        loading more
-      </span>
-    </button>
-  </div>
 </div>
 `;
 
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index 3bea685955..c5a1884af2 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -14,25 +14,27 @@ title:
 Load more list with `loadMore` property.
 
 ````jsx
-import { List, Avatar, Button, Spin } from 'antd';
+import { List, Avatar, Button, Skeleton } from 'antd';
 
 import reqwest from 'reqwest';
 
-const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
+const count = 3;
+const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat&noinfo`;
 
 class LoadMoreList extends React.Component {
   state = {
-    loading: true,
-    loadingMore: false,
-    showLoadingMore: true,
+    initLoading: true,
+    loading: false,
     data: [],
+    list: [],
   }
 
   componentDidMount() {
     this.getData((res) => {
       this.setState({
-        loading: false,
+        initLoading: false,
         data: res.results,
+        list: res.results,
       });
     });
   }
@@ -51,13 +53,15 @@ class LoadMoreList extends React.Component {
 
   onLoadMore = () => {
     this.setState({
-      loadingMore: true,
+      loading: true,
+      list: this.state.data.concat([...new Array(count)].map(() => ({ loading: true, name: {} }))),
     });
     this.getData((res) => {
       const data = this.state.data.concat(res.results);
       this.setState({
         data,
-        loadingMore: false,
+        list: data,
+        loading: false,
       }, () => {
         // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
         // In real scene, you can using public method of react-virtualized:
@@ -68,28 +72,30 @@ class LoadMoreList extends React.Component {
   }
 
   render() {
-    const { loading, loadingMore, showLoadingMore, data } = this.state;
-    const loadMore = showLoadingMore ? (
+    const { initLoading, loading, list } = this.state;
+    const loadMore = !initLoading && !loading ? (
       <div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
-        {loadingMore && <Spin />}
-        {!loadingMore && <Button onClick={this.onLoadMore}>loading more</Button>}
+        <Button onClick={this.onLoadMore}>loading more</Button>
       </div>
     ) : null;
+
     return (
       <List
         className="demo-loadmore-list"
-        loading={loading}
+        loading={initLoading}
         itemLayout="horizontal"
         loadMore={loadMore}
-        dataSource={data}
+        dataSource={list}
         renderItem={item => (
           <List.Item actions={[<a>edit</a>, <a>more</a>]}>
-            <List.Item.Meta
-              avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
-              title={<a href="https://ant.design">{item.name.last}</a>}
-              description="Ant Design, a design language for background applications, is refined by Ant UED Team"
-            />
-            <div>content</div>
+            <Skeleton avatar title={false} loading={item.loading} active>
+              <List.Item.Meta
+                avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+                title={<a href="https://ant.design">{item.name.last}</a>}
+                description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+              />
+              <div>content</div>
+            </Skeleton>
           </List.Item>
         )}
       />
diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx
new file mode 100644
index 0000000000..b31e313f1e
--- /dev/null
+++ b/components/skeleton/Avatar.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface SkeletonAvatarProps {
+  prefixCls?: string;
+  className?: string;
+  style?: object;
+  size?: 'large' | 'small' | 'default';
+  shape?: 'circle'| 'square';
+}
+
+class Title extends React.Component<SkeletonAvatarProps, any> {
+  static defaultProps: Partial<SkeletonAvatarProps> = {
+    prefixCls: 'ant-skeleton-avatar',
+    size: 'large',
+  };
+
+  render() {
+    const { prefixCls, className, style, size, shape } = this.props;
+
+    const sizeCls = classNames({
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
+    });
+
+    const shapeCls = classNames({
+      [`${prefixCls}-circle`]: shape === 'circle',
+      [`${prefixCls}-square`]: shape === 'square',
+    });
+
+    return (
+      <span className={classNames(prefixCls, className, sizeCls, shapeCls)} style={style} />
+    );
+  }
+}
+
+export default Title;
diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx
new file mode 100644
index 0000000000..9d6982aa38
--- /dev/null
+++ b/components/skeleton/Paragraph.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { polyfill } from 'react-lifecycles-compat';
+
+type widthUnit = number | string;
+
+export interface SkeletonParagraphProps {
+  prefixCls?: string;
+  className?: string;
+  style?: object;
+  width?: widthUnit | Array<widthUnit>;
+  rows?: number;
+}
+
+interface SkeletonParagraphState {
+  prevProps: SkeletonParagraphProps;
+  widthList: Array<widthUnit>;
+}
+
+class Paragraph extends React.Component<SkeletonParagraphProps, SkeletonParagraphState> {
+  static defaultProps: Partial<SkeletonParagraphProps> = {
+    prefixCls: 'ant-skeleton-paragraph',
+  };
+
+  static getDerivedStateFromProps(
+    props: SkeletonParagraphProps,
+    state: SkeletonParagraphState,
+  ): Partial<SkeletonParagraphState> {
+    const { prevProps } = state;
+    const { width, rows = 2 } = props;
+
+    const newState: Partial<SkeletonParagraphState> = {
+      prevProps: props,
+    };
+
+    if (rows !== prevProps.rows || width !== prevProps.width) {
+      // Parse width list
+      let widthList = [];
+      if (width && Array.isArray(width)) {
+        widthList = width;
+      } else if (width && !Array.isArray(width)) {
+        widthList = [];
+        widthList[rows - 1] = width;
+      }
+
+      newState.widthList = widthList;
+    }
+
+    return newState;
+  }
+
+  state: SkeletonParagraphState = {
+    prevProps: {},
+    widthList: [],
+  };
+
+  render() {
+    const { widthList } = this.state;
+    const { prefixCls, className, style, rows } = this.props;
+
+    const rowList = [...Array(rows)].map((_, index) => (
+      <li key={index} style={{ width: widthList[index] || '100%' }} />
+    ));
+
+    return (
+      <ul
+        className={classNames(prefixCls, className)}
+        style={style}
+      >
+        {rowList}
+      </ul>
+    );
+  }
+}
+
+polyfill(Paragraph);
+
+export default Paragraph;
diff --git a/components/skeleton/Title.tsx b/components/skeleton/Title.tsx
new file mode 100644
index 0000000000..507f4d697b
--- /dev/null
+++ b/components/skeleton/Title.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface SkeletonTitleProps {
+  prefixCls?: string;
+  className?: string;
+  style?: object;
+  width?: number | string;
+}
+
+class Title extends React.Component<SkeletonTitleProps, any> {
+  static defaultProps: Partial<SkeletonTitleProps> = {
+    prefixCls: 'ant-skeleton-title',
+  };
+
+  render() {
+    const { prefixCls, className, width, style } = this.props;
+
+    return (
+      <h3
+        className={classNames(prefixCls, className)}
+        style={{ width, ...style }}
+      />
+    );
+  }
+}
+
+export default Title;
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 0000000000..1f4980b346
--- /dev/null
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,204 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/skeleton/demo/active.md correctly 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-active"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width:38%"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width:100%"
+      />
+      <li
+        style="width:100%"
+      />
+      <li
+        style="width:61%"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/skeleton/demo/basic.md correctly 1`] = `
+<div
+  class="ant-skeleton"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width:38%"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width:100%"
+      />
+      <li
+        style="width:100%"
+      />
+      <li
+        style="width:61%"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/skeleton/demo/children.md correctly 1`] = `
+<div
+  class="article"
+>
+  <div>
+    <h4>
+      Ant Design, a design language
+    </h4>
+    <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>
+  <button
+    class="ant-btn"
+    type="button"
+  >
+    <span>
+      Show Skeleton
+    </span>
+  </button>
+</div>
+`;
+
+exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
+<div>
+  <span
+    class="ant-switch"
+    tabindex="0"
+  >
+    <span
+      class="ant-switch-inner"
+    />
+  </span>
+  <div
+    class="ant-list ant-list-vertical ant-list-lg ant-list-split"
+  >
+    <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-skeleton ant-skeleton-active"
+            >
+              <div
+                class="ant-skeleton-content"
+              >
+                <h3
+                  class="ant-skeleton-title"
+                  style="width:38%"
+                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li
+                    style="width:100%"
+                  />
+                  <li
+                    style="width:100%"
+                  />
+                  <li
+                    style="width:61%"
+                  />
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="ant-list-item"
+        >
+          <div
+            class="ant-list-item-content ant-list-item-content-single"
+          >
+            <div
+              class="ant-skeleton ant-skeleton-active"
+            >
+              <div
+                class="ant-skeleton-content"
+              >
+                <h3
+                  class="ant-skeleton-title"
+                  style="width:38%"
+                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li
+                    style="width:100%"
+                  />
+                  <li
+                    style="width:100%"
+                  />
+                  <li
+                    style="width:61%"
+                  />
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="ant-list-item"
+        >
+          <div
+            class="ant-list-item-content ant-list-item-content-single"
+          >
+            <div
+              class="ant-skeleton ant-skeleton-active"
+            >
+              <div
+                class="ant-skeleton-content"
+              >
+                <h3
+                  class="ant-skeleton-title"
+                  style="width:38%"
+                />
+                <ul
+                  class="ant-skeleton-paragraph"
+                >
+                  <li
+                    style="width:100%"
+                  />
+                  <li
+                    style="width:100%"
+                  />
+                  <li
+                    style="width:61%"
+                  />
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/skeleton/__tests__/__snapshots__/index.test.js.snap b/components/skeleton/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000000..bac82f863c
--- /dev/null
+++ b/components/skeleton/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,279 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton avatar shape 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-with-avatar"
+>
+  <div
+    class="ant-skeleton-header"
+  >
+    <span
+      class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
+    />
+  </div>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 50%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton avatar shape 2`] = `
+<div
+  class="ant-skeleton ant-skeleton-with-avatar"
+>
+  <div
+    class="ant-skeleton-header"
+  >
+    <span
+      class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-square"
+    />
+  </div>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 50%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton avatar size 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-with-avatar"
+>
+  <div
+    class="ant-skeleton-header"
+  >
+    <span
+      class="ant-skeleton-avatar ant-skeleton-avatar-sm ant-skeleton-avatar-circle"
+    />
+  </div>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 50%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton avatar size 2`] = `
+<div
+  class="ant-skeleton ant-skeleton-with-avatar"
+>
+  <div
+    class="ant-skeleton-header"
+  >
+    <span
+      class="ant-skeleton-avatar ant-skeleton-avatar-circle"
+    />
+  </div>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 50%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton avatar size 3`] = `
+<div
+  class="ant-skeleton ant-skeleton-with-avatar"
+>
+  <div
+    class="ant-skeleton-header"
+  >
+    <span
+      class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
+    />
+  </div>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 50%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton paragraph rows 1`] = `
+<div
+  class="ant-skeleton"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 38%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 61%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton paragraph width 1`] = `
+<div
+  class="ant-skeleton"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 38%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 93%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton paragraph width 2`] = `
+<div
+  class="ant-skeleton"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 38%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 28%;"
+      />
+      <li
+        style="width: 93%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Skeleton title width 1`] = `
+<div
+  class="ant-skeleton"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 93%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 100%;"
+      />
+      <li
+        style="width: 61%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
diff --git a/components/skeleton/__tests__/demo.test.js b/components/skeleton/__tests__/demo.test.js
new file mode 100644
index 0000000000..2fb54f3080
--- /dev/null
+++ b/components/skeleton/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('skeleton');
diff --git a/components/skeleton/__tests__/index.test.js b/components/skeleton/__tests__/index.test.js
new file mode 100644
index 0000000000..22697a6761
--- /dev/null
+++ b/components/skeleton/__tests__/index.test.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Skeleton from '..';
+
+describe('Skeleton', () => {
+  const genSkeleton = props => mount(
+    <Skeleton loading {...props}>
+      Bamboo
+    </Skeleton>
+  );
+
+  describe('avatar', () => {
+    it('size', () => {
+      const wrapperSmall = genSkeleton({ avatar: { size: 'small' } });
+      expect(wrapperSmall.render()).toMatchSnapshot();
+      const wrapperDefault = genSkeleton({ avatar: { size: 'default' } });
+      expect(wrapperDefault.render()).toMatchSnapshot();
+      const wrapperLarge = genSkeleton({ avatar: { size: 'large' } });
+      expect(wrapperLarge.render()).toMatchSnapshot();
+    });
+
+    it('shape', () => {
+      const wrapperCircle = genSkeleton({ avatar: { shape: 'circle' } });
+      expect(wrapperCircle.render()).toMatchSnapshot();
+      const wrapperSquare = genSkeleton({ avatar: { shape: 'square' } });
+      expect(wrapperSquare.render()).toMatchSnapshot();
+    });
+  });
+
+  describe('title', () => {
+    it('width', () => {
+      const wrapper = genSkeleton({ title: { width: '93%' } });
+      expect(wrapper.render()).toMatchSnapshot();
+    });
+  });
+
+  describe('paragraph', () => {
+    it('rows', () => {
+      const wrapper = genSkeleton({ paragraph: { rows: 5 } });
+      expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('width', () => {
+      const wrapperPure = genSkeleton({ paragraph: { width: '93%' } });
+      expect(wrapperPure.render()).toMatchSnapshot();
+      const wrapperList = genSkeleton({ paragraph: { width: ['28%', '93%'] } });
+      expect(wrapperList.render()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/components/skeleton/demo/active.md b/components/skeleton/demo/active.md
new file mode 100644
index 0000000000..5249130cdd
--- /dev/null
+++ b/components/skeleton/demo/active.md
@@ -0,0 +1,22 @@
+---
+order: 1
+title:
+  zh-CN: 动画效果
+  en-US: Active Animation
+---
+
+## zh-CN
+
+显示动画效果。
+
+## en-US
+
+Display active animation.
+
+````jsx
+import { Skeleton } from 'antd';
+
+ReactDOM.render(
+  <Skeleton active />,
+mountNode);
+````
diff --git a/components/skeleton/demo/basic.md b/components/skeleton/demo/basic.md
new file mode 100644
index 0000000000..189ed7ef4f
--- /dev/null
+++ b/components/skeleton/demo/basic.md
@@ -0,0 +1,22 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Basic usage.
+
+````jsx
+import { Skeleton } from 'antd';
+
+ReactDOM.render(
+  <Skeleton />,
+mountNode);
+````
diff --git a/components/skeleton/demo/children.md b/components/skeleton/demo/children.md
new file mode 100644
index 0000000000..1091081777
--- /dev/null
+++ b/components/skeleton/demo/children.md
@@ -0,0 +1,58 @@
+---
+order: 2
+title:
+  zh-CN: 包含子组件
+  en-US: Contains sub component
+---
+
+## zh-CN
+
+加载占位图包含子组件。
+
+## en-US
+
+Skeleton contains sub component.
+
+````jsx
+import { Skeleton, Button } from 'antd';
+
+class Demo extends React.Component {
+  state = {
+    loading: false,
+  };
+
+  showSkeleton = () => {
+    this.setState({ loading: true });
+    setTimeout(() => {
+      this.setState({ loading: false });
+    }, 3000);
+  };
+
+  render() {
+    return (
+      <div className="article">
+        <Skeleton loading={this.state.loading}>
+          <div>
+            <h4>Ant Design, a design language</h4>
+            <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>
+        </Skeleton>
+        <Button onClick={this.showSkeleton} disabled={this.state.loading}>
+          Show Skeleton
+        </Button>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+````
+
+<style>
+.article h4 {
+  margin-bottom: 16px;
+}
+.article button {
+  margin-top: 16px;
+}
+</style>
diff --git a/components/skeleton/demo/list.md b/components/skeleton/demo/list.md
new file mode 100644
index 0000000000..5c14a55554
--- /dev/null
+++ b/components/skeleton/demo/list.md
@@ -0,0 +1,86 @@
+---
+order: 3
+title:
+  zh-CN: 列表
+  en-US: List
+---
+
+## zh-CN
+
+在列表组件中使用加载占位符。
+
+## en-US
+
+Use skeleton in list component.
+
+````jsx
+import { Skeleton, Switch, List, Avatar, Icon } from 'antd';
+
+const listData = [];
+for (let i = 0; i < 3; i++) {
+  listData.push({
+    href: 'http://ant.design',
+    title: `ant design part ${i}`,
+    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+    description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+    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.',
+  });
+}
+
+const IconText = ({ type, text }) => (
+  <span>
+    <Icon type={type} style={{ marginRight: 8 }} />
+    {text}
+  </span>
+);
+
+class App extends React.Component {
+  state = {
+    loading: true,
+  }
+
+  onChange = (checked) => {
+    this.setState({ loading: !checked });
+  }
+
+  render() {
+    const { loading } = this.state;
+
+    return (
+      <div>
+        <Switch checked={!loading} onChange={this.onChange} />
+
+        <List
+          itemLayout="vertical"
+          size="large"
+          dataSource={listData}
+          renderItem={item => (
+            <List.Item
+              key={item.title}
+              actions={!loading && [<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />]}
+              extra={!loading && <img width={272} alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />}
+            >
+              <Skeleton loading={loading} active>
+                <List.Item.Meta
+                  avatar={<Avatar src={item.avatar} />}
+                  title={<a href={item.href}>{item.title}</a>}
+                  description={item.description}
+                />
+                {item.content}
+              </Skeleton>
+            </List.Item>
+          )}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````
+
+<style>
+.skeleton-demo {
+  border: 1px solid #f4f4f4;
+}
+</style>
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
new file mode 100644
index 0000000000..607db7d533
--- /dev/null
+++ b/components/skeleton/index.en-US.md
@@ -0,0 +1,44 @@
+---
+category: Components
+type: Data Entry
+title: Skeleton
+cols: 1
+---
+
+Provide a placeholder at the place which need waiting for loading.
+## When To Use
+
+- When resource needs long time to load, like low network speed.
+- The component contains much information. Such as List or Card.
+
+## API
+
+### Skeleton
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| active | Show animation effect | boolean | false |
+| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
+| loading | Display the skeleton when `true` | boolean | - |
+| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
+| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
+
+### SkeletonAvatarProps
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| size | Set the size of avatar | Enum{ 'large', 'small', 'default' } | - |
+| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
+
+### SkeletonTitleProps
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| width | Set the width of title | number \| string | - |
+
+### SkeletonParagraphProps
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| rows | Set the row count of paragraph | number | - |
+| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - |
diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx
new file mode 100644
index 0000000000..bf2064b5f4
--- /dev/null
+++ b/components/skeleton/index.tsx
@@ -0,0 +1,155 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Avatar, { SkeletonAvatarProps } from './Avatar';
+import Title, { SkeletonTitleProps } from './Title';
+import Paragraph, { SkeletonParagraphProps } from './Paragraph';
+
+export interface SkeletonProps {
+  active?: boolean;
+  loading?: boolean;
+  prefixCls?: string;
+  className?: string;
+  children?: React.ReactNode;
+  avatar?: SkeletonAvatarProps | boolean;
+  title?: SkeletonTitleProps | boolean;
+  paragraph?: SkeletonParagraphProps | boolean;
+}
+
+function getComponentProps<T>(prop: T | boolean | undefined): T | {}  {
+  if (prop && typeof prop === 'object') {
+    return prop;
+  }
+  return {};
+}
+
+function getAvatarBasicProps(hasTitle: boolean, hasParagraph: boolean): SkeletonAvatarProps {
+  if (hasTitle && !hasParagraph) {
+    return { shape: 'square' };
+  }
+
+  return { shape: 'circle' };
+}
+
+function getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): SkeletonTitleProps {
+  if (!hasAvatar && hasParagraph) {
+    return { width: '38%' };
+  }
+
+  if (hasAvatar && hasParagraph) {
+    return { width: '50%' };
+  }
+
+  return { width: '100%' };
+}
+
+function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): SkeletonParagraphProps {
+  const basicProps: SkeletonParagraphProps = {};
+
+  // Width
+  if (hasAvatar && hasTitle) {
+    basicProps.width = '100%';
+  } else {
+    basicProps.width = '61%';
+  }
+
+  // Rows
+  if (!hasAvatar && hasTitle) {
+    basicProps.rows = 3;
+  } else {
+    basicProps.rows = 2;
+  }
+
+  return basicProps;
+}
+
+class Skeleton extends React.Component<SkeletonProps, any> {
+  static defaultProps: Partial<SkeletonProps> = {
+    prefixCls: 'ant-skeleton',
+    avatar: false,
+    title: true,
+    paragraph: true,
+  };
+
+  render() {
+    const {
+      loading, prefixCls, className, children,
+      avatar, title, paragraph, active,
+    } = this.props;
+
+    if (loading || !('loading' in this.props)) {
+      const hasAvatar = !!avatar;
+      const hasTitle = !!title;
+      const hasParagraph = !!paragraph;
+
+      // Avatar
+      let avatarNode;
+      if (hasAvatar) {
+        const avatarProps: SkeletonAvatarProps = {
+          ...getAvatarBasicProps(hasTitle, hasParagraph),
+          ...getComponentProps(avatar),
+        };
+
+        avatarNode = (
+          <div className={`${prefixCls}-header`}>
+            <Avatar {...avatarProps} />
+          </div>
+        );
+      }
+
+      let contentNode;
+      if (hasTitle || hasParagraph) {
+        // Title
+        let $title;
+        if (hasTitle) {
+          const titleProps: SkeletonTitleProps = {
+            ...getTitleBasicProps(hasAvatar, hasParagraph),
+            ...getComponentProps(title),
+          };
+
+          $title = (
+            <Title {...titleProps} />
+          );
+        }
+
+        // Paragraph
+        let paragraphNode;
+        if (hasParagraph) {
+          const paragraphProps: SkeletonParagraphProps = {
+            ...getParagraphBasicProps(hasAvatar, hasTitle),
+            ...getComponentProps(paragraph),
+          };
+
+          paragraphNode = (
+            <Paragraph {...paragraphProps} />
+          );
+        }
+
+        contentNode = (
+          <div className={`${prefixCls}-content`}>
+            {$title}
+            {paragraphNode}
+          </div>
+        );
+      }
+
+      const cls = classNames(
+        prefixCls,
+        className, {
+          [`${prefixCls}-with-avatar`]: hasAvatar,
+          [`${prefixCls}-active`]: active,
+        },
+      );
+
+      return (
+        <div className={cls}>
+          {avatarNode}
+          {contentNode}
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
+
+export default Skeleton;
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
new file mode 100644
index 0000000000..f515513827
--- /dev/null
+++ b/components/skeleton/index.zh-CN.md
@@ -0,0 +1,46 @@
+---
+category: Components
+subtitle: 加载占位图
+type: Data Entry
+title: Skeleton
+cols: 1
+---
+
+在需要等待加载内容的位置提供一个占位图。
+
+## 何时使用
+
+- 网络较慢，需要长时间等待加载处理的情况下。
+- 图文信息内容较多的列表/卡片中。
+
+## API
+
+### Skeleton
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false |
+| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
+| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
+| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
+| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
+
+### SkeletonAvatarProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| size | 设置头像占位图的大小 | Enum{ 'large', 'small', 'default' } | - |
+| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
+
+### SkeletonTitleProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 设置标题占位图的宽度 | number \| string | - |
+
+### SkeletonParagraphProps
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rows | 设置段落占位图的行数 | number | - |
+| width | 设置标题占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |
diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less
new file mode 100644
index 0000000000..b2e0ec93e6
--- /dev/null
+++ b/components/skeleton/style/index.less
@@ -0,0 +1,113 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@skeleton-prefix-cls: ~"@{ant-prefix}-skeleton";
+@skeleton-avatar-prefix-cls: ~"@{skeleton-prefix-cls}-avatar";
+@skeleton-title-prefix-cls: ~"@{skeleton-prefix-cls}-title";
+@skeleton-paragraph-prefix-cls: ~"@{skeleton-prefix-cls}-paragraph";
+
+@skeleton-to-color: shade(@skeleton-color, 5%);
+
+.@{skeleton-prefix-cls} {
+  display: table;
+  width: 100%;
+
+  &-header {
+    display: table-cell;
+    vertical-align: top;
+    padding-right: 16px;
+
+    // Avatar
+    .@{skeleton-avatar-prefix-cls} {
+      display: inline-block;
+      vertical-align: top;
+      background: @skeleton-color;
+
+      .avatar-size(@avatar-size-base);
+
+      &-lg {
+        .avatar-size(@avatar-size-lg);
+      }
+
+      &-sm {
+        .avatar-size(@avatar-size-sm);
+      }
+    }
+  }
+
+  &-content {
+    display: table-cell;
+    vertical-align: top;
+    width: 100%;
+
+    // Title
+    .@{skeleton-title-prefix-cls} {
+      margin-top: 16px;
+      height: 16px;
+      width: 100%;
+      background: @skeleton-color;
+
+      + .@{skeleton-paragraph-prefix-cls} {
+        margin-top: 24px;
+      }
+    }
+
+    // paragraph
+    .@{skeleton-paragraph-prefix-cls} {
+      > li {
+        height: 16px;
+        background: @skeleton-color;
+
+        + li {
+          margin-top: 16px;
+        }
+      }
+    }
+  }
+
+  &-with-avatar &-content {
+    // Title
+    .@{skeleton-title-prefix-cls} {
+      margin-top: 12px;
+
+      + .@{skeleton-paragraph-prefix-cls} {
+        margin-top: 28px;
+      }
+    }
+  }
+
+  // With active animation
+  &.@{skeleton-prefix-cls}-active {
+    & .@{skeleton-prefix-cls}-content {
+      .@{skeleton-title-prefix-cls},
+      .@{skeleton-paragraph-prefix-cls} > li {
+        .skeleton-color();
+      }
+    }
+  }
+}
+
+.avatar-size(@size) {
+  width: @size;
+  height: @size;
+  line-height: @size;
+
+  &.@{skeleton-avatar-prefix-cls}-circle {
+    border-radius: 50%;
+  }
+}
+
+.skeleton-color() {
+  background: linear-gradient(90deg, @skeleton-color 25%, @skeleton-to-color 37%, @skeleton-color 63%);
+  animation: ~"@{skeleton-prefix-cls}-loading" 1.4s ease infinite;
+  background-size: 400% 100%;
+}
+
+@keyframes ~"@{skeleton-prefix-cls}-loading" {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx
new file mode 100644
index 0000000000..3a3ab0de59
--- /dev/null
+++ b/components/skeleton/style/index.tsx
@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 81625aa2f0..c65b0b65a1 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -484,6 +484,10 @@
 @collapse-content-padding:            @padding-md;
 @collapse-content-bg:                 @component-background;
 
+// Skeleton
+// ---
+@skeleton-color:                      #f2f2f2;
+
 // Message
 // ---
 @message-notice-content-padding:      10px 16px;
diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap
index 1f82a35b7c..d0acf60bcc 100644
--- a/tests/__snapshots__/index.test.js.snap
+++ b/tests/__snapshots__/index.test.js.snap
@@ -41,6 +41,7 @@ Array [
   "Rate",
   "Row",
   "Select",
+  "Skeleton",
   "Slider",
   "Spin",
   "Steps",

From 044982ddb77b2c312b2243ab598647100fb7e505 Mon Sep 17 00:00:00 2001
From: Cang Ta <hoksilato176@gmail.com>
Date: Thu, 23 Aug 2018 13:58:37 +0700
Subject: [PATCH 30/36] Remove duplicate `theme` property

---
 components/layout/index.en-US.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 8abf63356e..7caf7c39f1 100644
--- a/components/layout/index.en-US.md
+++ b/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

From 500ef62638868ef332b090b6d6ae701bb91c79be Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 23 Aug 2018 20:38:56 +0800
Subject: [PATCH 31/36] fix
 https://github.com/ant-design/ant-design/issues/11423. TreeNode can accept
 custom prop

---
 components/tree/Tree.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
index aa3da79642..c334bfb822 100644
--- a/components/tree/Tree.tsx
+++ b/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, {}> { }

From e3aa2aaa84ec6553ae6f23fb528ae45f00b9aee2 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 23 Aug 2018 21:14:16 +0800
Subject: [PATCH 32/36] fix submenu cannot hover

---
 components/menu/style/index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index d9ff7d021c..6a9fa764ce 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -180,7 +180,7 @@
       border-radius: @border-radius-base;
       z-index: @zindex-dropdown;
 
-      &:after {
+      &:before {
         position: absolute;
         top: -7px;
         left: -6px;

From 68959b9a4f86847d6e78195ad21fbe509b78c836 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 23 Aug 2018 23:14:26 +0800
Subject: [PATCH 33/36] site: update yuque description

---
 site/theme/zh-CN.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
index dd1dcf85b3..7333ae851d 100644
--- a/site/theme/zh-CN.js
+++ b/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': '知乎专栏',

From 62bacb09bfcbd3da4ab37179d35aedfbfed83e12 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 24 Aug 2018 12:11:44 +0800
Subject: [PATCH 34/36] Fix wave render error in jest, close #11868

---
 components/_util/wave.tsx                 | 4 +++-
 components/button/__tests__/index.test.js | 8 ++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 9869cb9d83..7a00f4598f 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -50,7 +50,9 @@ export default class Wave extends React.Component<{insertExtraNode?: boolean}> {
   }
 
   bindAnimationEvent = (node: HTMLElement) => {
-    if (node.getAttribute('disabled') ||
+    if (!node ||
+        !node.getAttribute ||
+        node.getAttribute('disabled') ||
         node.className.indexOf('disabled') >= 0) {
       return;
     }
diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
index d6e2542294..73fb645047 100644
--- a/components/button/__tests__/index.test.js
+++ b/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,13 @@ describe('Button', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('mount correctly', () => {
+    const wrapper = mount(
+      <Button>Follow</Button>
+    );
+    expect(() => renderer.create(wrapper).toJSON()).not.toThrow();
+  });
+
   it('renders Chinese characters correctly', () => {
     const wrapper = render(
       <Button>按钮</Button>

From a54d06eb6f4b7eb50570fe379702377b9fddf9aa Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 24 Aug 2018 15:12:31 +0800
Subject: [PATCH 35/36] fix test case in react 15

---
 components/button/__tests__/index.test.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
index 73fb645047..38930a6102 100644
--- a/components/button/__tests__/index.test.js
+++ b/components/button/__tests__/index.test.js
@@ -16,6 +16,9 @@ describe('Button', () => {
     const wrapper = mount(
       <Button>Follow</Button>
     );
+    if (process.env.REACT === '15') {
+      return;
+    }
     expect(() => renderer.create(wrapper).toJSON()).not.toThrow();
   });
 

From 13e1ac55cd79e23ade4528d991691f2771c90ca4 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 24 Aug 2018 15:36:41 +0800
Subject: [PATCH 36/36] Fix broken ci of steps

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 766bc61e0f..ab5d79cf52 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "rc-rate": "~2.4.0",
     "rc-select": "~8.1.1",
     "rc-slider": "~8.6.0",
-    "rc-steps": "~3.2.0",
+    "rc-steps": "~3.2.1",
     "rc-switch": "~1.6.0",
     "rc-table": "~6.2.0",
     "rc-tabs": "~9.3.3",