bump 2.7.4

typo stopPreventDefault -> stopPropagation (#5093 )
* typo stopPreventDefault -> stopPropagation * remove
2026-02-10 03:19:20 +08:00 · 2017-02-28 22:03:54 +08:00 · 2017-02-28 21:53:30 +08:00 · 2017-02-28 21:53:22 +08:00 · 2017-02-28 21:52:56 +08:00 · 2017-02-28 21:52:22 +08:00
492 changed files with 10397 additions and 10373 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,4 +3,3 @@ components/**/*.jsx
 !.eslintrc.js
 !components/*/__tests__/*
 !components/*/demo/*
-!components/*/style/*
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -36,7 +36,6 @@ const eslintrc = {
    'consistent-return': 0,
    'no-redeclare': 0,
    'react/require-extension': 0,
-    'react/jsx-indent': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-a11y/anchor-has-content': 0,
    'react/no-danger': 0,
@@ -57,7 +56,6 @@ if (process.env.RUN_ENV === 'DEMO') {
    'eol-last': 0,
    'prefer-rest-params': 0,
    'react/no-multi-comp': 0,
-    'react/prefer-es6-class': 0,
    'jsx-a11y/href-no-hash': 0,
    'import/newline-after-import': 0,
  });
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,12 +1,12 @@
 <!-- Issue Template -->

 <!--
-antd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足够精力提供此类咨询服务：
+亲爱的中文用户请注意：

-1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)
-2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
-
-如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。
+1. 官方 issue 用于报告 bug 和讨论需求。用法咨询类问题建议到 https://segmentfault.com/t/antd 上提问，目前社区没有足够精力提供此类服务，感谢您的理解。
+2. 建议使用英文进行提问，这样你的问题可以被更多的人阅读和回答。如果表达上较复杂，英文标题加中文描述也是可选的方案。
+3. 报告 BUG 时请务必按照下列格式书写，并尽可能提供源代码、复现步骤、复现演示、GIF 演示等。我们和你一样都希望尽快解决问题，请不要浪费时间在互相追问上。
+4. 如果需要粘贴源码，尽量避免截图并注意代码格式。关于如何在 Markdown 中书写代码可以参考：https://segmentfault.com/markdown
 -->

 #### Environment(required)
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -3,6 +3,7 @@
  "rules": {
    "at-rule-empty-line-before": null,
    "at-rule-name-space-after": null,
+    "comment-empty-line-before": null,
    "declaration-bang-space-before": null,
    "declaration-empty-line-before": null,
    "function-comma-newline-after": null,
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -17,6 +17,79 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi

 ---

+## 2.7.4
+
+`2017-02-28`
+
+- Fix TreeSelect cannot display bug. [#5092](https://github.com/ant-design/ant-design/issues/5092)
+- Fix Anchor `e.stopPreventDefault is not a function` error. [#5080](https://github.com/ant-design/ant-design/issues/5080)
+- Fix some detail styles of Input, Cascader, Upload.
+
+## 2.7.3
+
+`2017-02-25`
+
+- Unify demo code to ES6 class. [#4878](https://github.com/ant-design/ant-design/issues/4878)
+- TypeScript
+  - Fix that `Cannot find module '../../package.json'` error. [#4935](https://github.com/ant-design/ant-design/issues/4935)
+  - Fix definitions of Table, RangePicker and Upload.
+- Fix lack of event argument for Modal `onOk` `afterClose` and Popconfirm `onConfirm` `onCancel`. [#4787](https://github.com/ant-design/ant-design/issues/4787)
+- Improve animation of Menu[inline] and Collapse.
+- Improve Checkbox and Radio vertical align style.
+- Table
+  - Fix misplace header when fix column. [#4936](https://github.com/ant-design/ant-design/issues/4936)
+  - Fix not clearing float issue. [#4945](https://github.com/ant-design/ant-design/issues/4945)
+  - Fix submenu of filter. [#4975](https://github.com/ant-design/ant-design/issues/4975)
+  - Fix that filterDropdown of fixed column cannot be interacted with. [#5010](https://github.com/ant-design/ant-design/issues/5010)
+  - Fix that arguments of `pagination.onChange` do not match Pagination `onChange`.
+  - Fix that table loading animation is not smoothing. [#4934](https://github.com/ant-design/ant-design/issues/4934)
+- Improve multiple message display. [#3543](https://github.com/ant-design/ant-design/issues/3543)
+- Fix Carousel autoplay not working after resize window. [#2550](https://github.com/ant-design/ant-design/issues/2550)
+- Fix that controlled InputNumber cannot input number like `1.01` `1.001`. [#5012](https://github.com/ant-design/ant-design/issues/5012)
+- Improve Button loading switching.[#4913](https://github.com/ant-design/ant-design/issues/4913)
+- Fix Dropdown selected menu style and `Menu[theme="dark"]` style. [#5013](https://github.com/ant-design/ant-design/issues/5013) [#4903](https://github.com/ant-design/ant-design/issues/4903)
+- Fix Menu submenu `z-index` issue. [#4937](https://github.com/ant-design/ant-design/issues/4937)
+- Fix that DatePicker and RangePicker width cannot be reset below `300px` issue. [#4920](https://github.com/ant-design/ant-design/issues/4920)
+- Fix style of Spin nested in Spin. [#4971](https://github.com/ant-design/ant-design/issues/4971)
+- Fix that lack of Button style when import Popconfirm by babel-plugin-import.
+- Fix that less variables cannot work on circle Progress. [#5002](https://github.com/ant-design/ant-design/issues/5002)
+- Fix falsy children of Breadcrumb. [#5015](https://github.com/ant-design/ant-design/issues/5015)
+- Fix blinking tooltip of Slider. [#5003](https://github.com/ant-design/ant-design/issues/5003)
+- Fix that Transfer disabled option can be moved. [#4981](https://github.com/ant-design/ant-design/pull/4981) [@tianlizhao](https://github.com/tianlizhao)
+- Documentation
+  - Fix and improve site for mobile devices.
+  - Improve 1.x to 2.x compatibility instruction.
+
+## 2.7.2
+
+`2017-02-17`
+
+- Fix that `antd.version` doesn't work as expected. [#4844](https://github.com/ant-design/ant-design/issues/4844)
+- Fix that dist files don't include locales. [#4910](https://github.com/ant-design/ant-design/pull/4910)
+- Fix that disabled option is selectable in search mode of Cascader. [#4699](https://github.com/ant-design/ant-design/issues/4699)
+- **Button**
+  - Fix click animation of `Button[type=danger]`.
+  - Fix broken style with `loading`. [#4875](https://github.com/ant-design/ant-design/issues/4875)
+- **Menu**
+  - Fix that `openKeys` should be controlled property in `vertical` mode. [#4876](https://github.com/ant-design/ant-design/issues/4876)
+  - Fix selected animation of Menu.Item.
+  - Fix broken style of Menu.SubMenu. [#4906](https://github.com/ant-design/ant-design/issues/4906)
+- **Table**
+  - Fix broken style of table which use small size and fixed header. [#4850](https://github.com/ant-design/ant-design/issues/4850)
+  - Fix placeholder style. [#4851](https://github.com/ant-design/ant-design/pull/4851)
+  - Simplify DOM structure. [#4868](https://github.com/ant-design/ant-design/issues/4868)
+- Fix that Radio should support number `0` as children. [#4874](https://github.com/ant-design/ant-design/issues/4874) [@HQidea](https://github.com/HQidea)
+- Fix that RangePicker should work with `style.width` which is small than 300. [#4920](https://github.com/ant-design/ant-design/issues/4920)
+- Fix CSS compile error caused by Spin. [#4915](https://github.com/ant-design/ant-design/issues/4915)
+- Fix that Tooltip should work with disabled button in Chrome. [#4865](https://github.com/ant-design/ant-design/pull/4865)
+- Fix UX of Tree while dragging. [#4858](https://github.com/ant-design/ant-design/issues/4858)
+- Fix failed style of Upload. [#4810](https://github.com/ant-design/ant-design/issues/4810)
+- Fix that `Menu[vertical]`'s SubMenu cannot popup in Layout.Sider. [#4890](https://github.com/ant-design/ant-design/issues/4890)
+- Improve animation of Button and `Badge[status=processing]`.
+
+![Badge animation](https://camo.githubusercontent.com/6874b2333f2fac3fac346404c6e70684e4dafc1a/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f73516b72756c716346734b4e54785158615971512e676966)
+![Button animation](https://camo.githubusercontent.com/3963d12b45de4f522c2799361dbc3177e7bd93d1/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f46624b776d636f766d795364666c557468494e522e676966)
+
 ## 2.7.1

 `2017-02-10`
@@ -30,23 +103,20 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
  - Fix the wrong size. [#4766](https://github.com/ant-design/ant-design/issues/4766)
  - Fix adding error character automatically. [#4778](https://github.com/ant-design/ant-design/issues/4778)
 - **Dropdown** Add the documentation and demo about positioning of Dropdown menus. [#4811](https://github.com/ant-design/ant-design/issues/4811)
- **Grid** Delete the useless class in non-flex mode. [#4784](https://github.com/ant-design/ant-design/pull/4784) [@chikara-chan](https://github.com/chikara-chan)
- **Icon** Unified naming style(original names remain valid while new names been added). [#4758](https://github.com/ant-design/ant-design/issues/4758)
 - **Layout** Improve Sider's animation effect. [#4752](https://github.com/ant-design/ant-design/issues/4752)
 - **LocaleProvider** Fix issues with the new Swedish locale provider. [pull-4762](https://github.com/ant-design/ant-design/pull/4762) [@JesperWe](https://github.com/JesperWe)
 - **RangePicker** Fix the overlapping problem about the date icon. [#4783](https://github.com/ant-design/ant-design/issues/4783) [@zhenzong](https://github.com/zhenzong)
 - **Table**
-  - Support `size='middle'` 。[#4819](https://github.com/ant-design/ant-design/pull/4819) [@warrenseymour](https://github.com/warrenseymour)
+  - Add the missing value 'middle' for size definition. [#4819](https://github.com/ant-design/ant-design/pull/4819) [@warrenseymour](https://github.com/warrenseymour)
  - Fix controlled filter does not work with JSX style. [#4759](https://github.com/ant-design/ant-design/issues/4759)
  - Fix switch pagination problem. [#4779](https://github.com/ant-design/ant-design/issues/4779)
-  - Fix performance issues under IE11. [#4522](https://github.com/ant-design/ant-design/issues/4522)
- **Tabs** Fix content missing problem since the second tab pane. [#4795](https://github.com/ant-design/ant-design/issues/4795)
- **rc-pagination** Upgrade to ~1.7.0, support showLessItems, and add pageSize as onChange's second argument.
+- **Tabs** Fix content missing problem since the second tab pane under IE9. [#4795](https://github.com/ant-design/ant-design/issues/4795)
+- **rc-pagination** Upgrade to ~1.7.0, add pageSize as onChange's second argument.
 - **Global optimization**
  - Make some bugfixes and optimizations about documentation、link and style.
  - Use stylelint instead of lesslint, and fix some lint issues. [#2179](https://github.com/ant-design/ant-design/issues/2179)
  - Unify border radius to 4px. [#4772](https://github.com/ant-design/ant-design/issues/4772)
-  - Support  `import { version } from 'antd'` . [#4751](https://github.com/ant-design/ant-design/pull/4751)
+  - Support `import { version } from 'antd'`. [#4751](https://github.com/ant-design/ant-design/pull/4751)
 - **Site**
  - Add default locale looking-up in Home Page. [#4552](https://github.com/ant-design/ant-design/issues/4552)
  - Can search with Google. [#4814](https://github.com/ant-design/ant-design/issues/4814)
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -10,13 +10,86 @@ timeline: true
 #### 发布周期

 * patch 版本：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
-* minor 版本：每月发布一个带有新特性的版本。
+* minor 版本：每月发布一个带有新特性的向下兼容的版本。
 * 大版本号：含有破坏性更新和新特性，不在发布周期内。

 如果需要查看 `2.0.0` 之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md)。

 ---

+## 2.7.4
+
+`2017-02-28`
+
+- 修复 TreeSelect 多选框无法展现的问题。[#5092](https://github.com/ant-design/ant-design/issues/5092)
+- 修复 Anchor 的 `e.stopPreventDefault is not a function` 的报错。[#5080](https://github.com/ant-design/ant-design/issues/5080)
+- 修复 Input、Cascader、Upload 的一些样式细节。
+
+## 2.7.3
+
+`2017-02-25`
+
+- 演示代码统一为 ES6 class 的写法。[#4878](https://github.com/ant-design/ant-design/issues/4878)
+- TypeScript
+  - 修复 `Cannot find module '../../package.json'` 的问题。[#4935](https://github.com/ant-design/ant-design/issues/4935)
+  - 补充了 Table、RangePicker 和 Upload 的部分属性定义。
+- 修复了 Modal `onOk` `afterClose` 和 Popconfirm `onConfirm` `onCancel` 缺少点击 event 参数的问题。 [#4787](https://github.com/ant-design/ant-design/issues/4787)
+- 优化 Menu[inline] 和 Collapse 的折叠动画效果。
+- 优化了 Checkbox 和 Radio 的垂直对齐样式。
+- Table
+  - 修复固定列时列头样式错位的问题。[#4936](https://github.com/ant-design/ant-design/issues/4936)
+  - 修复未清除浮动导致排版错位的问题。[#4945](https://github.com/ant-design/ant-design/issues/4945)
+  - 修复筛选子菜单无法显示的问题。[#4975](https://github.com/ant-design/ant-design/issues/4975)
+  - 修复固定列上的自定义筛选菜单无法交互的问题。[#5010](https://github.com/ant-design/ant-design/issues/5010)
+  - 修正 `pagination.onChange` 和 Pagination 的 `onChange` 参数不一致的问题。
+  - 修复加载状态切换不柔和的问题。[#4934](https://github.com/ant-design/ant-design/issues/4934)
+- 优化多个 message 展示重叠的问题。[#3543](https://github.com/ant-design/ant-design/issues/3543)
+- 修复 Carousel 在改变浏览器窗口大小后 autoplay 会失效的问题。[#2550](https://github.com/ant-design/ant-design/issues/2550)
+- 修复了 InputNumber 在受控模式（Form 表单内）无法输入 `1.01` `1.001` 等数字的问题。[#5012](https://github.com/ant-design/ant-design/issues/5012)
+- 优化 Button 加载状态切换时的宽度抖动问题。[#4913](https://github.com/ant-design/ant-design/issues/4913)
+- 修复 Dropdown 的菜单选中样式和 `Menu[theme="dark"]` 样式无效的问题。[#5013](https://github.com/ant-design/ant-design/issues/5013) [#4903](https://github.com/ant-design/ant-design/issues/4903)
+- 修复 Menu 的弹出菜单的 `z-index` 问题。[#4937](https://github.com/ant-design/ant-design/issues/4937)
+- 修复 DatePicker 和 RangePicker 无法设置小于 300px 的宽度的问题。[#4920](https://github.com/ant-design/ant-design/issues/4920)
+- 修复 Spin 内嵌 Spin 的样式问题。[#4971](https://github.com/ant-design/ant-design/issues/4971)
+- 修复了使用 babel-plugin-import 引入 Popconfirm 时，未引入 Button 样式的问题。
+- 修复了样式变量在 Progress `type="circle"` 上未生效的问题。[#5002](https://github.com/ant-design/ant-design/issues/5002)
+- 修复了 Breadcrumb 的 chilren 为 `null` 或 `undefined` 时报错的问题。[#5015](https://github.com/ant-design/ant-design/issues/5015)
+- 修复 Slider 的 tooltip 闪烁的问题。[#5003](https://github.com/ant-design/ant-design/issues/5003)
+- 修复了 Transfer 中 disabled 选项仍然可以被移动的问题。[#4981](https://github.com/ant-design/ant-design/pull/4981) [@tianlizhao](https://github.com/tianlizhao)
+- 文档
+  - 修复和优化了移动端的展现。
+  - 优化了 1.x 升级到 2.x 的不兼容改动文档。
+
+## 2.7.2
+
+`2017-02-17`
+
+- 修复 `antd.version` 无法正常使用的问题。 [#4844](https://github.com/ant-design/ant-design/issues/4844)
+- 修复 dist 文件没有 locales 的问题。 [#4910](https://github.com/ant-design/ant-design/pull/4910)
+- 修复 Cascader 搜索模式下可以选择已禁用选项的问题。 [#4699](https://github.com/ant-design/ant-design/issues/4699)
+- **Button**
+  - 修复 `Button[type=danger]` 的点击动画。
+  - 修复设置 `loading` 时的样式问题。 [#4875](https://github.com/ant-design/ant-design/issues/4875)
+- **Menu**
+  - 修复 `vertical` 模式下 `openKeys` 为受控属性。 [#4876](https://github.com/ant-design/ant-design/issues/4876)
+  - 修复 Menu.Item 选中时的动画问题。
+  - 修复 Menu.SubMenu 的样式问题。 [#4906](https://github.com/ant-design/ant-design/issues/4906)
+- **Table**
+  - 修复在混合使用固定表头和小尺寸时的样式问题。 [#4850](https://github.com/ant-design/ant-design/issues/4850)
+  - 修复无数据时的占位符样式问题。 [#4851](https://github.com/ant-design/ant-design/pull/4851)
+  - 精简了 DOM 结构。 [#4868](https://github.com/ant-design/ant-design/issues/4868)
+- 修复 Radio 组件 children 无法为数字 `0` 的问题。 [#4874](https://github.com/ant-design/ant-design/issues/4874) [@HQidea](https://github.com/HQidea)
+- 修复 RangePicker `style.width` 无法小于 300 的问题。 [#4920](https://github.com/ant-design/ant-design/issues/4920)
+- 修复 Spin 样式在打包时会导致编译错误的问题。 [#4915](https://github.com/ant-design/ant-design/issues/4915)
+- 修复 Chrome 下 Tooltip 无法在 disabled 的按钮上使用的问题。 [#4865](https://github.com/ant-design/ant-design/pull/4865)
+- 修复 Tree 节点在拖动时会导致整棵树抖动的问题。 [#4858](https://github.com/ant-design/ant-design/issues/4858)
+- 修复 Upload 上传失败的样式问题。 [#4810](https://github.com/ant-design/ant-design/issues/4810)
+- 修复 `Menu[vertical]` 和 Layout.Sider 配合使用时二级菜单无法弹出的问题。 [#4890](https://github.com/ant-design/ant-design/issues/4890)
+- 优化 Button、`Badge[status=processing]` 的动画。
+
+![Badge animation](https://camo.githubusercontent.com/6874b2333f2fac3fac346404c6e70684e4dafc1a/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f73516b72756c716346734b4e54785158615971512e676966)
+![Button animation](https://camo.githubusercontent.com/3963d12b45de4f522c2799361dbc3177e7bd93d1/68747470733a2f2f7a6f732e616c697061796f626a656374732e636f6d2f726d73706f7274616c2f46624b776d636f766d795364666c557468494e522e676966)
+
 ## 2.7.1

 `2017-02-10`
@@ -30,23 +103,20 @@ timeline: true
  - 修复了 size 问题。[#4766](https://github.com/ant-design/ant-design/issues/4766)
  - 修复了自动加入其他字符的问题。[#4778](https://github.com/ant-design/ant-design/issues/4778)
 - **Dropdown** 补充了之前缺失的弹出框位置设定相关的文档及示例。[#4811](https://github.com/ant-design/ant-design/issues/4811)
- **Grid** 去掉了非 flex 模式下栅格的无用 class。[#4784](https://github.com/ant-design/ant-design/pull/4784) [@chikara-chan](https://github.com/chikara-chan)
- **Icon** 统一了命名风格（添加了别名，原有命名依然有效）。[#4758](https://github.com/ant-design/ant-design/issues/4758)
 - **Layout** 修复了侧边布局动效不平滑的问题。[#4752](https://github.com/ant-design/ant-design/issues/4752)
 - **LocaleProvider** 修复了瑞典语相关问题。[pull-4762](https://github.com/ant-design/ant-design/pull/4762) [@JesperWe](https://github.com/JesperWe)
 - **RangePicker** 修复了图标与表单校验反馈图标重叠的问题。[#4783](https://github.com/ant-design/ant-design/issues/4783) [@zhenzong](https://github.com/zhenzong)
 - **Table**
-  - 支持 `size='middle'` 。[#4819](https://github.com/ant-design/ant-design/pull/4819) [@warrenseymour](https://github.com/warrenseymour)
+  - 修复了 size 定义里没有 'middle' 的问题。[#4819](https://github.com/ant-design/ant-design/pull/4819) [@warrenseymour](https://github.com/warrenseymour)
  - 修复过滤功能在 JSX 模式下不生效的问题。[#4759](https://github.com/ant-design/ant-design/issues/4759)
  - 修复分页跳转问题。[#4779](https://github.com/ant-design/ant-design/issues/4779)
-  - 修复IE11下的性能问题。[#4522](https://github.com/ant-design/ant-design/issues/4522)
 - **Tabs** 修复了在 IE9 中从第二个标签页起都显示空白的问题。[#4795](https://github.com/ant-design/ant-design/issues/4795)
- **rc-pagination** 升级至 ~1.7.0，支持 showLessItems，onChange 增加 pageSize 参数。
+- **rc-pagination** 升级至 ~1.7.0，onChange 增加 pageSize 参数。
 - **全局性优化**
  - 修复或优化了一些了文档，链接，样式细节。
  - 接入 stylelint 以替代 lesslint，修复一些 lint 问题。[#2179](https://github.com/ant-design/ant-design/issues/2179)
  - border-radius 统一为 4px。[#4772](https://github.com/ant-design/ant-design/issues/4772)
-  - 支持 `import { version } from 'antd'` 。[#4751](https://github.com/ant-design/ant-design/pull/4751)
+  - 支持 `import { version } from 'antd'`。[#4751](https://github.com/ant-design/ant-design/pull/4751)
 - **网站**
  - 首页自动选择语言。[#4552](https://github.com/ant-design/ant-design/issues/4552)
  - 接入 Google 作为文档的全文本搜索。[#4814](https://github.com/ant-design/ant-design/issues/4814)
@@ -112,10 +182,10 @@ timeline: true

 `2017-01-14`

-* 新增社区精选组件页面。[链接](/docs/react/recommendation-cn)
+* 新增社区精选组件页面。[链接](/docs/react/recommendation)
 * 修复一个内容过长导致 Layout 侧边布局错位的问题。[#4459](https://github.com/ant-design/ant-design/issues/4459)
 * 修复 Input.Search 输入框和图标错位的问题。[#4540](https://github.com/ant-design/ant-design/issues/4540)
-* 补充了一个自定义灰底样式的 Collapse 折叠面板的例子。[链接](/components/collapse-cn/#components-collapse-demo-custom)
+* 补充了一个自定义灰底样式的 Collapse 折叠面板的例子。[链接](/components/collapse/#components-collapse-demo-custom)
 * Table
  * 调大了 Table 选择框和展开按钮的列宽度。
  * 修复 `pagination` 属性切换后分页不可用的问题。[#4532](https://github.com/ant-design/ant-design/issues/4532)
@@ -471,9 +541,11 @@ timeline: true

 > 建议从 `1.x` 升级时，直接升级到 `2.x` 的最新版本。

-此版本有部分不兼容的改动，升级时确保修改相应的使用代码。
+> 建议在升级 antd 的过程中，每做完一次合理的修改并 review 和测试之后，就 git commit 一次，这样在误操作时能随时回滚到之前的版本

-* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。
+此版本有部分不兼容的改动，升级时确保修改相应的使用代码。另外由于人肉查找代码中的废弃用法过于低效，所以我们提供了 [antd-migration-helper](https://github.com/ant-design/antd-migration-helper) 用于扫描代码中的废弃用法。
+
+* 时间类组件的 `value` 和 `defaultValue` 不再支持 `String/Date` 类型，请使用 [moment](http://momentjs.com/)。需要对代码进行如下修改，可人手修改也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#time-related-value-to-moment) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。
  ```diff
  - <TimePicker defaultValue="12:08:23" />
  + <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
@@ -484,9 +556,16 @@ timeline: true
  - <Calendar defaultValue={new Date('2010-10-10')} />
  + <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')} />
  ```
-* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。你也可以参考这个 [commit](https://github.com/ant-design/ant-design/commit/4026221d451b246956983bb42140142d4a48b7d7) 来进行修改。
-
-  由于 `JSON.stringify(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
+* 时间类组件的 `onChange` 和 `onPanelChange` 及其他回调函数中为 `Date/GregorianCalendar` 类型的参数，均修改为 moment 类型，两者 API 有所不同，但功能基本一致，请对照 [moment 的 API 文档](http://momentjs.com/docs/) 和 [gregorian-calendar 的文档](https://github.com/yiminghe/gregorian-calendar) 进行修改。
+  1. 也可以参考这个 [commit](https://github.com/ant-design/ant-design/commit/4026221d451b246956983bb42140142d4a48b7d7) 来进行修改。
+  1. 也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#gergoriancalendar-to-moment) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。
+  ```diff
+  function disabledDate(date) {
+  - console.log(date.getTime());
+  + console.log(date.valueOf());
+  }
+  ```
+* 由于 `JSON.stringify(date: moment)` 返回的值会丢失时区设置，所以在提交前要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
  ```js
  handleSubmit() {
    const values = this.props.form.getFieldsValue();
@@ -495,9 +574,17 @@ timeline: true
    // 发送 data 到服务器
  }
  ```
-
 * 时间类组件与表单校验一起使用时，`type: 'date'` 改为 `type: 'object'`。
-* 时间类组件的 `format` 属性也发生了变化，从 [gregorian-calendar-format 的格式](https://github.com/yiminghe/gregorian-calendar-format#api) 变化为与 [moment 的格式](http://momentjs.com/docs/#/parsing/string-format/)，例如原来的 `yyyy-MM-dd` 将变为 `YYYY-MM-DD`。
+  ```diff
+  getFieldDecorator('time', {
+    rules: [{
+      required: true,
+  -   type: 'date',
+  +   type: 'object',
+    }],
+  })(...)
+  ```
+* 时间类组件的 `format` 属性也发生了变化，从 [gregorian-calendar-format 的格式](https://github.com/yiminghe/gregorian-calendar-format#api) 变化为与 [moment 的格式](http://momentjs.com/docs/#/parsing/string-format/)，例如原来的 `yyyy-MM-dd` 将变为 `YYYY-MM-DD`。可人手修改也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#time-related-value-to-moment) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。
 * Breadcrumb 移除 `linkRender` 和 `nameRender`，请使用 `itemRender`。
 * Menu 移除 `onClose` `onOpen`，请使用 `onOpenChange`。API 差异较大，请先研究 [demo](http://beta.ant.design/components/menu/#components-menu-demo-sider-current)。
 * Table 移除列分页功能，请使用 [固定列](http://ant.design/components/table/#components-table-demo-fixed-columns)。
@@ -505,7 +592,7 @@ timeline: true

 以下变化升级后旧代码仍然能正常运行，但是控制台会出现警告提示，建议按提示进行修改。

-* Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`：
+* Form 废弃 `getFieldProps`，请使用 `getFieldDecorator`。可人手修改也可用我们提供的 [codemod](https://github.com/ant-design/antd-codemod#getfieldprops-to-getfielddecorator) 脚本自动修改类似用法，但注意脚本不能覆盖所有情况，所以在运行脚本后仍然需要 review 和测试。

  ```diff
  -  <Input placeholder="text" {...getFieldProps('userName', { ... })} />
@@ -525,6 +612,8 @@ timeline: true
  }
  ```

+最后，由于时间类组件修改比较复杂，可能还需要深入业务逻辑，所以在项目比较赶的情况下，可以考虑使用 [antd-adapter](https://github.com/ant-design/antd-adapter) 适配为 `antd@1.x` 里面的用法，但不建议。
+
 ### 2.x Bug 修复

 * 修复 Dropdown.Button `disabled` 属性无效的问题。[#3070](https://github.com/ant-design/ant-design/issues/3070)
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -81,7 +81,7 @@ tsconfig.json
 - [React 基础组件](http://react-component.github.io/)
 - [移动端组件](http://mobile.ant.design)
 - [动效](https://motion.ant.design)
- [设计规范速查手册](https://os.alipayobjects.com/rmsportal/HTXUgPGkyyxEivE.png)
+- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
 - [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
 - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [社区贡献脚手架和范例](https://github.com/ant-design/ant-design/issues/129)
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ An enterprise-class UI design language and React-based implementation.

 ## Let's build a better antd together [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

-`antd` is an open source project, improvements are welcomed. If you are interested in contributing to `antd`, you can watch this repository, join in [discussion](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion), or try to implement some [features which have been accepted](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22).
+`antd` is an open source project, improvements are welcomed. If you are interested in contributing to `antd`, you can watch this repository, join in [discussion](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion), or try to implement some [features which have been accepted](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22). Actually, there are [many ways](https://opensource.guide/how-to-contribute/) to contribute.

 ## Install

--- a/components/tests/snapshots/index.test.js.snap
+++ b/components/tests/snapshots/index.test.js.snap
@@ -50,5 +50,6 @@ Array [
  "Tooltip",
  "Mention",
  "Upload",
+  "version",
 ]
 `;
--- a/components/_util/getRequestAnimationFrame.tsx
+++ b/components/_util/getRequestAnimationFrame.tsx
@@ -27,7 +27,6 @@ export default function getRequestAnimationFrame() {
 }

 export function cancelRequestAnimationFrame(id) {
-
  if (typeof window === 'undefined') {
    return null;
  }
--- a/components/_util/openAnimation.tsx
+++ b/components/_util/openAnimation.tsx
@@ -1,21 +1,37 @@
 import cssAnimation from 'css-animation';
+import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame';
+
+const reqAnimFrame = getRequestAnimationFrame();

 function animate(node, show, done) {
  let height;
+  let requestAnimationFrameId;
  return cssAnimation(node, 'ant-motion-collapse', {
    start() {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
+        node.style.opacity = 1;
      } else {
        height = node.offsetHeight;
        node.style.height = 0;
+        node.style.opacity = 0;
      }
    },
    active() {
-      node.style.height = `${show ? height : 0}px`;
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId);
+      }
+      requestAnimationFrameId = reqAnimFrame(() => {
+        node.style.height = `${show ? height : 0}px`;
+        node.style.opacity = show ? 1 : 0;
+      });
    },
    end() {
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId);
+      }
      node.style.height = '';
+      node.style.opacity = '';
      done();
    },
  });
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -13,7 +13,7 @@ title:

 The simplest usage.

-````__react
+````jsx
 import { Affix, Button } from 'antd';

 ReactDOM.render(
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -13,7 +13,7 @@ title:

 Callback with affixed state.

-````__react
+````jsx
 import { Affix, Button } from 'antd';

 ReactDOM.render(
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -13,7 +13,7 @@ title:

 Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).

-````__react
+````jsx
 import { Affix, Button } from 'antd';

 class Demo extends React.Component {
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -29,6 +29,8 @@ function getOffset(element: HTMLElement, target) {
      scrollTop - clientTop,
    left: elemRect.left - targetRect.left +
      scrollLeft - clientLeft,
+    width: elemRect.width,
+    height: elemRect.height,
  };
 }

@@ -138,14 +140,15 @@ export default class Affix extends React.Component<AffixProps, any> {
      (targetNode as Window).innerHeight || (targetNode as HTMLElement).clientHeight;
    if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
      // Fixed Top
+      const width = elemOffset.width;
      this.setAffixStyle(e, {
        position: 'fixed',
        top: targetRect.top + offsetTop,
        left: targetRect.left + elemOffset.left,
-        width: affixNode.offsetWidth,
+        width,
      });
      this.setPlaceholderStyle({
-        width: affixNode.offsetWidth,
+        width,
        height: affixNode.offsetHeight,
      });
    } else if (
@@ -154,14 +157,15 @@ export default class Affix extends React.Component<AffixProps, any> {
    ) {
      // Fixed Bottom
      const targetBottomOffet = targetNode === window ? 0 : (window.innerHeight - targetRect.bottom);
+      const width = elemOffset.width;
      this.setAffixStyle(e, {
        position: 'fixed',
        bottom: targetBottomOffet + offsetBottom,
        left: targetRect.left + elemOffset.left,
-        width: affixNode.offsetWidth,
+        width,
      });
      this.setPlaceholderStyle({
-        width: affixNode.offsetWidth,
+        width,
        height: affixNode.offsetHeight,
      });
    } else {
@@ -222,7 +226,7 @@ export default class Affix extends React.Component<AffixProps, any> {
      [this.props.prefixCls || 'ant-affix']: this.state.affixStyle,
    });

-    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
+    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
    return (
      <div {...props} style={placeholderStyle}>
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -13,7 +13,7 @@ title:

 When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.

-````__react
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -13,7 +13,7 @@ title:

 The simplest usage for short messages.

-````__react
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -13,7 +13,7 @@ title:

 To show close button.

-````__react
+````jsx
 import { Alert } from 'antd';

 const onClose = function (e) {
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@@ -13,7 +13,7 @@ title:

 Replace the default icon with customized text.

-````__react
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -13,7 +13,7 @@ title:

 Additional description for alert message.

-````__react
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(<div>
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -13,7 +13,7 @@ title:

 Decent icon make information more clear and more friendly.

-````__react
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(<div>
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -13,7 +13,7 @@ title:

 There are 4 types of Alert: `success`, `info`, `warning`, `error`.

-````__react
+````jsx
 import { Alert } from 'antd';

 ReactDOM.render(<div>
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -73,7 +73,6 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
    if (onClick) {
      onClick(href, this._component);
    } else {
-      e.stopPreventDefault();
      const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
      scrollToFn(href, this.props.offsetTop);
    }
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -13,7 +13,7 @@ title:

 The simplest usage.

-```__react
+```jsx
 import { Anchor } from 'antd';
 const { Link } = Anchor;

--- a/components/anchor/demo/fixed.md
+++ b/components/anchor/demo/fixed.md
@@ -13,7 +13,7 @@ title:

 Do not change state when page is scrolling.

-```__react
+```jsx
 import { Anchor } from 'antd';
 const { Link } = Anchor;

--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
@@ -85,6 +85,50 @@ exports[`test renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 </div>
 `;

+exports[`test renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
+<div
+  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
+  style="width:200px;">
+  <div
+    aria-autocomplete="list"
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="ant-select-selection
+              ant-select-selection--single"
+    role="combobox">
+    <div
+      class="ant-select-selection__rendered">
+      <div
+        class="ant-select-selection__placeholder"
+        style="display:block;user-select:none;-webkit-user-select:none;"
+        unselectable="unselectable">
+        try to type \`b\`
+      </div>
+      <ul>
+        <li
+          class="ant-select-search ant-select-search--inline">
+          <div
+            class="ant-select-search__field__wrap">
+            <input
+              class="ant-input ant-input ant-select-search__field"
+              type="text"
+              value="" />
+            <span
+              class="ant-select-search__field__mirror" />
+          </div>
+        </li>
+      </ul>
+    </div>
+    <span
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none;"
+      unselectable="unselectable">
+      <b />
+    </span>
+  </div>
+</div>
+`;
+
 exports[`test renders ./components/auto-complete/demo/options.md correctly 1`] = `
 <div
  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
@@ -128,3 +172,63 @@ exports[`test renders ./components/auto-complete/demo/options.md correctly 1`] =
  </div>
 </div>
 `;
+
+exports[`test renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
+<div
+  class="global-search-wrapper"
+  style="width:300px;">
+  <div
+    class="ant-select-lg ant-select-lg global-search ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
+    style="width:100%;">
+    <div
+      aria-autocomplete="list"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+                ant-select-selection--single"
+      role="combobox">
+      <div
+        class="ant-select-selection__rendered">
+        <div
+          class="ant-select-selection__placeholder"
+          style="display:block;user-select:none;-webkit-user-select:none;"
+          unselectable="unselectable">
+          input here
+        </div>
+        <ul>
+          <li
+            class="ant-select-search ant-select-search--inline">
+            <div
+              class="ant-select-search__field__wrap">
+              <span
+                class="ant-input-preSuffix-wrapper">
+                <input
+                  class="ant-input ant-input ant-select-search__field"
+                  type="text"
+                  value="" />
+                <span
+                  class="ant-input-suffix">
+                  <button
+                    class="ant-btn ant-btn-primary ant-btn-lg search-btn"
+                    type="button">
+                    <i
+                      class="anticon anticon-search" />
+                  </button>
+                </span>
+              </span>
+              <span
+                class="ant-select-search__field__mirror" />
+            </div>
+          </li>
+        </ul>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none;"
+        unselectable="unselectable">
+        <b />
+      </span>
+    </div>
+  </div>
+</div>
+`;
--- a/components/auto-complete/demo/antd.md
+++ b/components/auto-complete/demo/antd.md
@@ -13,20 +13,19 @@ title:

 Customize Input Component

-````__react
+````jsx
 import { AutoComplete } from 'antd';

 function onSelect(value) {
  console.log('onSelect', value);
 }

-const Complete = React.createClass({
-  getInitialState() {
-    return {
-      dataSource: [],
-    };
-  },
-  handleChange(value) {
+class Complete extends React.Component {
+  state = {
+    dataSource: [],
+  }
+
+  handleChange = (value) => {
    this.setState({
      dataSource: !value ? [] : [
        value,
@@ -34,10 +33,12 @@ const Complete = React.createClass({
        value + value + value,
      ],
    });
-  },
-  handleKeyPress(ev) {
+  }
+
+  handleKeyPress = (ev) => {
    console.log('handleKeyPress', ev);
-  },
+  }
+
  render() {
    const { dataSource } = this.state;
    return (
@@ -48,11 +49,11 @@ const Complete = React.createClass({
        onChange={this.handleChange}
        placeholder="input here"
      >
-        <textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }}/>
+        <textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }} />
      </AutoComplete>
    );
-  },
-});
+  }
+}

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -13,20 +13,19 @@ title:

 Basic Usage, set datasource of autocomplete with `dataSource` property.

-````__react
+````jsx
 import { AutoComplete } from 'antd';

 function onSelect(value) {
  console.log('onSelect', value);
 }

-const Complete = React.createClass({
-  getInitialState() {
-    return {
-      dataSource: [],
-    };
-  },
-  handleChange(value) {
+class Complete extends React.Component {
+  state = {
+    dataSource: [],
+  }
+
+  handleChange = (value) => {
    this.setState({
      dataSource: !value ? [] : [
        value,
@@ -34,7 +33,8 @@ const Complete = React.createClass({
        value + value + value,
      ],
    });
-  },
+  }
+
  render() {
    const { dataSource } = this.state;
    return (
@@ -46,8 +46,8 @@ const Complete = React.createClass({
        placeholder="input here"
      />
    );
-  },
-});
+  }
+}

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@@ -0,0 +1,33 @@
+---
+order: 3
+title:
+  zh-CN: 不区分大小写
+  en-US: Non-case-sensitive AutoComplete
+---
+
+## zh-CN
+
+不区分大小写的 AutoComplete
+
+## en-US
+
+A non-case-sensitive AutoComplete
+
+````jsx
+import { AutoComplete } from 'antd';
+
+const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
+
+function Complete() {
+  return (
+    <AutoComplete
+      style={{ width: 200 }}
+      dataSource={dataSource}
+      placeholder="try to type `b`"
+      filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+    />
+  );
+}
+
+ReactDOM.render(<Complete />, mountNode);
+````
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@@ -13,18 +13,17 @@ title:

 You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。

-````__react
+````jsx
 import { AutoComplete } from 'antd';

 const Option = AutoComplete.Option;

-const Complete = React.createClass({
-  getInitialState() {
-    return {
-      result: [],
-    };
-  },
-  handleChange(value) {
+class Complete extends React.Component {
+  state = {
+    result: [],
+  }
+
+  handleChange = (value) => {
    let result;
    if (!value || value.indexOf('@') >= 0) {
      result = [];
@@ -32,7 +31,8 @@ const Complete = React.createClass({
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({ result });
-  },
+  }
+
  render() {
    const { result } = this.state;
    const children = result.map((email) => {
@@ -47,8 +47,8 @@ const Complete = React.createClass({
        {children}
      </AutoComplete>
    );
-  },
-});
+  }
+}

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -0,0 +1,145 @@
+---
+order: 4
+title:
+  zh-CN: 查询模式 - 不确定类目
+  en-US: Lookup-Patterns - Uncertain Category
+---
+
+## zh-CN
+
+[查询模式: 不确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
+
+## en-US
+
+Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
+Basic Usage, set datasource of autocomplete with `dataSource` property.
+
+````jsx
+import { Icon, Button, Input, AutoComplete } from 'antd';
+const Option = AutoComplete.Option;
+
+function onSelect(value) {
+  console.log('onSelect', value);
+}
+
+function getRandomInt(max, min = 0) {
+  return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
+}
+
+function searchResult(query) {
+  return (new Array(getRandomInt(5))).join('.').split('.')
+    .map((item, idx) => ({
+      query,
+      category: `${query}${idx}`,
+      count: getRandomInt(200, 100),
+    }));
+}
+
+function renderOption(item) {
+  return (
+    <Option key={item.category} text={item.category}>
+      {item.query} 在
+      <a
+        href={`https://s.taobao.com/search?q=${item.query}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {item.category}
+      </a>
+      区块中
+      <span className="global-search-item-count">约 {item.count} 个结果</span>
+    </Option>
+  );
+}
+
+class Complete extends React.Component {
+  state = {
+    dataSource: [],
+  }
+
+  handleChange = (value) => {
+    if (value) {
+      this.setState({
+        dataSource: searchResult(value),
+      });
+    }
+  }
+
+  render() {
+    const { dataSource } = this.state;
+    return (
+      <div className="global-search-wrapper" style={{ width: 300 }}>
+        <AutoComplete
+          className="global-search"
+          size="large"
+          style={{ width: '100%' }}
+          dataSource={dataSource.map(renderOption)}
+          onSelect={onSelect}
+          onChange={this.handleChange}
+          placeholder="input here"
+          optionLabelProp="text"
+        >
+          <Input
+            suffix={(
+              <Button className="search-btn" size="large" type="primary">
+                <Icon type="search" />
+              </Button>
+            )}
+          />
+        </AutoComplete>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Complete />, mountNode);
+````
+
+````css
+.global-search-wrapper {
+  padding-right: 50px;
+}
+
+.global-search {
+  width: 100%;
+}
+
+.global-search.ant-select-auto-complete .ant-input {
+  height: 40px;
+  padding: 11px 12px;
+}
+
+.global-search.ant-select-auto-complete .ant-select-selection__placeholder {
+  top: 20px;
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.global-search .search-btn {
+  font-size: 18px;
+}
+
+.global-search.ant-select-auto-complete .ant-select-selection--single {
+  margin-right: -50px;
+}
+
+.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) {
+  padding-right: 62px;
+}
+
+.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix {
+  right: 0;
+}
+
+.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button {
+  padding-top: 5px;
+  padding-bottom: 6px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.global-search-item-count {
+ position: absolute;
+ right: 16px;
+}
+````
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 type: Data Entry
-cols: 1
+cols: 2
 title: AutoComplete
 ---

@@ -17,7 +17,6 @@ When there is a need for autocomplete functionality.
 const dataSource = ['12345', '23456', '34567'];
 <AutoComplete dataSource={dataSource} />
 ```
-Since `AutoComplete` is based on `Select`, so besides the following API, `AutoComplete` has the same API as `Select`.

 | Property           | Description                             |  Type | Default |
 |----------------|----------------------------------|------------|--------|
@@ -28,6 +27,8 @@ Since `AutoComplete` is based on `Select`, so besides the following API, `AutoCo
 | onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
 | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | -   |
 | disabled | Whether disabled select | boolean | false |
+| defaultActiveFirstOption | Whether active first option by default | boolean | true |
 | placeholder | placeholder of input | string | - |
 | children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> /  Array<React.ReactElement<OptionProps>> | - |
 | children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
+| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true     |
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -39,17 +39,18 @@ export interface AutoCompleteProps extends AbstractSelectProps {
 }

 class InputElement extends React.Component<any, any> {
-  private ele: Element;
+  private ele: HTMLInputElement;
+
  focus = () => {
-    (findDOMNode(this.ele) as HTMLInputElement).focus();
+    this.ele.focus ? this.ele.focus() : (findDOMNode(this.ele) as HTMLInputElement).focus();
  }
  blur = () => {
-    (findDOMNode(this.ele) as HTMLInputElement).blur();
+    this.ele.blur ? this.ele.blur() : (findDOMNode(this.ele) as HTMLInputElement).blur();
  }
  render() {
    return React.cloneElement(this.props.children, {
      ...this.props,
-      ref: ele => this.ele = ele,
+      ref: ele => this.ele = (ele as HTMLInputElement),
    }, null);
  }
 }
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -2,7 +2,7 @@
 category: Components
 subtitle: 自动完成
 type: Data Entry
-cols: 1
+cols: 2
 title: AutoComplete
 ---

@@ -18,7 +18,6 @@ title: AutoComplete
 const dataSource = ['12345', '23456', '34567'];
 <AutoComplete dataSource={dataSource} />
 ```
-因为 `AutoComplete` 是基于 `Select` 封装的，所以除了以下 API 外，`AutoComplete` 跟 `Select` 拥有一样的 API。

 | 参数           | 说明                             | 类型        | 默认值 |
 |----------------|----------------------------------|------------|---------|
@@ -29,7 +28,9 @@ const dataSource = ['12345', '23456', '34567'];
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
 | onSelect | 被选中时调用，参数为选中项的 value 值	| function(value, option)	| 无 |
 | disabled | 是否禁用 | boolean | false |
+| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
 | placeholder | 输入框提示 | string | - |
 | children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
 | children (自定义输入框) | 自定义输入框 |  HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
+| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true     |
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -13,7 +13,7 @@ title:

 The most basic usage.

-````__react
+````jsx
 import { BackTop } from 'antd';

 ReactDOM.render(
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -14,7 +14,7 @@ title:
 You can customize the style of the button, just note the size limit: no more than `40px * 40px`.


-````__react
+````jsx
 import { BackTop } from 'antd';

 ReactDOM.render(
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -13,7 +13,7 @@ title:

 Simplest Usage.

-````__react
+````jsx
 import { Badge } from 'antd';

 ReactDOM.render(
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -13,31 +13,33 @@ title:

 The count will be animated as it changes.

-````__react
+````jsx
 import { Badge, Button, Icon, Switch } from 'antd';
 const ButtonGroup = Button.Group;

-const Test = React.createClass({
-  getInitialState() {
-    return {
-      count: 5,
-      show: true,
-    };
-  },
-  increase() {
+class Demo extends React.Component {
+  state = {
+    count: 5,
+    show: true,
+  }
+
+  increase = () => {
    const count = this.state.count + 1;
    this.setState({ count });
-  },
-  decline() {
+  }
+
+  decline = () => {
    let count = this.state.count - 1;
    if (count < 0) {
      count = 0;
    }
    this.setState({ count });
-  },
-  onChange(show) {
+  }
+
+  onChange = (show) => {
    this.setState({ show });
-  },
+  }
+
  render() {
    return (
      <div>
@@ -62,8 +64,8 @@ const Test = React.createClass({
        </div>
      </div>
    );
-  },
-});
+  }
+}

-ReactDOM.render(<Test />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ````
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -13,17 +13,19 @@ title:

 This will simply display a red badge, without a specific count.

-````__react
+````jsx
 import { Badge, Icon } from 'antd';

-ReactDOM.render(<div>
-  <Badge dot>
-    <Icon type="notification" />
-  </Badge>
-  <Badge dot>
-    <a href="#">Link something</a>
-  </Badge>
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Badge dot>
+      <Icon type="notification" />
+    </Badge>
+    <Badge dot>
+      <a href="#">Link something</a>
+    </Badge>
+  </div>
+, mountNode);
 ````

 <style>
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -13,7 +13,7 @@ title:

 The badge can be wrapped with `a` tag to make it linkable.

-````__react
+````jsx
 import { Badge } from 'antd';

 ReactDOM.render(
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -15,12 +15,14 @@ title:

 Used in standalone when children is empty.

-````__react
+````jsx
 import { Badge } from 'antd';

-ReactDOM.render(<div>
-  <Badge count={25} />
-  <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
-  <Badge count={109} style={{ backgroundColor: '#87d068' }} />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Badge count={25} />
+    <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
+    <Badge count={109} style={{ backgroundColor: '#87d068' }} />
+  </div>
+, mountNode);
 ````
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -13,21 +13,23 @@ title:

 `${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.

-````__react
+````jsx
 import { Badge } from 'antd';

-ReactDOM.render(<div>
-  <Badge count={99}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={100}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={99} overflowCount={10}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={1000} overflowCount={999}>
-    <a href="#" className="head-example" />
-  </Badge>
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Badge count={99}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={100}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={99} overflowCount={10}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={1000} overflowCount={999}>
+      <a href="#" className="head-example" />
+    </Badge>
+  </div>
+, mountNode);
 ````
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -13,7 +13,7 @@ title:

 Standalone badge with status.

-````__react
+````jsx
 import { Badge } from 'antd';

 ReactDOM.render(
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -60,7 +60,18 @@
    }
    &-processing {
      background-color: @primary-color;
-      animation: antStatusProcessing 1.2s infinite ease-in-out;
+      position: relative;
+      &:after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 1px solid @primary-color;
+        content: '';
+        animation: antStatusProcessing 1.2s infinite ease-in-out;
+      }
    }
    &-default {
      background-color: @normal-color;
@@ -98,11 +109,12 @@
 }

@keyframes antStatusProcessing {
-  0%,
-  100% {
-    opacity: 1;
+  0% {
+    transform: scale(0.8);
+    opacity: 0.5;
  }
-  50% {
+  100% {
+    transform: scale(2.4);
    opacity: 0;
  }
 }
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -88,8 +88,11 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
      });
    } else if (children) {
      crumbs = React.Children.map(children, (element: any, index) => {
+        if (!element) {
+          return element;
+        }
        warning(
-          element && element.type.__ANT_BREADCRUMB_ITEM,
+          element.type && element.type.__ANT_BREADCRUMB_ITEM,
          'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
        );
        return cloneElement(element, {
--- a/components/breadcrumb/tests/Breadcrumb.test.js
+++ b/components/breadcrumb/tests/Breadcrumb.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import Breadcrumb from '../Breadcrumb';
+import { mount, render } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Breadcrumb from '../index';

 describe('Breadcrumb', () => {
  it('warns on non-Breadcrumb.Item children', () => {
@@ -18,4 +19,18 @@ describe('Breadcrumb', () => {
      'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
    );
  });
+
+  // https://github.com/ant-design/ant-design/issues/5015
+  it('should allow Breadcrumb.Item is null or undefined', () => {
+    const wrapper = render(
+      <Breadcrumb>
+        {null}
+        <Breadcrumb.Item>Home</Breadcrumb.Item>
+        {undefined}
+      </Breadcrumb>
+    );
+    // eslint-disable-next-line
+    expect(console.error.calls).toBe(undefined);
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
 });
--- a/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
@@ -0,0 +1,15 @@
+exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
+<div
+  class="ant-breadcrumb">
+  <span>
+    <span
+      class="ant-breadcrumb-link">
+      Home
+    </span>
+    <span
+      class="ant-breadcrumb-separator">
+      /
+    </span>
+  </span>
+</div>
+`;
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -1,6 +1,6 @@
 ---
 order: 0
-title:   
+title:
  zh-CN: 基本
  en-US: Basic Usage
 ---
@@ -13,7 +13,7 @@ title:

 The simplest use

-````__react
+````jsx
 import { Breadcrumb } from 'antd';

 ReactDOM.render(
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -14,7 +14,7 @@ title:

 Used together with `react-router@2+`.

-````__react
+````jsx
 import { Router, Route, Link, hashHistory } from 'react-router';
 import { Breadcrumb, Alert } from 'antd';

--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -13,7 +13,7 @@ title:

 The separator can be customized by setting the separator property: separator=">"

-````__react
+````jsx
 import { Breadcrumb } from 'antd';

 ReactDOM.render(
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@@ -13,7 +13,7 @@ title:

 The icon should be placed in front of the text.

-````__react
+````jsx
 import { Breadcrumb, Icon } from 'antd';

 ReactDOM.render(
--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
@@ -351,6 +351,26 @@ exports[`test renders ./components/button/demo/loading.md correctly 1`] = `
      Click me!
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button">
+    <span>
+      Won\'t show loading
+    </span>
+  </button>
+  <br />
+  <button
+    class="ant-btn ant-btn-circle ant-btn-loading"
+    type="button">
+    <i
+      class="anticon anticon-spin anticon-loading" />
+  </button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading"
+    type="button">
+    <i
+      class="anticon anticon-spin anticon-loading" />
+  </button>
 </div>
 `;

--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import Button from '..';

@@ -17,4 +17,12 @@ describe('Button', () => {
    );
    expect(renderToJson(wrapper)).toMatchSnapshot();
  });
+
+  it('have static perperty for type detecting', () => {
+    const wrapper = mount(
+      <Button>Button Text</Button>
+    );
+    // eslint-disable-next-line
+    expect(wrapper.type().__ANT_BUTTON).toBe(true);
+  });
 });
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
+import omit from 'omit.js';

 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -46,10 +47,12 @@ export interface ButtonProps {

 export default class Button extends React.Component<ButtonProps, any> {
  static Group: any;
+  static __ANT_BUTTON = true;

  static defaultProps = {
    prefixCls: 'ant-btn',
    loading: false,
+    clicked: false,
    ghost: false,
  };

@@ -64,29 +67,45 @@ export default class Button extends React.Component<ButtonProps, any> {
    icon: React.PropTypes.string,
  };

-  timeout: any;
-  clickedTimeout: any;
+  timeout: number;
+  delayTimeout: number;

-  componentWillUnmount() {
-    if (this.clickedTimeout) {
-      clearTimeout(this.clickedTimeout);
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: props.loading,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const currentLoading = this.props.loading;
+    const loading = nextProps.loading;
+
+    if (currentLoading) {
+      clearTimeout(this.delayTimeout);
    }
-    if (this.timeout) {
-      clearTimeout(this.timeout);
+
+    if (loading) {
+      this.delayTimeout = setTimeout(() => this.setState({ loading }), 200);
+    } else {
+      this.setState({ loading });
    }
  }

-  clearButton = (button) => {
-    button.className = button.className.replace(` ${this.props.prefixCls}-clicked`, '');
+  componentWillUnmount() {
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout);
+    }
  }

  handleClick = (e) => {
    // Add click effect
-    const buttonNode = findDOMNode(this);
-    this.clearButton(buttonNode);
-    this.clickedTimeout = setTimeout(() => buttonNode.className += ` ${this.props.prefixCls}-clicked`, 10);
+    this.setState({ clicked: true });
    clearTimeout(this.timeout);
-    this.timeout = setTimeout(() => this.clearButton(buttonNode), 500);
+    this.timeout = setTimeout(() => this.setState({ clicked: false }), 500);

    const onClick = this.props.onClick;
    if (onClick) {
@@ -104,9 +123,10 @@ export default class Button extends React.Component<ButtonProps, any> {

  render() {
    const {
-      type, shape, size = '', className, htmlType, children, icon, loading, prefixCls, ghost, ...others,
+      type, shape, size = '', className, htmlType, children, icon, prefixCls, ghost, ...others,
    } = this.props;

+    const { loading, clicked } = this.state;
    // large => lg
    // small => sm
    const sizeCls = ({
@@ -120,6 +140,7 @@ export default class Button extends React.Component<ButtonProps, any> {
      [`${prefixCls}-${sizeCls}`]: sizeCls,
      [`${prefixCls}-icon-only`]: !children && icon,
      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-clicked`]: clicked,
      [`${prefixCls}-background-ghost`]: ghost,
    }, className);

@@ -129,7 +150,7 @@ export default class Button extends React.Component<ButtonProps, any> {

    return (
      <button
-        {...others}
+        {...omit(others, ['loading', 'clicked'])}
        type={htmlType || 'button'}
        className={classes}
        onMouseUp={this.handleMouseUp}
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -17,7 +17,7 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto

 > `danger` is supported after `antd@2.7`.

-````__react
+````jsx
 import { Button } from 'antd';

 ReactDOM.render(
--- a/components/button/demo/button-group.md
+++ b/components/button/demo/button-group.md
@@ -17,7 +17,7 @@ Buttons can be grouped by placing multiple `Button` components into a `Button.Gr

 The `size` can be set to `large`, `small` or left unset resulting in a default size.

-````__react
+````jsx
 import { Button, Icon } from 'antd';
 const ButtonGroup = Button.Group;

--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -13,7 +13,7 @@ title:

 To mark a button as disabled, add the `disabled` property to the `Button`.

-````__react
+````jsx
 import { Button } from 'antd';

 ReactDOM.render(
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -13,7 +13,7 @@ title:

 `ghost` property will make button's background transparent, it is common used in colored background.

-````__react
+````jsx
 import { Button } from 'antd';

 ReactDOM.render(
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -17,7 +17,7 @@ title:

 If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.

-````__react
+````jsx
 import { Button } from 'antd';

 ReactDOM.render(
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -13,22 +13,33 @@ title:

 A loading indicator can be added to a button by setting the `loading` property on the `Button`.

-````__react
+````jsx
 import { Button } from 'antd';

-const App = React.createClass({
-  getInitialState() {
-    return {
-      loading: false,
-      iconLoading: false,
-    };
-  },
-  enterLoading() {
+class App extends React.Component {
+  state = {
+    loading: false,
+    iconLoading: false,
+    delayLoading: false,
+  }
+
+  enterLoading = () => {
    this.setState({ loading: true });
-  },
-  enterIconLoading() {
+  }
+
+  enterIconLoading = () => {
    this.setState({ iconLoading: true });
-  },
+  }
+  delayLoading = () => {
+    this.setState({
+      delayLoading: true,
+    });
+
+    setTimeout(() => this.setState({
+      delayLoading: false,
+    }), 150);
+  }
+
  render() {
    return (
      <div>
@@ -45,10 +56,16 @@ const App = React.createClass({
        <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
          Click me!
        </Button>
+        <Button type="primary" loading={this.state.delayLoading} onClick={this.delayLoading}>
+          Won&apos;t show loading
+        </Button>
+        <br />
+        <Button shape="circle" loading />
+        <Button type="primary" shape="circle" loading />
      </div>
    );
-  },
-});
+  }
+}

 ReactDOM.render(<App />, mountNode);
 ````
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -14,7 +14,7 @@ title:
 If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.


-````__react
+````jsx
 import { Button, Menu, Dropdown, Icon } from 'antd';

 function handleMenuClick(e) {
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -17,7 +17,7 @@ Ant Design supports a default button size as well as a large and small size.

 If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.

-````__react
+````jsx
 import { Button, Radio, Icon } from 'antd';

 class ButtonSize extends React.Component {
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -78,20 +78,24 @@
    display: none;
  }

-  &&-loading {
+  &&-loading:before {
+    display: block;
+  }
+
+  .@{iconfont-css-prefix} {
+    transition: all .3s @ease-in-out;
+  }
+
+  &&-loading:not(&-circle):not(&-circle-outline) {
    padding-left: 29px;
    pointer-events: none;
    position: relative;
    .@{iconfont-css-prefix} {
      margin-left: -14px;
-      transition: all .3s @ease-in-out;
-    }
-    &:before {
-      display: block;
    }
  }

-  &-sm&-loading {
+  &-sm&-loading:not(&-circle):not(&-circle-outline) {
    padding-left: 24px;
    .@{iconfont-css-prefix} {
      margin-left: -17px;
@@ -123,10 +127,14 @@
    border-radius: inherit;
    border: 0 solid @primary-color;
    opacity: 0.4;
-    animation: buttonEffect 0.36s ease-out forwards;
+    animation: buttonEffect .4s;
    display: block;
  }

+  &-danger&-clicked:after {
+    border-color: @btn-danger-bg;
+  }
+
  &-background-ghost {
    background: transparent!important;
    border-color: #fff;
--- a/components/calendar/tests/snapshots/demo.test.js.snap
+++ b/components/calendar/tests/snapshots/demo.test.js.snap
@@ -1569,790 +1569,6 @@ exports[`test renders ./components/calendar/demo/card.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/calendar/demo/locale.md correctly 1`] = `
-<div
-  class=" ant-fullcalendar-fullscreen">
-  <div
-    class="ant-fullcalendar-header">
-    <div
-      class="ant-fullcalendar-year-select ant-select ant-select-enabled">
-      <div
-        aria-autocomplete="list"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-                  ant-select-selection--single"
-        role="combobox"
-        tabindex="0">
-        <div
-          class="ant-select-selection__rendered">
-          <div
-            class="ant-select-selection-selected-value"
-            style="display:block;opacity:1;"
-            title="2016">
-            2016
-          </div>
-        </div>
-        <span
-          class="ant-select-arrow"
-          style="user-select:none;-webkit-user-select:none;"
-          unselectable="unselectable">
-          <b />
-        </span>
-      </div>
-    </div>
-    <div
-      class="ant-fullcalendar-month-select ant-select ant-select-enabled">
-      <div
-        aria-autocomplete="list"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-                  ant-select-selection--single"
-        role="combobox"
-        tabindex="0">
-        <div
-          class="ant-select-selection__rendered">
-          <div
-            class="ant-select-selection-selected-value"
-            style="display:block;opacity:1;"
-            title="Nov">
-            Nov
-          </div>
-        </div>
-        <span
-          class="ant-select-arrow"
-          style="user-select:none;-webkit-user-select:none;"
-          unselectable="unselectable">
-          <b />
-        </span>
-      </div>
-    </div>
-    <div
-      class="ant-radio-group ant-radio-group-default">
-      <label
-        class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
-        <span
-          class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-          <span
-            class="ant-radio-button-inner" />
-          <input
-            checked=""
-            class="ant-radio-button-input"
-            type="radio" />
-        </span>
-        <span>
-          Month
-        </span>
-      </label>
-      <label
-        class="ant-radio-button-wrapper">
-        <span
-          class="ant-radio-button">
-          <span
-            class="ant-radio-button-inner" />
-          <input
-            class="ant-radio-button-input"
-            type="radio" />
-        </span>
-        <span>
-          Year
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen"
-    tabindex="0">
-    <div
-      class="ant-fullcalendar-calendar-body">
-      <table
-        cellspacing="0"
-        class="ant-fullcalendar-table"
-        role="grid">
-        <thead>
-          <tr
-            role="row">
-            <th
-              class="ant-fullcalendar-column-header"
-              role="columnheader"
-              title="Sun">
-              <span
-                class="ant-fullcalendar-column-header-inner">
-                Su
-              </span>
-            </th>
-            <th
-              class="ant-fullcalendar-column-header"
-              role="columnheader"
-              title="Mon">
-              <span
-                class="ant-fullcalendar-column-header-inner">
-                Mo
-              </span>
-            </th>
-            <th
-              class="ant-fullcalendar-column-header"
-              role="columnheader"
-              title="Tue">
-              <span
-                class="ant-fullcalendar-column-header-inner">
-                Tu
-              </span>
-            </th>
-            <th
-              class="ant-fullcalendar-column-header"
-              role="columnheader"
-              title="Wed">
-              <span
-                class="ant-fullcalendar-column-header-inner">
-                We
-              </span>
-            </th>
-            <th
-              class="ant-fullcalendar-column-header"
-              role="columnheader"
-              title="Thu">
-              <span
-                class="ant-fullcalendar-column-header-inner">
-                Th
-              </span>
-            </th>
-            <th
-              class="ant-fullcalendar-column-header"
-              role="columnheader"
-              title="Fri">
-              <span
-                class="ant-fullcalendar-column-header-inner">
-                Fr
-              </span>
-            </th>
-            <th
-              class="ant-fullcalendar-column-header"
-              role="columnheader"
-              title="Sat">
-              <span
-                class="ant-fullcalendar-column-header-inner">
-                Sa
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody
-          class="ant-fullcalendar-tbody">
-          <tr
-            role="row">
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
-              role="gridcell"
-              title="2016-10-30">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  30
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
-              role="gridcell"
-              title="2016-10-31">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  31
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-1">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  01
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-2">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  02
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-3">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  03
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-4">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  04
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-5">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  05
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-          </tr>
-          <tr
-            role="row">
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-6">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  06
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-7">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  07
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-8">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  08
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-9">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  09
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-10">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  10
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-11">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  11
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-12">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  12
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-          </tr>
-          <tr
-            role="row">
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-13">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  13
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-14">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  14
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-15">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  15
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-16">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  16
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-17">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  17
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-18">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  18
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-19">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  19
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-          </tr>
-          <tr
-            role="row">
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-20">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  20
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-21">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  21
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day"
-              role="gridcell"
-              title="2016-11-22">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  22
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-23">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  23
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-24">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  24
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-25">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  25
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-26">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  26
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-          </tr>
-          <tr
-            role="row">
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-27">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  27
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-28">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  28
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-29">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  29
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell"
-              role="gridcell"
-              title="2016-11-30">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  30
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-1">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  01
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-2">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  02
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-3">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  03
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-          </tr>
-          <tr
-            role="row">
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-4">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  04
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-5">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  05
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-6">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  06
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-7">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  07
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-8">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  08
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-9">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  09
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-            <td
-              class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
-              role="gridcell"
-              title="2016-12-10">
-              <div
-                class="ant-fullcalendar-date">
-                <div
-                  class="ant-fullcalendar-value">
-                  10
-                </div>
-                <div
-                  class="ant-fullcalendar-content" />
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`test renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
 <div
  class=" ant-fullcalendar-fullscreen">
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@@ -13,7 +13,7 @@ title:

 A basic calendar component with Year/Month switch.

-````__react
+````jsx
 import { Calendar } from 'antd';

 function onPanelChange(value, mode) {
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@@ -13,7 +13,7 @@ title:

 Nested inside a container element for rendering in limited space.

-````__react
+````jsx
 import { Calendar } from 'antd';

 function onPanelChange(value, mode) {
--- a/components/calendar/demo/locale.md
+++ b/components/calendar/demo/locale.md
@@ -1,30 +0,0 @@
---
-order: 3
-title:
-  zh-CN: 国际化
-  en-US: locale
---
-
-## zh-CN
-
-通过 `locale` 配置语言, 默认支持 en_US, zh_CN
-
-## en-US
-
-To set the language. en_US, zh_CN are supported by default.
-
-````__react
-import { Calendar } from 'antd';
-import enUS from 'antd/lib/calendar/locale/en_US';
-import moment from 'moment';
-// It's recommended to set moment locale globally, otherwise, you need to set it by `value` or `defaultValue`
-// moment.locale('en');
-
-function onPanelChange(value, mode) {
-  console.log(value, mode);
-}
-
-ReactDOM.render(
-  <Calendar defaultValue={moment().locale('en')} onPanelChange={onPanelChange} locale={enUS} />
-, mountNode);
-````
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -13,7 +13,7 @@ title:

 This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.

-````__react
+````jsx
 import { Calendar } from 'antd';

 function getListData(value) {
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -13,7 +13,15 @@ When data is in the form of date, such as schedule, timetable, prices calendar,

 ## API

-```html
+**Note:** Part of locale of Calendar is read from value. So, please set the locale of moment correctly.
+
+```jsx
+import moment from 'moment';
+
+// It's recommended to set locale in entry file globaly.
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+
 <Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -15,7 +15,15 @@ title: Calendar

 ## API

-```html
+**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
+
+```jsx
+import moment from 'moment';
+
+// 推荐在入口文件全局设置 locale
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+
 <Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -13,7 +13,7 @@ title:

 A basic card containing a title, content and an extra corner content.

-````__react
+````jsx
 import { Card } from 'antd';

 ReactDOM.render(
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -13,7 +13,7 @@ title:

 A borderless card on a gray background.

-````__react
+````jsx
 import { Card } from 'antd';

 ReactDOM.render(
--- a/components/card/demo/grid.md
+++ b/components/card/demo/grid.md
@@ -13,7 +13,7 @@ title:

 Cards usually cooperate with grid layout in overview page.

-````__react
+````jsx
 import { Card, Col, Row } from 'antd';

 ReactDOM.render(
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -13,7 +13,7 @@ title:

 Shows a loading indicator while the contents of the card is being fetched.

-````__react
+````jsx
 import { Card } from 'antd';

 ReactDOM.render(
--- a/components/card/demo/no-padding.md
+++ b/components/card/demo/no-padding.md
@@ -14,7 +14,7 @@ title:
 Customizing default width and margin.


-````__react
+````jsx
 import { Card } from 'antd';

 ReactDOM.render(
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@@ -13,7 +13,7 @@ title:

 A simple card only containing a content area.

-````__react
+````jsx
 import { Card } from 'antd';

 ReactDOM.render(
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -13,7 +13,7 @@ title:

 Timing of scrolling to the next card/picture.

-````__react
+````jsx
 import { Carousel } from 'antd';

 ReactDOM.render(
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -13,7 +13,7 @@ title:

 Basic usage.

-````__react
+````jsx
 import { Carousel } from 'antd';

 function onChange(a, b, c) {
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -13,7 +13,7 @@ title:

 Slides use fade for transition.

-````__react
+````jsx
 import { Carousel } from 'antd';

 ReactDOM.render(
--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@@ -13,7 +13,7 @@ title:

 Vertical pagination.

-````__react
+````jsx
 import { Carousel } from 'antd';

 ReactDOM.render(
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -1,6 +1,8 @@
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
 import assign from 'object-assign';
+import debounce from 'lodash.debounce';
+
 if (typeof window !== 'undefined') {
  const matchMediaPolyfill = function matchMediaPolyfill(mediaQuery: string): MediaQueryList {
    return {
@@ -48,6 +50,41 @@ export default class Carousel extends React.Component<CarouselProps, any> {
    draggable: false,
  };

+  refs: {
+    slick: any,
+  };
+
+  constructor() {
+    super();
+    this.onWindowResized = debounce(this.onWindowResized, 500, {
+      leading: false,
+    });
+  }
+
+  componentDidMount() {
+    const { autoplay } = this.props;
+    if (autoplay) {
+      window.addEventListener('resize', this.onWindowResized);
+    }
+  }
+
+  componentWillUnmount() {
+    const { autoplay } = this.props;
+    if (autoplay) {
+      window.removeEventListener('resize', this.onWindowResized);
+      (this.onWindowResized as any).cancel();
+    }
+  }
+
+  onWindowResized = () => {
+    // Fix https://github.com/ant-design/ant-design/issues/2550
+    const { slick } = this.refs;
+    const { autoplay } = this.props;
+    if (autoplay && slick && slick.innerSlider && slick.innerSlider.autoPlay) {
+      slick.innerSlider.autoPlay();
+    }
+  }
+
  render() {
    let props = assign({}, this.props);

--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@@ -0,0 +1,179 @@
+exports[`Cascader can be selected 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft ">
+    <div>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang">
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu">
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Hangzhou">
+          Hangzhou
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader can be selected 2`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft ">
+    <div>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang">
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu">
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Hangzhou">
+          Hangzhou
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item"
+          title="West Lake">
+          West Lake
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader can be selected 3`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft  ant-cascader-menus-hidden">
+    <div>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang">
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu">
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Hangzhou">
+          Hangzhou
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-active"
+          title="West Lake">
+          West Lake
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly when panel is hidden 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-empty ant-cascader-menus-placement-bottomLeft  ant-cascader-menus-hidden">
+    <div />
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly when panel is open 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft ">
+    <div>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Zhejiang">
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu">
+          Jiangsu
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly with defaultValue 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft ">
+    <div>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang">
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu">
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Hangzhou">
+          Hangzhou
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu">
+        <li
+          class="ant-cascader-menu-item"
+          title="West Lake">
+          West Lake
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
--- a/components/cascader/tests/index.test.js
+++ b/components/cascader/tests/index.test.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Cascader from '..';
+
+const options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+    }],
+  }],
+}];
+
+describe('Cascader', () => {
+  it('popup correctly when panel is hidden', () => {
+    const wrapper = mount(
+      <Cascader options={options} />
+    );
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+
+  it('popup correctly when panel is open', () => {
+    const wrapper = mount(
+      <Cascader options={options} />
+    );
+    wrapper.find('input').simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+
+  it('popup correctly with defaultValue', () => {
+    const wrapper = mount(
+      <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />
+    );
+    wrapper.find('input').simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+
+
+  it('can be selected', () => {
+    const wrapper = mount(<Cascader options={options} />);
+    wrapper.find('input').simulate('click');
+    let popupWrapper = mount(wrapper.find('Trigger').node.getComponent());
+    popupWrapper.find('.ant-cascader-menu').at(0).find('.ant-cascader-menu-item').at(0)
+      .simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').node.getComponent());
+    popupWrapper.find('.ant-cascader-menu').at(1).find('.ant-cascader-menu-item').at(0)
+      .simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').node.getComponent());
+    popupWrapper.find('.ant-cascader-menu').at(2).find('.ant-cascader-menu-item').at(0)
+      .simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+});
--- a/components/cascader/demo/basic.md
+++ b/components/cascader/demo/basic.md
@@ -13,7 +13,7 @@ title:

 Cascade selection box for selecting province/city/district.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/demo/change-on-select.md
+++ b/components/cascader/demo/change-on-select.md
@@ -13,7 +13,7 @@ title:

 Allow only select parent options.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@@ -13,7 +13,7 @@ title:

 For instance, add an external link after the selected value.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@@ -13,7 +13,7 @@ title:

 Separate trigger button and result.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
@@ -32,17 +32,16 @@ const options = [{
  }],
 }];

-const CitySwitcher = React.createClass({
-  getInitialState() {
-    return {
-      text: 'Unselect',
-    };
-  },
-  onChange(value, selectedOptions) {
+class CitySwitcher extends React.Component {
+  state = {
+    text: 'Unselect',
+  };
+
+  onChange = (value, selectedOptions) => {
    this.setState({
      text: selectedOptions.map(o => o.label).join(', '),
    });
-  },
+  }
  render() {
    return (
      <span>
@@ -53,8 +52,8 @@ const CitySwitcher = React.createClass({
        </Cascader>
      </span>
    );
-  },
-});
+  }
+}

 ReactDOM.render(<CitySwitcher />, mountNode);
 ````
--- a/components/cascader/demo/default-value.md
+++ b/components/cascader/demo/default-value.md
@@ -13,7 +13,7 @@ title:

 Specifies default value by an array.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/demo/disabled-option.md
+++ b/components/cascader/demo/disabled-option.md
@@ -13,7 +13,7 @@ title:

 Disable option by specifying the `disabled` property in `options`.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@@ -13,7 +13,7 @@ title:

 Hover to expand sub menu, click to select option.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/demo/lazy.md
+++ b/components/cascader/demo/lazy.md
@@ -17,7 +17,7 @@ Load options lazily with `loadData`.

 > Note: `loadData` cannot work with `showSearch`.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/demo/search.md
+++ b/components/cascader/demo/search.md
@@ -13,7 +13,7 @@ title:

 Search and select options directly.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
@@ -25,6 +25,10 @@ const options = [{
    children: [{
      value: 'xihu',
      label: 'West Lake',
+    }, {
+      value: 'xiasha',
+      label: 'Xia Sha',
+      disabled: true,
    }],
  }],
 }, {
--- a/components/cascader/demo/size.md
+++ b/components/cascader/demo/size.md
@@ -13,7 +13,7 @@ title:

 Cascade selection box of different sizes.

-````__react
+````jsx
 import { Cascader } from 'antd';

 const options = [{
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -239,6 +239,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
          path,
          label: render(inputValue, path, prefixCls),
          value: path.map(o => o.value),
+          disabled: path.some(o => o.disabled),
        };
      });
    }
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@@ -8,7 +8,9 @@
  font-size: @font-size-base;

  &-input.@{ant-prefix}-input {
-    background-color: transparent;
+    // Add important to fix https://github.com/ant-design/ant-design/issues/5078
+    // because input.less will compile after cascader.less
+    background-color: transparent!important;
    cursor: pointer;
    width: 100%;
    z-index: 1;
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -13,7 +13,7 @@ title:

 Basic usage of checkbox.

-````__react
+````jsx
 import { Checkbox } from 'antd';

 function onChange(e) {
--- a/components/checkbox/demo/check-all.md
+++ b/components/checkbox/demo/check-all.md
@@ -13,21 +13,19 @@ title:

 The `indeterminate` property can help you to achieve a 'check all' effect.

-````__react
+````jsx
 import { Checkbox } from 'antd';
 const CheckboxGroup = Checkbox.Group;

 const plainOptions = ['Apple', 'Pear', 'Orange'];
 const defaultCheckedList = ['Apple', 'Orange'];

-const App = React.createClass({
-  getInitialState() {
-    return {
-      checkedList: defaultCheckedList,
-      indeterminate: true,
-      checkAll: false,
-    };
-  },
+class App extends React.Component {
+  state = {
+    checkedList: defaultCheckedList,
+    indeterminate: true,
+    checkAll: false,
+  };
  render() {
    return (
      <div>
@@ -44,22 +42,22 @@ const App = React.createClass({
        <CheckboxGroup options={plainOptions} value={this.state.checkedList} onChange={this.onChange} />
      </div>
    );
-  },
-  onChange(checkedList) {
+  }
+  onChange = (checkedList) => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && (checkedList.length < plainOptions.length),
      checkAll: checkedList.length === plainOptions.length,
    });
-  },
-  onCheckAllChange(e) {
+  }
+  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
-  },
-});
+  }
+}

 ReactDOM.render(<App />, mountNode);
 ````
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -13,16 +13,14 @@ title:

 Communicated with other components.

-````__react
+````jsx
 import { Checkbox, Button } from 'antd';

-const App = React.createClass({
-  getInitialState() {
-    return {
-      checked: true,
-      disabled: false,
-    };
-  },
+class App extends React.Component {
+  state = {
+    checked: true,
+    disabled: false,
+  };
  render() {
    const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
    return (
@@ -50,20 +48,20 @@ const App = React.createClass({
        </p>
      </div>
    );
-  },
-  toggleChecked() {
+  }
+  toggleChecked = () => {
    this.setState({ checked: !this.state.checked });
-  },
-  toggleDisable() {
+  }
+  toggleDisable = () => {
    this.setState({ disabled: !this.state.disabled });
-  },
-  onChange(e) {
+  }
+  onChange = (e) => {
    console.log('checked = ', e.target.checked);
    this.setState({
      checked: e.target.checked,
    });
-  },
-});
+  }
+}

 ReactDOM.render(<App />, mountNode);
 ````
--- a/components/checkbox/demo/disabled.md
+++ b/components/checkbox/demo/disabled.md
@@ -13,12 +13,14 @@ checkbox 不可用。

 Disabled checkbox.

-````__react
+````jsx
 import { Checkbox } from 'antd';

-ReactDOM.render(<div>
-  <Checkbox defaultChecked={false} disabled />
-  <br />
-  <Checkbox defaultChecked disabled />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Checkbox defaultChecked={false} disabled />
+    <br />
+    <Checkbox defaultChecked disabled />
+  </div>
+  , mountNode);
 ````
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -13,7 +13,7 @@ title:

 Generate a group of checkboxes from an array.

-````__react
+````jsx
 import { Checkbox } from 'antd';
 const CheckboxGroup = Checkbox.Group;

--- a/Show More
+++ b/Show More