bump 2.7.2

docs: add change log for 2.7.2 (#4922 )
* docs: add change log for 2.7.2 * deps: upgrade bisheng-plugin-antd
2026-02-09 10:59:19 +08:00 · 2017-02-17 18:02:58 +08:00 · 2017-02-17 18:02:06 +08:00 · 2017-02-17 17:41:23 +08:00 · 2017-02-17 14:11:10 +08:00 · 2017-02-17 13:59:13 +08:00
662 changed files with 25605 additions and 14683 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+components/**/*.js
+components/**/*.jsx
+!.eslintrc.js
+!components/*/__tests__/*
+!components/*/demo/*
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@ const eslintrc = {
  env: {
    browser: true,
    node: true,
-    mocha: true,
+    jasmine: true,
    jest: true,
    es6: true,
  },
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -5,31 +5,28 @@ antd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足

 1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)
 2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
-3. [Gitter](https://gitter.im/ant-design/ant-design)

 如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。
 -->

-#### 发生问题的环境是：
+#### Environment(required)

-<!-- 务必提供 -->
+- antd version:
+- OS and its version:
+- Browser and its version:

- antd 版本:
- 操作系统及其版本:
- 浏览器及其版本:
+#### What did you do? Please provide steps to re-produce your problem.

-#### 您做了什么？请提供尽可能详细的重现步骤。
+<!-- e.g. I just imported Button from antd -->

-<!-- 如：引入 antd 了 Button -->
+#### What do you expected?

-#### 您期待的结果是:
+<!-- e.g. It works fine as official website -->

-<!-- 如：像官网一样正常显示 -->
+#### What happen?

-#### 实际上的结果是:
+<!-- e.g. Style is not as expected. (And it will be better to provide screenshot) -->

-<!-- 如：样式错位了，最好提供截图 -->
+#### Re-producible online demo

-#### 可重现的在线演示
-
-<!-- 请修改并 Fork http://codepen.io/benjycui/pen/KgPZrE?editors=001 -->
+<!-- Please fork http://codepen.io/benjycui/pen/KgPZrE?editors=001 to re-produce you issue -->
--- a/.gitignore
+++ b/.gitignore
@@ -27,7 +27,10 @@ dist
 /lib
 elasticsearch-*
 config/base.yaml
-components/**/*.js
-components/**/*.jsx
 /.vscode/
 /coverage
+yarn.lock
+components/**/*.js
+components/**/*.jsx
+!components/**/__tests__/*.js
+!components/**/__tests__/*.js.snap
--- a/.hound.yml
+++ b/.hound.yml
@@ -1,3 +0,0 @@
-eslint:
-  enabled: true
-  config_file: .eslintrc.js
--- a/.jest.node.json
+++ b/.jest.node.json
@@ -1,6 +1,6 @@
 {
  "setupFiles": [
-    "tests/setup.js"
+    "./tests/setup.js"
  ],
  "moduleFileExtensions": [
    "ts",
@@ -9,10 +9,10 @@
    "md"
  ],
  "transform": {
-    "\\.tsx?$": "node_modules/typescript-babel-jest",
-    "tests/.*\\.js$": "node_modules/babel-jest",
-    "\\.md$": "node_modules/antd-demo-jest"
+    "\\.tsx?$": "./node_modules/typescript-babel-jest",
+    "\\.js$": "./node_modules/babel-jest",
+    "\\.md$": "./node_modules/antd-demo-jest"
  },
-  "testRegex": "/tests/.*demo\\.test\\.js$",
+  "testRegex": "demo\\.test\\.js$",
  "testEnvironment": "node"
 }
--- a/.lesshintrc
+++ b/.lesshintrc
@@ -1,21 +0,0 @@
-{
-  "propertyOrdering": false,
-  "hexLength": "short",
-  "stringQuotes": false,
-  "decimalZero": false,
-  "importantRule": false,
-  "zeroUnit": "no_unit",
-  "qualifyingElement": false,
-  "duplicateProperty": false,
-  "importPath": false,
-  "finalNewline": false,
-  "newlineAfterBlock": false,
-  "maxCharPerLine": false,
-  "excludedFiles": [
-    "components/grid/style/mixin.less",
-    "components/style/core/base.less",
-    "components/style/core/iconfont.less",
-    "components/style/core/normalize.less",
-    "components/style/mixins/compatibility.less"
-  ]
-}
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -0,0 +1,24 @@
+{
+  "extends": "stylelint-config-standard",
+  "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,
+    "function-name-case": null,
+    "function-parentheses-newline-inside": null,
+    "function-max-empty-lines": null,
+    "function-whitespace-after": null,
+    "indentation": null,
+    "number-leading-zero": null,
+    "number-no-trailing-zeros": null,
+    "rule-empty-line-before": null,
+    "selector-combinator-space-after": null,
+    "selector-list-comma-newline-after": null,
+    "selector-pseudo-element-colon-notation": null,
+    "unit-no-unknown": null,
+    "value-list-max-empty-lines": null
+  }
+}
--- a/.travis.yml
+++ b/.travis.yml
@@ -5,5 +5,11 @@ language: node_js
 node_js:
  - "6"

+env:
+  - MAX_WORKERS=2
+
+script:
+  - npm run test-all
+
 after_script:
  - cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -5,10 +5,209 @@ toc: false
 timeline: true
 ---

-If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0).
+`antd` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).
+
+#### Release Schedule
+
+* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
+* Monthly release: minor version at the end of every month for new features.
+* Major version release is not included in this schedule for breadking change and new features.
+
+If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md).

 ---

+## 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`
+
+- **Affix**
+  - Fix the problem of element been hidden when hover on. [#4800](https://github.com/ant-design/ant-design/issues/4800)
+  - Fix event listener can not be removed. [#4755](https://github.com/ant-design/ant-design/issues/4755)
+  - Fix can not be unfixed when scrolling fastly. [#4760](https://github.com/ant-design/ant-design/issues/4760)
+- **Anchor** Fix the location problem when offsetTop has been set. [#4706](https://github.com/ant-design/ant-design/issues/4706)
+- **AutoComplete**
+  - 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)
+- **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**
+  - 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)
+- **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)
+- **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)
+  - Change the position of version switch. [pull-4799](https://github.com/ant-design/ant-design/pull/4799)
+
+## 2.7.0
+
+`2017-02-03`
+
+* Added `danger` button and `ghost` button style. [#4679](https://github.com/ant-design/ant-design/pull/4679)
+* Input element of AutoComplete can be customized. [#4483](https://github.com/ant-design/ant-design/pull/4483)
+* Upgrade rc-cascader to `0.11.0`, keyborad interactions supported. [#4411](https://github.com/ant-design/ant-design/pull/4411)
+* More popup directions are supported in notification. [#4732](https://github.com/ant-design/ant-design/pull/4700)
+* Upgrade rc-steps to `2.3.0`, added `progressDot` property of Steps, which allows users to customize the display for Steps with progress dot style.
+* Upgrade rc-input-number to `3.0.0`
+  * Input behavious will trigger `onChange` callback now.[#4265](https://github.com/ant-design/ant-design/pull/4265)
+  * Fixed `onKeyUp`. [#4717](https://github.com/ant-design/ant-design/issues/4717)
+* Added `vertical` mode of Slider. [#4473](https://github.com/ant-design/ant-design/pull/4473)
+* Tag
+  * Added preset colors. [#4571](https://github.com/ant-design/ant-design/pull/4571)
+  * Improvement vertical-align and margin.
+* Add German localization for LocaleProvider.[#4686](https://github.com/ant-design/ant-design/pull/4686)
+* Add Swedish localization for LocaleProvider. [#4455](https://github.com/ant-design/ant-design/pull/4455)
+* Add French localization for LocaleProvider. [#4538](https://github.com/ant-design/ant-design/pull/4538)
+* Added `onSearchChange` callback of Transfer. [#4464](https://github.com/ant-design/ant-design/pull/4464)
+* Added `maskClosable` property of Modal.confirm. [#4488](https://github.com/ant-design/ant-design/pull/4488), [#4488](https://github.com/ant-design/ant-design/pull/4490)
+* Added `hideRequiredMark` property if Form. [#4732](https://github.com/ant-design/ant-design/pull/4732)
+* Improvement upload list of Upload. [#4516](https://github.com/ant-design/ant-design/pull/4516)
+* Upgrade rc-select to `6.7.1`.
+  * Fixed duplication `onChange` callback. [#156@rc-select](https://github.com/react-component/select/pull/156)
+  * Fixed displaying of initial value. [#152@rc-select](https://github.com/react-component/select/pull/152)
+* Upgrade rc-tree-select to `1.9.0`.
+  * Added `treeDefaultExpandedKeys` property.[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43)
+  * Fixed an overflow-wrap issue. [#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42)
+* Added less variables: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` and etc.
+* Fixed Badge misplace issue when browser zoom above 100%. [#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290)
+* Fixed a mis-align issue of fixed header Table. [#4750](https://github.com/ant-design/ant-design/issues/4750)
+* Fixed Table scrolling lag issue in IE. [#4522](https://github.com/ant-design/ant-design/issues/4522)
+* Add icon aliases: `addfile` => `file-add`，`addfolder` => `folder-open`, and the old type names are still working. [#4758](https://github.com/ant-design/ant-design/issues/4758)
+
+## 2.6.4
+
+`2017-01-20`
+
+* Improve RangePicker when selecting a preset date.[#4561](https://github.com/ant-design/ant-design/issues/4561)
+* Fix DatePicker select time scroll issue.[#4412](https://github.com/ant-design/ant-design/issues/4412)
+* Fix issue resulting in vertical Menu can't be controlled.[#3783](https://github.com/ant-design/ant-design/issues/3783)
+* Fix Cascader's style when it's disabled.[#4648](https://github.com/ant-design/ant-design/issues/4648)
+* Table
+  * Improve Table fixed header's scrollbar style.[#4637](https://github.com/ant-design/ant-design/issues/4637)
+  * Fix issue resulting in Table's header flashes when `loading` is true in Safari.[#4622](https://github.com/ant-design/ant-design/issues/4622)
+  * Fix multiple border issues. [#4647](https://github.com/ant-design/ant-design/issues/4647)、[#4635](https://github.com/ant-design/ant-design/issues/4635)
+  * Fix `showHeader`'s default value.[#4658](https://github.com/ant-design/ant-design/issues/4658)
+  * Fix missing `TableColumnConfig` type.[#4660](https://github.com/ant-design/ant-design/issues/4660)
+
+## 2.6.3
+
+`2017-01-15`
+
+* Fixed issue introduced in `2.6.2` that Popconfirm is not working. [#4606](https://github.com/ant-design/ant-design/issues/4606)
+
+## 2.6.2
+
+`2017-01-14`
+
+* Added a Third-Party Library Page for recommending other greet react components. [Link](/docs/react/recommendation)
+* Fixed misplaced Sider of Layout. [#4459](https://github.com/ant-design/ant-design/issues/4459)
+* Fixed Input.Search wrong block layout and misplaced icon. [#4540](https://github.com/ant-design/ant-design/issues/4540)
+* Added a customize Collapse panel demo. [Link](/components/collapse/#components-collapse-demo-custom)
+* Table
+  * Enlarged the width of selection column and expand column.
+  * Fixed not-available pagination issue when property `pagination` is changed. [#4532](https://github.com/ant-design/ant-design/issues/4532)
+  * Fixed that three level filter menu is not working. [#4541](https://github.com/ant-design/ant-design/issues/4541)
+  * Fixed `column.filteredValue` issue of cannot being set to `null`.
+* Now Carousel is undragglble and text-selectable defaultly.
+* Added warnings when non-BreadcrumbItem node is nested under Breadcrumb. [#4403](https://github.com/ant-design/ant-design/issues/4403)
+* Fixed Tooltip hidden issue when `onVisibleChange(visible)` return `true`. [#4579](https://github.com/ant-design/ant-design/issues/4579)
+* Make TreeSelect panel default height smaller than screen height. [#4537](https://github.com/ant-design/ant-design/pull/4537)
+* Added less variables of TimePicker and Spin.
+* Replaced arrows of DatePicker year panel by year text. [#4415](https://github.com/ant-design/ant-design/issues/4415)
+* Fixed TypeScript definites of AutoComplete and Form `[options.validateTrigger]`.
+* Improved the animation details of Spin and Progress.
+
+## 2.6.1
+
+`2017-1-6`
+
+* Fix style problem for Menu dark theme. [#4440](https://github.com/ant-design/ant-design/issues/4440)
+* Fix TypeScript interface definition for `Select[tokenSeparators]` `Modal[afterClose]` `Input[name]` and so on. [#4441](https://github.com/ant-design/ant-design/pull/4441) [@eddhannay](https://github.com/eddhannay)
+* Fix that `TimePicker[placeholder]` cannot be set to empty string. [#4446](https://github.com/ant-design/ant-design/pull/4446) [@jialeicui](https://github.com/jialeicui)
+* Fix style problem in DatePicker year panel. [#4415](https://github.com/ant-design/ant-design/issues/4415)
+* Fix that Table loading doesn't mask Pagination. [#4461](https://github.com/ant-design/ant-design/issues/4461)
+* Fix align style for `Input[prefix|suffix]`. [commit](https://github.com/ant-design/ant-design/commit/c4ac4d1eca53ae2f6f4a1e15210b43745f283534)
+* Fix align style for Cascader. [commit](https://github.com/ant-design/ant-design/commit/1fbebd4ecfff432e1b2261c9dfee4b9f471e7b1f)
+
+## 2.6.0
+
+`2017-1-2`
+
+- Brand new color system. [pull/4426](https://github.com/ant-design/ant-design/pull/4426)
+  - Brand new color algorithm replacing the tint/shade system.
+  - Brand new color palattes generated by new algorithm. [Link](http://ant.design/docs/spec/colors)
+  - Change default font color.
+- Add Layout component. [#3534](https://github.com/ant-design/ant-design/issues/3534)
+- Add Grid playground demo. [commit/ee17ab](https://github.com/ant-design/ant-design/commit/ee17abfa9d0362c6f9baab4a9a09e57574583246)
+- Input
+  - Support prefix and suffix. [#4226](https://github.com/ant-design/ant-design/issues/4226) [@ystarlongzi](https://github.com/ystarlongzi)
+  - InputGroup support compact display mode. [pull/4309](https://github.com/ant-design/ant-design/pull/4309)
+- Spin support delayed display. [#4306](https://github.com/ant-design/ant-design/issues/4306)
+- Fix the dislocation problem of Pagination in low resolution. [#4349](https://github.com/ant-design/ant-design/issues/4349)
+- Fix wrapping display of Dropdown.Button. [pull/4355](https://github.com/ant-design/ant-design/pull/4355) [@Morhaus](https://github.com/Morhaus)
+- Fix wrong background color of Cascader in disabled status. [#4434](https://github.com/ant-design/ant-design/issues/4434)
+- Fix MonthPicker[monthCellContentRender] doesn't work, and some documentation errors. [#4394](https://github.com/ant-design/ant-design/issues/4394)
+- Fix the extra border of ButtonGroup. [#4382](https://github.com/ant-design/ant-design/pull/4382) [@ystarlongzi](https://github.com/ystarlongzi)
+- Fix wrong background color of the Submenu(horizontal mode). [#4414](https://github.com/ant-design/ant-design/issues/4414)
+- Fix overlapping graphics with Select/Cascader in Form.Item with hasFeedback. [#4431](https://github.com/ant-design/ant-design/issues/4431) [@JesperWe](https://github.com/JesperWe)
+- Reset border-radius of the first row in Table without header. [#4373](https://github.com/ant-design/ant-design/issues/4373)
+- Improve the drag performance of Tree. [#4371](https://github.com/ant-design/ant-design/issues/4371)
+- Improve official website and documentation, fix some bugs.
+- Update rc-form to support nested style of getFieldDecorator[id].
+
+## 2.5.3
+
+`2016-12-24` 🎄🎄🎄
+
+* Supports TypeScript@2.1. [#4208](https://github.com/ant-design/ant-design/issues/4208)
+* Fix style issue resulting in nested Tabs. [#4317](https://github.com/ant-design/ant-design/issues/4317)
+* Fix `onChange` callback issue resulting in Radio. [#4242](https://github.com/ant-design/ant-design/issues/4242) [@ystarlongzi](https://github.com/ystarlongzi)
+* Fix a FormItem mis-aligin bug. [#4271](https://github.com/ant-design/ant-design/issues/4271)
+* Fix background issue resulting in selected element of veritcal Menu.[#4253](https://github.com/ant-design/ant-design/issues/4253)
+* Improve arguments type of `onVisibleChange` callback of  Dropdown.[#4236](https://github.com/ant-design/ant-design/issues/4236) [@bang88](https://github.com/bang88)
+* Improve first argument type of `onChange` callback of Cascader.[#4231](https://github.com/ant-design/ant-design/issues/4231) [@bang88](https://github.com/bang88)
+* Improve default width of Datepicker[showTime]. [b912f1c](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47)
+
 ## 2.5.2

 `2016-12-10`
@@ -157,7 +356,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 * Fix issue resulting in preview image not display when `Upload` in `picture-card` mode. [#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
 * DatePicker
  * `onChange` will be triggered when `DatePicker` in `showTime` mode on blur now.
-  * Add `monthCellContentRender` and `cellContentRender` for `MonthPicker`.
+  * Add `monthCellContentRender` for `MonthPicker`.
  * `Rangepicker` can input time manually now.[#3718](https://github.com/ant-design/ant-design/issues/3718)
  * Add czech locale/translations.
 * Badge
@@ -171,10 +370,10 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
  * Add `type`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
  * Add `checkable`. [#3560](https://github.com/ant-design/ant-design/issues/3560)
 * Radio.Group
-  * Add `className`。
+  * Add `className`.
  * `null` or `undefined` `children` will be ignored.
 * Select
-  * Add `tokenSeparators` to support automatic tokenization。[#2071](https://github.com/ant-design/ant-design/issues/2071)
+  * Add `tokenSeparators` to support automatic tokenization. [#2071](https://github.com/ant-design/ant-design/issues/2071)
  * Add `onFocus` callback. [#3587](https://github.com/ant-design/ant-design/issues/3587)
  * Fix issue resulting in Select can't display correct selected item text in `combobox` mode. [#3401](https://github.com/ant-design/ant-design/issues/3401)

@@ -415,4 +614,4 @@ The following change will throw some warnings in the console and it will still w

 ## 1.11.4

-Visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0) to read change logs from `0.x` to `1.x`。
+Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`.
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -5,10 +5,209 @@ toc: false
 timeline: true
 ---

-如果需要查看 `2.0.0` 之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0)。
+`antd` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
+
+#### 发布周期
+
+* patch 版本：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
+* minor 版本：每月发布一个带有新特性的向下兼容的版本。
+* 大版本号：含有破坏性更新和新特性，不在发布周期内。
+
+如果需要查看 `2.0.0` 之前的更新日志，请移步 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md)。

 ---

+## 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`
+
+- **Affix**
+  - 修复 hover 时元素被隐藏的问题。[#4800](https://github.com/ant-design/ant-design/issues/4800)
+  - 修复 event listener 未被正确移除的问题。[#4755](https://github.com/ant-design/ant-design/issues/4755)
+  - 修复快速滚动时不能正确复位的问题。[#4760](https://github.com/ant-design/ant-design/issues/4760)
+- **Anchor** 修复了有 offsetTop 时的定位问题。[#4706](https://github.com/ant-design/ant-design/issues/4706)
+- **AutoComplete**
+  - 修复了 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)
+- **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)
+  - 修复过滤功能在 JSX 模式下不生效的问题。[#4759](https://github.com/ant-design/ant-design/issues/4759)
+  - 修复分页跳转问题。[#4779](https://github.com/ant-design/ant-design/issues/4779)
+- **Tabs** 修复了在 IE9 中从第二个标签页起都显示空白的问题。[#4795](https://github.com/ant-design/ant-design/issues/4795)
+- **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)
+- **网站**
+  - 首页自动选择语言。[#4552](https://github.com/ant-design/ant-design/issues/4552)
+  - 接入 Google 作为文档的全文本搜索。[#4814](https://github.com/ant-design/ant-design/issues/4814)
+  - 改变版本切换 Select 的位置。[pull-4799](https://github.com/ant-design/ant-design/pull/4799)
+
+## 2.7.0
+
+`2017-02-03`
+
+* Button 新增 `danger` 和 `ghost` 属性。[#4679](https://github.com/ant-design/ant-design/pull/4679)
+* AutoComplete 支持自定义输入框的用法。 [#4483](https://github.com/ant-design/ant-design/pull/4483)
+* 升级了 rc-cascader 到 0.11.0，支持键盘操作。[#4411](https://github.com/ant-design/ant-design/pull/4411)
+* notification 支持更多弹出方向。[#4732](https://github.com/ant-design/ant-design/pull/4700)
+* 升级了 rc-steps 到 2.3.0，Steps 新增 `progressDot` 属性，支持自定义点状步骤条的样式。[#4659](https://github.com/ant-design/ant-design/pull/4659)
+* 升级了 rc-input-number 到 3.0.0
+  * 现在输入时也会触发 `onChange`。[#4265](https://github.com/ant-design/ant-design/pull/4265)
+  * 修复了 `onKeyUp` 事件。[#4717](https://github.com/ant-design/ant-design/issues/4717)
+* Slider 增加 `veritical` 模式。[#4473](https://github.com/ant-design/ant-design/pull/4473)
+* Tag
+  - 增加了预设颜色。[#4571](https://github.com/ant-design/ant-design/pull/4571)
+  - 调整了垂直对齐和默认间距。
+* 添加了对德语的支持。[#4686](https://github.com/ant-design/ant-design/pull/4686)
+* 添加了对瑞典语的支持。[#4455](https://github.com/ant-design/ant-design/pull/4455)
+* 添加了对法语的支持。[#4538](https://github.com/ant-design/ant-design/pull/4538)
+* Transfer 添加了 `onSearchChange` 回调。 [#4464](https://github.com/ant-design/ant-design/pull/4464)
+* Modal.confirm 添加了 maskClosable 配置项。[#4488](https://github.com/ant-design/ant-design/pull/4488), [#4488](https://github.com/ant-design/ant-design/pull/4490)
+* Form 增加 `hideRequiredMark` 属性。[#4732](https://github.com/ant-design/ant-design/pull/4732)
+* 改进了 Upload 的列表图片预览。 [#4516](https://github.com/ant-design/ant-design/pull/4516)
+* 升级了 rc-select 到 6.7.1。
+  * 修复了 Select 的 `onChange` 回调重复触发的问题。[#156@rc-select](https://github.com/react-component/select/pull/156)
+  * 修复了 Select 显示初始化值的问题。[#152@rc-select](https://github.com/react-component/select/pull/152)
+* 升级 rc-tree-select 到 `1.9.0`。
+  * 新增 `treeDefaultExpandedKeys` 属性。[#43@rc-tree-select](https://github.com/react-component/tree-select/pull/43)
+  * 修复了文字溢出换行问题。[#42@rc-tree-select](https://github.com/react-component/tree-select/pull/42)
+* 新增 less 变量: `@border-style-base` `@border-width-base` `@btn-danger-color` `@btn-danger-bg` 等。
+* 修复了 Badge 在页面放大时错位的问题。[#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290)
+* 修复一个固定表头的表格错位问题。[#4750](https://github.com/ant-design/ant-design/issues/4750)
+* 修复一个 IE 下表格滚动时卡顿的问题。[#4522](https://github.com/ant-design/ant-design/issues/4522)
+* 添加别名以修正图标命名风格：`addfile` => `file-add`，`addfolder` => `folder-open`，原有的命名依然有效。[#4758](https://github.com/ant-design/ant-design/issues/4758)
+
+## 2.6.4
+
+`2017-01-20`
+
+* 优化 RangePicker 选择预设时间时的界面显示。[#4561](https://github.com/ant-design/ant-design/issues/4561)
+* 修复 DatePicker 选择时间界面的滚动问题。[#4412](https://github.com/ant-design/ant-design/issues/4412)
+* 修复 Menu 在 `vertical` 的受控模式下，子菜单不会弹出的问题。[#3783](https://github.com/ant-design/ant-design/issues/3783)
+* 修复 Cascader 禁用时的值显示样式问题。[#4648](https://github.com/ant-design/ant-design/issues/4648)
+* Table
+  * 优化固定表头的滚动条显示。[#4637](https://github.com/ant-design/ant-design/issues/4637)
+  * 修复在 Safari 下显示 loading 效果时表头会闪烁的问题。[#4622](https://github.com/ant-design/ant-design/issues/4622)
+  * 修复多处边框问题。[#4647](https://github.com/ant-design/ant-design/issues/4647)、[#4635](https://github.com/ant-design/ant-design/issues/4635)
+  * 修复 showHeader 的默认值不为 `false` 的问题。[#4658](https://github.com/ant-design/ant-design/issues/4658)
+  * 修复找不到 `TableColumnConfig` 的类型定义的问题。[#4660](https://github.com/ant-design/ant-design/issues/4660)
+
+## 2.6.3
+
+`2017-01-15`
+
+* 修复 `2.6.2` 中 Popconfirm 不可用的问题。[#4606](https://github.com/ant-design/ant-design/issues/4606)
+
+## 2.6.2
+
+`2017-01-14`
+
+* 新增社区精选组件页面。[链接](/docs/react/recommendation-cn)
+* 修复一个内容过长导致 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)
+* Table
+  * 调大了 Table 选择框和展开按钮的列宽度。
+  * 修复 `pagination` 属性切换后分页不可用的问题。[#4532](https://github.com/ant-design/ant-design/issues/4532)
+  * 修复不支持三级筛选菜单的问题。[#4541](https://github.com/ant-design/ant-design/issues/4541)
+  * 修复 `column.filteredValue` 无法设置为 `null` 的问题。
+* 调整 Carousel 为默认不可拖拽和文字可选择。
+* 增加了 Breadcrumb 内嵌非 Breadcrumb.Item 元素时的警告提示。[#4403](https://github.com/ant-design/ant-design/issues/4403)
+* 修复 Tooltip 在 `onVisibleChange(visible)` 返回 `true` 时不展示的问题。[#4579](https://github.com/ant-design/ant-design/issues/4579)
+* 优化 TreeSelect 内容过长时的面板高度。[#4537](https://github.com/ant-design/ant-design/pull/4537)
+* 补充了 TimePicker 和 Spin 的组件样式变量。
+* 用年份代替了 DatePicker 年份选择面板上的箭头。[#4415](https://github.com/ant-design/ant-design/issues/4415)
+* 修复 AutoComplete 和 Form `[options.validateTrigger]` 的 TypeScript 定义。
+* 优化 Spin、Progress 的动画细节效果。
+
+## 2.6.1
+
+`2017-1-6`
+
+* 修复 Menu dark theme 样式问题。[#4440](https://github.com/ant-design/ant-design/issues/4440)
+* 修复 `Select[tokenSeparators]` `Modal[afterClose]` `Input[name]` 等的 TypeScript interface 定义。[#4441](https://github.com/ant-design/ant-design/pull/4441) [@eddhannay](https://github.com/eddhannay)
+* 修复 `TimePicker[placeholder]` 无法置空的问题。[#4446](https://github.com/ant-design/ant-design/pull/4446) [@jialeicui](https://github.com/jialeicui)
+* 修复 DatePicker 等年份选择面板折行问题。[#4415](https://github.com/ant-design/ant-design/issues/4415)
+* 修复 Table loading 状态分页器可操作的问题。[#4461](https://github.com/ant-design/ant-design/issues/4461)
+* 修复 `Input[prefix|suffix]` 垂直对齐问题。[commit](https://github.com/ant-design/ant-design/commit/c4ac4d1eca53ae2f6f4a1e15210b43745f283534)
+* 修复 Cascader 对齐问题。[commit](https://github.com/ant-design/ant-design/commit/1fbebd4ecfff432e1b2261c9dfee4b9f471e7b1f)
+
+## 2.6.0
+
+`2017-1-2`
+
+- 采用全新的色彩系统。[pull/4426](https://github.com/ant-design/ant-design/pull/4426)
+  - 使用新的算法函数代替 `tint/shade`。
+  - 利用算法生成的新版色板。[色板演示](http://ant.design/docs/spec/colors)
+  - 调整默认文字颜色。
+- 增加 Layout 布局组件。[#3534](https://github.com/ant-design/ant-design/issues/3534)
+- 增加 Grid 栅格配置器示例。[commit/ee17ab](https://github.com/ant-design/ant-design/commit/ee17abfa9d0362c6f9baab4a9a09e57574583246)
+- Input
+  - 增加 prefix 和 suffix 属性，支持前后缀配置。[#4226](https://github.com/ant-design/ant-design/issues/4226) [@ystarlongzi](https://github.com/ystarlongzi)
+  - InputGroup 增加 compact 属性，支持紧凑型展示。[pull/4309](https://github.com/ant-design/ant-design/pull/4309)
+- Spin 增加延迟显示属性 delay。[#4306](https://github.com/ant-design/ant-design/issues/4306)
+- 修复 Pagination 在低分辨率下的错位问题。[#4349](https://github.com/ant-design/ant-design/issues/4349)
+- 修复 Dropdown.Button 换行的问题。[pull/4355](https://github.com/ant-design/ant-design/pull/4355) [@Morhaus](https://github.com/Morhaus)
+- 修复 Cascader disabled 状态底色的问题。[#4434](https://github.com/ant-design/ant-design/issues/4434)
+- 修复 MonthPicker monthCellContentRender 属性无效的问题，并修正了错误的文档。[#4394](https://github.com/ant-design/ant-design/issues/4394)
+- 修复 ButtonGroup 存在多余蓝色边框的问题。[#4382](https://github.com/ant-design/ant-design/pull/4382) [@ystarlongzi](https://github.com/ystarlongzi)
+- 修复 Menu horizontal 模式子菜单选择项背景色错误的问题。[#4414](https://github.com/ant-design/ant-design/issues/4414)
+- 修复配置了 hasFeedback 的 Select/Cascader 下拉箭头被遮盖的问题。[#4431](https://github.com/ant-design/ant-design/issues/4431) [@JesperWe](https://github.com/JesperWe)
+- Table 没有 header 时，第一行改为非圆角。[#4373](https://github.com/ant-design/ant-design/issues/4373)
+- 优化 Tree 的拖拽效果。[#4371](https://github.com/ant-design/ant-design/issues/4371)
+- 进行了一些文档或示例优化、文档错误修正以及网站样式问题修复。
+- 升级 rc-form 底层依赖，getFieldDecorator 的 id 支持嵌套式写法。
+
+## 2.5.3
+
+`2016-12-24` 🎄🎄🎄
+
+* 支持 TypeScript@2.1。[#4208](https://github.com/ant-design/ant-design/issues/4208)
+* 修正了 Tabs 嵌套时的样式问题。 [#4317](https://github.com/ant-design/ant-design/issues/4317)
+* 修正了 Radio 在当前项选中时，再次点击仍会触发 onChange 的问题。 [#4242](https://github.com/ant-design/ant-design/issues/4242) [@ystarlongzi](https://github.com/ystarlongzi)
+* 修正了 Form 多列栅格式的表单排列方式布局异常。 [#4271](https://github.com/ant-design/ant-design/issues/4271)
+* 修正了 Menu 竖直方向的当前选择项的背景问题。[#4253](https://github.com/ant-design/ant-design/issues/4253)
+* 优化了 Dropdown 的 `onVisibleChange` 回调参数 Type 类型。[#4236](https://github.com/ant-design/ant-design/issues/4236)
+* 优化了 Cascader 的 `onChange` 回调参数的 Type 类型。[#4231](https://github.com/ant-design/ant-design/issues/4231)
+* 优化了 Datepicker[showTime] 的默认宽度 [b912f1c](https://github.com/ant-design/ant-design/commit/b912f1cea6f470c16b8dd90554883460161cef47)
+
 ## 2.5.2

 `2016-12-10`
@@ -156,7 +355,7 @@ timeline: true
 * 修复 `Upload` `picture-card` 模式下新上传的图片不显示预览的问题。[#3706](https://github.com/ant-design/ant-design/pull/3706) [@denzw](https://github.com/denzw)
 * DatePicker
  * 在 `showTime` 模式下现在失去焦点也会触发 `onChange`。
-  * `MonthPicker` 增加了 `monthCellContentRender` 和 `cellContentRender`。
+  * `MonthPicker` 增加了 `monthCellContentRender`。
  * `RangePicker` 现在可以手动输入时间了。[#3718](https://github.com/ant-design/ant-design/issues/3718)
  * 新增了捷克语的翻译。
 * Badge
@@ -314,7 +513,7 @@ timeline: true
  ```
 * 时间类组件的 `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.stringy(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
+  由于 `JSON.stringify(date: moment)` 返回的值会丢失时区设置，所以要先使用 `.format` 把日期转成字符串，相关 issue 见 [#3082](https://github.com/ant-design/ant-design/issues/3082)：
  ```js
  handleSubmit() {
    const values = this.props.form.getFieldsValue();
@@ -413,4 +612,4 @@ timeline: true

 ## 1.11.4

-去 [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0) 查看 `0.x` 到 `1.x` 的 Change Log。
+去 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) 查看 `0.x` 到 `1.x` 的 Change Log。
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -7,22 +7,24 @@
 # Ant Design

 [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
-[![Coverage Status](https://coveralls.io/repos/github/ant-design/ant-design/badge.svg?branch=master)](https://coveralls.io/github/ant-design/ant-design?branch=master)
-[![Dependency Status](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+[![Coveralls](https://img.shields.io/coveralls/ant-design/ant-design.svg?style=flat-square)](https://coveralls.io/github/ant-design/ant-design)
+[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design)

 [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
 [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd)
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Average time to resolve an issue")
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 一套企业级的 UI 设计语言和 React 实现。

+[README in English](README.md)
+
 ## 特性

- 提炼和服务企业级中后台产品的交互语言和视觉风格。
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
+- 提炼自企业级中后台产品的交互语言和视觉风格。
+- 开箱即用的高质量 React 组件。
 - 使用 TypeScript 构建，提供完整的类型定义文件。
- 基于 npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) 的企业级业务开发框架。
+- 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架。

 ## 安装

@@ -71,22 +73,22 @@ tsconfig.json

 ## 链接

- [首页](http://ant.design/)
- [组件文档](http://ant.design/docs/react/introduce)
+- [首页](http://ant.design/index-cn)
+- [组件文档](http://ant.design/docs/react/introduce-cn)
 - [更新日志](CHANGELOG.en-US.md)
 - [开发脚手架](https://github.com/dvajs/dva-cli)
 - [开发工具文档](http://ant-tool.github.io/)
 - [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)
 - [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
 - [CodePen 模板](http://codepen.io/benjycui/pen/KgPZrE?editors=001) for bug reports
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
- [定制主题](http://ant.design/docs/react/customize-theme)
+- [定制主题](http://ant.design/docs/react/customize-theme-cn)

 ## 如何贡献

--- a/README.md
+++ b/README.md
@@ -7,26 +7,28 @@
 # Ant Design

 [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design)
-[![Coverage Status](https://coveralls.io/repos/github/ant-design/ant-design/badge.svg?branch=master)](https://coveralls.io/github/ant-design/ant-design?branch=master)
-[![Dependency Status](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
+[![Coveralls](https://img.shields.io/coveralls/ant-design/ant-design.svg?style=flat-square)](https://coveralls.io/github/ant-design/ant-design)
+[![Dependency Status](https://img.shields.io/gemnasium/react-component/trigger.svg?style=flat-square)](https://gemnasium.com/ant-design/ant-design)

 [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
 [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](https://npmjs.org/package/antd)
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Average time to resolve an issue")
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 An enterprise-class UI design language and React-based implementation.

+[中文 README](README-zh_CN.md)
+
 ## Features

- An enterprise-class design language and high quality UI.
- Graceful UI components out of the box, base on [React Component](http://react-component.github.io/badgeboard/).
+- An enterprise-class UI design language for web applications.
+- A set of high-quality React components out of the box.
 - Written in TypeScript with complete define types.
- A npm + webpack + babel + [dora](https://github.com/dora-js/dora) + [dva](https://github.com/dvajs/dva) development framework.
+- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.

 ## 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, any reasonable improvement is welcomed. If you are interested in contributing to `antd`, you can watch this repository and 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 had 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).

 ## Install

@@ -54,7 +56,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
 - Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)

   ```js
-   // .babelrc
+   // .babelrc or babel-loader option
   {
     "plugins": [["import", { libraryName: "antd", style: "css" }]]
   }
@@ -67,7 +69,7 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
   import { DatePicker } from 'antd';
   ```

- Manually import
+- Manual import

   ```jsx
   import DatePicker from 'antd/lib/date-picker';  // just for js
@@ -117,4 +119,4 @@ tsconfig.json

 ## Contributing

-We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
+We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
--- a/components/tests/snapshots/index.test.js.snap
+++ b/components/tests/snapshots/index.test.js.snap
@@ -0,0 +1,55 @@
+exports[`antd exports modules correctly 1`] = `
+Array [
+  "Affix",
+  "Anchor",
+  "AutoComplete",
+  "Alert",
+  "BackTop",
+  "Badge",
+  "Breadcrumb",
+  "Button",
+  "Calendar",
+  "Card",
+  "Collapse",
+  "Carousel",
+  "Cascader",
+  "Checkbox",
+  "Col",
+  "DatePicker",
+  "Dropdown",
+  "Form",
+  "Icon",
+  "Input",
+  "InputNumber",
+  "Layout",
+  "LocaleProvider",
+  "message",
+  "Menu",
+  "Modal",
+  "notification",
+  "Pagination",
+  "Popconfirm",
+  "Popover",
+  "Progress",
+  "Radio",
+  "Rate",
+  "Row",
+  "Select",
+  "Slider",
+  "Spin",
+  "Steps",
+  "Switch",
+  "Table",
+  "Transfer",
+  "Tree",
+  "TreeSelect",
+  "Tabs",
+  "Tag",
+  "TimePicker",
+  "Timeline",
+  "Tooltip",
+  "Mention",
+  "Upload",
+  "version",
+]
+`;
--- a/components/tests/index.test.js
+++ b/components/tests/index.test.js
@@ -0,0 +1,7 @@
+import * as antd from '..';
+
+describe('antd', () => {
+  it('exports modules correctly', () => {
+    expect(Object.keys(antd)).toMatchSnapshot();
+  });
+});
--- a/components/_util/tests/util.test.js
+++ b/components/_util/tests/util.test.js
@@ -0,0 +1,29 @@
+import throttleByAnimationFrame from '../throttleByAnimationFrame';
+
+jest.useFakeTimers();
+
+describe('Test utils function', () => {
+  it('throttle function should work', () => {
+    const callback = jest.fn();
+    const throttled = throttleByAnimationFrame(callback);
+    expect(callback).not.toBeCalled();
+
+    throttled();
+    throttled();
+
+    jest.runAllTimers();
+    expect(callback).toBeCalled();
+    expect(callback.mock.calls.length).toBe(1);
+  });
+
+  it('throttle function should be canceled', () => {
+    const callback = jest.fn();
+    const throttled = throttleByAnimationFrame(callback);
+
+    throttled();
+    throttled.cancel();
+
+    jest.runAllTimers();
+    expect(callback).not.toBeCalled();
+  });
+});
--- a/components/_util/getLocale.tsx
+++ b/components/_util/getLocale.tsx
@@ -1,6 +1,6 @@
 import assign from 'object-assign';

-export default function getLocale(props, context, componentName, getDefaultLocale) {
+export function getComponentLocale(props, context, componentName, getDefaultLocale) {
  const locale = context && context.antLocale && context.antLocale[componentName] ?
    context.antLocale[componentName] : getDefaultLocale();

@@ -8,3 +8,12 @@ export default function getLocale(props, context, componentName, getDefaultLocal
  result.lang = assign({}, locale.lang, props.locale.lang);
  return result;
 }
+
+export function getLocaleCode(context) {
+  const localeCode = context.antLocale && context.antLocale.locale;
+  // Had use LocaleProvide but didn't set locale
+  if (context.antLocale && context.antLocale.exist && !localeCode) {
+    return 'zh-cn';
+  }
+  return localeCode;
+}
--- a/components/_util/getRequestAnimationFrame.tsx
+++ b/components/_util/getRequestAnimationFrame.tsx
@@ -1,3 +1,16 @@
+const availablePrefixs = ['moz', 'ms', 'webkit'];
+
+function requestAnimationFramePolyfill() {
+  let lastTime = 0;
+  return function(callback) {
+    const currTime = new Date().getTime();
+    const timeToCall = Math.max(0, 16 - (currTime - lastTime));
+    const id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
+    lastTime = currTime + timeToCall;
+    return id;
+  };
+}
+
 export default function getRequestAnimationFrame() {
  if (typeof window === 'undefined') {
    return () => {};
@@ -5,8 +18,27 @@ export default function getRequestAnimationFrame() {
  if (window.requestAnimationFrame) {
    return window.requestAnimationFrame;
  }
-  const prefix = ['moz', 'ms', 'webkit'].filter(key => `${key}RequestAnimationFrame` in window)[0];
+
+  const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0];
+
  return prefix
    ? window[`${prefix}RequestAnimationFrame`]
-    : callback => setTimeout(callback, 1000 / 60);
+    : requestAnimationFramePolyfill();
+}
+
+export function cancelRequestAnimationFrame(id) {
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  if (window.cancelAnimationFrame) {
+    return window.cancelAnimationFrame(id);
+  }
+  const prefix = availablePrefixs.filter(key =>
+    `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window
+  )[0];
+
+  return prefix ?
+    (window[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`]).call(this, id)
+    : clearTimeout(id);
 }
--- a/components/_util/isFlexSupported.tsx
+++ b/components/_util/isFlexSupported.tsx
@@ -0,0 +1,10 @@
+export default function isFlexSupported() {
+  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+    const { documentElement } = window.document;
+    return 'flex' in documentElement.style ||
+      'webkitFlex' in documentElement.style ||
+      'Flex' in documentElement.style ||
+      'msFlex' in documentElement.style;
+  }
+  return false;
+}
--- a/components/_util/splitObject.tsx
+++ b/components/_util/splitObject.tsx
@@ -1,12 +0,0 @@
-export default function splitObject(obj, parts): Array<any> {
-  const left = {};
-  const right = {};
-  Object.keys(obj).forEach((k) => {
-    if (parts.indexOf(k) !== -1) {
-      left[k] = obj[k];
-    } else {
-      right[k] = obj[k];
-    }
-  });
-  return [left, right];
-}
--- a/components/_util/throttleByAnimationFrame.tsx
+++ b/components/_util/throttleByAnimationFrame.tsx
@@ -0,0 +1,47 @@
+import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame';
+
+const reqAnimFrame = getRequestAnimationFrame();
+
+export default function throttleByAnimationFrame(fn) {
+  let requestId;
+
+  const later = args => () => {
+    requestId = null;
+    fn(...args);
+  };
+
+  const throttled = (...args) => {
+    if (requestId == null) {
+      requestId = reqAnimFrame(later(args));
+    }
+  };
+
+  (throttled as any).cancel = () => cancelRequestAnimationFrame(requestId);
+
+  return throttled;
+}
+
+export function throttleByAnimationFrameDecorator() {
+  return function(target, key, descriptor) {
+    let fn = descriptor.value;
+    let definingProperty = false;
+    return {
+      configurable: true,
+      get() {
+        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
+          return fn;
+        }
+
+        let boundFn = throttleByAnimationFrame(fn.bind(this));
+        definingProperty = true;
+        Object.defineProperty(this, key, {
+          value: boundFn,
+          configurable: true,
+          writable: true,
+        });
+        definingProperty = false;
+        return boundFn;
+      },
+    };
+  };
+}
--- a/components/affix/tests/Affix.test.js
+++ b/components/affix/tests/Affix.test.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Affix from '..';
+import Button from '../../button';
+
+jest.useFakeTimers();
+
+const events = {};
+
+class AffixMounter extends React.Component {
+  componentDidMount() {
+    this.container.scrollTop = 100;
+    this.container.addEventListener = jest.fn().mockImplementation((event, cb) => {
+      events[event] = cb;
+    });
+  }
+  getTarget = () => {
+    return this.container;
+  }
+  render() {
+    return (<div
+      style={{
+        height: 100,
+        overflowY: 'scroll',
+      }}
+      ref={(node) => { this.container = node; }}
+    >
+      <div
+        className="background"
+        style={{
+          paddingTop: 60,
+          height: 300,
+        }}
+      >
+        <Affix
+          target={() => this.container}
+          ref={ele => this.affix = ele}
+        >
+          <Button type="primary" >
+            Fixed at the top of container
+          </Button>
+        </Affix>
+      </div>
+    </div>);
+  }
+}
+
+describe('Affix Render', () => {
+  it('Anchor render perfectly', () => {
+    document.body.innerHTML = '<div id="mounter" />';
+
+    const wrapper = mount(<AffixMounter />, { attachTo: document.getElementById('mounter') });
+    jest.runAllTimers();
+
+    wrapper.node.affix.refs.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
+      return {
+        bottom: 100, height: 28, left: 0, right: 0, top: -50, width: 195,
+      };
+    });
+
+    events.scroll({
+      type: 'scroll',
+    });
+
+    jest.runAllTimers();
+    expect(wrapper.node.affix.state.affixStyle).not.toBe(null);
+  });
+});
--- a/components/affix/tests/snapshots/demo.test.js.snap
+++ b/components/affix/tests/snapshots/demo.test.js.snap
--- a/components/affix/tests/demo.test.js
+++ b/components/affix/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('affix');
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -16,8 +16,8 @@ Please note that Affix should not cover other content on the page, especially wh

 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| offsetTop    | Pixels to offset from top when calculating position of scroll | Number | 0 |
-| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
+| offsetTop    | Pixels to offset from top when calculating position of scroll | number | 0 |
+| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | onChange     | Callback when affix state is changed | Function(affixed) | - |

 **Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import shallowequal from 'shallowequal';
 import omit from 'omit.js';
 import getScroll from '../_util/getScroll';
+import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';

 function getTargetRect(target): ClientRect {
  return target !== window ?
@@ -96,18 +97,16 @@ export default class Affix extends React.Component<AffixProps, any> {
    });
  }

-  setPlaceholderStyle(e, placeholderStyle) {
+  setPlaceholderStyle(placeholderStyle) {
    const originalPlaceholderStyle = this.state.placeholderStyle;
-    if (e.type === 'resize') {
-      return;
-    }
    if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
      return;
    }
    this.setState({ placeholderStyle });
  }

-  updatePosition = (e) => {
+  @throttleByAnimationFrameDecorator()
+  updatePosition(e) {
    let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
    const targetNode = target();

@@ -145,7 +144,7 @@ export default class Affix extends React.Component<AffixProps, any> {
        left: targetRect.left + elemOffset.left,
        width: affixNode.offsetWidth,
      });
-      this.setPlaceholderStyle(e, {
+      this.setPlaceholderStyle({
        width: affixNode.offsetWidth,
        height: affixNode.offsetHeight,
      });
@@ -161,13 +160,18 @@ export default class Affix extends React.Component<AffixProps, any> {
        left: targetRect.left + elemOffset.left,
        width: affixNode.offsetWidth,
      });
-      this.setPlaceholderStyle(e, {
+      this.setPlaceholderStyle({
        width: affixNode.offsetWidth,
        height: affixNode.offsetHeight,
      });
    } else {
-      this.setAffixStyle(e, null);
-      this.setPlaceholderStyle(e, null);
+      const { affixStyle } = this.state;
+      if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
+        this.setAffixStyle(e, {...affixStyle, width: affixNode.offsetWidth });
+      } else {
+        this.setAffixStyle(e, null);
+      }
+      this.setPlaceholderStyle(null);
    }
  }

@@ -192,6 +196,7 @@ export default class Affix extends React.Component<AffixProps, any> {
  componentWillUnmount() {
    this.clearScrollEventListeners();
    clearTimeout(this.timeout);
+    (this.updatePosition as any).cancel();
  }

  setTargetEventListeners(getTarget) {
@@ -199,6 +204,7 @@ export default class Affix extends React.Component<AffixProps, any> {
    if (!target) {
      return;
    }
+    this.clearScrollEventListeners();
    this.scrollEvent = addEventListener(target, 'scroll', this.updatePosition);
    this.resizeEvent = addEventListener(target, 'resize', this.updatePosition);
  }
@@ -217,9 +223,9 @@ export default class Affix extends React.Component<AffixProps, any> {
    });

    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
-
+    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
    return (
-      <div {...props} style={this.state.placeholderStyle}>
+      <div {...props} style={placeholderStyle}>
        <div className={className} ref="fixedNode" style={this.state.affixStyle}>
          {this.props.children}
        </div>
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -17,8 +17,8 @@ title: Affix

 | 成员        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | Number |         |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发   | Number |         |
+| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
 | onChange | 固定状态改变时触发的回调函数   | Function(affixed) | 无        |

--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
--- a/components/alert/tests/demo.test.js
+++ b/components/alert/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('alert');
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -15,11 +15,11 @@ Alert component for feedback.

 | Property   | Description                                               | Type       | Default |
 |----------- |---------------------------------------------------------  | ---------- |-------|
-| type       | Type of Alert styles, options:`success`, `info`, `warning`, `error` | String | `info` |
-| closable   | Whether Alert can be closed | Boolean | - |
-| closeText  | Close text to show | React.Node | - |
-| message    | Content of Alert | React.Node | - |
-| description | Additional content of Alert | React.Node | - |
+| type       | Type of Alert styles, options:`success`, `info`, `warning`, `error` | string | `info` |
+| closable   | Whether Alert can be closed | boolean | - |
+| closeText  | Close text to show | string\|ReactNode | - |
+| message    | Content of Alert | string\|ReactNode | - |
+| description | Additional content of Alert | string\|ReactNode | - |
 | onClose    | Callback when close Alert | Function | - |
-| showIcon   | Whether to show icon | Boolean | false |
-| banner   | Whether to show as banner | Boolean | false |
+| showIcon   | Whether to show icon | boolean | false |
+| banner   | Whether to show as banner | boolean | false |
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -16,12 +16,12 @@ title: Alert

 | 参数        | 说明                                                      | 类型        | 默认值 |
 |----------- |---------------------------------------------------------  | ---------- |-------|
-| type       | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`   | String     | `info`    |
-| closable   | 默认不显示关闭按钮                                  | Boolean   | 无    |
-| closeText  | 自定义关闭按钮                                     | React.Node   | 无    |
-| message    | 警告提示内容                                       | React.Node   | 无    |
-| description | 警告提示的辅助性文字介绍                            | React.Node   | 无    |
+| type       | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`   | string     | `info`    |
+| closable   | 默认不显示关闭按钮                                  | boolean   | 无    |
+| closeText  | 自定义关闭按钮                                     | string\|ReactNode   | 无    |
+| message    | 警告提示内容                                       | string\|ReactNode   | 无    |
+| description | 警告提示的辅助性文字介绍                            | string\|ReactNode   | 无    |
 | onClose     | 关闭时触发的回调函数                                | Function   | 无    |
-| showIcon   | 是否显示辅助图标                                 | Boolean   | false    |
-| banner   | 是否用作顶部公告                                 | Boolean   | false    |
+| showIcon   | 是否显示辅助图标                                 | boolean   | false    |
+| banner   | 是否用作顶部公告                                 | boolean   | false    |

--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -29,32 +29,32 @@
  }

  &-success {
-    border: 1px solid tint(@success-color, 80%);
-    background-color: tint(@success-color, 90%);
+    border: @border-width-base @border-style-base @green-2;
+    background-color: @green-1;
    .@{alert-prefix-cls}-icon {
      color: @success-color;
    }
  }

  &-info {
-    border: 1px solid tint(@primary-color, 80%);
-    background-color: tint(@primary-color, 90%);
+    border: @border-width-base @border-style-base @primary-2;
+    background-color: @primary-1;
    .@{alert-prefix-cls}-icon {
      color: @primary-color;
    }
  }

  &-warning {
-    border: 1px solid tint(@warning-color, 80%);
-    background-color: tint(@warning-color, 90%);
+    border: @border-width-base @border-style-base @yellow-2;
+    background-color: @yellow-1;
    .@{alert-prefix-cls}-icon {
      color: @warning-color;
    }
  }

  &-error {
-    border: 1px solid tint(@error-color, 80%);
-    background-color: tint(@error-color, 90%);
+    border: @border-width-base @border-style-base @red-2;
+    background-color: @red-1;
    .@{alert-prefix-cls}-icon {
      color: @error-color;
    }
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -8,7 +8,8 @@ export interface AnchorLinkProps {
  active?: boolean;
  prefixCls?: string;
  children?: any;
-  title?: Element;
+  title?: React.ReactNode;
+  offsetTop: number;
  bounds: number;
  target?: () => HTMLElement | Window;
  affix?: boolean;
@@ -31,9 +32,9 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
  private _component: Element;

  setActiveAnchor() {
-    const { bounds, href, affix } = this.props;
+    const { bounds, offsetTop, href, affix } = this.props;
    const { anchorHelper } = this.context;
-    const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
+    const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(offsetTop, bounds) === href;
    if (active && anchorHelper) {
      anchorHelper.setActiveAnchor(this._component);
    }
@@ -55,6 +56,7 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
        onClick: this.props.onClick,
        prefixCls: this.props.prefixCls,
        affix: this.props.affix,
+        offsetTop: this.props.offsetTop,
      });
    }
    return child;
@@ -73,14 +75,14 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
    } else {
      e.stopPreventDefault();
      const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
-      scrollToFn(href);
+      scrollToFn(href, this.props.offsetTop);
    }
  }

  render() {
-    const { prefixCls, href, children, title, bounds, affix } = this.props;
+    const { prefixCls, href, children, title, bounds, offsetTop, affix } = this.props;
    const { anchorHelper } = this.context;
-    const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
+    const active = affix && anchorHelper && anchorHelper.getCurrentAnchor(offsetTop, bounds) === href;
    const cls = classNames({
      [`${prefixCls}-link`]: true,
      [`${prefixCls}-link-active`]: active,
--- a/components/anchor/tests/Anchor.test.js
+++ b/components/anchor/tests/Anchor.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Anchor from '../../components/anchor';
+import Anchor from '..';

 const { Link } = Anchor;

--- a/components/anchor/tests/snapshots/demo.test.js.snap
+++ b/components/anchor/tests/snapshots/demo.test.js.snap
--- a/components/anchor/tests/demo.test.js
+++ b/components/anchor/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('anchor');
--- a/components/anchor/anchorHelper.tsx
+++ b/components/anchor/anchorHelper.tsx
@@ -43,14 +43,14 @@ export type Section = {
  section: any;
 };

-export function scrollTo(href, target = getDefaultTarget, callback = () => {}) {
+export function scrollTo(href, offsetTop = 0, target = getDefaultTarget, callback = () => {}) {
  const scrollTop = getScroll(target(), true);
  const targetElement = document.getElementById(href.substring(1));
  if (!targetElement) {
    return;
  }
-  const offsetTop = getOffsetTop(targetElement);
-  const targetScrollTop = scrollTop + offsetTop;
+  const eleOffsetTop = getOffsetTop(targetElement);
+  const targetScrollTop = scrollTop + eleOffsetTop - offsetTop;
  const startTime = Date.now();
  const frameFunc = () => {
    const timestamp = Date.now();
@@ -91,7 +91,7 @@ class AnchorHelper {
    this.currentAnchor = component;
  }

-  getCurrentAnchor(bounds = 5) {
+  getCurrentAnchor(offsetTop: number = 0, bounds = 5) {
    let activeAnchor = '';
    if (typeof document === 'undefined') {
      return activeAnchor;
@@ -100,9 +100,9 @@ class AnchorHelper {
    const linksPositions = (this.links
    .map(section => {
      const target = document.getElementById(section.substring(1));
-      if (target && getOffsetTop(target) < bounds) {
+      if (target && getOffsetTop(target) < offsetTop + bounds) {
        const top = getOffsetTop(target);
-        if (top <= bounds) {
+        if (top <= offsetTop + bounds) {
          return {
            section,
            top,
@@ -121,8 +121,8 @@ class AnchorHelper {
    return '';
  }

-  scrollTo(href, target = getDefaultTarget, callback = () => {}) {
-    scrollTo(href, target, callback);
+  scrollTo(href, offsetTop, target = getDefaultTarget, callback = () => {}) {
+    scrollTo(href, offsetTop, target, callback);
  }
 }

--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Navigation
+type: Other
 cols: 2
 title: Anchor
 ---
@@ -17,13 +17,13 @@ For displaying anchor hyperlinks on page and jumping between them.

 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| offsetTop    | Pixels to offset from top when calculating position of scroll | Number | 0 |
-| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
-| bounds     | Bounding distance of anchor area | Number | 5(px) |
+| offsetTop    | Pixels to offset from top when calculating position of scroll | number | 0 |
+| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
+| bounds     | Bounding distance of anchor area | number | 5(px) |

 ### Link Props

 | Property        | Description           | Type               | Default       |
 |-------------|----------------|--------------------|--------------|
-| href    | target of hyperlink  | String |         |
-| title | content of  hyperlink | React.Node |         |
+| href    | target of hyperlink  | string |         |
+| title | content of  hyperlink | string\|ReactNode |         |
--- a/components/anchor/index.tsx
+++ b/components/anchor/index.tsx
@@ -47,7 +47,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {

  handleScroll = () => {
    this.setState({
-      activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.bounds),
+      activeAnchor: this.anchorHelper.getCurrentAnchor(this.props.offsetTop, this.props.bounds),
    });
  }

@@ -85,7 +85,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
  clickAnchorLink = (href, component) => {
    this._avoidInk = true;
    this.refs.ink.style.top = `${component.offsetTop + component.clientHeight / 2 - 4.5}px`;
-    this.anchorHelper.scrollTo(href, getDefaultTarget, () => {
+    this.anchorHelper.scrollTo(href, this.props.offsetTop, getDefaultTarget, () => {
      this._avoidInk = false;
    });
  }
@@ -99,6 +99,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
        prefixCls: this.props.prefixCls,
        bounds: this.props.bounds,
        affix: this.props.affix,
+        offsetTop: this.props.offsetTop,
      });
    }
    return child;
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -2,7 +2,7 @@
 category: Components
 subtitle: 锚点
 cols: 2
-type: Navigation
+type: Other
 title: Anchor
 ---

@@ -18,13 +18,13 @@ title: Anchor

 | 成员        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | Number |         |
-| offsetBottom | 距离窗口底部达到指定偏移量后触发   | Number |         |
-| bounds | 锚点区域边界 | Number | 5(px) |
+| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
+| bounds | 锚点区域边界 | number | 5(px) |

 ### Link Props

 | 成员        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| href    | 锚点链接   | String |         |
-| title | 文字内容   | React.Node |         |
+| href    | 锚点链接   | string |         |
+| title | 文字内容   | string\|ReactNode |         |
--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
@@ -0,0 +1,234 @@
+exports[`test renders ./components/auto-complete/demo/antd.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">
+        input here
+      </div>
+      <ul>
+        <li
+          class="ant-select-search ant-select-search--inline">
+          <div
+            class="ant-select-search__field__wrap">
+            <textarea
+              class="ant-input ant-select-search__field"
+              style="height:50px;" />
+            <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/basic.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">
+        input here
+      </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/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"
+  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">
+        input here
+      </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/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/tests/ac.test.js
+++ b/components/auto-complete/tests/ac.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import AutoComplete from '..';
+
+describe('AutoComplete with Custom Input Element Render', () => {
+  it('AutoComplete with custom Input render perfectly', () => {
+    const wrapper = mount(
+      <AutoComplete dataSource={['12345', '23456', '34567']}>
+        <textarea />
+      </AutoComplete>
+    );
+
+    expect(wrapper.find('textarea').length).toBe(1);
+    wrapper.find('textarea').simulate('change', { target: { value: '123' } });
+    const dropdownWrapper = mount(wrapper.find('Trigger').node.getComponent());
+
+    expect(dropdownWrapper.find('MenuItem').length).toBe(1);
+    expect(dropdownWrapper.find('MenuItem').props().value).toBe('12345');
+  });
+});
--- a/components/auto-complete/tests/demo.test.js
+++ b/components/auto-complete/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('auto-complete');
--- a/components/auto-complete/demo/antd.md
+++ b/components/auto-complete/demo/antd.md
@@ -0,0 +1,58 @@
+---
+order: 3
+title:
+  zh-CN: 自定义输入组件
+  en-US: Customize Input Component
+---
+
+## zh-CN
+
+自定义输入组件。
+
+## en-US
+
+Customize Input Component
+
+````jsx
+import { AutoComplete } from 'antd';
+
+function onSelect(value) {
+  console.log('onSelect', value);
+}
+
+const Complete = React.createClass({
+  getInitialState() {
+    return {
+      dataSource: [],
+    };
+  },
+  handleChange(value) {
+    this.setState({
+      dataSource: !value ? [] : [
+        value,
+        value + value,
+        value + value + value,
+      ],
+    });
+  },
+  handleKeyPress(ev) {
+    console.log('handleKeyPress', ev);
+  },
+  render() {
+    const { dataSource } = this.state;
+    return (
+      <AutoComplete
+        dataSource={dataSource}
+        style={{ width: 200 }}
+        onSelect={onSelect}
+        onChange={this.handleChange}
+        placeholder="input here"
+      >
+        <textarea onKeyPress={this.handleKeyPress} style={{ height: 50 }} />
+      </AutoComplete>
+    );
+  },
+});
+
+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,31 @@
+---
+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/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -0,0 +1,138 @@
+---
+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 style={{ float: 'right' }}>约 {item.count} 个结果</span>
+    </Option>
+  );
+}
+
+const Complete = React.createClass({
+  getInitialState() {
+    return {
+      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 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+````
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -17,15 +17,17 @@ 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 |
 |----------------|----------------------------------|------------|--------|
-| dataSource          | Data source for autocomplete | Array     |      |
-| value    | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  -  |
-| defaultValue | Initial selected option. | string/Array<String>   |  -  |
+| dataSource          | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)[]     |      |
+| value    | selected option | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }>   |  -  |
+| defaultValue | Initial selected option. | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> |  -  |
 | allowClear   | Show clear button, effective in multiple mode only. | boolean | false |
 | 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 |
 | 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
@@ -1,5 +1,7 @@
 import React from 'react';
-import Select, { OptionProps, OptGroupProps } from '../select';
+import { findDOMNode } from 'react-dom';
+import Select, { AbstractSelectProps, OptionProps, OptGroupProps } from '../select';
+import Input from '../input';
 import { Option, OptGroup } from 'rc-select';
 import classNames from 'classnames';

@@ -11,21 +13,45 @@ export interface SelectedValue {
 export interface DataSourceItemObject { value: string; text: string; };
 export type DataSourceItemType = string | DataSourceItemObject;

-export interface AutoCompleteProps {
+export interface InputProps {
+  onChange?: React.FormEventHandler<any>;
+  value: any;
+}
+
+export type ValidInputElement =
+  HTMLInputElement |
+  HTMLTextAreaElement |
+  React.ReactElement<InputProps>;
+
+export interface AutoCompleteProps extends AbstractSelectProps {
  size?: 'large' | 'small' | 'default';
  className?: string;
  notFoundContent?: Element;
  dataSource: DataSourceItemType[];
-  prefixCls?: string;
-  transitionName?: string;
-  optionLabelProp?: string;
-  choiceTransitionName?: string;
-  showSearch?: boolean;
  defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
  value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
-  allowClear?: boolean;
  onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
+  onSelect?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>, option: Object) => any;
  disabled?: boolean;
+  children: ValidInputElement |
+    React.ReactElement<OptionProps> |
+    Array<React.ReactElement<OptionProps>>;
+}
+
+class InputElement extends React.Component<any, any> {
+  private ele: Element;
+  focus = () => {
+    (findDOMNode(this.ele) as HTMLInputElement).focus();
+  }
+  blur = () => {
+    (findDOMNode(this.ele) as HTMLInputElement).blur();
+  }
+  render() {
+    return React.cloneElement(this.props.children, {
+      ...this.props,
+      ref: ele => this.ele = ele,
+    }, null);
+  }
 }

 export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
@@ -44,6 +70,14 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
    antLocale: React.PropTypes.object,
  };

+  getInputElement = () => {
+    const { children } = this.props;
+    const element = children && React.isValidElement(children) && children.type !== Option ?
+      React.Children.only(this.props.children) :
+      <Input/>;
+    return <InputElement className="ant-input">{element}</InputElement>;
+  }
+
  render() {
    let {
      size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
@@ -54,22 +88,32 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
      [`${prefixCls}-sm`]: size === 'small',
      [className]: !!className,
      [`${prefixCls}-show-search`]: true,
+      [`${prefixCls}-auto-complete`]: true,
    });

-    const options = children || (dataSource ? dataSource.map((item) => {
-      switch (typeof item) {
-        case 'string':
-          return <Option key={item}>{item}</Option>;
-        case 'object':
-          return (
-            <Option key={(item as DataSourceItemObject).value}>
-              {(item as DataSourceItemObject).text}
-            </Option>
-          );
-        default:
-          throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
-      }
-    }) : []);
+    let options;
+    const childArray = React.Children.toArray(children);
+    if (childArray.length && (childArray[0] as React.ReactElement<any>).type === Option) {
+      options = children;
+    } else {
+      options = dataSource ? dataSource.map((item) => {
+        if (React.isValidElement(item)) {
+          return item;
+        }
+        switch (typeof item) {
+          case 'string':
+            return <Option key={item}>{item}</Option>;
+          case 'object':
+            return (
+              <Option key={(item as DataSourceItemObject).value}>
+                {(item as DataSourceItemObject).text}
+              </Option>
+            );
+          default:
+            throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
+        }
+      }) : [];
+    }

    return (
      <Select
@@ -77,6 +121,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
        className={cls}
        optionLabelProp={optionLabelProp}
        combobox
+        getInputElement={this.getInputElement}
        notFoundContent={notFoundContent}
      >
        {options}
--- 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,15 +18,18 @@ title: AutoComplete
 const dataSource = ['12345', '23456', '34567'];
 <AutoComplete dataSource={dataSource} />
 ```
-因为 `AutoComplete` 是基于 `Select` 封装的，所以除了以下 API 外，`AutoComplete` 跟 `Select` 拥有一样的 API。

 | 参数           | 说明                             | 类型        | 默认值 |
 |----------------|----------------------------------|------------|---------|
-| dataSource          | 自动完成的数据源 | Array     |         |
-| value    | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
-| defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}>   |  无  |
+| dataSource          | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)[]     |         |
+| value    | 指定当前选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }>   |  无  |
+| defaultValue | 指定默认选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode}>   |  无  |
 | allowClear   | 支持清除, 单选模式有效 | boolean | false |
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
 | onSelect | 被选中时调用，参数为选中项的 value 值	| function(value, option)	| 无 |
 | disabled | 是否禁用 | boolean | false |
 | 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/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@@ -0,0 +1,65 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
+@input-prefix-cls: ~"@{ant-prefix}-input";
+@select-prefix-cls: ~"@{ant-prefix}-select";
+@autocomplete-prefix-cls: ~"@{select-prefix-cls}-auto-complete";
+
+.@{autocomplete-prefix-cls} {
+  &.@{select-prefix-cls} {
+
+    .@{select-prefix-cls} {
+      &-search--inline {
+        position: relative;
+      }
+      &-selection {
+        border: 0;
+        &--single {
+          height: auto;
+        }
+        &__rendered {
+          margin-left: 0;
+          margin-right: 0;
+          line-height: 0;
+        }
+        &__placeholder {
+          margin-left: 8px;
+          margin-right: 8px;
+          top: @input-height-base / 2;
+        }
+      }
+    }
+
+    .@{input-prefix-cls} {
+      .input();
+      background: transparent;
+    }
+
+    &-lg {
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-lg / 2;
+      }
+      .@{input-prefix-cls} {
+        .input-lg();
+      }
+    }
+
+    &-sm {
+      .@{select-prefix-cls}-selection__placeholder {
+        top: @input-height-sm / 2;
+      }
+      .@{input-prefix-cls} {
+        .input-sm();
+      }
+    }
+
+    .@{input-prefix-cls} {
+      border: @border-width-base @border-style-base @border-color-base;
+      &:focus,
+      &:hover {
+        .hover;
+      }
+    }
+  }
+}
--- a/components/back-top/tests/snapshots/demo.test.js.snap
+++ b/components/back-top/tests/snapshots/demo.test.js.snap
--- a/components/back-top/tests/demo.test.js
+++ b/components/back-top/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('back-top');
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -20,6 +20,6 @@ title: BackTop

 Property | Description | Type | Default
 -----|-----|-----|------
-visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | Number | 400
+visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400
 onClick | a callback function, which can be executed when you click the button | Function | -

--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@@ -20,5 +20,5 @@ title: BackTop

 | 参数        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | Number | 400        |
+| visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | number | 400        |
 | onClick | 点击按钮的回调函数   | Function | -        |
--- a/components/badge/ScrollNumber.tsx
+++ b/components/badge/ScrollNumber.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { createElement, Component } from 'react';
-import {findDOMNode} from 'react-dom';
+import { findDOMNode } from 'react-dom';
 import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import assign from 'object-assign';
 import omit from 'omit.js';
@@ -19,8 +19,7 @@ export interface ScrollNumberProps {
  count?: string | number;
  component?: string;
  onAnimated?: Function;
-  height?: number;
-  style: React.CSSProperties;
+  style?: React.CSSProperties;
 }

 export default class ScrollNumber extends Component<ScrollNumberProps, any> {
@@ -29,7 +28,6 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
    count: null,
    onAnimated() {
    },
-    height: 18,
  };

  lastCount: any;
@@ -105,16 +103,14 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {

  renderCurrentNumber(num, i) {
    const position = this.getPositionByNum(num, i);
-    const height = this.props.height;
    const removeTransition = this.state.animateStarted ||
      (getNumberArray(this.lastCount)[i] === undefined);
    return createElement('span', {
      className: `${this.props.prefixCls}-only`,
      style: {
        transition: removeTransition && 'none',
-        WebkitTransform: `translateY(${-position * height}px)`,
-        transform: `translateY(${-position * height}px)`,
-        height,
+        WebkitTransform: `translateY(${-position * 100}%)`,
+        transform: `translateY(${-position * 100}%)`,
      },
      key: i,
    }, this.renderNumberList(position));
@@ -139,6 +135,12 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
    ]), {
      className: `${this.props.prefixCls} ${this.props.className}`,
    });
+    // allow specify the border
+    // mock border-color by box-shadow for compatible with old usage:
+    // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+    if (props.style && props.style.borderColor) {
+      props.style.boxShadow = `0 0 0 1px ${props.style.borderColor} inset`;
+    }
    return createElement(
      this.props.component || 'sup',
      props,
--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
@@ -1,281 +1,3 @@
-exports[`test renders ./components/badge/demo/99plus.md correctly 1`] = `
-<div>
-  <span
-    class="ant-badge"
-    title="99">
-    <a
-      class="head-example"
-      href="#" />
-    <sup
-      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="current">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-      </span>
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-342px);transform:translateY(-342px);height:18px;">
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="current">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-      </span>
-    </sup>
-  </span>
-  <span
-    class="ant-badge"
-    title="200">
-    <a
-      class="head-example"
-      href="#" />
-    <sup
-      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
-      99+
-    </sup>
-  </span>
-</div>
-`;
-
 exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
 <span
  class="ant-badge"
@@ -285,11 +7,10 @@ exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `
    href="#" />
  <sup
    class="ant-scroll-number ant-badge-count"
-    data-show="true"
-    height="18">
+    data-show="true">
    <span
      class="ant-scroll-number-only"
-      style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+      style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
      <p
        class="">
        0
@@ -417,177 +138,175 @@ exports[`test renders ./components/badge/demo/basic.md correctly 1`] = `

 exports[`test renders ./components/badge/demo/change.md correctly 1`] = `
 <div>
-  <span
-    class="ant-badge"
-    title="5">
-    <a
-      class="head-example"
-      href="#" />
-    <sup
-      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
-      <span
-        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="current">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-        <p
-          class="">
-          0
-        </p>
-        <p
-          class="">
-          1
-        </p>
-        <p
-          class="">
-          2
-        </p>
-        <p
-          class="">
-          3
-        </p>
-        <p
-          class="">
-          4
-        </p>
-        <p
-          class="">
-          5
-        </p>
-        <p
-          class="">
-          6
-        </p>
-        <p
-          class="">
-          7
-        </p>
-        <p
-          class="">
-          8
-        </p>
-        <p
-          class="">
-          9
-        </p>
-      </span>
-    </sup>
-  </span>
-  <span
-    class="ant-badge">
-    <a
-      class="head-example"
-      href="#" />
-    <sup
-      class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
-  </span>
-  <div
-    style="margin-top:10px;">
+  <div>
+    <span
+      class="ant-badge"
+      title="5">
+      <a
+        class="head-example"
+        href="#" />
+      <sup
+        class="ant-scroll-number ant-badge-count"
+        data-show="true">
+        <span
+          class="ant-scroll-number-only"
+          style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
+          <p
+            class="">
+            0
+          </p>
+          <p
+            class="">
+            1
+          </p>
+          <p
+            class="">
+            2
+          </p>
+          <p
+            class="">
+            3
+          </p>
+          <p
+            class="">
+            4
+          </p>
+          <p
+            class="">
+            5
+          </p>
+          <p
+            class="">
+            6
+          </p>
+          <p
+            class="">
+            7
+          </p>
+          <p
+            class="">
+            8
+          </p>
+          <p
+            class="">
+            9
+          </p>
+          <p
+            class="">
+            0
+          </p>
+          <p
+            class="">
+            1
+          </p>
+          <p
+            class="">
+            2
+          </p>
+          <p
+            class="">
+            3
+          </p>
+          <p
+            class="">
+            4
+          </p>
+          <p
+            class="current">
+            5
+          </p>
+          <p
+            class="">
+            6
+          </p>
+          <p
+            class="">
+            7
+          </p>
+          <p
+            class="">
+            8
+          </p>
+          <p
+            class="">
+            9
+          </p>
+          <p
+            class="">
+            0
+          </p>
+          <p
+            class="">
+            1
+          </p>
+          <p
+            class="">
+            2
+          </p>
+          <p
+            class="">
+            3
+          </p>
+          <p
+            class="">
+            4
+          </p>
+          <p
+            class="">
+            5
+          </p>
+          <p
+            class="">
+            6
+          </p>
+          <p
+            class="">
+            7
+          </p>
+          <p
+            class="">
+            8
+          </p>
+          <p
+            class="">
+            9
+          </p>
+        </span>
+      </sup>
+    </span>
    <div
      class="ant-btn-group">
      <button
-        class="ant-btn ant-btn-ghost"
+        class="ant-btn"
        type="button">
        <i
          class="anticon anticon-minus" />
      </button>
      <button
-        class="ant-btn ant-btn-ghost"
+        class="ant-btn"
        type="button">
        <i
          class="anticon anticon-plus" />
      </button>
    </div>
-    <button
-      class="ant-btn ant-btn-ghost"
-      style="margin-left:8px;"
-      type="button">
-      <span>
-        Switch state
-      </span>
-    </button>
+  </div>
+  <div
+    style="margin-top:10px;">
+    <span
+      class="ant-badge">
+      <a
+        class="head-example"
+        href="#" />
+      <sup
+        class="ant-scroll-number ant-badge-dot"
+        data-show="true" />
+    </span>
+    <span
+      class="ant-switch"
+      tabindex="0">
+      <span
+        class="ant-switch-inner" />
+    </span>
  </div>
 </div>
 `;
@@ -600,8 +319,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
      class="anticon anticon-notification" />
    <sup
      class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
+      data-show="true" />
  </span>
  <span
    class="ant-badge">
@@ -611,8 +329,7 @@ exports[`test renders ./components/badge/demo/dot.md correctly 1`] = `
    </a>
    <sup
      class="ant-scroll-number ant-badge-dot"
-      data-show="true"
-      height="18" />
+      data-show="true" />
  </span>
 </div>
 `;
@@ -627,11 +344,10 @@ exports[`test renders ./components/badge/demo/link.md correctly 1`] = `
      class="head-example" />
    <sup
      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
      <span
        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
        <p
          class="">
          0
@@ -765,11 +481,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
    title="25">
    <sup
      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
      <span
        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-216px);transform:translateY(-216px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1200%);transform:translateY(-1200%);">
        <p
          class="">
          0
@@ -893,7 +608,7 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
      </span>
      <span
        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-270px);transform:translateY(-270px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1500%);transform:translateY(-1500%);">
        <p
          class="">
          0
@@ -1023,11 +738,10 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
    <sup
      class="ant-scroll-number ant-badge-count"
      data-show="true"
-      height="18"
-      style="background-color:#fff;color:#999;border-color:#d9d9d9;">
+      style="background-color:#fff;color:#999;box-shadow:0 0 0 1px #d9d9d9 inset;">
      <span
        class="ant-scroll-number-only"
-        style="transition:none;-webkit-transform:translateY(-252px);transform:translateY(-252px);height:18px;">
+        style="transition:none;-webkit-transform:translateY(-1400%);transform:translateY(-1400%);">
        <p
          class="">
          0
@@ -1157,7 +871,6 @@ exports[`test renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
    <sup
      class="ant-scroll-number ant-badge-count"
      data-show="true"
-      height="18"
      style="background-color:#87d068;">
      99+
    </sup>
@@ -1175,8 +888,278 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
      href="#" />
    <sup
      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-webkit-transform:translateY(-1900%);transform:translateY(-1900%);">
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="current">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+      </span>
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-webkit-transform:translateY(-1900%);transform:translateY(-1900%);">
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="current">
+          9
+        </p>
+        <p
+          class="">
+          0
+        </p>
+        <p
+          class="">
+          1
+        </p>
+        <p
+          class="">
+          2
+        </p>
+        <p
+          class="">
+          3
+        </p>
+        <p
+          class="">
+          4
+        </p>
+        <p
+          class="">
+          5
+        </p>
+        <p
+          class="">
+          6
+        </p>
+        <p
+          class="">
+          7
+        </p>
+        <p
+          class="">
+          8
+        </p>
+        <p
+          class="">
+          9
+        </p>
+      </span>
+    </sup>
+  </span>
+  <span
+    class="ant-badge"
+    title="100">
+    <a
+      class="head-example"
+      href="#" />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true">
+      99+
+    </sup>
+  </span>
+  <span
+    class="ant-badge"
+    title="99">
+    <a
+      class="head-example"
+      href="#" />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true">
      10+
    </sup>
  </span>
@@ -1188,8 +1171,7 @@ exports[`test renders ./components/badge/demo/overflow.md correctly 1`] = `
      href="#" />
    <sup
      class="ant-scroll-number ant-badge-count"
-      data-show="true"
-      height="18">
+      data-show="true">
      999+
    </sup>
  </span>
--- a/components/badge/tests/demo.test.js
+++ b/components/badge/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('badge');
--- a/components/badge/demo/99plus.md
+++ b/components/badge/demo/99plus.md
@@ -1,27 +0,0 @@
---
-order: 1
-title:
-  zh-CN: 大数字
-  en-US: Overflowed count
---
-
-## zh-CN
-
-超过 99 的会显示为 `99+`。
-
-## en-US
-
-`99+` is displayed when count is larger than `99`.
-
-````jsx
-import { Badge } from 'antd';
-
-ReactDOM.render(<div>
-  <Badge count={99}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={200}>
-    <a href="#" className="head-example" />
-  </Badge>
-</div>, mountNode);
-````
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -23,7 +23,7 @@ ReactDOM.render(
 , mountNode);
 ````

-````css
+<style>
 .ant-badge:not(.ant-badge-status) {
  margin-right: 16px;
 }
@@ -34,4 +34,4 @@ ReactDOM.render(
  background: #eee;
  display: inline-block;
 }
-````
+</style>
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -14,7 +14,7 @@ title:
 The count will be animated as it changes.

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

 const Test = React.createClass({
@@ -35,32 +35,30 @@ const Test = React.createClass({
    }
    this.setState({ count });
  },
-  onClick() {
-    this.setState({
-      show: !this.state.show,
-    });
+  onChange(show) {
+    this.setState({ show });
  },
  render() {
    return (
      <div>
-        <Badge count={this.state.count}>
-          <a href="#" className="head-example" />
-        </Badge>
-        <Badge dot={this.state.show}>
-          <a href="#" className="head-example" />
-        </Badge>
-        <div style={{ marginTop: 10 }}>
+        <div>
+          <Badge count={this.state.count}>
+            <a href="#" className="head-example" />
+          </Badge>
          <ButtonGroup>
-            <Button type="ghost" onClick={this.decline}>
+            <Button onClick={this.decline}>
              <Icon type="minus" />
            </Button>
-            <Button type="ghost" onClick={this.increase}>
+            <Button onClick={this.increase}>
              <Icon type="plus" />
            </Button>
          </ButtonGroup>
-          <Button type="ghost" onClick={this.onClick} style={{ marginLeft: 8 }}>
-            Switch state
-          </Button>
+        </div>
+        <div style={{ marginTop: 10 }}>
+          <Badge dot={this.state.show}>
+            <a href="#" className="head-example" />
+          </Badge>
+          <Switch onChange={this.onChange} />
        </div>
      </div>
    );
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
  zh-CN: 可点击
  en-US: Clickable
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 1
 title:
  zh-CN: 独立使用
  en-US: Standalone
@@ -20,7 +20,7 @@ import { Badge } from 'antd';

 ReactDOM.render(<div>
  <Badge count={25} />
-  <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
+  <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
@@ -1,22 +1,28 @@
 ---
-order: 6
+order: 2
 title:
  zh-CN: 封顶数字
-  en-US: Customized overflow count
+  en-US: Overflow Count
 ---

 ## zh-CN

-超过 `overflowCount` 的会显示为 `${overflowCount}+`。
+超过 `overflowCount` 的会显示为 `${overflowCount}+`，默认的 `overflowCount` 为 `99`。

 ## en-US

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

 ````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>
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 6
 title:
  zh-CN: 状态点
  en-US: Status
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -25,8 +25,8 @@ Badge normally appears in proximity to notification or head picture with eye-cat

 | Property       | Description             | Type       | Default |
 |----------------|-------------------------|------------|---------|
-| count          | Number to show in badge | Number     |         |
-| overflowCount  | Max count to show       | Number     | 99      |
-| dot            | Whether to show red dot without number | Boolean | false  |
+| count          | Number to show in badge | number     |         |
+| overflowCount  | Max count to show       | number     | 99      |
+| dot            | Whether to show red dot without number | boolean | false  |
 | status         | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
-| text           | If `status` is set, `text` is to set the text of status dot | String | '' |
+| text           | If `status` is set, `text` is to set the text of status dot | string | '' |
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -3,7 +3,6 @@ import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';
 import warning from '../_util/warning';
-import splitObject from '../_util/splitObject';

 export interface BadgeProps {
  /** Number to show in badge */
@@ -37,23 +36,16 @@ export default class Badge extends React.Component<BadgeProps, any> {
  };

  render() {
-    let [{
-      count, prefixCls, overflowCount, className, style, children, dot, status, text,
-    }, restProps] = splitObject(
-      this.props,
-      ['count', 'prefixCls', 'overflowCount', 'className', 'style', 'children', 'dot', 'status', 'text']
-    );
+    const { count, prefixCls, overflowCount, className, style, children, dot, status, text, ...restProps } = this.props;
    const isDot = dot || status;
-    const realCount = count;
-    count = count > overflowCount ? `${overflowCount}+` : count;
-
+    let displayCount = count > overflowCount ? `${overflowCount}+` : count;
    // dot mode don't need count
    if (isDot) {
-      count = '';
+      displayCount = '';
    }

    // null undefined "" "0" 0
-    const hidden = (!count || count === '0') && !isDot;
+    const hidden = (!displayCount || displayCount === '0') && !isDot;
    const scrollNumberCls = classNames({
      [`${prefixCls}-dot`]: isDot,
      [`${prefixCls}-count`]: !isDot,
@@ -85,7 +77,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
      <ScrollNumber
        data-show={!hidden}
        className={scrollNumberCls}
-        count={count}
+        count={displayCount}
        style={style}
      />
    );
@@ -95,7 +87,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
    );

    return (
-      <span {...restProps} className={badgeCls} title={realCount}>
+      <span {...restProps} className={badgeCls} title={count as string}>
        {children}
        <Animate
          component=""
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -26,8 +26,8 @@ title: Badge

 | 参数           | 说明                             | 类型       |  可选值 | 默认值 |
 |----------------|----------------------------------|------------|---------|--------|
-| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | Number     |         |        |
-| overflowCount  | 展示封顶的数字值                 | Number     |         | 99     |
-| dot            | 不展示数字，只有一个小红点       | Boolean    |         | false  |
+| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number     |         |        |
+| overflowCount  | 展示封顶的数字值                 | number     |         | 99     |
+| dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |
 | status         | 设置 Badge 为状态点            | Enum      | 'success'、'processing'、'default'、'error'、'warning' | '' |
-| text           | 在设置了 `status` 的前提下有效，设置状态点的文本  | String | | '' |
+| text           | 在设置了 `status` 的前提下有效，设置状态点的文本  | string | | '' |
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -12,14 +12,13 @@
  &-count {
    position: absolute;
    transform: translateX(-50%);
-    top: -10px;
-    height: 20px;
-    border-radius: 10px;
-    min-width: 20px;
+    top: -@badge-height / 2;
+    height: @badge-height;
+    border-radius: @badge-height / 2;
+    min-width: @badge-height;
    background: @highlight-color;
-    border: 1px solid transparent;
    color: #fff;
-    line-height: 18px;
+    line-height: @badge-height;
    text-align: center;
    padding: 0 6px;
    font-size: @font-size-base;
@@ -36,10 +35,10 @@
  &-dot {
    position: absolute;
    transform: translateX(-50%);
-    transform-origin: 0px center;
-    top: -4px;
-    height: 8px;
-    width: 8px;
+    transform-origin: 0 center;
+    top: -@badge-dot-size / 2;
+    height: @badge-dot-size;
+    width: @badge-dot-size;
    border-radius: 100%;
    background: @highlight-color;
    z-index: 10;
@@ -61,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;
@@ -99,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;
  }
 }
@@ -113,6 +124,10 @@
  &-only {
    display: inline-block;
    transition: transform .3s @ease-in-out;
+    height: @badge-height;
+    > p {
+      height: @badge-height;
+    }
  }
  // for IE8/9 display
  &.not-support-css-animation &-only {
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -2,14 +2,16 @@ import React from 'react';
 import { cloneElement } from 'react';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
+import classNames from 'classnames';

 export interface BreadcrumbProps {
  prefixCls?: string;
  routes?: Array<any>;
  params?: Object;
-  separator?: string | React.ReactNode;
+  separator?: React.ReactNode;
  itemRender?: (route: any, params: any, routes: Array<any>, paths: Array<string>) => React.ReactNode;
  style?: React.CSSProperties;
+  className?: string;
 };

 function getBreadcrumbName(route, params) {
@@ -42,10 +44,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {

  static propTypes = {
    prefixCls: React.PropTypes.string,
-    separator: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element,
-    ]),
+    separator: React.PropTypes.node,
    routes: React.PropTypes.array,
    params: React.PropTypes.object,
    linkRender: React.PropTypes.func,
@@ -63,7 +62,10 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {

  render() {
    let crumbs;
-    const { separator, prefixCls, routes, params = {}, children, itemRender = defaultItemRender } = this.props;
+    const {
+      separator, prefixCls, style, className, routes, params = {},
+      children, itemRender = defaultItemRender,
+    } = this.props;
    if (routes && routes.length > 0) {
      const paths: string[] = [];
      crumbs = routes.map((route) => {
@@ -86,6 +88,10 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
      });
    } else if (children) {
      crumbs = React.Children.map(children, (element: any, index) => {
+        warning(
+          element && element.type.__ANT_BREADCRUMB_ITEM,
+          'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
+        );
        return cloneElement(element, {
          separator,
          key: index,
@@ -93,7 +99,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
      });
    }
    return (
-      <div className={prefixCls}>
+      <div className={classNames(className, prefixCls)} style={style}>
        {crumbs}
      </div>
    );
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -1,30 +1,31 @@
 import React from 'react';
-import splitObject from '../_util/splitObject';
+import { PropTypes } from 'react';

 export interface BreadcrumbItemProps {
+  prefixCls?: string;
  separator?: React.ReactNode;
  href?: string;
 }

 export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
+  static __ANT_BREADCRUMB_ITEM = true;
+
  static defaultProps = {
    prefixCls: 'ant-breadcrumb',
    separator: '/',
  };

  static propTypes = {
-    prefixCls: React.PropTypes.string,
-    separator: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element,
+    prefixCls: PropTypes.string,
+    separator: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.element,
    ]),
-    href: React.PropTypes.string,
+    href: PropTypes.string,
  };

  render() {
-    const [{ prefixCls, separator, children }, restProps] = splitObject(
-      this.props, ['prefixCls', 'separator', 'children']
-    );
+    const { prefixCls, separator, children, ...restProps } = this.props;
    let link;
    if ('href' in this.props) {
      link = <a className={`${prefixCls}-link`} {...restProps}>{children}</a>;
--- a/components/breadcrumb/tests/Breadcrumb.test.js
+++ b/components/breadcrumb/tests/Breadcrumb.test.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Breadcrumb from '../Breadcrumb';
+
+describe('Breadcrumb', () => {
+  it('warns on non-Breadcrumb.Item children', () => {
+    const MyCom = () => <div>foo</div>;
+    spyOn(console, 'error');
+    mount(
+      <Breadcrumb>
+        <MyCom />
+      </Breadcrumb>
+    );
+    // eslint-disable-next-line
+    expect(console.error.calls.count()).toBe(1);
+    // eslint-disable-next-line
+    expect(console.error.calls.argsFor(0)[0]).toContain(
+      'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
+    );
+  });
+});
--- a/components/breadcrumb/tests/snapshots/demo.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/demo.test.js.snap
--- a/components/breadcrumb/tests/demo.test.js
+++ b/components/breadcrumb/tests/demo.test.js
@@ -1,7 +1,7 @@
 import { render } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
-import demoTest from '../shared/demoTest';
-import routerDemo from '../../components/breadcrumb/demo/router.md';
+import demoTest from '../../../tests/shared/demoTest';
+import routerDemo from '../demo/router.md';

 demoTest('breadcrumb', { skip: ['router.md'] });

--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -17,10 +17,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b

 | Property      | Description                              | Type              |  Optional | Default |
 |-----------|-----------------------------------|-----------------|---------|--------|
-| routes    | The routing stack information of router | Array             |         | -      |
-| params    | Routing parameter                        | Object            |         | -      |
-| separator | Custom separator                      | String or Element |         | '/'    |
-| itemRender | Custom item renderer | (route, params, routes, paths) => React.ReactNode | | - |
+| routes    | The routing stack information of router | object[]             |         | -      |
+| params    | Routing parameter                        | object            |         | -      |
+| separator | Custom separator                      | string\|ReactNode |         | '/'    |
+| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |

 > `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.

--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -17,10 +17,10 @@ title: Breadcrumb

 | 参数      | 说明                              | 类型              |  可选值 | 默认值 |
 |-----------|-----------------------------------|-----------------|---------|--------|
-| routes    | router 的路由栈信息               | Array             |         | -      |
-| params    | 路由的参数                        | Object            |         | -      |
-| separator | 分隔符自定义                      | String or Element |         | '/'    |
-| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => React.ReactNode | | - |
+| routes    | router 的路由栈信息               | object[]             |         | -      |
+| params    | 路由的参数                        | object            |         | -      |
+| separator | 分隔符自定义                      | string\|ReactNode |         | '/'    |
+| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - |

 > 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。

--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@@ -3,14 +3,14 @@
@breadcrumb-prefix-cls: ~"@{ant-prefix}-breadcrumb";

 .@{breadcrumb-prefix-cls} {
-  color: @text-color-secondary;
+  color: @text-color;
  font-size: @font-size-base;

  a {
    color: @text-color;
    transition: color .3s;
    &:hover {
-      color: tint(@primary-color, 20%);
+      color: @primary-5;
    }
  }

@@ -25,7 +25,7 @@

  &-separator {
    margin: 0 8px;
-    color: @border-color-base;
+    color: rgba(0, 0, 0, 0.3);
  }

  &-link {
--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
@@ -14,13 +14,6 @@ exports[`test renders ./components/button/demo/basic.md correctly 1`] = `
      Default
    </span>
  </button>
-  <button
-    class="ant-btn ant-btn-ghost"
-    type="button">
-    <span>
-      Ghost
-    </span>
-  </button>
  <button
    class="ant-btn ant-btn-dashed"
    type="button">
@@ -28,6 +21,13 @@ exports[`test renders ./components/button/demo/basic.md correctly 1`] = `
      Dashed
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-danger"
+    type="button">
+    <span>
+      Danger
+    </span>
+  </button>
 </div>
 `;

@@ -97,7 +97,7 @@ exports[`test renders ./components/button/demo/button-group.md correctly 1`] = `
      </span>
    </button>
    <button
-      class="ant-btn ant-btn-ghost"
+      class="ant-btn"
      type="button">
      <span>
        M
@@ -188,14 +188,14 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  </button>
  <br />
  <button
-    class="ant-btn ant-btn-ghost"
+    class="ant-btn"
    type="button">
    <span>
      Ghost
    </span>
  </button>
  <button
-    class="ant-btn ant-btn-ghost"
+    class="ant-btn"
    disabled=""
    type="button">
    <span>
@@ -221,6 +221,33 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
 </div>
 `;

+exports[`test renders ./components/button/demo/ghost.md correctly 1`] = `
+<div
+  style="background:rgb(190, 200, 200);padding:26px 16px 16px;">
+  <button
+    class="ant-btn ant-btn-primary ant-btn-background-ghost"
+    type="button">
+    <span>
+      Primary Ghost
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-background-ghost"
+    type="button">
+    <span>
+      Default Ghost
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-dashed ant-btn-background-ghost"
+    type="button">
+    <span>
+      Dashed Ghost
+    </span>
+  </button>
+</div>
+`;
+
 exports[`test renders ./components/button/demo/icon.md correctly 1`] = `
 <div>
  <button
@@ -255,13 +282,13 @@ exports[`test renders ./components/button/demo/icon.md correctly 1`] = `
  </button>
  <br />
  <button
-    class="ant-btn ant-btn-ghost ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-icon-only"
    type="button">
    <i
      class="anticon anticon-search" />
  </button>
  <button
-    class="ant-btn ant-btn-ghost"
+    class="ant-btn"
    type="button">
    <i
      class="anticon anticon-search" />
@@ -324,6 +351,19 @@ exports[`test renders ./components/button/demo/loading.md correctly 1`] = `
      Click me!
    </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>
 `;

@@ -337,14 +377,14 @@ exports[`test renders ./components/button/demo/multiple.md correctly 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-btn-ghost"
+    class="ant-btn"
    type="button">
    <span>
      secondary
    </span>
  </button>
  <button
-    class="ant-btn ant-btn-ghost ant-dropdown-trigger"
+    class="ant-btn ant-dropdown-trigger"
    type="button">
    <span>
      more 
--- a/components/button/tests/snapshots/index.test.js.snap
+++ b/components/button/tests/snapshots/index.test.js.snap
--- a/components/button/tests/demo.test.js
+++ b/components/button/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('button');
--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
-import Button from '../../components/button';
+import Button from '..';

 describe('Button', () => {
  it('renders correctly', () => {
@@ -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-group.tsx
+++ b/components/button/button-group.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import splitObject from '../_util/splitObject';

 export type ButtonSize = 'small' | 'large'

@@ -12,8 +11,7 @@ export interface ButtonGroupProps {
 }

 export default function ButtonGroup(props: ButtonGroupProps) {
-  const [{ prefixCls = 'ant-btn-group', size, className }, others] =
-    splitObject(props, ['prefixCls', 'size', 'className']);
+  const { prefixCls = 'ant-btn-group', size = '', className, ...others } = props;

  // large => lg
  // small => sm
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
-import splitObject from '../_util/splitObject';
+
 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 function isString(str) {
@@ -24,7 +24,7 @@ function insertSpace(child) {
  return child;
 }

-export type ButtonType = 'primary' | 'ghost' | 'dashed'
+export type ButtonType = 'primary' | 'ghost' | 'dashed' | 'danger'
 export type ButtonShape = 'circle' | 'circle-outline'
 export type ButtonSize = 'small' | 'large'

@@ -41,14 +41,17 @@ export interface ButtonProps {
  style?: React.CSSProperties;
  prefixCls?: string;
  className?: string;
+  ghost?: boolean;
 }

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

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

  static propTypes = {
@@ -101,9 +104,9 @@ export default class Button extends React.Component<ButtonProps, any> {
  }

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

    // large => lg
    // small => sm
@@ -118,10 +121,11 @@ export default class Button extends React.Component<ButtonProps, any> {
      [`${prefixCls}-${sizeCls}`]: sizeCls,
      [`${prefixCls}-icon-only`]: !children && icon,
      [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-background-ghost`]: ghost,
    }, className);

    const iconType = loading ? 'loading' : icon;
-
+    const iconNode = iconType ? <Icon type={iconType} /> : null;
    const kids = React.Children.map(children, insertSpace);

    return (
@@ -132,7 +136,7 @@ export default class Button extends React.Component<ButtonProps, any> {
        onMouseUp={this.handleMouseUp}
        onClick={this.handleClick}
      >
-        {iconType ? <Icon type={iconType} /> : null}{kids}
+        {iconNode}{kids}
      </button>
    );
  }
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -7,19 +7,15 @@ title:

 ## zh-CN

-按钮有四种类型：主按钮、次按钮、幽灵按钮、虚线按钮。
+按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。

-通过设置 `type` 为 `primary` `ghost` `dashed` 可分别创建主按钮、幽灵按钮、虚线按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
-
-主按钮和次按钮可独立使用，幽灵按钮用于和主按钮组合。需要强引导用主按钮，切记主按钮在同一个操作区域最多出现一次。
+> `danger` 在 `antd@2.7` 后支持。

 ## en-US

-There are primary button, default button, ghost button and dashed button in antd.
+There are `primary` button, `default` button, `dashed` button and `danger` button in antd.

-`type` can be set as `primary` or `ghost` or `dashed`, in order to create primary button or ghost button or dashed button. If nothing is provided to `type`, we will get default button. Users can tell the significance of button from it's appearance.
-
-Primary button and default button can be used without other button, but ghost button must be used with primary button.
+> `danger` is supported after `antd@2.7`.

 ````jsx
 import { Button } from 'antd';
@@ -28,8 +24,8 @@ ReactDOM.render(
  <div>
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
-    <Button type="ghost">Ghost</Button>
    <Button type="dashed">Dashed</Button>
+    <Button type="danger">Danger</Button>
  </div>
 , mountNode);
 ````
--- a/components/button/demo/button-group.md
+++ b/components/button/demo/button-group.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
  zh-CN: 按钮组合
  en-US: Button Group
@@ -36,7 +36,7 @@ ReactDOM.render(
    <ButtonGroup>
      <Button type="primary">L</Button>
      <Button>M</Button>
-      <Button type="ghost">M</Button>
+      <Button>M</Button>
      <Button type="dashed">R</Button>
    </ButtonGroup>

--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -24,8 +24,8 @@ ReactDOM.render(
    <Button>Default</Button>
    <Button disabled>Default(disabled)</Button>
    <br />
-    <Button type="ghost">Ghost</Button>
-    <Button type="ghost" disabled>Ghost(disabled)</Button>
+    <Button>Ghost</Button>
+    <Button disabled>Ghost(disabled)</Button>
    <br />
    <Button type="dashed">Dashed</Button>
    <Button type="dashed" disabled>Dashed(disabled)</Button>
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -0,0 +1,26 @@
+---
+order: 8
+title:
+  zh-CN: 幽灵按钮
+  en-US: Ghost Button
+---
+
+## zh-CN
+
+幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
+
+## en-US
+
+`ghost` property will make button's background transparent, it is common used in colored background.
+
+````jsx
+import { Button } from 'antd';
+
+ReactDOM.render(
+  <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
+    <Button type="primary" ghost>Primary Ghost</Button>
+    <Button ghost>Default Ghost</Button>
+    <Button type="dashed" ghost>Dashed Ghost</Button>
+  </div>
+, mountNode);
+````
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -27,8 +27,8 @@ ReactDOM.render(
    <Button shape="circle" icon="search" />
    <Button icon="search">Search</Button>
    <br />
-    <Button type="ghost" shape="circle" icon="search" />
-    <Button type="ghost" icon="search">Search</Button>
+    <Button shape="circle" icon="search" />
+    <Button icon="search">Search</Button>
    <Button type="dashed" shape="circle" icon="search" />
    <Button type="dashed" icon="search">Search</Button>
  </div>,
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -45,6 +45,9 @@ const App = React.createClass({
        <Button type="primary" icon="poweroff" loading={this.state.iconLoading} onClick={this.enterIconLoading}>
          Click me!
        </Button>
+        <br />
+        <Button shape="circle" loading />
+        <Button type="primary" shape="circle" loading />
      </div>
    );
  },
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 5
 title:
  zh-CN: 多个按钮组合
  en-US: Multiple Buttons
@@ -32,9 +32,9 @@ const menu = (
 ReactDOM.render(
  <div>
    <Button type="primary">primary</Button>
-    <Button type="ghost">secondary</Button>
+    <Button>secondary</Button>
    <Dropdown overlay={menu}>
-      <Button type="ghost">
+      <Button>
        more <Icon type="down" />
      </Button>
    </Dropdown>
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -16,13 +16,14 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.

 Property | Description | Type | Default
 -----|-----|-----|------
-type | can be set to `primary` `ghost` `dashed` or omitted | string | -
+type | can be set to `primary` `dashed` `danger`(added in 2.7) or omitted | string | 'default'
 htmlType | to set the original `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
 icon | set the icon of button, see: Icon component | string | -
 shape | can be set to `circle` or omitted | string | -
 size | can be set to `small` `large` or omitted | string | `default`
-loading | to set the loading status of button | boolean | false
+loading | to set the loading status of button | boolean | `false`
 onClick | set the handler to handle `click` event | function | -
+ghost | make background transparent and invert text and border color, added in 2.7 | boolean | false

 `<Button>Hello world!</Button>` will be rendered into `<button>Hello world!</button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.

--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -19,13 +19,14 @@ subtitle: 按钮

 属性 | 说明 | 类型 | 默认值
 -----|-----|-----|------
-type | 设置按钮类型，可选值为 `primary` `ghost` `dashed` 或者不设 | string | -
+type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | -
 htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
 icon | 设置按钮的图标类型 | string | -
 shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | -
 size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
-loading | 设置按钮载入状态 | boolean | false
+loading | 设置按钮载入状态 | boolean | `false`
 onClick | `click` 事件的 handler | function | -
+ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false

 `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。

--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -4,6 +4,11 @@

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

+// for compatibile
+@btn-ghost-color        : @text-color;
+@btn-ghost-bg           : transparent;
+@btn-ghost-border       : @border-color-base;
+
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
@@ -16,6 +21,10 @@
    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;
+
+      &:disabled {
+        border-color: @btn-default-border;
+      }
    }

    .@{btn-prefix-cls}-group &:first-child {
@@ -28,7 +37,7 @@
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
-    .@{btn-prefix-cls}-group & + .@{btn-prefix-cls} {
+    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;
      &[disabled] {
        border-left-color: @btn-default-border;
@@ -44,6 +53,10 @@
    .btn-dashed;
  }

+  &-danger {
+    .btn-danger;
+  }
+
  &-circle,
  &-circle-outline {
    .btn-circle(@btn-prefix-cls);
@@ -65,7 +78,11 @@
    display: none;
  }

-  &&-loading {
+  &&-loading:before {
+    display: block;
+  }
+
+  &&-loading:not(&-circle):not(&-circle-outline) {
    padding-left: 29px;
    pointer-events: none;
    position: relative;
@@ -73,12 +90,9 @@
      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;
@@ -108,11 +122,25 @@
    bottom: -1px;
    right: -1px;
    border-radius: inherit;
-    border: 0 solid @primary-color;
+    border: 1.5px solid @primary-color;
    opacity: 0.4;
-    animation: buttonEffect 0.36s ease-out forwards;
+    animation: buttonEffect 0.4s ease-in-out forwards;
    display: block;
  }
+
+  &-danger&-clicked:after {
+    border-color: @btn-danger-bg;
+  }
+
+  &-background-ghost {
+    background: transparent!important;
+    border-color: #fff;
+    color: #fff;
+  }
+
+  &-background-ghost&-primary {
+    .button-variant-other(@primary-color; transparent; @primary-color);
+  }
 }

@keyframes buttonEffect {
@@ -122,6 +150,5 @@
    left: -6px;
    bottom: -6px;
    right: -6px;
-    border-width: 6px;
  }
 }
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -21,15 +21,14 @@

 .button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);
-
  &:hover,
  &:focus {
-    .button-color(@color; tint(@background, 20%); tint(@background, 20%));
+    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

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

  .button-disabled();
@@ -40,12 +39,12 @@

  &:hover,
  &:focus {
-    .button-color(tint(@primary-color, 20%); @background; tint(@primary-color, 20%));
+    .button-color(@primary-5; @background; @primary-5);
  }

  &:active,
  &.active {
-    .button-color(shade(@primary-color, 5%); @background; shade(@primary-color, 5%));
+    .button-color(@primary-7; @background; @primary-7);
  }

  .button-disabled();
@@ -76,12 +75,18 @@
  display: inline-block;
  > .@{btnClassName} {
    position: relative;
+    z-index: 1;
+
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
+
+    &:disabled {
+      z-index: 0;
+    }
  }

  // size
@@ -107,7 +112,7 @@
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
-  border: 1px solid transparent;
+  border: @border-width-base @border-style-base transparent;
  white-space: nowrap;
  line-height: @line-height-base;
  .button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
@@ -172,12 +177,17 @@
  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
 }

-// ghost button style
+// dashed button style
 .btn-dashed() {
-  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
  border-style: dashed;
 }

+// danger button style
+.btn-danger() {
+  .button-variant-primary(@btn-danger-color, @btn-danger-bg);
+}
+
 // circle button: the content only contains icon
 .btn-circle(@btnClassName: btn) {
  .square(@btn-circle-size);
--- a/components/calendar/tests/snapshots/demo.test.js.snap
+++ b/components/calendar/tests/snapshots/demo.test.js.snap
--- a/components/calendar/tests/demo.test.js
+++ b/components/calendar/tests/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('calendar');
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@@ -9,7 +9,6 @@ title:

 一个通用的日历面板，支持年/月切换。

-
 ## en-US

 A basic calendar component with Year/Month switch.
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 2
 title: 
  zh-CN: 卡片模式
  en-US: Card
--- a/components/calendar/demo/custom-render.md
+++ b/components/calendar/demo/custom-render.md
@@ -1,33 +0,0 @@
---
-order: 1
-title:
-  zh-CN: 自定义渲染
-  en-US: Custom Render
---
-
-## zh-CN
-
-用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。
-
-## en-US
-
-This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
-
-````jsx
-import { Calendar } from 'antd';
-import moment from 'moment';
-
-function dateCellRender(value) {
-  return <div>Custom date {value.date()}</div>;
-}
-
-function monthCellRender(value) {
-  return <div>Custom monthly {value.month()}</div>;
-}
-
-ReactDOM.render(
-  <Calendar defaultValue={moment('2010-10-10', 'YYYY-MM-DD')}
-    dateCellRender={dateCellRender} monthCellRender={monthCellRender}
-  />
-, mountNode);
-````
--- a/components/calendar/demo/locale.md
+++ b/components/calendar/demo/locale.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 3
 title:
  zh-CN: 国际化
  en-US: locale
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -1,17 +1,17 @@
 ---
-order: 2
+order: 1
 title:
-  zh-CN: 通知事项日历演示
-  en-US: A demo of Notice Calendar
+  zh-CN: 通知事项日历
+  en-US: Notice Calendar
 ---

 ## zh-CN

-一个复杂的应用示例。
+一个复杂的应用示例，用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。

 ## en-US

-A complex application.
+This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.

 ````jsx
 import { Calendar } from 'antd';
@@ -34,10 +34,10 @@ function getListData(value) {
      listData = [
        { type: 'warning', content: 'This is warning event' },
        { type: 'normal', content: 'This is very long usual event。。....' },
-        { type: 'error', content: 'This is error event.' },
-        { type: 'error', content: 'This is error event.' },
-        { type: 'error', content: 'This is error event.' },
-        { type: 'error', content: 'This is error event.' },
+        { type: 'error', content: 'This is error event 1.' },
+        { type: 'error', content: 'This is error event 2.' },
+        { type: 'error', content: 'This is error event 3.' },
+        { type: 'error', content: 'This is error event 4.' },
      ]; break;
    default:
  }
@@ -49,8 +49,8 @@ function dateCellRender(value) {
  return (
    <ul className="events">
      {
-        listData.map((item, index) =>
-          <li key={index}>
+        listData.map(item =>
+          <li key={item.content}>
            <span className={`event-${item.type}`}>●</span>
            {item.content}
          </li>
--- a/Show More
+++ b/Show More