Improve inline menu active style

Improve docs detail
update tag demo
2026-02-09 10:59:19 +08:00 · 2017-04-02 14:43:34 +08:00 · 2017-04-02 14:03:42 +08:00 · 2017-04-02 13:56:45 +08:00 · 2017-04-02 13:44:33 +08:00 · 2017-04-01 21:12:55 +08:00
608 changed files with 33903 additions and 18999 deletions
--- a/.codecov.yml
+++ b/.codecov.yml
@@ -0,0 +1,2 @@
+codecov:
+  branch: master
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -36,7 +36,6 @@ const eslintrc = {
    'consistent-return': 0,
    'no-redeclare': 0,
    'react/require-extension': 0,
-    'react/jsx-indent': 0,
    'jsx-a11y/no-static-element-interactions': 0,
    'jsx-a11y/anchor-has-content': 0,
    'react/no-danger': 0,
@@ -57,7 +56,6 @@ if (process.env.RUN_ENV === 'DEMO') {
    'eol-last': 0,
    'prefer-rest-params': 0,
    'react/no-multi-comp': 0,
-    'react/prefer-es6-class': 0,
    'jsx-a11y/href-no-hash': 0,
    'import/newline-after-import': 0,
  });
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -1,32 +1,15 @@
-<!-- Issue Template -->
-
 <!--
-antd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足够精力提供此类咨询服务：
+IMPORTANT: Please use the following link to create a new issue:

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

-如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。
+If your issue was not created using the app above, it will be closed immediately.
 -->

-#### Environment(required)
+<!--
+注意：请使用下面的链接来新建 issue：

- antd version:
- OS and its version:
- Browser and its version:
+  http://new-issue.ant.design

-#### What did you do? Please provide steps to re-produce your problem.
-
-<!-- e.g. I just imported Button from antd -->
-
-#### 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
-
-<!-- Please fork http://codepen.io/benjycui/pen/KgPZrE?editors=001 to re-produce you issue -->
+不是用上面的链接创建的 issue 会被立即关闭。
+-->
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,6 +2,7 @@ First of all, thanks for your contribution! :-)

 Please makes sure these boxes are checked before submitting your PR, thank you!

+* [ ] Make sure you propose PR to correct branch: bugfix for `master`, feature for latest active branch `feature-x.x`.
 * [ ] Make sure you follow antd's [code convention](https://github.com/ant-design/ant-design/wiki/Code-convention-for-antd).
 * [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style.
 * [ ] Rebase before creating a PR to keep commit history clear.
--- a/.travis.yml
+++ b/.travis.yml
@@ -6,10 +6,27 @@ node_js:
  - "6"

 env:
-  - MAX_WORKERS=2
+  matrix:
+    - TEST_TYPE=lint
+    - TEST_TYPE=dist
+    - TEST_TYPE=compile
+    - TEST_TYPE=test:dom
+    - TEST_TYPE=test:node

 script:
-  - npm run test-all
-
-after_script:
-  - cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js
+  - |
+    if [ "$TEST_TYPE" = lint ]; then
+      npm run lint
+    elif [ "$TEST_TYPE" = dist ]; then
+      npm run dist && \
+      node ./tests/dekko/dist.test.js
+    elif [ "$TEST_TYPE" = compile ]; then
+      npm run compile && \
+      node ./tests/dekko/lib.test.js
+    elif [ "$TEST_TYPE" = test:dom ]; then
+      npm run dist && \
+      npm test -- --coverage -w 2 && \
+      bash <(curl -s https://codecov.io/bash)
+    elif [ "$TEST_TYPE" = test:node ]; then
+      npm test -- --config .jest.node.json -w 2
+    fi
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -17,6 +17,209 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi

 ---

+## 2.9.0
+
+`2017-04-01` :ghost:
+
+- Change the default font family to be monospaced for numbers. [b526083](https://github.com/ant-design/ant-design/commit/b526083fa6a619113a3d26c4f4f092a8648f3bd4)
+- Select
+  - Add `mode` prop, deprecate the `tags|combobox|multiple` properties, replaced by `mode={tags|combobox|multiple}`.
+  - `tags|multiple` now supports `allowClear`. [#4843](https://github.com/ant-design/ant-design/issues/4843)
+- Add a new type `dashboard` of Progress. [#5225](https://github.com/ant-design/ant-design/issues/5225) [@qiaolb](https://github.com/qiaolb)
+- Add `showLine` prop of Tree, for connecting line style in tree nodes. [#3854](https://github.com/ant-design/ant-design/issues/3854)
+- TimePicker now supports 12 hours via `use12Hours`. [#4063](https://github.com/ant-design/ant-design/issues/4063)
+- Add `column.filterIcon` prop of Table, which can be used to customize filter icon. [#5293](https://github.com/ant-design/ant-design/pull/5293)
+- Add `wrapperClassName` prop of Spin. [#5425](https://github.com/ant-design/ant-design/pull/5425) [@aaronplanell](https://github.com/aaronplanell)
+- Add `onPrevClick` `onNextClick` props of Tabs. [#4395](https://github.com/ant-design/ant-design/issues/4395)
+- Add `parser` prop of InputNumber, to extract value from formatter. [#5178](https://github.com/ant-design/ant-design/pull/5178#issuecomment-284557933)
+- New locales support:
+  - Japanese [#5529](https://github.com/ant-design/ant-design/pull/5529)  [@novi](https://github.com/novi)
+  - Slovak [#5304](https://github.com/ant-design/ant-design/pull/5304) [@Kamahl19](https://github.com/Kamahl19)
+  - Estonian [#5266](https://github.com/ant-design/ant-design/pull/5266) [@madisvain](https://github.com/madisvain)
+  - Turkish [#5536](https://github.com/ant-design/ant-design/pull/5536) [@c0b41](https://github.com/c0b41)
+- TypeScript
+  - Fix definitions of Carousel following react-slick
+  - Fix some definitions of Form.
+  - Fix `getPopupContainer` definitions.
+- Allow to disable animation of inkBar and panes of Tabs separately. [#5089](https://github.com/ant-design/ant-design/issues/5089) [@xieguanglei](https://github.com/xieguanglei)
+- Button `loading` prop now supports like `{ delay: 1000 }`, removed the default loading delay. [#5365](https://github.com/ant-design/ant-design/issues/5365)
+- Add less variables for Card header. [#5354](https://github.com/ant-design/ant-design/pull/5354) [@kossel](https://github.com/kossel)
+- Fix extra separator of Breadcrumb without `breadcrumbName`.
+- Fix `Unknown prop placement` warning of Dropdown.Button. [#5594](https://github.com/ant-design/ant-design/issues/5594)
+- Fix RangePicker and InputNumber placeholder color.
+- Fix that Cascader search can't use [Backspace]. [#5340](https://github.com/ant-design/ant-design/issues/5340)
+- Fix that LocaleProvider can't affect `Modal.confirm` sometimes. [#5493](https://github.com/ant-design/ant-design/issues/5493) [@hargasinski](https://github.com/hargasinski)
+- Fix scroll animation of BackTop which specifies the `target` prop. [#5564](https://github.com/ant-design/ant-design/issues/5564)
+- Optimize the block style of Pagination. [#5557](https://github.com/ant-design/ant-design/issues/5557)
+
+## 2.8.3
+
+`2017-03-27`
+
+- TypeScript
+  - Fixed missing definition of `AutoComplete[filterOption]`. [#5393](https://github.com/ant-design/ant-design/pull/5393) [@mitchelldemler](https://github.com/mitchelldemler)
+  - Improve definition of `getPopupContainer` `getCalendarContainer` `getTooltipContainer` `getSuggestionContainer`, etc. [322e9ef](https://github.com/ant-design/ant-design/commit/322e9efdc9db28bd92230fc690f1fdf5a72cf7cd)
+  - Improve definition of `Form.create`. [#5420](https://github.com/ant-design/ant-design/pull/5420) [@infeng](https://github.com/infeng)
+- Fixed Badge should work in Maxthon. [#5477](https://github.com/ant-design/ant-design/issues/5477)
+- Fixed Button cannot work with `null` `undefined` as children. [#5472](https://github.com/ant-design/ant-design/issues/5472) [@blade254353074](https://github.com/blade254353074)
+- Breadcrumb are not rely on `route.breadcrumbName` now. [ac1c7f3](https://github.com/ant-design/ant-design/commit/ac1c7f312bc46ba6ef7aacace43e4ac99b87dd54)
+- Fixed `Form.Item[hasFeedback]` will lost styles while using with `Input[prefix]`. [#5456](https://github.com/ant-design/ant-design/issues/5456) [@william-yz](https://github.com/william-yz)
+- Fixed Layout.Content will show scrollbar while using with Carousel. [#5415](https://github.com/ant-design/ant-design/issues/5415)
+- LocaleProvider
+  - Fixed missing locales of German. [#5387](https://github.com/ant-design/ant-design/pull/5387) [@Knacktus](https://github.com/Knacktus)
+  - Fixed missing locales of Russian. [#5406](https://github.com/ant-design/ant-design/pull/5406) [@plandem](https://github.com/plandem)
+  - Fixed it doesn't work with Upload. [#5388](https://github.com/ant-design/ant-design/pull/5388) [@natergj](https://github.com/natergj)
+- Fixed inconsistet animation of Menu Icon and text. [#5495](https://github.com/ant-design/ant-design/issues/5495)
+- Fixed `Modale[footer]` cannot be set to `null`. [#5462](https://github.com/ant-design/ant-design/issues/5462)
+- Fixed Pagination will lost styles in `IE<=10` which is introduced in `2.8.2`. [#5484](https://github.com/ant-design/ant-design/issues/5484)
+- Fixed Popover will be closed by mistake while using Table in it. [#5407](https://github.com/ant-design/ant-design/issues/5407)
+- Remove restriction that Radio can only be direct chidlren of Radio.Group. [#5443](https://github.com/ant-design/ant-design/issues/5443)
+- Fixed warning while using Switch in Form.Item. [#5368](https://github.com/ant-design/ant-design/issues/5368)
+- Fixed Table cannot use default "Select All" behavior. [#5246](https://github.com/ant-design/ant-design/issues/5246) [@infeng](https://github.com/infeng)
+- Now we defaultly hide the Table's "Select All" dropdown icon, display it when set `selections` to true. [#5246](https://github.com/ant-design/ant-design/issues/5246) [@infeng](https://github.com/infeng)
+- New theme variable `@info-color`. [#5442](https://github.com/ant-design/ant-design/issues/5442)
+- Supporting suppress warning(You are using a whole package of antd...) with `NODE_ENV=test` while testing. [#5345](https://github.com/ant-design/ant-design/issues/5345)
+- Upgrade moment to `2.18.0`.
+
+## 2.8.2
+
+`2017-03-11`
+
+- New [design specification documentation](https://ant.design/docs/spec/colors).
+- Fix error of Modal.confirm [#5269](https://github.com/ant-design/ant-design/issues/5269).
+- Fix mask style of Upload [#5275](https://github.com/ant-design/ant-design/issues/5275).
+- Fix progress not showing of Upload [#5323](https://github.com/ant-design/ant-design/issues/5323).
+- Fix a pagination showTotal wrong data issue of Table [#5259](https://github.com/ant-design/ant-design/issues/5259).
+- Fix a style issue while using Popconfirm and Button together [5301](https://github.com/ant-design/ant-design/issues/5301).
+- Fix a style issue of Radio [#5336](https://github.com/ant-design/ant-design/pull/5336).
+- Fix a issue that `getContainer` of Message didn't work [#5380](https://github.com/ant-design/ant-design/issues/5380).
+- Fix text alignment of Checkbox and Radio [696a3c0](https://github.com/ant-design/ant-design/commit/696a3c0e34156d78e87d629a3f0f8703af1f03ec).
+- Tweak animation and blur style of Spin [fa1e031](https://github.com/ant-design/ant-design/commit/fa1e031a7396c61fa9709a0c46fe63200c35d232).
+- Tweak some styles of Mention  [240a93c](https://github.com/ant-design/ant-design/commit/240a93cee25bc8c6ad4520cd907a14a7b22ed773).
+
+## 2.8.1
+
+`2017-03-11`
+
+- **DatePicker** Fix can't select time when new props are passed, and improve the selection behavior of `DatePicker[showTime]`. [#5189](https://github.com/ant-design/ant-design/issues/5189) [@megawac](https://github.com/megawac)
+- **Form**
+  - Add document for validate rules. [#5201](https://github.com/ant-design/ant-design/issues/5201)
+  - Fix some style issues. [#5196](https://github.com/ant-design/ant-design/issues/5196) [#5236](https://github.com/ant-design/ant-design/issues/5236) [#5222](https://github.com/ant-design/ant-design/issues/5222)
+- **Icon** Add iconfont `shake` and `android-o`. [commit/941782](https://github.com/ant-design/ant-design/commit/941782f7ec000a9054c3bc945ab887f93ab46749)
+- **Input** Fix `hasFeedback` not work with `addonBefore`. [#5228](https://github.com/ant-design/ant-design/issues/5228)
+- **InputNumber** Add typings for props `formatter`. [#5240](https://github.com/ant-design/ant-design/issues/5240) [@hlehmann](https://github.com/hlehmann)
+- **Modal** Call `onCancel` when pressing esc key. [#5203](https://github.com/ant-design/ant-design/issues/5203) [@elios264](https://github.com/elios264)
+- **Table**
+  - Fix implicit type issue. [#5206](https://github.com/ant-design/ant-design/issues/5206) [@kvey](https://github.com/kvey)
+  - Fix right border not visible with no data in `small` size. [#5237](https://github.com/ant-design/ant-design/issues/5237)
+  - Fix sort not working when using grouping column. [#5158](https://github.com/ant-design/ant-design/issues/5158)
+- **Tooltip** Fix layout style on disabled Button. [#5254](https://github.com/ant-design/ant-design/issues/5254)
+- **Upload**
+  - Fix long name of upload item style. [commit/0a3519](https://github.com/ant-design/ant-design/commit/0a35197a35513ca45308bb7163c8243b75dd6f8d)
+  - Fix and improve animation. [pull/5210](https://github.com/ant-design/ant-design/pull/5210)
+  - Allow override `onProgress`. [pull/5260](https://github.com/ant-design/ant-design/pull/5260) [@minwe](https://github.com/minwe)
+- **Global Optimization**
+  - Fix Cannot resolve module `lodash.debounce`. [#5230](https://github.com/ant-design/ant-design/issues/5230)
+- **Site**
+  - Fix safari language check. [pull/5245](https://github.com/ant-design/ant-design/pull/5245)
+  - Add ability to copy color when clicking on palette. [pull/5247](https://github.com/ant-design/ant-design/pull/5247) [@bsheikh](https://github.com/bsheikh)
+  - Add boilerplate samples. [commit/f2f786](https://github.com/ant-design/ant-design/commit/f2f786d66d75eebef8406a72db8a15e1640cea1f)
+
+## 2.8.0
+
+`2017-03-06`
+
+- Tabs
+  - Added `tabBarStyle` to allow customize style of tab bar. [#4966](https://github.com/ant-design/ant-design/issues/4966)
+  - Added `TabPane[closable]` to allow config whether to show delete icon or not. [#4807](https://github.com/ant-design/ant-design/pull/4807) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+- Anchor
+  - Added `showInkInFixed` to allow config whether to show circle icon or not when anchor is fixed. [#4960](https://github.com/ant-design/ant-design/pull/4960)
+  - Fix issue resulting in Anchor throw errors when `children` is not AnchorLink. [#5129](https://github.com/ant-design/ant-design/issues/5129)
+- Table
+  - Added invert selection feature. [demo](https://ant.design/components/table-cn/#components-table-demo-row-selection-custom) [#4962](https://github.com/ant-design/ant-design/pull/4962)
+  - `spin` now spport Spin props. [#4824](https://github.com/ant-design/ant-design/pull/4824) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+  - Fix issue resulting header's bottom border doesn't show when `size` is `small`. [#5182](https://github.com/ant-design/ant-design/issues/5182)
+- Mention added custom trigger character support. [demo](https://ant.design/components/mention-cn/#components-mention-demo-multiple-trigger)
+  - ![Mention animation](https://zos.alipayobjects.com/rmsportal/QDYwAbwKrqOUOykRaNai.gif)
+- Rate
+  - Support custom character. [demo](https://ant.design/components/rate-cn/#components-rate-demo-character)
+  - Added new `className` prop.
+- Layout
+  - Added a new `Header Sider` demo. [demo](http://ant.design/components/layout-cn/#components-layout-demo-top-side-2)
+  - Added a new `Fixed Header` demo. [demo](https://ant.design/components/layout-cn/#components-layout-demo-fixed)
+  - Added `Sider[breakpoint]` to allow config responsive breakpoint. [#4931](https://github.com/ant-design/ant-design/pull/4931)
+- Form
+  - Added `layout` to replace the original `horizontal`、`vertical`、`inline`. [#5056](https://github.com/ant-design/ant-design/issues/5056)
+- Calendar
+  - Added `dateFullCellRender` and `monthFullCellRender` to allow override the content of cell. [#5138](https://github.com/ant-design/ant-design/pull/5138) [@wonyun](https://github.com/wonyun)
+  - Added  `onSelect` for date selection. [demo](https://ant.design/components/calendar-cn/#components-calendar-demo-select)
+- AutoComplete
+  - Fix alignment issue in Form.Item. [#5139](https://github.com/ant-design/ant-design/issues/5139)
+  - Adde a newd `Uncertain Category` demo. [demo](https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-uncertain-category)
+- Col added `xl` to support 1600px breakpoint. [#4796](https://github.com/ant-design/ant-design/pull/4796) [@hjin-me](https://github.com/hjin-me)
+- Upload added `locale` to support i18n. [#4697](https://github.com/ant-design/ant-design/issues/4697)
+- Transfer added `onScroll` to support load data dynamically. [#4188](https://github.com/ant-design/ant-design/issues/4188)
+- `message` and `notification` add `getContainer` to allow config the render container. [#5019](https://github.com/ant-design/ant-design/issues/5019)
+- Badge added `showZero` to allow config whether to show `0` or not. [#4251](https://github.com/ant-design/ant-design/issues/4251)
+- InputNumber
+  - Added `formatter` to allow format the value to present.
+  - Added ctrl and shift key support. [detail](https://github.com/react-component/input-number#keyboard-navigation)
+- Added some new icons. [#5107](https://github.com/ant-design/ant-design/pull/5107)
+- New locale support:
+  - Dutch [#4785](https://github.com/ant-design/ant-design/pull/4785) [@corneyl](https://github.com/corneyl)
+  - Catalan [#4929](https://github.com/ant-design/ant-design/pull/4929) [@aaronplanell](https://github.com/aaronplanell)
+  - Czech [#5169](https://github.com/ant-design/ant-design/pull/5169) [@martinnov92](https://github.com/ant-design/ant-design/pull/5169)
+  - Korean [#5141](https://github.com/ant-design/ant-design/pull/5141) [@minsungryu](https://github.com/ant-design/ant-design/pull/5141)
+- Improve Spin display position. [#4722](https://github.com/ant-design/ant-design/issues/4722)
+- Fix Checkbox comatible issue with `browser-sync`. [#2744](https://github.com/ant-design/ant-design/issues/2744)
+- Fix Steps width issue when resize window. [#5083](https://github.com/ant-design/ant-design/issues/5083)
+- Fix Upload.Dragger unmount error. [#5162](https://github.com/ant-design/ant-design/issues/5162)
+- Fix Button shifting during click in IE issue.
+- FIx Input prefix and suffix vertical alignment.
+
+## 2.7.4
+
+`2017-02-28`
+
+- Fix TreeSelect cannot display bug. [#5092](https://github.com/ant-design/ant-design/issues/5092)
+- Fix Anchor `e.stopPreventDefault is not a function` error. [#5080](https://github.com/ant-design/ant-design/issues/5080)
+- Fix some detail styles of Input, Cascader, Upload.
+
+## 2.7.3
+
+`2017-02-25`
+
+- Unify demo code to ES6 class. [#4878](https://github.com/ant-design/ant-design/issues/4878)
+- TypeScript
+  - Fix that `Cannot find module '../../package.json'` error. [#4935](https://github.com/ant-design/ant-design/issues/4935)
+  - Fix definitions of Table, RangePicker and Upload.
+- Fix lack of event argument for Modal `onOk` `afterClose` and Popconfirm `onConfirm` `onCancel`. [#4787](https://github.com/ant-design/ant-design/issues/4787)
+- Improve animation of Menu[inline] and Collapse.
+- Improve Checkbox and Radio vertical align style.
+- Table
+  - Fix misplace header when fix column. [#4936](https://github.com/ant-design/ant-design/issues/4936)
+  - Fix not clearing float issue. [#4945](https://github.com/ant-design/ant-design/issues/4945)
+  - Fix submenu of filter. [#4975](https://github.com/ant-design/ant-design/issues/4975)
+  - Fix that filterDropdown of fixed column cannot be interacted with. [#5010](https://github.com/ant-design/ant-design/issues/5010)
+  - Fix that arguments of `pagination.onChange` do not match Pagination `onChange`.
+  - Fix that table loading animation is not smoothing. [#4934](https://github.com/ant-design/ant-design/issues/4934)
+- Improve multiple message display. [#3543](https://github.com/ant-design/ant-design/issues/3543)
+- Fix Carousel autoplay not working after resize window. [#2550](https://github.com/ant-design/ant-design/issues/2550)
+- Fix that controlled InputNumber cannot input number like `1.01` `1.001`. [#5012](https://github.com/ant-design/ant-design/issues/5012)
+- Improve Button loading switching.[#4913](https://github.com/ant-design/ant-design/issues/4913)
+- Fix Dropdown selected menu style and `Menu[theme="dark"]` style. [#5013](https://github.com/ant-design/ant-design/issues/5013) [#4903](https://github.com/ant-design/ant-design/issues/4903)
+- Fix Menu submenu `z-index` issue. [#4937](https://github.com/ant-design/ant-design/issues/4937)
+- Fix that DatePicker and RangePicker width cannot be reset below `300px` issue. [#4920](https://github.com/ant-design/ant-design/issues/4920)
+- Fix style of Spin nested in Spin. [#4971](https://github.com/ant-design/ant-design/issues/4971)
+- Fix that lack of Button style when import Popconfirm by babel-plugin-import.
+- Fix that less variables cannot work on circle Progress. [#5002](https://github.com/ant-design/ant-design/issues/5002)
+- Fix falsy children of Breadcrumb. [#5015](https://github.com/ant-design/ant-design/issues/5015)
+- Fix blinking tooltip of Slider. [#5003](https://github.com/ant-design/ant-design/issues/5003)
+- Fix that Transfer disabled option can be moved. [#4981](https://github.com/ant-design/ant-design/pull/4981) [@tianlizhao](https://github.com/tianlizhao)
+- Documentation
+  - Fix and improve site for mobile devices.
+  - Improve 1.x to 2.x compatibility instruction.
+
 ## 2.7.2

 `2017-02-17`
@@ -100,7 +303,10 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 * 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)
+* Form
+  * Added `options.onValuesChange` option, because `options.onFieldsChange` would be triggered multiply. [#2934](https://github.com/ant-design/ant-design/pull/2934)
+  * Added `props.form.getFieldsError` `props.form.isFieldTouched` `props.form.isFieldsTouched` options that can be used to disable submit button. [#4374](https://github.com/ant-design/ant-design/issues/4374)
+  * Added `hideRequiredMark` property. [#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)
@@ -265,7 +471,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 * Table
  * We can control the visible of customized `filterDropdown`. [demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel)
  * Supports JSX-style columns. [demo](https://ant.design/components/table/#components-table-demo-jsx)
-  * Can listen the click event of table cell. [#3774](https://github.com/ant-design/ant-design/issues/3774)
+  * Can listen the click event of table cell by `onCellClick`. [#3774](https://github.com/ant-design/ant-design/issues/3774)
  * Fix border radius of head of border-less table.
  * Fix that height of title and footer don't follow `Table[size]`. [commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23)
  * Fix issue with selected status. [#3900](https://github.com/ant-design/ant-design/issues/3900)
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -9,14 +9,216 @@ timeline: true

 #### 发布周期

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

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

 ---

+## 2.9.0
+
+`2017-04-01` :ghost:
+
+- 默认字体中数字设为等宽，方便进行纵向比较。[b526083](https://github.com/ant-design/ant-design/commit/b526083fa6a619113a3d26c4f4f092a8648f3bd4)
+- Select
+  - 新增 `mode` 参数，废弃 `tags|combobox|multiple` 属性，使用 `mode={tags|combobox|multiple}` 来代替。
+  - `tags|multiple` 模式现在支持配置 `allowClear` 清除按钮。[#4843](https://github.com/ant-design/ant-design/issues/4843)
+- Progress 新增 `dashboard` 仪表盘类型。[#5225](https://github.com/ant-design/ant-design/issues/5225) [@qiaolb](https://github.com/qiaolb)
+- Tree 新增 `showLine` 属性，支持纵向连接线展示。[#3854](https://github.com/ant-design/ant-design/issues/3854)
+- TimePicker 支持 12 小时制：`use12Hours`。[#4063](https://github.com/ant-design/ant-design/issues/4063)
+- Table 支持 `column.filterIcon`，支持使用自定义筛选菜单时自定义图标。[#5293](https://github.com/ant-design/ant-design/pull/5293)
+- Spin 新增 `wrapperClassName`，方便给包裹形态的加载条增加类名。[#5425](https://github.com/ant-design/ant-design/pull/5425) [@aaronplanell](https://github.com/aaronplanell)
+- Tabs 新增点击左右切换箭头的回调 `onPrevClick` `onNextClick`。[#4395](https://github.com/ant-design/ant-design/issues/4395)
+- InputNumber 新增 `parser` 属性，用于有时指定了 `formatter` 时需要解析出数字。[#5178](https://github.com/ant-design/ant-design/pull/5178#issuecomment-284557933)
+- 国际化
+  - 新增日语。[#5529](https://github.com/ant-design/ant-design/pull/5529)  [@novi](https://github.com/novi)
+  - 新增斯洛伐克语。[#5304](https://github.com/ant-design/ant-design/pull/5304) [@Kamahl19](https://github.com/Kamahl19)
+  - 新增爱沙尼亚语。[#5266](https://github.com/ant-design/ant-design/pull/5266) [@madisvain](https://github.com/madisvain)
+  - 新增土耳其语。[#5536](https://github.com/ant-design/ant-design/pull/5536) [@c0b41](https://github.com/c0b41)
+- TypeScript
+  - 参照 react-slick 补充 Carousel 的定义。
+  - 修复 Form 的部分定义。
+  - 修正 `getPopupContainer` 定义。
+- 允许分开禁用 Tabs 的高亮条和面板的切换动画。[#5089](https://github.com/ant-design/ant-design/issues/5089) [@xieguanglei](https://github.com/xieguanglei)
+- Button 的 `loading` 属性支持 `{ delay: 1000 }` 的形式，默认不再延迟切换状态 。[#5365](https://github.com/ant-design/ant-design/issues/5365)
+- 增加 Card 头部的 less 变量。[#5354](https://github.com/ant-design/ant-design/pull/5354) [@kossel](https://github.com/kossel)
+- 修复 Breadcrumb 没有设置 `breadcrumbName` 时分隔符多余的问题。
+- 修复 Dropdown.Button 的 `Unknown prop placement` 警告信息。[#5594](https://github.com/ant-design/ant-design/issues/5594)
+- 修复 RangePicker 和 InputNumber 的占位文字颜色。
+- 修复 Cascasder 搜索模式下无法使用退格键的问题。[#5340](https://github.com/ant-design/ant-design/issues/5340)
+- 修复 LocaleProvider 有时对 `Modal.confirm` 失效的问题。[#5493](https://github.com/ant-design/ant-design/issues/5493) [@hargasinski](https://github.com/hargasinski)
+- 修复 BackTop 设置了 `target` 时滚动动效消失的问题。[#5564](https://github.com/ant-design/ant-design/issues/5564)
+- 优化 Pagination 的样式实现。[#5557](https://github.com/ant-design/ant-design/issues/5557)
+
+## 2.8.3
+
+`2017-03-27`
+
+- TypeScript
+  - 修复 `AutoComplete[filterOption]` 定义缺失的问题。[#5393](https://github.com/ant-design/ant-design/pull/5393) [@mitchelldemler](https://github.com/mitchelldemler)
+  - 修复 `getPopupContainer` `getCalendarContainer` `getTooltipContainer` `getSuggestionContainer` 等的定义问题。[322e9ef](https://github.com/ant-design/ant-design/commit/322e9efdc9db28bd92230fc690f1fdf5a72cf7cd)
+  - 优化 `Form.create` 的定义。[#5420](https://github.com/ant-design/ant-design/pull/5420) [@infeng](https://github.com/infeng)
+- 修复 Badge 在 Maxthon 内的兼容性问题。[#5477](https://github.com/ant-design/ant-design/issues/5477)
+- 修复 Button 内无法使用 `null` `undefined` 的问题。[#5472](https://github.com/ant-design/ant-design/issues/5472) [@blade254353074](https://github.com/blade254353074)
+- Breadcrumb 不再强依赖于 `route.breadcrumbName` [ac1c7f3](https://github.com/ant-design/ant-design/commit/ac1c7f312bc46ba6ef7aacace43e4ac99b87dd54)
+- 修复 `Form.Item[hasFeedback]` 与 `Input[prefix]` 混用时的样式问题。[#5456](https://github.com/ant-design/ant-design/issues/5456) [@william-yz](https://github.com/william-yz)
+- 修复 Layout.Content 与 Carousel 一起使用时的样式问题。[#5415](https://github.com/ant-design/ant-design/issues/5415)
+- LocaleProvider
+  - 修复对德语支持不完善的问题。[#5387](https://github.com/ant-design/ant-design/pull/5387) [@Knacktus](https://github.com/Knacktus)
+  - 修复对俄语支持不完善的问题。[#5406](https://github.com/ant-design/ant-design/pull/5406) [@plandem](https://github.com/plandem)
+  - 修复不支持 Upload 的问题。[#5388](https://github.com/ant-design/ant-design/pull/5388) [@natergj](https://github.com/natergj)
+- 修复 Menu 内 Icon 动画效果与文字不一致的问题。[#5495](https://github.com/ant-design/ant-design/issues/5495)
+- 修复 `Modale[footer]` 无法置空的问题。[#5462](https://github.com/ant-design/ant-design/issues/5462)
+- 修复 `2.8.2` 引入的 Pagination 在 `IE<=10` 下样式丢失的问题。[#5484](https://github.com/ant-design/ant-design/issues/5484)
+- 修复 Popover 内使用 Table 时会意外关闭的问题。[#5407](https://github.com/ant-design/ant-design/issues/5407)
+- 去掉 Radio 只能作为 Radio.Group 的直接后代的限制。[#5443](https://github.com/ant-design/ant-design/issues/5443)
+- 修复 Switch 在 Form.Item 内使用时的 warning。[#5368](https://github.com/ant-design/ant-design/issues/5368)
+- Table 的选择全部菜单现在默认隐藏，`selections` 设置为 true 时展现。[#5246](https://github.com/ant-design/ant-design/issues/5246) [@infeng](https://github.com/infeng)
+- 新增 `@info-color` 主题变量。[#5442](https://github.com/ant-design/ant-design/issues/5442)
+- 现在可以通过 `NODE_ENV=test` 来禁用测试时 antd 全量加载的 warning。[#5345](https://github.com/ant-design/ant-design/issues/5345)
+- 升级 moment 到 `2.18.0`。
+
+## 2.8.2
+
+`2017-03-19`
+
+- 发布了新的 [设计基础文档](https://ant.design/docs/spec/colors-cn)。
+- 修复使用 Modal.confirm 时报错的问题。[#5269](https://github.com/ant-design/ant-design/issues/5269)。
+- 修复 Upload 的蒙层样式 [#5275](https://github.com/ant-design/ant-design/issues/5275)。
+- 修复 Upload 上传进度条不显示的问题 [#5323](https://github.com/ant-design/ant-design/issues/5323)。
+- 修复 Table 的分页的 showTotal 数据错误的问题 [#5259](https://github.com/ant-design/ant-design/issues/5259)。
+- 修复了 Popconfirm 与 Button 同时使用时的样式问题 [5301](https://github.com/ant-design/ant-design/issues/5301)。
+- 修复 Radio 的一个样式问题 [#5336](https://github.com/ant-design/ant-design/pull/5336)。
+- 修复 Message 的 getContainer 无法使用的问题 [#5380](https://github.com/ant-design/ant-design/issues/5380)。
+- 修复 Checkbox 和 Radio 标签的文字对齐 [696a3c0](https://github.com/ant-design/ant-design/commit/696a3c0e34156d78e87d629a3f0f8703af1f03ec)。
+- 调整了 Spin 的动画 [fa1e031](https://github.com/ant-design/ant-design/commit/fa1e031a7396c61fa9709a0c46fe63200c35d232)。
+- 调整了 Mention 的一些样式 [240a93c](https://github.com/ant-design/ant-design/commit/240a93cee25bc8c6ad4520cd907a14a7b22ed773)。
+
+## 2.8.1
+
+`2017-03-11`
+
+- **DatePicker** 优化了带时间的 DatePicker 的选择行为，并修复父组件 state 变化导致无法选中的问题。[#5189](https://github.com/ant-design/ant-design/issues/5189) [@megawac](https://github.com/megawac)
+- **Form**
+  - 补充了校验规则相关文档。[#5201](https://github.com/ant-design/ant-design/issues/5201)
+  - 修复了一些样式问题。[#5196](https://github.com/ant-design/ant-design/issues/5196) [#5236](https://github.com/ant-design/ant-design/issues/5236) [#5222](https://github.com/ant-design/ant-design/issues/5222)
+- **Icon** 增加 `shake` 和 `android-o` 图标。[commit/941782](https://github.com/ant-design/ant-design/commit/941782f7ec000a9054c3bc945ab887f93ab46749)
+- **Input** 修复有 `addonBefore` 时 `hasFeedback` 失效的问题。[#5228](https://github.com/ant-design/ant-design/issues/5228)
+- **InputNumber** 补充缺失的 type 定义。[#5240](https://github.com/ant-design/ant-design/issues/5240) [@hlehmann](https://github.com/hlehmann)
+- **Modal** 支持点击 esc 调用 `onCancle`。[#5203](https://github.com/ant-design/ant-design/issues/5203) [@elios264](https://github.com/elios264)
+- **Table**
+  - 补充缺失的 type 定义。[#5206](https://github.com/ant-design/ant-design/issues/5206) [@kvey](https://github.com/kvey)
+  - 修复小号表格无数据时右边线缺失的问题。[#5237](https://github.com/ant-design/ant-design/issues/5237)
+  - 修复表头分组时排序失效的问题。[#5158](https://github.com/ant-design/ant-design/issues/5158)
+- **Tooltip** 修复 Trigger 为绝对定位且禁用的按钮时失效的问题。[#5254](https://github.com/ant-design/ant-design/issues/5254)
+- **Upload**
+  - 修复上传文件名字过长时的样式问题。[commit/0a3519](https://github.com/ant-design/ant-design/commit/0a35197a35513ca45308bb7163c8243b75dd6f8d)
+  - 修复并优化了动画。[pull/5210](https://github.com/ant-design/ant-design/pull/5210)
+  - 支持覆盖 `onProgress`。[pull/5260](https://github.com/ant-design/ant-design/pull/5260) [@minwe](https://github.com/minwe)
+- **全局性优化**
+  - 修复 `lodash.debounce` 依赖缺失问题。[#5230](https://github.com/ant-design/ant-design/issues/5230)
+- **网站**
+  - 修复 safari 语言检测失效的问题。[pull/5245](https://github.com/ant-design/ant-design/pull/5245)
+  - 色板支持点击复制色号。[pull/5247](https://github.com/ant-design/ant-design/pull/5247) [@bsheikh](https://github.com/bsheikh)
+  - 增加脚手架示例。[commit/f2f786](https://github.com/ant-design/ant-design/commit/f2f786d66d75eebef8406a72db8a15e1640cea1f)
+
+## 2.8.0
+
+`2017-03-06`
+
+- Tabs
+  - 新增 `tabBarStyle` 用于自定义 tabBar 的样式。[#4966](https://github.com/ant-design/ant-design/issues/4966)
+  - 新增 `TabPane[closable]` 用于设置是否显示删除按钮。[#4807](https://github.com/ant-design/ant-design/pull/4807) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+- Anchor
+  - 新增 `showInkInFixed` 用于设置在 fixed 状态下是否圆形图标。[#4960](https://github.com/ant-design/ant-design/pull/4960)
+  - 修复 `children` 不是 AnchorLink 时会报错的问题。[#5129](https://github.com/ant-design/ant-design/issues/5129)
+- Table
+  - 新增反选功能并允许自定义全选选项。[#4962](https://github.com/ant-design/ant-design/pull/4962)
+  - `spin` 属性支持所有 Spin 的属性。[#4824](https://github.com/ant-design/ant-design/pull/4824) [@lixiaoyang1992](https://github.com/lixiaoyang1992)
+  - 修正 `size` 是 `small` 的时候表头没有底边框的问题。[#5182](https://github.com/ant-design/ant-design/issues/5182)
+- Mention 新增自定义触发字符的支持。[demo](https://ant.design/components/mention-cn/#components-mention-demo-multiple-trigger)
+  - ![Mention animation](https://zos.alipayobjects.com/rmsportal/QDYwAbwKrqOUOykRaNai.gif)
+- Rate
+  - 支持自定义字符。[demo](https://ant.design/components/rate-cn/#components-rate-demo-charactor)
+  - 新增 `className` 属性。
+- Layout
+  - 新增 `顶部-侧边布局-通栏` 的例子。[demo](http://ant.design/components/layout-cn/#components-layout-demo-top-side-2)
+  - 新增 `固定头部` 的例子。[demo](https://ant.design/components/layout-cn/#components-layout-demo-fixed)
+  - Sider 新增 `breakpoint` 用于设置响应式展示。[#4931](https://github.com/ant-design/ant-design/pull/4931)
+- Form
+  - 新增 `layout` 属性用于取代原有的 `horizontal`、`vertical`、`inline`。[#5056](https://github.com/ant-design/ant-design/issues/5056)
+- Calendar
+  - 新增 `dateFullCellRender` 和 `monthFullCellRender` 用于覆盖单元格的内容。[#5138](https://github.com/ant-design/ant-design/pull/5138) [@wonyun](https://github.com/wonyun)
+  - 新增 `onSelect` 用于日期选择功能。[demo](https://ant.design/components/calendar-cn/#components-calendar-demo-select)
+- AutoComplete
+  - 修复在 Form.Item 里不对齐的问题。[#5139](https://github.com/ant-design/ant-design/issues/5139)
+  - 新增 `查询模式 - 确定类目` 的例子。[demo](https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-uncertain-category)
+- Col 新增 `xl` 属性，支持 1600px 的响应布局断点。[#4796](https://github.com/ant-design/ant-design/pull/4796) [@hjin-me](https://github.com/hjin-me)
+- Upload 新增 `locale` 支持国际化文案定义。[#4697](https://github.com/ant-design/ant-design/issues/4697)
+- Transfer 新增 `onScroll` 支持动态加载数据。[#4188](https://github.com/ant-design/ant-design/issues/4188)
+- message 和 notification 新增 `getContainer` 参数支持自定义消息渲染的容器。[#5019](https://github.com/ant-design/ant-design/issues/5019)
+- Badge 新增 `showZero` 支持设置是否显示 `0`。[#4251](https://github.com/ant-design/ant-design/issues/4251)
+- InputNumber
+  - 新增 `formatter` 用于格式化展示的值。
+  - 新增组合键的支持。[详细](https://github.com/react-component/input-number#keyboard-navigation)
+- 新增大量图标。[#5107](https://github.com/ant-design/ant-design/pull/5107)
+- 新增语言支持：
+  - 荷兰语 [#4785](https://github.com/ant-design/ant-design/pull/4785) [@corneyl](https://github.com/corneyl)
+  - 加泰罗尼亚语 [#4929](https://github.com/ant-design/ant-design/pull/4929) [@aaronplanell](https://github.com/aaronplanell)
+  - 捷克语 [#5169](https://github.com/ant-design/ant-design/pull/5169) [@martinnov92](https://github.com/ant-design/ant-design/pull/5169)
+  - 韩语/朝鲜语 [#5141](https://github.com/ant-design/ant-design/pull/5141) [@minsungryu](https://github.com/ant-design/ant-design/pull/5141)
+- 优化 Spin 显示位置。[#4722](https://github.com/ant-design/ant-design/issues/4722)
+- 优化 Checkbox 以兼容 `browser-sync`。[#2744](https://github.com/ant-design/ant-design/issues/2744)
+- 修复 Steps 在窗口变化时的宽度问题。[#5083](https://github.com/ant-design/ant-design/issues/5083)
+- 修复 Upload.Dragger unmount 时会报错的问题。[#5162](https://github.com/ant-design/ant-design/issues/5162)
+- 修复 Button 里的文字在 IE 下点击时会移动的问题。
+- 修复 Input 的前缀跟后缀的垂直居中对齐问题。
+
+## 2.7.4
+
+`2017-02-28`
+
+- 修复 TreeSelect 多选框无法展现的问题。[#5092](https://github.com/ant-design/ant-design/issues/5092)
+- 修复 Anchor 的 `e.stopPreventDefault is not a function` 的报错。[#5080](https://github.com/ant-design/ant-design/issues/5080)
+- 修复 Input、Cascader、Upload 的一些样式细节。
+
+## 2.7.3
+
+`2017-02-25`
+
+- 演示代码统一为 ES6 class 的写法。[#4878](https://github.com/ant-design/ant-design/issues/4878)
+- TypeScript
+  - 修复 `Cannot find module '../../package.json'` 的问题。[#4935](https://github.com/ant-design/ant-design/issues/4935)
+  - 补充了 Table、RangePicker 和 Upload 的部分属性定义。
+- 修复了 Modal `onOk` `afterClose` 和 Popconfirm `onConfirm` `onCancel` 缺少点击 event 参数的问题。 [#4787](https://github.com/ant-design/ant-design/issues/4787)
+- 优化 Menu[inline] 和 Collapse 的折叠动画效果。
+- 优化了 Checkbox 和 Radio 的垂直对齐样式。
+- Table
+  - 修复固定列时列头样式错位的问题。[#4936](https://github.com/ant-design/ant-design/issues/4936)
+  - 修复未清除浮动导致排版错位的问题。[#4945](https://github.com/ant-design/ant-design/issues/4945)
+  - 修复筛选子菜单无法显示的问题。[#4975](https://github.com/ant-design/ant-design/issues/4975)
+  - 修复固定列上的自定义筛选菜单无法交互的问题。[#5010](https://github.com/ant-design/ant-design/issues/5010)
+  - 修正 `pagination.onChange` 和 Pagination 的 `onChange` 参数不一致的问题。
+  - 修复加载状态切换不柔和的问题。[#4934](https://github.com/ant-design/ant-design/issues/4934)
+- 优化多个 message 展示重叠的问题。[#3543](https://github.com/ant-design/ant-design/issues/3543)
+- 修复 Carousel 在改变浏览器窗口大小后 autoplay 会失效的问题。[#2550](https://github.com/ant-design/ant-design/issues/2550)
+- 修复了 InputNumber 在受控模式（Form 表单内）无法输入 `1.01` `1.001` 等数字的问题。[#5012](https://github.com/ant-design/ant-design/issues/5012)
+- 优化 Button 加载状态切换时的宽度抖动问题。[#4913](https://github.com/ant-design/ant-design/issues/4913)
+- 修复 Dropdown 的菜单选中样式和 `Menu[theme="dark"]` 样式无效的问题。[#5013](https://github.com/ant-design/ant-design/issues/5013) [#4903](https://github.com/ant-design/ant-design/issues/4903)
+- 修复 Menu 的弹出菜单的 `z-index` 问题。[#4937](https://github.com/ant-design/ant-design/issues/4937)
+- 修复 DatePicker 和 RangePicker 无法设置小于 300px 的宽度的问题。[#4920](https://github.com/ant-design/ant-design/issues/4920)
+- 修复 Spin 内嵌 Spin 的样式问题。[#4971](https://github.com/ant-design/ant-design/issues/4971)
+- 修复了使用 babel-plugin-import 引入 Popconfirm 时，未引入 Button 样式的问题。
+- 修复了样式变量在 Progress `type="circle"` 上未生效的问题。[#5002](https://github.com/ant-design/ant-design/issues/5002)
+- 修复了 Breadcrumb 的 chilren 为 `null` 或 `undefined` 时报错的问题。[#5015](https://github.com/ant-design/ant-design/issues/5015)
+- 修复 Slider 的 tooltip 闪烁的问题。[#5003](https://github.com/ant-design/ant-design/issues/5003)
+- 修复了 Transfer 中 disabled 选项仍然可以被移动的问题。[#4981](https://github.com/ant-design/ant-design/pull/4981) [@tianlizhao](https://github.com/tianlizhao)
+- 文档
+  - 修复和优化了移动端的展现。
+  - 优化了 1.x 升级到 2.x 的不兼容改动文档。
+
 ## 2.7.2

 `2017-02-17`
@@ -100,7 +302,10 @@ timeline: true
 * 添加了对法语的支持。[#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)
+* Form
+  * 增加 `options.onValuesChange` 参数，可用于代替会触发多次 `options.onFieldsChange`。[#2934](https://github.com/ant-design/ant-design/pull/2934)
+  * 增加 `props.form.getFieldsError` `props.form.isFieldTouched` `props.form.isFieldsTouched` 三个方法，可用于提交表单按钮的禁用展示。 [#4374](https://github.com/ant-design/ant-design/issues/4374)
+  * 增加 `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)
@@ -139,10 +344,10 @@ timeline: true

 `2017-01-14`

-* 新增社区精选组件页面。[链接](/docs/react/recommendation-cn)
+* 新增社区精选组件页面。[链接](/docs/react/recommendation)
 * 修复一个内容过长导致 Layout 侧边布局错位的问题。[#4459](https://github.com/ant-design/ant-design/issues/4459)
 * 修复 Input.Search 输入框和图标错位的问题。[#4540](https://github.com/ant-design/ant-design/issues/4540)
-* 补充了一个自定义灰底样式的 Collapse 折叠面板的例子。[链接](/components/collapse-cn/#components-collapse-demo-custom)
+* 补充了一个自定义灰底样式的 Collapse 折叠面板的例子。[链接](/components/collapse/#components-collapse-demo-custom)
 * Table
  * 调大了 Table 选择框和展开按钮的列宽度。
  * 修复 `pagination` 属性切换后分页不可用的问题。[#4532](https://github.com/ant-design/ant-design/issues/4532)
@@ -265,7 +470,7 @@ timeline: true
 * Table
  * 自定义筛选的显示隐藏现在可以通过代码控制。[demo](https://ant.design/components/table/#components-table-demo-custom-filter-panel)
  * 支持 JSX 风格的方式设置 columns。[demo](https://ant.design/components/table/#components-table-demo-jsx)
-  * 现在可以监听单元格的点击事件。[#3774](https://github.com/ant-design/ant-design/issues/3774)
+  * 现在可以监听单元格的点击事件 `onCellClick`。[#3774](https://github.com/ant-design/ant-design/issues/3774)
  * 修复无边框 Table 头部的圆角样式问题。
  * 修复 title 和 footer 高度不随 `Table[size]` 变化的问题。[commit](https://github.com/ant-design/ant-design/commit/9e6439b06cd099ab384a4a2f026f0def6e12bf23)
  * 修复选中状态出错的问题。[#3900](https://github.com/ant-design/ant-design/issues/3900)
@@ -498,9 +703,11 @@ timeline: true

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

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

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

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

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

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

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

 * 修复 Dropdown.Button `disabled` 属性无效的问题。[#3070](https://github.com/ant-design/ant-design/issues/3070)
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -7,12 +7,12 @@
 # Ant Design

 [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.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)
+[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
 [![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")
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
 [![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 实现。
@@ -26,6 +26,16 @@
 - 使用 TypeScript 构建，提供完整的类型定义文件。
 - 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架。

+## 支持环境
+
+* 现代浏览器和 IE9 及以上。
+* 支持服务端渲染。
+* [Electron](http://electron.atom.io/)
+
+## 参与共建 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+`antd` 是一个开源项目，我们欢迎社区参与共建。如果你对此项目感兴趣，有 [很多方式](https://opensource.guide/how-to-contribute/) 进行参与。你可以 watch 这个仓库，加入 [issue 中的讨论](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3ADiscussion)，以及尝试实现一些 [已接受的特性](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22PR+welcome%22)。我们会给予有活跃贡献的社区成员 [collaborator 权限](https://github.com/ant-design/ant-design/issues/3222)。
+
 ## 安装

 ```bash
@@ -47,18 +57,10 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'

 按需加载可通过此写法 `import DatePicker from 'antd/lib/date-picker'` 或使用插件 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)。

-
-## 浏览器支持
-
-现代浏览器和 IE9 及以上。
-
-> [IE8 issues](https://github.com/xcatliu/react-ie8)
-
 ## TypeScript

-tsconfig.json
-
 ```js
+// tsconfig.json
 {
  "compilerOptions": {
    "moduleResolution": "node",
@@ -68,17 +70,22 @@ tsconfig.json
 }
 ```

-> 注意：设置 `allowSyntheticDefaultImports` 避免 `error TS1192: Module 'react' has no default export` 的错误。
+> 注意：
+> - 设置 `allowSyntheticDefaultImports` 避免 `error TS1192: Module 'react' has no default export` 的错误。
+> - 不要使用 @types/antd, antd 已经自带了 TypeScript 定义。

+## 国际化
+
+参考 [国际化文档](http://ant.design/docs/react/i18n)。

 ## 链接

 - [首页](http://ant.design/index-cn)
- [组件文档](http://ant.design/docs/react/introduce-cn)
+- [UI 组件库](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/)
+- [React 底层基础组件](http://react-component.github.io/)
 - [移动端组件](http://mobile.ant.design)
 - [动效](https://motion.ant.design)
 - [设计规范速查手册](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)
@@ -90,6 +97,28 @@ tsconfig.json
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 - [定制主题](http://ant.design/docs/react/customize-theme-cn)

+## 本地开发
+
+```bash
+$ git clone git@github.com:ant-design/ant-design.git
+$ npm install
+$ npm start
+```
+
+打开浏览器访问 http://127.0.0.1:8001 ，更多本地开发文档参见: https://github.com/ant-design/ant-design/wiki/Development 。
+
 ## 如何贡献

-我们欢迎任何形式的贡献，有任何建议或意见您可以进行 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或者给我们 [提问](https://github.com/ant-design/ant-design/issues)。
+在任何形式的参与前，请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献，欢迎 [Pull Request](https://github.com/ant-design/ant-design/pulls)，或给我们 [报告 Bug](http://new-issue.ant.design/)。
+
+> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)，更好的问题更容易获得帮助。
+
+## 社区互助
+
+如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
+
+通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。
+
+1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
+2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
+3. [![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)
--- a/README.md
+++ b/README.md
@@ -7,12 +7,12 @@
 # Ant Design

 [![](https://img.shields.io/travis/ant-design/ant-design.svg?style=flat-square)](https://travis-ci.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)
+[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
 [![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")
+[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design.svg)](http://isitmaintained.com/project/ant-design/ant-design "Percentage of issues still open")
 [![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.
@@ -26,9 +26,15 @@ An enterprise-class UI design language and React-based implementation.
 - Written in TypeScript with complete define types.
 - A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.

+## Environment Support
+
+* Browser: Modern browsers and Internet Explorer 9+
+* Server-side Rendering
+* [Electron](http://electron.atom.io/)
+
 ## Let's build a better antd together [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

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

 ## Install

@@ -38,8 +44,6 @@ npm install antd

 ## Usage

-### Use prebuilt bundle
-
 ```jsx
 import { DatePicker } from 'antd';
 ReactDOM.render(<DatePicker />, mountNode);
@@ -58,36 +62,31 @@ import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
   ```js
   // .babelrc or babel-loader option
   {
-     "plugins": [["import", { libraryName: "antd", style: "css" }]]
+     "plugins": [
+       ["import", { libraryName: "antd", style: "css" }] // `style: true` for less
+     ]
   }
   ```

-   Then you can import components from antd directly.
+   Then you can import components from antd, equivalent to import manually below.

   ```jsx
   // import js and css modularly, parsed by babel-plugin-import
   import { DatePicker } from 'antd';
   ```

- Manual import
+- Manually import

   ```jsx
-   import DatePicker from 'antd/lib/date-picker';  // just for js
-   import 'antd/lib/date-picker/style/css';  // with style
+   import DatePicker from 'antd/lib/date-picker';  // for js
+   import 'antd/lib/date-picker/style/css';        // for css
+   // import 'antd/lib/date-picker/style';         // that will import less
   ```

-## Environment Support
-
-* Browser: Modern browsers and Internet Explorer 9+.
-> [IE8 issues](https://github.com/xcatliu/react-ie8)
-* Server-side Rendering
-* [Electron](http://electron.atom.io/)
-
-## TypeScript
-
-tsconfig.json
+### TypeScript

 ```js
+// tsconfig.json
 {
  "compilerOptions": {
    "moduleResolution": "node",
@@ -97,7 +96,13 @@ tsconfig.json
 }
 ```

-> Note: set `allowSyntheticDefaultImports` to prevent `error TS1192: Module 'react' has no default export`.
+> Note:
+> - set `allowSyntheticDefaultImports` to prevent `error TS1192: Module 'react' has no default export`.
+> - Don't use @types/antd, antd provide a built-in ts definition already.
+
+## Internationalization
+
+See [i18n](http://ant.design/docs/react/i18n).

 ## Links

@@ -106,7 +111,7 @@ tsconfig.json
 - [Change Log](CHANGELOG.en-US.md)
 - [Scaffold tool](https://github.com/dvajs/dva-cli/)
 - [Development tool](http://ant-tool.github.io/)
- [React components](http://react-component.github.io/)
+- [rc-components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
 - [Motion](https://motion.ant.design)
 - [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
@@ -117,6 +122,16 @@ tsconfig.json
 - [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 - [Customize Theme](http://ant.design/docs/react/customize-theme)

+## Development
+
+```bash
+$ git clone git@github.com:ant-design/ant-design.git
+$ npm install
+$ npm start
+```
+
+Open your browser and visit http://127.0.0.1:8001 , see more at https://github.com/ant-design/ant-design/wiki/Development .
+
 ## 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 [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
@@ -1,3 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`antd exports modules correctly 1`] = `
 Array [
  "Affix",
--- a/components/_util/getRequestAnimationFrame.tsx
+++ b/components/_util/getRequestAnimationFrame.tsx
@@ -27,7 +27,6 @@ export default function getRequestAnimationFrame() {
 }

 export function cancelRequestAnimationFrame(id) {
-
  if (typeof window === 'undefined') {
    return null;
  }
@@ -35,7 +34,7 @@ export function cancelRequestAnimationFrame(id) {
    return window.cancelAnimationFrame(id);
  }
  const prefix = availablePrefixs.filter(key =>
-    `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window
+    `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window,
  )[0];

  return prefix ?
--- a/components/_util/openAnimation.tsx
+++ b/components/_util/openAnimation.tsx
@@ -1,21 +1,37 @@
 import cssAnimation from 'css-animation';
+import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame';
+
+const reqAnimFrame = getRequestAnimationFrame();

 function animate(node, show, done) {
  let height;
+  let requestAnimationFrameId;
  return cssAnimation(node, 'ant-motion-collapse', {
    start() {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
+        node.style.opacity = 1;
      } else {
        height = node.offsetHeight;
        node.style.height = 0;
+        node.style.opacity = 0;
      }
    },
    active() {
-      node.style.height = `${show ? height : 0}px`;
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId);
+      }
+      requestAnimationFrameId = reqAnimFrame(() => {
+        node.style.height = `${show ? height : 0}px`;
+        node.style.opacity = show ? 1 : 0;
+      });
    },
    end() {
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId);
+      }
      node.style.height = '';
+      node.style.opacity = '';
      done();
    },
  });
--- a/components/affix/tests/snapshots/demo.test.js.snap
+++ b/components/affix/tests/snapshots/demo.test.js.snap
@@ -1,11 +1,15 @@
-exports[`test renders ./components/affix/demo/basic.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/affix/demo/basic.md correctly 1`] = `
 <div>
  <div>
    <div
-      class="">
+      class=""
+    >
      <button
        class="ant-btn ant-btn-primary"
-        type="button">
+        type="button"
+      >
        <span>
          Affix top
        </span>
@@ -15,10 +19,12 @@ exports[`test renders ./components/affix/demo/basic.md correctly 1`] = `
  <br />
  <div>
    <div
-      class="">
+      class=""
+    >
      <button
        class="ant-btn ant-btn-primary"
-        type="button">
+        type="button"
+      >
        <span>
          Affix bottom
        </span>
@@ -28,13 +34,15 @@ exports[`test renders ./components/affix/demo/basic.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/affix/demo/on-change.md correctly 1`] = `
+exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
 <div>
  <div
-    class="">
+    class=""
+  >
    <button
      class="ant-btn"
-      type="button">
+      type="button"
+    >
      <span>
        120px to affix top
      </span>
@@ -43,17 +51,21 @@ exports[`test renders ./components/affix/demo/on-change.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/affix/demo/target.md correctly 1`] = `
+exports[`renders ./components/affix/demo/target.md correctly 1`] = `
 <div
-  class="scrollable-container">
+  class="scrollable-container"
+>
  <div
-    class="background">
+    class="background"
+  >
    <div>
      <div
-        class="">
+        class=""
+      >
        <button
          class="ant-btn ant-btn-primary"
-          type="button">
+          type="button"
+        >
          <span>
            Fixed at the top of container
          </span>
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -18,6 +18,7 @@ Please note that Affix should not cover other content on the page, especially wh
 |--------------|-----------------------|----------|--------------|
 | 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 | - |
+| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
 | 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
@@ -29,6 +29,8 @@ function getOffset(element: HTMLElement, target) {
      scrollTop - clientTop,
    left: elemRect.left - targetRect.left +
      scrollLeft - clientLeft,
+    width: elemRect.width,
+    height: elemRect.height,
  };
 }

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

-    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
+    const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
    const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
    return (
      <div {...props} style={placeholderStyle}>
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -19,7 +19,7 @@ title: Affix
 |-------------|----------------|--------------------|--------------|
 | offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
-| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
+| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
 | onChange | 固定状态改变时触发的回调函数   | Function(affixed) | 无        |

 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
@@ -1,308 +1,393 @@
-exports[`test renders ./components/alert/demo/banner.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/alert/demo/banner.md correctly 1`] = `
 <div>
  <div
    class="ant-alert ant-alert-warning ant-alert-banner"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-exclamation-circle ant-alert-icon" />
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Warning text
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <br />
  <div
    class="ant-alert ant-alert-warning ant-alert-banner"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-exclamation-circle ant-alert-icon" />
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Very long warning text warning text text text text text text text
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
    <a
-      class="ant-alert-close-icon">
+      class="ant-alert-close-icon"
+    >
      <i
-        class="anticon anticon-cross" />
+        class="anticon anticon-cross"
+      />
    </a>
  </div>
 </div>
 `;

-exports[`test renders ./components/alert/demo/basic.md correctly 1`] = `
+exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
 <div
  class="ant-alert ant-alert-success ant-alert-no-icon"
-  data-show="true">
+  data-show="true"
+>
  <span
-    class="ant-alert-message">
+    class="ant-alert-message"
+  >
    Success Text
  </span>
  <span
-    class="ant-alert-description" />
+    class="ant-alert-description"
+  />
 </div>
 `;

-exports[`test renders ./components/alert/demo/closable.md correctly 1`] = `
+exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
 <div>
  <div
    class="ant-alert ant-alert-warning ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
    <a
-      class="ant-alert-close-icon">
+      class="ant-alert-close-icon"
+    >
      <i
-        class="anticon anticon-cross" />
+        class="anticon anticon-cross"
+      />
    </a>
  </div>
  <div
    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Error Text
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      Error Description Error Description Error Description Error Description Error Description Error Description
    </span>
    <a
-      class="ant-alert-close-icon">
+      class="ant-alert-close-icon"
+    >
      <i
-        class="anticon anticon-cross" />
+        class="anticon anticon-cross"
+      />
    </a>
  </div>
 </div>
 `;

-exports[`test renders ./components/alert/demo/close-text.md correctly 1`] = `
+exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
 <div
  class="ant-alert ant-alert-info ant-alert-no-icon"
-  data-show="true">
+  data-show="true"
+>
  <span
-    class="ant-alert-message">
+    class="ant-alert-message"
+  >
    Info Text
  </span>
  <span
-    class="ant-alert-description" />
+    class="ant-alert-description"
+  />
  <a
-    class="ant-alert-close-icon">
+    class="ant-alert-close-icon"
+  >
    Close Now
  </a>
 </div>
 `;

-exports[`test renders ./components/alert/demo/description.md correctly 1`] = `
+exports[`renders ./components/alert/demo/description.md correctly 1`] = `
 <div>
  <div
    class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Success Text
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      Success Description Success Description Success Description
    </span>
  </div>
  <div
    class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Info Text
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      Info Description Info Description Info Description Info Description
    </span>
  </div>
  <div
    class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Warning Text
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      Warning Description Warning Description Warning Description Warning Description
    </span>
  </div>
  <div
    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Error Text
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      Error Description Error Description Error Description Error Description
    </span>
  </div>
 </div>
 `;

-exports[`test renders ./components/alert/demo/icon.md correctly 1`] = `
+exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
 <div>
  <div
    class="ant-alert ant-alert-success"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-check-circle ant-alert-icon" />
+      class="anticon anticon-check-circle ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Success Tips
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
    class="ant-alert ant-alert-info"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-info-circle ant-alert-icon" />
+      class="anticon anticon-info-circle ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Informational Notes
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
    class="ant-alert ant-alert-warning"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-exclamation-circle ant-alert-icon" />
+      class="anticon anticon-exclamation-circle ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Warning
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
    class="ant-alert ant-alert-error"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-cross-circle ant-alert-icon" />
+      class="anticon anticon-cross-circle ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Error
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
    class="ant-alert ant-alert-success ant-alert-with-description"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-check-circle-o ant-alert-icon" />
+      class="anticon anticon-check-circle-o ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      success tips
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      Detailed description and advices about successful copywriting.
    </span>
  </div>
  <div
    class="ant-alert ant-alert-info ant-alert-with-description"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-info-circle-o ant-alert-icon" />
+      class="anticon anticon-info-circle-o ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Informational Notes
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      Additional description and informations about copywriting.
    </span>
  </div>
  <div
    class="ant-alert ant-alert-warning ant-alert-with-description"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-exclamation-circle-o ant-alert-icon" />
+      class="anticon anticon-exclamation-circle-o ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Warning
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      This is a warning notice about copywriting.
    </span>
  </div>
  <div
    class="ant-alert ant-alert-error ant-alert-with-description"
-    data-show="true">
+    data-show="true"
+  >
    <i
-      class="anticon anticon-cross-circle-o ant-alert-icon" />
+      class="anticon anticon-cross-circle-o ant-alert-icon"
+    />
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Error
    </span>
    <span
-      class="ant-alert-description">
+      class="ant-alert-description"
+    >
      This is an error message about copywriting.
    </span>
  </div>
 </div>
 `;

-exports[`test renders ./components/alert/demo/style.md correctly 1`] = `
+exports[`renders ./components/alert/demo/style.md correctly 1`] = `
 <div>
  <div
    class="ant-alert ant-alert-success ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Success Text
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
    class="ant-alert ant-alert-info ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Info Text
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
    class="ant-alert ant-alert-warning ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Warning Text
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
    class="ant-alert ant-alert-error ant-alert-no-icon"
-    data-show="true">
+    data-show="true"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Error Text
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
 </div>
 `;
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -1,5 +1,6 @@
 ---
 order: 6
+iframe: true
 title:
  zh-CN: 顶部公告
  en-US: Banner
@@ -7,11 +8,11 @@ title:

 ## zh-CN

-用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。
+页面顶部通告形式，默认有图标且`type` 为 'warning'。

 ## en-US

-When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default.
+Display Alert as a banner at top of page.

 ````jsx
 import { Alert } from 'antd';
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -40,7 +40,7 @@
    border: @border-width-base @border-style-base @primary-2;
    background-color: @primary-1;
    .@{alert-prefix-cls}-icon {
-      color: @primary-color;
+      color: @info-color;
    }
  }

--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -4,18 +4,19 @@ import AnchorHelper, { scrollTo } from './anchorHelper';

 export interface AnchorLinkProps {
  href: string;
-  onClick: (href: string, component: Element) => void;
+  onClick?: (href: string, component: Element) => void;
  active?: boolean;
  prefixCls?: string;
  children?: any;
-  title?: React.ReactNode;
-  offsetTop: number;
-  bounds: number;
+  title: React.ReactNode;
+  offsetTop?: number;
+  bounds?: number;
  target?: () => HTMLElement | Window;
  affix?: boolean;
 }

 export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
+  static __ANT_ANCHOR_LINK = true;
  static contextTypes = {
    anchorHelper: React.PropTypes.any,
  };
@@ -73,7 +74,6 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
    if (onClick) {
      onClick(href, this._component);
    } else {
-      e.stopPreventDefault();
      const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
      scrollToFn(href, this.props.offsetTop);
    }
--- a/components/anchor/tests/snapshots/demo.test.js.snap
+++ b/components/anchor/tests/snapshots/demo.test.js.snap
@@ -1,57 +1,74 @@
-exports[`test renders ./components/anchor/demo/basic.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
 <div>
  <div
-    class="">
+    class=""
+  >
    <div
-      class="ant-anchor-wrapper">
+      class="ant-anchor-wrapper"
+    >
      <div
-        class="ant-anchor">
+        class="ant-anchor"
+      >
        <div
-          class="ant-anchor-ink">
+          class="ant-anchor-ink"
+        >
          <span
-            class="ant-anchor-ink-ball animated" />
+            class="ant-anchor-ink-ball animated"
+          />
        </div>
        <div
-          class="ant-anchor-link">
+          class="ant-anchor-link"
+        >
          <a
            class="ant-anchor-link-title"
            href="#components-anchor-demo-basic"
-            title="Basic demo">
+            title="Basic demo"
+          >
            Basic demo
          </a>
        </div>
        <div
-          class="ant-anchor-link">
+          class="ant-anchor-link"
+        >
          <a
            class="ant-anchor-link-title"
            href="#components-anchor-demo-fixed"
-            title="Fixed demo">
+            title="Fixed demo"
+          >
            Fixed demo
          </a>
        </div>
        <div
-          class="ant-anchor-link">
+          class="ant-anchor-link"
+        >
          <a
            class="ant-anchor-link-title"
            href="#API"
-            title="API">
+            title="API"
+          >
            API
          </a>
          <div
-            class="ant-anchor-link">
+            class="ant-anchor-link"
+          >
            <a
              class="ant-anchor-link-title"
              href="#Anchor-Props"
-              title="Anchor Props">
+              title="Anchor Props"
+            >
              Anchor Props
            </a>
          </div>
          <div
-            class="ant-anchor-link">
+            class="ant-anchor-link"
+          >
            <a
              class="ant-anchor-link-title"
              href="#Link-Props"
-              title="Link Props">
+              title="Link Props"
+            >
              Link Props
            </a>
          </div>
@@ -62,57 +79,71 @@ exports[`test renders ./components/anchor/demo/basic.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/anchor/demo/fixed.md correctly 1`] = `
+exports[`renders ./components/anchor/demo/fixed.md correctly 1`] = `
 <div
-  class="ant-anchor-wrapper">
+  class="ant-anchor-wrapper"
+>
  <div
-    class="ant-anchor fixed">
+    class="ant-anchor fixed"
+  >
    <div
-      class="ant-anchor-ink">
+      class="ant-anchor-ink"
+    >
      <span
-        class="ant-anchor-ink-ball animated" />
+        class="ant-anchor-ink-ball animated"
+      />
    </div>
    <div
-      class="ant-anchor-link">
+      class="ant-anchor-link"
+    >
      <a
        class="ant-anchor-link-title"
        href="#components-anchor-demo-basic"
-        title="Basic demo">
+        title="Basic demo"
+      >
        Basic demo
      </a>
    </div>
    <div
-      class="ant-anchor-link">
+      class="ant-anchor-link"
+    >
      <a
        class="ant-anchor-link-title"
        href="#components-anchor-demo-fixed"
-        title="Fixed demo">
+        title="Fixed demo"
+      >
        Fixed demo
      </a>
    </div>
    <div
-      class="ant-anchor-link">
+      class="ant-anchor-link"
+    >
      <a
        class="ant-anchor-link-title"
        href="#API"
-        title="API">
+        title="API"
+      >
        API
      </a>
      <div
-        class="ant-anchor-link">
+        class="ant-anchor-link"
+      >
        <a
          class="ant-anchor-link-title"
          href="#Anchor-Props"
-          title="Anchor Props">
+          title="Anchor Props"
+        >
          Anchor Props
        </a>
      </div>
      <div
-        class="ant-anchor-link">
+        class="ant-anchor-link"
+      >
        <a
          class="ant-anchor-link-title"
          href="#Link-Props"
-          title="Link Props">
+          title="Link Props"
+        >
          Link Props
        </a>
      </div>
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -20,6 +20,8 @@ For displaying anchor hyperlinks on page and jumping between them.
 | 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) |
+| affix | Fixed mode of Anchor | boolean | false |
+| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |

 ### Link Props

--- a/components/anchor/index.tsx
+++ b/components/anchor/index.tsx
@@ -6,14 +6,15 @@ import Affix from '../affix';
 import AnchorHelper, { getDefaultTarget } from './anchorHelper';

 export interface AnchorProps {
-  target: () => HTMLElement | Window;
-  children: React.ReactNode;
+  target?: () => HTMLElement | Window;
+  children?: React.ReactNode;
  prefixCls?: string;
  offsetTop?: number;
  bounds?: number;
  className?: string;
  style?: React.CSSProperties;
  affix?: boolean;
+  showInkInFixed?: boolean;
 }

 export default class Anchor extends React.Component<AnchorProps, any> {
@@ -22,6 +23,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
  static defaultProps = {
    prefixCls: 'ant-anchor',
    affix: true,
+    showInkInFixed: false,
  };

  static childContextTypes = {
@@ -91,14 +93,15 @@ export default class Anchor extends React.Component<AnchorProps, any> {
  }

  renderAnchorLink = (child) => {
+
    const { href } = child.props;
-    if (href) {
+    if (child.type.__ANT_ANCHOR_LINK && href) {
      this.anchorHelper.addLink(href);
      return React.cloneElement(child, {
        onClick: this.clickAnchorLink,
        prefixCls: this.props.prefixCls,
        bounds: this.props.bounds,
-        affix: this.props.affix,
+        affix: this.props.affix || this.props.showInkInFixed,
        offsetTop: this.props.offsetTop,
      });
    }
@@ -106,7 +109,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
  }

  render() {
-    const { prefixCls, offsetTop, style, className = '', affix } = this.props;
+    const { prefixCls, offsetTop, style, className = '', affix, showInkInFixed } = this.props;
    const { activeAnchor, animated } = this.state;
    const inkClass = classNames({
      [`${prefixCls}-ink-ball`]: true,
@@ -119,7 +122,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
    }, className);

    const anchorClass = classNames(prefixCls, {
-      'fixed': !affix,
+      'fixed': !affix && !showInkInFixed,
    });

    const anchorContent = (
@@ -128,7 +131,7 @@ export default class Anchor extends React.Component<AnchorProps, any> {
          <div className={`${prefixCls}-ink`} >
            <span className={inkClass} ref="ink" />
          </div>
-          {React.Children.map(this.props.children, this.renderAnchorLink)}
+          {React.Children.toArray(this.props.children).map(this.renderAnchorLink)}
        </div>
      </div>
    );
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -21,6 +21,8 @@ title: Anchor
 | offsetTop    | 距离窗口顶部达到指定偏移量后触发   | number |         |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发   | number |         |
 | bounds | 锚点区域边界 | number | 5(px) |
+| affix | 固定模式 | boolean | false |
+| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |

 ### Link Props

--- a/components/auto-complete/InputElement.tsx
+++ b/components/auto-complete/InputElement.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+
+export default class InputElement extends React.Component<any, any> {
+  private ele: HTMLInputElement;
+
+  focus = () => {
+    this.ele.focus ? this.ele.focus() : (findDOMNode(this.ele) as HTMLInputElement).focus();
+  }
+  blur = () => {
+    this.ele.blur ? this.ele.blur() : (findDOMNode(this.ele) as HTMLInputElement).blur();
+  }
+  render() {
+    return React.cloneElement(this.props.children, {
+      ...this.props,
+      ref: ele => this.ele = (ele as HTMLInputElement),
+    }, null);
+  }
+}
--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
@@ -1,32 +1,44 @@
-exports[`test renders ./components/auto-complete/demo/antd.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`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;">
+  style="width:200px;height:50px;"
+>
  <div
    aria-autocomplete="list"
    aria-expanded="false"
    aria-haspopup="true"
    class="ant-select-selection
              ant-select-selection--single"
-    role="combobox">
+    role="combobox"
+  >
    <div
-      class="ant-select-selection__rendered">
+      class="ant-select-selection__rendered"
+    >
      <div
        class="ant-select-selection__placeholder"
        style="display:block;user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable">
+        unselectable="unselectable"
+      >
        input here
      </div>
      <ul>
        <li
-          class="ant-select-search ant-select-search--inline">
+          class="ant-select-search ant-select-search--inline"
+        >
          <div
-            class="ant-select-search__field__wrap">
+            class="ant-select-search__field__wrap"
+          >
            <textarea
              class="ant-input ant-select-search__field"
-              style="height:50px;" />
+              style="height:50px;"
+            />
            <span
-              class="ant-select-search__field__mirror" />
+              class="ant-select-search__field__mirror"
+            >
+               
+            </span>
          </div>
        </li>
      </ul>
@@ -34,43 +46,54 @@ exports[`test renders ./components/auto-complete/demo/antd.md correctly 1`] = `
    <span
      class="ant-select-arrow"
      style="user-select:none;-webkit-user-select:none;"
-      unselectable="unselectable">
+      unselectable="unselectable"
+    >
      <b />
    </span>
  </div>
 </div>
 `;

-exports[`test renders ./components/auto-complete/demo/basic.md correctly 1`] = `
+exports[`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;">
+  style="width:200px;"
+>
  <div
    aria-autocomplete="list"
    aria-expanded="false"
    aria-haspopup="true"
    class="ant-select-selection
              ant-select-selection--single"
-    role="combobox">
+    role="combobox"
+  >
    <div
-      class="ant-select-selection__rendered">
+      class="ant-select-selection__rendered"
+    >
      <div
        class="ant-select-selection__placeholder"
        style="display:block;user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable">
+        unselectable="unselectable"
+      >
        input here
      </div>
      <ul>
        <li
-          class="ant-select-search ant-select-search--inline">
+          class="ant-select-search ant-select-search--inline"
+        >
          <div
-            class="ant-select-search__field__wrap">
+            class="ant-select-search__field__wrap"
+          >
            <input
              class="ant-input ant-input ant-select-search__field"
              type="text"
-              value="" />
+              value=""
+            />
            <span
-              class="ant-select-search__field__mirror" />
+              class="ant-select-search__field__mirror"
+            >
+               
+            </span>
          </div>
        </li>
      </ul>
@@ -78,146 +101,69 @@ exports[`test renders ./components/auto-complete/demo/basic.md correctly 1`] = `
    <span
      class="ant-select-arrow"
      style="user-select:none;-webkit-user-select:none;"
-      unselectable="unselectable">
+      unselectable="unselectable"
+    >
      <b />
    </span>
  </div>
 </div>
 `;

-exports[`test renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
+exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
 <div
-  class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
-  style="width:200px;">
+  class="certain-category-search-wrapper"
+  style="width:250px;"
+>
  <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%;">
+    class="ant-select-lg ant-select-lg certain-category-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">
+      role="combobox"
+    >
      <div
-        class="ant-select-selection__rendered">
+        class="ant-select-selection__rendered"
+      >
        <div
          class="ant-select-selection__placeholder"
          style="display:block;user-select:none;-webkit-user-select:none;"
-          unselectable="unselectable">
+          unselectable="unselectable"
+        >
          input here
        </div>
        <ul>
          <li
-            class="ant-select-search ant-select-search--inline">
+            class="ant-select-search ant-select-search--inline"
+          >
            <div
-              class="ant-select-search__field__wrap">
+              class="ant-select-search__field__wrap"
+            >
              <span
-                class="ant-input-preSuffix-wrapper">
+                class="ant-input-affix-wrapper"
+              >
                <input
                  class="ant-input ant-input ant-select-search__field"
                  type="text"
-                  value="" />
+                  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>
+                  class="ant-input-suffix"
+                >
+                  <i
+                    class="anticon anticon-search certain-category-icon"
+                  />
                </span>
              </span>
              <span
-                class="ant-select-search__field__mirror" />
+                class="ant-select-search__field__mirror"
+              >
+                 
+              </span>
            </div>
          </li>
        </ul>
@@ -225,7 +171,194 @@ exports[`test renders ./components/auto-complete/demo/uncertain-category.md corr
      <span
        class="ant-select-arrow"
        style="user-select:none;-webkit-user-select:none;"
-        unselectable="unselectable">
+        unselectable="unselectable"
+      >
+        <b />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`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"
+            >
+               
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <span
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none;"
+      unselectable="unselectable"
+    >
+      <b />
+    </span>
+  </div>
+</div>
+`;
+
+exports[`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"
+            >
+               
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <span
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none;"
+      unselectable="unselectable"
+    >
+      <b />
+    </span>
+  </div>
+</div>
+`;
+
+exports[`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-affix-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"
+              >
+                 
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none;"
+        unselectable="unselectable"
+      >
        <b />
      </span>
    </div>
--- a/components/auto-complete/demo/antd.md
+++ b/components/auto-complete/demo/antd.md
@@ -20,13 +20,12 @@ function onSelect(value) {
  console.log('onSelect', value);
 }

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

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -20,13 +20,12 @@ function onSelect(value) {
  console.log('onSelect', value);
 }

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

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -0,0 +1,149 @@
+---
+order: 4
+title:
+  zh-CN: 查询模式 - 确定类目
+  en-US: Lookup-Patterns - Certain Category
+---
+
+## zh-CN
+
+[查询模式: 确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。
+
+## en-US
+
+Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
+Basic Usage, set datasource of autocomplete with `dataSource` property.
+
+````jsx
+import { Icon, Input, AutoComplete } from 'antd';
+const Option = AutoComplete.Option;
+const OptGroup = AutoComplete.OptGroup;
+
+const dataSource = [{
+  title: '话题',
+  children: [{
+    title: 'AntDesign',
+    count: 10000,
+  }, {
+    title: 'AntDesign UI',
+    count: 10600,
+  }],
+}, {
+  title: '问题',
+  children: [{
+    title: 'AntDesign UI 有多好',
+    count: 60100,
+  }, {
+    title: 'AntDesign 是啥',
+    count: 30010,
+  }],
+}, {
+  title: '文章',
+  children: [{
+    title: 'AntDesign 是一个设计语言',
+    count: 100000,
+  }],
+}];
+
+function renderTitle(title) {
+  return (
+    <span>
+      {title}
+      <a
+        style={{ float: 'right' }}
+        href="https://www.google.com/search?q=antd"
+        target="_blank"
+        rel="noopener noreferrer"
+      >更多
+      </a>
+    </span>
+  );
+}
+
+const options = dataSource.map(group =>
+  <OptGroup
+    key={group.title}
+    label={renderTitle(group.title)}
+  >
+    {group.children.map(opt =>
+      <Option key={opt.title} value={opt.title}>
+        {opt.title}
+        <span className="certain-search-item-count">{opt.count} 人 关注</span>
+      </Option>)
+    }
+  </OptGroup>).concat([
+    <Option disabled key="all" className="show-all">
+      <a
+        href="https://www.google.com/search?q=antd"
+        target="_blank"
+        rel="noopener noreferrer"
+      >查看所有结果</a>
+    </Option>,
+  ]);
+
+function Complete() {
+  return (
+    <div className="certain-category-search-wrapper" style={{ width: 250 }}>
+      <AutoComplete
+        className="certain-category-search"
+        dropdownClassName="certain-category-search-dropdown"
+        dropdownMatchSelectWidth={false}
+        dropdownStyle={{ width: 300 }}
+        size="large"
+        style={{ width: '100%' }}
+        dataSource={options}
+        placeholder="input here"
+        optionLabelProp="value"
+      >
+        <Input suffix={<Icon type="search" className="certain-category-icon" />} />
+      </AutoComplete>
+    </div>
+  );
+}
+
+ReactDOM.render(<Complete />, mountNode);
+````
+
+````css
+.certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
+  right: 12px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
+  color: #666;
+  font-weight: bold;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
+  border-bottom: 1px solid #F6F6F6;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item {
+  padding-left: 16px;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
+  text-align: center;
+  cursor: default;
+}
+
+.certain-category-search-dropdown .ant-select-dropdown-menu {
+  max-height: 300px;
+}
+
+.certain-search-item-count {
+ position: absolute;
+ color: #999;
+ right: 16px;
+}
+
+.certain-category-search.ant-select-focused .certain-category-icon {
+  color: #108ee9;
+}
+
+.certain-category-icon {
+  color: #6E6E6E;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-size: 16px;
+}
+````
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@@ -19,12 +19,14 @@ 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}
-  />);
+  return (
+    <AutoComplete
+      style={{ width: 200 }}
+      dataSource={dataSource}
+      placeholder="try to type `b`"
+      filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+    />
+  );
 }

 ReactDOM.render(<Complete />, mountNode);
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@@ -18,13 +18,12 @@ import { AutoComplete } from 'antd';

 const Option = AutoComplete.Option;

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

 ReactDOM.render(<Complete />, mountNode);
 ````
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
  zh-CN: 查询模式 - 不确定类目
  en-US: Lookup-Patterns - Uncertain Category
@@ -47,24 +47,22 @@ function renderOption(item) {
        {item.category}
      </a>
      区块中
-      <span style={{ float: 'right' }}>约 {item.count} 个结果</span>
+      <span className="global-search-item-count">约 {item.count} 个结果</span>
    </Option>
  );
 }

-const Complete = React.createClass({
-  getInitialState() {
-    return {
-      dataSource: [],
-    };
-  },
-  handleChange(value) {
-    if (value) {
-      this.setState({
-        dataSource: searchResult(value),
-      });
-    }
-  },
+class Complete extends React.Component {
+  state = {
+    dataSource: [],
+  }
+
+  handleChange = (value) => {
+    this.setState({
+      dataSource: value ? searchResult(value) : [],
+    });
+  }
+
  render() {
    const { dataSource } = this.state;
    return (
@@ -89,8 +87,8 @@ const Complete = React.createClass({
        </AutoComplete>
      </div>
    );
-  },
-});
+  }
+}

 ReactDOM.render(<Complete />, mountNode);
 ````
@@ -104,35 +102,25 @@ ReactDOM.render(<Complete />, mountNode);
  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;
+  margin-right: -46px;
 }

-.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) {
+.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
  padding-right: 62px;
 }

-.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix {
+.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
  right: 0;
 }

-.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button {
+.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
 }
+
+.global-search-item-count {
+  position: absolute;
+  right: 16px;
+}
 ````
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 type: Data Entry
-cols: 1
+cols: 2
 title: AutoComplete
 ---

@@ -27,7 +27,9 @@ const dataSource = ['12345', '23456', '34567'];
 | onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
 | onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | -   |
 | disabled | Whether disabled select | boolean | false |
+| defaultActiveFirstOption | Whether active first option by default | boolean | true |
 | placeholder | placeholder of input | string | - |
 | children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> /  Array<React.ReactElement<OptionProps>> | - |
 | children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
-| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true     |
+| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
+| 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,14 +1,9 @@
 import React from 'react';
-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';
-
-export interface SelectedValue {
-  key: string;
-  label: React.ReactNode;
-}
+import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';
+import Input from '../input';
+import InputElement from './InputElement';

 export interface DataSourceItemObject { value: string; text: string; };
 export type DataSourceItemType = string | DataSourceItemObject;
@@ -24,34 +19,20 @@ export type ValidInputElement =
  React.ReactElement<InputProps>;

 export interface AutoCompleteProps extends AbstractSelectProps {
-  size?: 'large' | 'small' | 'default';
-  className?: string;
-  notFoundContent?: Element;
+  value?: SelectValue;
+  defaultValue?: SelectValue;
  dataSource: DataSourceItemType[];
-  defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
-  value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
-  onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
-  onSelect?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>, option: Object) => any;
-  disabled?: boolean;
-  children: ValidInputElement |
+  optionLabelProp?: string;
+  filterOption?: boolean | ((inputValue: string, option: Object) => any);
+  onChange?: (value: SelectValue) => void;
+  onSelect?: (value: SelectValue, option: Object) => any;
+  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);
-  }
+function isSelectOptionOrSelectOptGroup(child: any): Boolean {
+  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
 }

 export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
@@ -66,10 +47,6 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
    showSearch: false,
  };

-  static contextTypes = {
-    antLocale: React.PropTypes.object,
-  };
-
  getInputElement = () => {
    const { children } = this.props;
    const element = children && React.isValidElement(children) && children.type !== Option ?
@@ -93,7 +70,9 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any

    let options;
    const childArray = React.Children.toArray(children);
-    if (childArray.length && (childArray[0] as React.ReactElement<any>).type === Option) {
+    if (childArray.length &&
+        isSelectOptionOrSelectOptGroup(childArray[0])
+      ) {
      options = children;
    } else {
      options = dataSource ? dataSource.map((item) => {
@@ -119,8 +98,8 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
      <Select
        {...this.props}
        className={cls}
+        mode="combobox"
        optionLabelProp={optionLabelProp}
-        combobox
        getInputElement={this.getInputElement}
        notFoundContent={notFoundContent}
      >
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -28,6 +28,7 @@ const dataSource = ['12345', '23456', '34567'];
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
 | onSelect | 被选中时调用，参数为选中项的 value 值	| function(value, option)	| 无 |
 | disabled | 是否禁用 | boolean | false |
+| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
 | placeholder | 输入框提示 | string | - |
 | children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
 | children (自定义输入框) | 自定义输入框 |  HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@@ -8,20 +8,16 @@

 .@{autocomplete-prefix-cls} {
  &.@{select-prefix-cls} {
-
    .@{select-prefix-cls} {
-      &-search--inline {
-        position: relative;
-      }
      &-selection {
        border: 0;
+        box-shadow: none;
        &--single {
-          height: auto;
+          height: 100%;
        }
        &__rendered {
          margin-left: 0;
          margin-right: 0;
-          line-height: 0;
        }
        &__placeholder {
          margin-left: 8px;
--- a/components/back-top/tests/snapshots/demo.test.js.snap
+++ b/components/back-top/tests/snapshots/demo.test.js.snap
@@ -1,19 +1,23 @@
-exports[`test renders ./components/back-top/demo/basic.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/back-top/demo/basic.md correctly 1`] = `
 <div>
  Scroll down to see the bottom-right
  <strong
-    style="color:rgba(64, 64, 64, 0.6);">
+    style="color:rgba(64, 64, 64, 0.6);"
+  >
     gray 
  </strong>
  button.
 </div>
 `;

-exports[`test renders ./components/back-top/demo/custom.md correctly 1`] = `
+exports[`renders ./components/back-top/demo/custom.md correctly 1`] = `
 <div>
  Scroll down to see the bottom-right
  <strong
-    style="color:#57c5f7;">
+    style="color:#1088e9;"
+  >
     blue 
  </strong>
  button.
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -23,7 +23,7 @@ ReactDOM.render(
      <div className="ant-back-top-inner">UP</div>
    </BackTop>
    Scroll down to see the bottom-right
-    <strong style={{ color: '#57c5f7' }}> blue </strong>
+    <strong style={{ color: '#1088e9' }}> blue </strong>
    button.
  </div>,
  mountNode
@@ -39,7 +39,7 @@ ReactDOM.render(
  width: 40px;
  line-height: 40px;
  border-radius: 4px;
-  background-color: #57c5f7;
+  background-color: #1088e9;
  color: #fff;
  text-align: center;
  font-size: 20px;
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -22,4 +22,4 @@ Property | Description | Type | Default
 -----|-----|-----|------
 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 | -
-
+target | specifies the scrollable area dom node | () => HTMLElement | () => window
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -9,10 +9,6 @@ import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';

 const reqAnimFrame = getRequestAnimationFrame();

-const currentScrollTop = () => {
-  return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
-};
-
 const easeInOutCubic = (t, b, c, d) => {
  const cc = c - b;
  t /= d / 2;
@@ -53,8 +49,16 @@ export default class BackTop extends React.Component<BackTopProps, any> {
    };
  }

+  getCurrentScrollTop = () => {
+    const targetNode = (this.props.target || getDefaultTarget)();
+    if (targetNode === window) {
+      return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
+    }
+    return (targetNode as HTMLElement).scrollTop;
+  }
+
  scrollToTop = (e) => {
-    const scrollTop = currentScrollTop();
+    const scrollTop = this.getCurrentScrollTop();
    const startTime = Date.now();
    const frameFunc = () => {
      const timestamp = Date.now();
@@ -82,7 +86,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
    const { visibilityHeight, target = getDefaultTarget } = this.props;
    const scrollTop = getScroll(target(), true);
    this.setState({
-      visible: scrollTop > visibilityHeight,
+      visible: scrollTop > (visibilityHeight as number),
    });
  }

--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@@ -22,3 +22,4 @@ title: BackTop
 |-------------|----------------|--------------------|--------------|
 | visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | number | 400        |
 | onClick | 点击按钮的回调函数   | Function | -        |
+| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
--- a/components/badge/ScrollNumber.tsx
+++ b/components/badge/ScrollNumber.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import { createElement, Component } from 'react';
-import { findDOMNode } from 'react-dom';
-import isCssAnimationSupported from '../_util/isCssAnimationSupported';
 import assign from 'object-assign';
 import omit from 'omit.js';

@@ -40,12 +38,6 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
    };
  }

-  componentDidMount() {
-    if (!isCssAnimationSupported()) {
-      findDOMNode(this).className += ' not-support-css-animation';
-    }
-  }
-
  getPositionByNum(num, i) {
    if (this.state.animateStarted) {
      return 10 + num;
@@ -109,6 +101,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
      className: `${this.props.prefixCls}-only`,
      style: {
        transition: removeTransition && 'none',
+        msTransform: `translateY(${-position * 100}%)`,
        WebkitTransform: `translateY(${-position * 100}%)`,
        transform: `translateY(${-position * 100}%)`,
      },
@@ -144,7 +137,7 @@ export default class ScrollNumber extends Component<ScrollNumberProps, any> {
    return createElement(
      this.props.component || 'sup',
      props,
-      this.renderNumberElement()
+      this.renderNumberElement(),
    );
  }
 }
--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -7,19 +7,24 @@ title:

 ## zh-CN

-简单的徽章展示。
+简单的徽章展示，当 `count` 为 `0` 时，默认不显示，但是可以使用 `showZero` 修改为显示。

 ## en-US

-Simplest Usage.
+Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.

 ````jsx
 import { Badge } from 'antd';

 ReactDOM.render(
-  <Badge count={5}>
-    <a href="#" className="head-example" />
-  </Badge>
+  <div>
+    <Badge count={5}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={0} showZero>
+      <a href="#" className="head-example" />
+    </Badge>
+  </div>
 , mountNode);
 ````

--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -17,27 +17,29 @@ The count will be animated as it changes.
 import { Badge, Button, Icon, Switch } from 'antd';
 const ButtonGroup = Button.Group;

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

-ReactDOM.render(<Test />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ````
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -16,14 +16,16 @@ This will simply display a red badge, without a specific count.
 ````jsx
 import { Badge, Icon } from 'antd';

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

 <style>
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -18,9 +18,11 @@ Used in standalone when children is empty.
 ````jsx
 import { Badge } from 'antd';

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

-ReactDOM.render(<div>
-  <Badge count={99}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={100}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={99} overflowCount={10}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={1000} overflowCount={999}>
-    <a href="#" className="head-example" />
-  </Badge>
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Badge count={99}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={100}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={99} overflowCount={10}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={1000} overflowCount={999}>
+      <a href="#" className="head-example" />
+    </Badge>
+  </div>
+, mountNode);
 ````
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -27,6 +27,7 @@ Badge normally appears in proximity to notification or head picture with eye-cat
 |----------------|-------------------------|------------|---------|
 | count          | Number to show in badge | number     |         |
 | overflowCount  | Max count to show       | number     | 99      |
+| showZero       | Whether to show badge when `count` is zero   | boolean | false |
 | 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 | '' |
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import Animate from 'rc-animate';
 import ScrollNumber from './ScrollNumber';
 import classNames from 'classnames';
@@ -7,6 +7,7 @@ import warning from '../_util/warning';
 export interface BadgeProps {
  /** Number to show in badge */
  count: number | string;
+  showZero?: boolean;
  /** Max count to show */
  overflowCount?: number;
  /** whether to show red dot without number */
@@ -22,30 +23,45 @@ export default class Badge extends React.Component<BadgeProps, any> {
  static defaultProps = {
    prefixCls: 'ant-badge',
    count: null,
+    showZero: false,
    dot: false,
    overflowCount: 99,
  };

  static propTypes = {
-    count: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
+    count: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
    ]),
-    dot: React.PropTypes.bool,
-    overflowCount: React.PropTypes.number,
+    showZero: PropTypes.bool,
+    dot: PropTypes.bool,
+    overflowCount: PropTypes.number,
  };

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

-    // null undefined "" "0" 0
-    const hidden = (!displayCount || displayCount === '0') && !isDot;
+    const isZero = displayCount === '0' || displayCount === 0;
+    const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
+    const hidden = (isEmpty || (isZero && !showZero)) && !isDot;
    const scrollNumberCls = classNames({
      [`${prefixCls}-dot`]: isDot,
      [`${prefixCls}-count`]: !isDot,
@@ -57,7 +73,7 @@ export default class Badge extends React.Component<BadgeProps, any> {

    warning(
      !(children && status),
-      '`Badge[children]` and `Badge[status]` cannot be used at the same time.'
+      '`Badge[children]` and `Badge[status]` cannot be used at the same time.',
    );
    // <Badge status="success" />
    if (!children && status) {
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -24,10 +24,11 @@ title: Badge
 <Badge count={5} />
 ```

-| 参数           | 说明                             | 类型       |  可选值 | 默认值 |
-|----------------|----------------------------------|------------|---------|--------|
-| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number     |         |        |
-| overflowCount  | 展示封顶的数字值                 | number     |         | 99     |
-| dot            | 不展示数字，只有一个小红点       | boolean    |         | false  |
-| status         | 设置 Badge 为状态点            | Enum      | 'success'、'processing'、'default'、'error'、'warning' | '' |
-| text           | 在设置了 `status` 的前提下有效，设置状态点的文本  | string | | '' |
+| 参数           | 说明                             | 类型       | 默认值 |
+|----------------|----------------------------------|------------|---------|
+| count          | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number | |
+| overflowCount  | 展示封顶的数字值                 | number | 99 |
+| showZero       | 当数值为 0 时，是否展示 Badge   | boolean | false |
+| dot            | 不展示数字，只有一个小红点       | boolean | false  |
+| status         | 设置 Badge 为状态点            | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
+| text           | 在设置了 `status` 的前提下有效，设置状态点的文本  | string | '' |
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -123,21 +123,12 @@
  overflow: hidden;
  &-only {
    display: inline-block;
-    transition: transform .3s @ease-in-out;
+    transition: all .3s @ease-in-out;
    height: @badge-height;
    > p {
      height: @badge-height;
    }
  }
-  // for IE8/9 display
-  &.not-support-css-animation &-only {
-    > p {
-      display: none;
-      &.current {
-        display: block;
-      }
-    }
-  }
 }

@keyframes antZoomBadgeIn {
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -21,7 +21,7 @@ function getBreadcrumbName(route, params) {
  const paramsKeys = Object.keys(params).join('|');
  const name = route.breadcrumbName.replace(
    new RegExp(`:(${paramsKeys})`, 'g'),
-    (replacement, key) => params[key] || replacement
+    (replacement, key) => params[key] || replacement,
  );
  return name;
 }
@@ -56,7 +56,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
    warning(
      !('linkRender' in props || 'nameRender' in props),
      '`linkRender` and `nameRender` are removed, please use `itemRender` instead, ' +
-      'see: http://u.ant.design/item-render.'
+      'see: http://u.ant.design/item-render.',
    );
  }

@@ -77,20 +77,20 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
        if (path) {
          paths.push(path);
        }
-        if (route.breadcrumbName) {
-          return (
-            <BreadcrumbItem separator={separator} key={route.breadcrumbName}>
-              {itemRender(route, params, routes, paths)}
-            </BreadcrumbItem>
-          );
-        }
-        return null;
+        return (
+          <BreadcrumbItem separator={separator} key={route.breadcrumbName || path}>
+            {itemRender(route, params, routes, paths)}
+          </BreadcrumbItem>
+        );
      });
    } else if (children) {
      crumbs = React.Children.map(children, (element: any, index) => {
+        if (!element) {
+          return element;
+        }
        warning(
-          element && element.type.__ANT_BREADCRUMB_ITEM,
-          'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
+          element.type && element.type.__ANT_BREADCRUMB_ITEM,
+          'Breadcrumb only accepts Breadcrumb.Item as it\'s children',
        );
        return cloneElement(element, {
          separator,
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -32,11 +32,14 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
    } else {
      link = <span className={`${prefixCls}-link`} {...restProps}>{children}</span>;
    }
-    return (
-      <span>
-        {link}
-        <span className={`${prefixCls}-separator`}>{separator}</span>
-      </span>
-    );
+    if (children) {
+      return (
+        <span>
+          {link}
+          <span className={`${prefixCls}-separator`}>{separator}</span>
+        </span>
+      );
+    }
+    return null;
  }
 }
--- a/components/breadcrumb/tests/Breadcrumb.test.js
+++ b/components/breadcrumb/tests/Breadcrumb.test.js
@@ -1,21 +1,54 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import Breadcrumb from '../Breadcrumb';
+import { mount, render } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import Breadcrumb from '../index';

 describe('Breadcrumb', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
  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'
+    expect(errorSpy.mock.calls).toHaveLength(1);
+    expect(errorSpy.mock.calls[0][0]).toMatch(
+      'Breadcrumb only accepts Breadcrumb.Item as it\'s children'
    );
  });
+
+  // https://github.com/ant-design/ant-design/issues/5015
+  it('should allow Breadcrumb.Item is null or undefined', () => {
+    const wrapper = render(
+      <Breadcrumb>
+        {null}
+        <Breadcrumb.Item>Home</Breadcrumb.Item>
+        {undefined}
+      </Breadcrumb>
+    );
+    expect(errorSpy).not.toHaveBeenCalled();
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
+
+  // https://github.com/ant-design/ant-design/issues/5542
+  it('should not display Breadcrumb Item when its children is falsy', () => {
+    const wrapper = render(
+      <Breadcrumb>
+        <Breadcrumb.Item />
+        <Breadcrumb.Item>xxx</Breadcrumb.Item>
+        <Breadcrumb.Item>yyy</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+    expect(renderToJson(wrapper)).toMatchSnapshot();
+  });
 });
--- a/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Home
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      xxx
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      yyy
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;
--- a/components/breadcrumb/tests/snapshots/demo.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/demo.test.js.snap
@@ -1,65 +1,83 @@
-exports[`test renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
 <div
-  class="ant-breadcrumb">
+  class="ant-breadcrumb"
+>
  <span>
    <span
-      class="ant-breadcrumb-link">
+      class="ant-breadcrumb-link"
+    >
      Home
    </span>
    <span
-      class="ant-breadcrumb-separator">
+      class="ant-breadcrumb-separator"
+    >
      /
    </span>
  </span>
  <span>
    <span
-      class="ant-breadcrumb-link">
+      class="ant-breadcrumb-link"
+    >
      <a
-        href="">
+        href=""
+      >
        Application Center
      </a>
    </span>
    <span
-      class="ant-breadcrumb-separator">
+      class="ant-breadcrumb-separator"
+    >
      /
    </span>
  </span>
  <span>
    <span
-      class="ant-breadcrumb-link">
+      class="ant-breadcrumb-link"
+    >
      <a
-        href="">
+        href=""
+      >
        Application List
      </a>
    </span>
    <span
-      class="ant-breadcrumb-separator">
+      class="ant-breadcrumb-separator"
+    >
      /
    </span>
  </span>
  <span>
    <span
-      class="ant-breadcrumb-link">
+      class="ant-breadcrumb-link"
+    >
      An Application
    </span>
    <span
-      class="ant-breadcrumb-separator">
+      class="ant-breadcrumb-separator"
+    >
      /
    </span>
  </span>
 </div>
 `;

-exports[`test renders ./components/breadcrumb/demo/router.md correctly 1`] = `
-<div>
+exports[`renders ./components/breadcrumb/demo/router.md correctly 1`] = `
+<div
+  class="demo"
+>
  <div
-    class="demo-nav">
+    class="demo-nav"
+  >
    <a
-      href="#/">
+      href="#/"
+    >
      Home
    </a>
    <a
-      href="#/apps">
+      href="#/apps"
+    >
      Application List
    </a>
  </div>
@@ -67,25 +85,31 @@ exports[`test renders ./components/breadcrumb/demo/router.md correctly 1`] = `
  <div
    class="ant-alert ant-alert-info ant-alert-no-icon"
    data-show="true"
-    style="margin:16px 0;">
+    style="margin:16px 0;"
+  >
    <span
-      class="ant-alert-message">
+      class="ant-alert-message"
+    >
      Click the navigation above to switch:
    </span>
    <span
-      class="ant-alert-description" />
+      class="ant-alert-description"
+    />
  </div>
  <div
-    class="ant-breadcrumb">
+    class="ant-breadcrumb"
+  >
    <span>
      <span
-        class="ant-breadcrumb-link">
+        class="ant-breadcrumb-link"
+      >
        <span>
          Home
        </span>
      </span>
      <span
-        class="ant-breadcrumb-separator">
+        class="ant-breadcrumb-separator"
+      >
        /
      </span>
    </span>
@@ -93,91 +117,109 @@ exports[`test renders ./components/breadcrumb/demo/router.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
 <div
-  class="ant-breadcrumb">
+  class="ant-breadcrumb"
+>
  <span>
    <span
-      class="ant-breadcrumb-link">
+      class="ant-breadcrumb-link"
+    >
      Home
    </span>
    <span
-      class="ant-breadcrumb-separator">
-      >
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
    </span>
  </span>
  <span>
    <a
      class="ant-breadcrumb-link"
-      href="">
+      href=""
+    >
      Application Center
    </a>
    <span
-      class="ant-breadcrumb-separator">
-      >
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
    </span>
  </span>
  <span>
    <a
      class="ant-breadcrumb-link"
-      href="">
+      href=""
+    >
      Application List
    </a>
    <span
-      class="ant-breadcrumb-separator">
-      >
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
    </span>
  </span>
  <span>
    <span
-      class="ant-breadcrumb-link">
+      class="ant-breadcrumb-link"
+    >
      An Application
    </span>
    <span
-      class="ant-breadcrumb-separator">
-      >
+      class="ant-breadcrumb-separator"
+    >
+      &gt;
    </span>
  </span>
 </div>
 `;

-exports[`test renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
+exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
 <div
-  class="ant-breadcrumb">
+  class="ant-breadcrumb"
+>
  <span>
    <a
      class="ant-breadcrumb-link"
-      href="">
+      href=""
+    >
      <i
-        class="anticon anticon-home" />
+        class="anticon anticon-home"
+      />
    </a>
    <span
-      class="ant-breadcrumb-separator">
+      class="ant-breadcrumb-separator"
+    >
      /
    </span>
  </span>
  <span>
    <a
      class="ant-breadcrumb-link"
-      href="">
+      href=""
+    >
      <i
-        class="anticon anticon-user" />
+        class="anticon anticon-user"
+      />
      <span>
        Application List
      </span>
    </a>
    <span
-      class="ant-breadcrumb-separator">
+      class="ant-breadcrumb-separator"
+    >
      /
    </span>
  </span>
  <span>
    <span
-      class="ant-breadcrumb-link">
+      class="ant-breadcrumb-link"
+    >
      Application
    </span>
    <span
-      class="ant-breadcrumb-separator">
+      class="ant-breadcrumb-separator"
+    >
      /
    </span>
  </span>
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -1,6 +1,6 @@
 ---
 order: 0
-title:   
+title:
  zh-CN: 基本
  en-US: Basic Usage
 ---
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -1,6 +1,6 @@
 ---
 order: 2
-iframe: true
+iframe: 200
 title:
  zh-CN: 路由
  en-US: React Router Integration
@@ -30,7 +30,7 @@ const Apps = () => (
 );

 const Home = ({ routes, params, children }) => (
-  <div>
+  <div className="demo">
    <div className="demo-nav">
      <Link to="/">Home</Link>
      <Link to="/apps">Application List</Link>
@@ -55,20 +55,20 @@ ReactDOM.render(
 ````

 ````css
-#components-breadcrumb-demo-router iframe {
-  height: 180px;
+.demo {
+  margin: 16px;
 }
 .demo-nav {
  height: 30px;
  line-height: 30px;
-  margin-bottom: 15px;
+  margin-bottom: 16px;
  background: #f8f8f8;
 }
 .demo-nav a {
  line-height: 30px;
-  padding: 0 10px;
+  padding: 0 8px;
 }
 .app-list {
-  margin-top: 15px;
+  margin-top: 16px;
 }
 ````
--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
@@ -1,29 +1,35 @@
-exports[`test renders ./components/button/demo/basic.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/button/demo/basic.md correctly 1`] = `
 <div>
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <span>
      Primary
    </span>
  </button>
  <button
    class="ant-btn"
-    type="button">
+    type="button"
+  >
    <span>
      Default
    </span>
  </button>
  <button
    class="ant-btn ant-btn-dashed"
-    type="button">
+    type="button"
+  >
    <span>
      Dashed
    </span>
  </button>
  <button
    class="ant-btn ant-btn-danger"
-    type="button">
+    type="button"
+  >
    <span>
      Danger
    </span>
@@ -31,34 +37,39 @@ exports[`test renders ./components/button/demo/basic.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/button/demo/button-group.md correctly 1`] = `
+exports[`renders ./components/button/demo/button-group.md correctly 1`] = `
 <div>
  <h4>
    Basic
  </h4>
  <div
-    class="ant-btn-group">
+    class="ant-btn-group"
+  >
    <button
      class="ant-btn"
-      type="button">
+      type="button"
+    >
      <span>
        Cancel
      </span>
    </button>
    <button
      class="ant-btn ant-btn-primary"
-      type="button">
+      type="button"
+    >
      <span>
        OK
      </span>
    </button>
  </div>
  <div
-    class="ant-btn-group">
+    class="ant-btn-group"
+  >
    <button
      class="ant-btn"
      disabled=""
-      type="button">
+      type="button"
+    >
      <span>
        L
      </span>
@@ -66,7 +77,8 @@ exports[`test renders ./components/button/demo/button-group.md correctly 1`] = `
    <button
      class="ant-btn"
      disabled=""
-      type="button">
+      type="button"
+    >
      <span>
        M
      </span>
@@ -74,38 +86,44 @@ exports[`test renders ./components/button/demo/button-group.md correctly 1`] = `
    <button
      class="ant-btn"
      disabled=""
-      type="button">
+      type="button"
+    >
      <span>
        R
      </span>
    </button>
  </div>
  <div
-    class="ant-btn-group">
+    class="ant-btn-group"
+  >
    <button
      class="ant-btn ant-btn-primary"
-      type="button">
+      type="button"
+    >
      <span>
        L
      </span>
    </button>
    <button
      class="ant-btn"
-      type="button">
+      type="button"
+    >
      <span>
        M
      </span>
    </button>
    <button
      class="ant-btn"
-      type="button">
+      type="button"
+    >
      <span>
        M
      </span>
    </button>
    <button
      class="ant-btn ant-btn-dashed"
-      type="button">
+      type="button"
+    >
      <span>
        R
      </span>
@@ -115,49 +133,60 @@ exports[`test renders ./components/button/demo/button-group.md correctly 1`] = `
    With Icon
  </h4>
  <div
-    class="ant-btn-group">
+    class="ant-btn-group"
+  >
    <button
      class="ant-btn ant-btn-primary"
-      type="button">
+      type="button"
+    >
      <i
-        class="anticon anticon-left" />
+        class="anticon anticon-left"
+      />
      <span>
        Go back
      </span>
    </button>
    <button
      class="ant-btn ant-btn-primary"
-      type="button">
+      type="button"
+    >
      <span>
        Go forward
      </span>
      <i
-        class="anticon anticon-right" />
+        class="anticon anticon-right"
+      />
    </button>
  </div>
  <div
-    class="ant-btn-group">
+    class="ant-btn-group"
+  >
    <button
      class="ant-btn ant-btn-primary ant-btn-icon-only"
-      type="button">
+      type="button"
+    >
      <i
-        class="anticon anticon-cloud" />
+        class="anticon anticon-cloud"
+      />
    </button>
    <button
      class="ant-btn ant-btn-primary ant-btn-icon-only"
-      type="button">
+      type="button"
+    >
      <i
-        class="anticon anticon-cloud-download" />
+        class="anticon anticon-cloud-download"
+      />
    </button>
  </div>
 </div>
 `;

-exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
+exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
 <div>
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <span>
      Primary
    </span>
@@ -165,7 +194,8 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  <button
    class="ant-btn ant-btn-primary"
    disabled=""
-    type="button">
+    type="button"
+  >
    <span>
      Primary(disabled)
    </span>
@@ -173,7 +203,8 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  <br />
  <button
    class="ant-btn"
-    type="button">
+    type="button"
+  >
    <span>
      Default
    </span>
@@ -181,7 +212,8 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  <button
    class="ant-btn"
    disabled=""
-    type="button">
+    type="button"
+  >
    <span>
      Default(disabled)
    </span>
@@ -189,7 +221,8 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  <br />
  <button
    class="ant-btn"
-    type="button">
+    type="button"
+  >
    <span>
      Ghost
    </span>
@@ -197,7 +230,8 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  <button
    class="ant-btn"
    disabled=""
-    type="button">
+    type="button"
+  >
    <span>
      Ghost(disabled)
    </span>
@@ -205,7 +239,8 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  <br />
  <button
    class="ant-btn ant-btn-dashed"
-    type="button">
+    type="button"
+  >
    <span>
      Dashed
    </span>
@@ -213,7 +248,8 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
  <button
    class="ant-btn ant-btn-dashed"
    disabled=""
-    type="button">
+    type="button"
+  >
    <span>
      Dashed(disabled)
    </span>
@@ -221,61 +257,81 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/button/demo/ghost.md correctly 1`] = `
+exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 <div
-  style="background:rgb(190, 200, 200);padding:26px 16px 16px;">
+  style="background:rgb(190, 200, 200);padding:26px 16px 16px;"
+>
  <button
    class="ant-btn ant-btn-primary ant-btn-background-ghost"
-    type="button">
+    type="button"
+  >
    <span>
-      Primary Ghost
+      Primary
    </span>
  </button>
  <button
    class="ant-btn ant-btn-background-ghost"
-    type="button">
+    type="button"
+  >
    <span>
-      Default Ghost
+      Default
    </span>
  </button>
  <button
    class="ant-btn ant-btn-dashed ant-btn-background-ghost"
-    type="button">
+    type="button"
+  >
    <span>
-      Dashed Ghost
+      Dashed
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-danger ant-btn-background-ghost"
+    type="button"
+  >
+    <span>
+      danger
    </span>
  </button>
 </div>
 `;

-exports[`test renders ./components/button/demo/icon.md correctly 1`] = `
+exports[`renders ./components/button/demo/icon.md correctly 1`] = `
 <div>
  <button
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
  </button>
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
    <span>
      Search
    </span>
  </button>
  <button
    class="ant-btn ant-btn-circle ant-btn-icon-only"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
  </button>
  <button
    class="ant-btn"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
    <span>
      Search
    </span>
@@ -283,30 +339,38 @@ exports[`test renders ./components/button/demo/icon.md correctly 1`] = `
  <br />
  <button
    class="ant-btn ant-btn-circle ant-btn-icon-only"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
  </button>
  <button
    class="ant-btn"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
    <span>
      Search
    </span>
  </button>
  <button
    class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
  </button>
  <button
    class="ant-btn ant-btn-dashed"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-search" />
+      class="anticon anticon-search"
+    />
    <span>
      Search
    </span>
@@ -314,22 +378,26 @@ exports[`test renders ./components/button/demo/icon.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/button/demo/loading.md correctly 1`] = `
+exports[`renders ./components/button/demo/loading.md correctly 1`] = `
 <div>
  <button
    class="ant-btn ant-btn-primary ant-btn-loading"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-spin anticon-loading" />
+      class="anticon anticon-spin anticon-loading"
+    />
    <span>
      Loading
    </span>
  </button>
  <button
    class="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-spin anticon-loading" />
+      class="anticon anticon-spin anticon-loading"
+    />
    <span>
      Loading
    </span>
@@ -337,16 +405,19 @@ exports[`test renders ./components/button/demo/loading.md correctly 1`] = `
  <br />
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <span>
      Click me!
    </span>
  </button>
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-poweroff" />
+      class="anticon anticon-poweroff"
+    />
    <span>
      Click me!
    </span>
@@ -354,89 +425,110 @@ exports[`test renders ./components/button/demo/loading.md correctly 1`] = `
  <br />
  <button
    class="ant-btn ant-btn-circle ant-btn-loading"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-spin anticon-loading" />
+      class="anticon anticon-spin anticon-loading"
+    />
  </button>
  <button
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-loading"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-spin anticon-loading" />
+      class="anticon anticon-spin anticon-loading"
+    />
  </button>
 </div>
 `;

-exports[`test renders ./components/button/demo/multiple.md correctly 1`] = `
+exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
 <div>
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <span>
      primary
    </span>
  </button>
  <button
    class="ant-btn"
-    type="button">
+    type="button"
+  >
    <span>
      secondary
    </span>
  </button>
  <button
    class="ant-btn ant-dropdown-trigger"
-    type="button">
+    type="button"
+  >
    <span>
      more 
    </span>
    <i
-      class="anticon anticon-down" />
+      class="anticon anticon-down"
+    />
  </button>
 </div>
 `;

-exports[`test renders ./components/button/demo/size.md correctly 1`] = `
+exports[`renders ./components/button/demo/size.md correctly 1`] = `
 <div>
  <div
-    class="ant-radio-group">
+    class="ant-radio-group"
+  >
    <label
-      class="ant-radio-button-wrapper">
+      class="ant-radio-button-wrapper"
+    >
      <span
-        class="ant-radio-button">
-        <span
-          class="ant-radio-button-inner" />
+        class="ant-radio-button"
+      >
        <input
          class="ant-radio-button-input"
-          type="radio" />
+          type="radio"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
      </span>
      <span>
        Large
      </span>
    </label>
    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
      <span
-        class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
-        <span
-          class="ant-radio-button-inner" />
+        class="ant-radio-button ant-radio-button-checked"
+      >
        <input
          checked=""
          class="ant-radio-button-input"
-          type="radio" />
+          type="radio"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
      </span>
      <span>
        Default
      </span>
    </label>
    <label
-      class="ant-radio-button-wrapper">
+      class="ant-radio-button-wrapper"
+    >
      <span
-        class="ant-radio-button">
-        <span
-          class="ant-radio-button-inner" />
+        class="ant-radio-button"
+      >
        <input
          class="ant-radio-button-input"
-          type="radio" />
+          type="radio"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
      </span>
      <span>
        Small
@@ -447,46 +539,56 @@ exports[`test renders ./components/button/demo/size.md correctly 1`] = `
  <br />
  <button
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-download" />
+      class="anticon anticon-download"
+    />
  </button>
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <i
-      class="anticon anticon-download" />
+      class="anticon anticon-download"
+    />
    <span>
      Download
    </span>
  </button>
  <button
    class="ant-btn ant-btn-primary"
-    type="button">
+    type="button"
+  >
    <span>
      Normal
    </span>
  </button>
  <br />
  <div
-    class="ant-btn-group">
+    class="ant-btn-group"
+  >
    <button
      class="ant-btn ant-btn-primary"
-      type="button">
+      type="button"
+    >
      <i
-        class="anticon anticon-left" />
+        class="anticon anticon-left"
+      />
      <span>
        Backward
      </span>
    </button>
    <button
      class="ant-btn ant-btn-primary"
-      type="button">
+      type="button"
+    >
      <span>
        Forward
      </span>
      <i
-        class="anticon anticon-right" />
+        class="anticon anticon-right"
+      />
    </button>
  </div>
 </div>
--- a/components/button/tests/snapshots/index.test.js.snap
+++ b/components/button/tests/snapshots/index.test.js.snap
@@ -1,7 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
 exports[`Button renders Chinese characters correctly 1`] = `
 <button
  class="ant-btn"
-  type="button">
+  type="button"
+>
  <span>
    按 钮
  </span>
@@ -11,7 +14,8 @@ exports[`Button renders Chinese characters correctly 1`] = `
 exports[`Button renders correctly 1`] = `
 <button
  class="ant-btn"
-  type="button">
+  type="button"
+>
  <span>
    Follow
  </span>
--- a/components/button/tests/index.test.js
+++ b/components/button/tests/index.test.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { render, mount } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
 import Button from '..';
@@ -25,4 +25,43 @@ describe('Button', () => {
    // eslint-disable-next-line
    expect(wrapper.type().__ANT_BUTTON).toBe(true);
  });
+
+  it('should change loading state instantly by default', () => {
+    class DefaultButton extends Component {
+      state = {
+        loading: false,
+      };
+      enterLoading = () => {
+        this.setState({ loading: true });
+      }
+      render() {
+        return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
+      }
+    }
+    const wrapper = mount(
+      <DefaultButton />
+    );
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('ant-btn-loading')).toBe(true);
+  });
+
+  it('should change loading state with delay', () => {
+    // eslint-disable-next-line
+    class DefaultButton extends Component {
+      state = {
+        loading: false,
+      };
+      enterLoading = () => {
+        this.setState({ loading: { delay: 1000 } });
+      }
+      render() {
+        return <Button loading={this.state.loading} onClick={this.enterLoading}>Button</Button>;
+      }
+    }
+    const wrapper = mount(
+      <DefaultButton />
+    );
+    wrapper.simulate('click');
+    expect(wrapper.hasClass('ant-btn-loading')).toBe(false);
+  });
 });
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';

-export type ButtonSize = 'small' | 'large'
+export type ButtonSize = 'small' | 'large';

 export interface ButtonGroupProps {
  size?: ButtonSize;
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { findDOMNode } from 'react-dom';
 import Icon from '../icon';
+import omit from 'omit.js';

 const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
 const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
@@ -11,6 +12,10 @@ function isString(str) {

 // Insert one space between two chinese characters automatically.
 function insertSpace(child) {
+  // Check the child if is undefined or null.
+  if (child == null) {
+    return;
+  }
  if (isString(child.type) && isTwoCNChar(child.props.children)) {
    return React.cloneElement(child, {},
                              child.props.children.split('').join(' '));
@@ -24,9 +29,9 @@ function insertSpace(child) {
  return child;
 }

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

 export interface ButtonProps {
  type?: ButtonType;
@@ -36,7 +41,7 @@ export interface ButtonProps {
  size?: ButtonSize;
  onClick?: React.FormEventHandler<any>;
  onMouseUp?: React.FormEventHandler<any>;
-  loading?: boolean;
+  loading?: boolean | { delay?: number };
  disabled?: boolean;
  style?: React.CSSProperties;
  prefixCls?: string;
@@ -51,6 +56,7 @@ export default class Button extends React.Component<ButtonProps, any> {
  static defaultProps = {
    prefixCls: 'ant-btn',
    loading: false,
+    clicked: false,
    ghost: false,
  };

@@ -60,34 +66,50 @@ export default class Button extends React.Component<ButtonProps, any> {
    size: React.PropTypes.oneOf(['large', 'default', 'small']),
    htmlType: React.PropTypes.oneOf(['submit', 'button', 'reset']),
    onClick: React.PropTypes.func,
-    loading: React.PropTypes.bool,
+    loading: React.PropTypes.oneOfType([React.PropTypes.bool, React.PropTypes.object]),
    className: React.PropTypes.string,
    icon: React.PropTypes.string,
  };

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

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

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

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

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

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

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

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

    return (
      <button
-        {...others}
+        {...omit(others, ['loading', 'clicked'])}
        type={htmlType || 'button'}
        className={classes}
        onMouseUp={this.handleMouseUp}
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -18,9 +18,10 @@ 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>
+    <Button type="primary" ghost>Primary</Button>
+    <Button ghost>Default</Button>
+    <Button type="dashed" ghost>Dashed</Button>
+    <Button type="danger" ghost>danger</Button>
  </div>
 , mountNode);
 ````
--- a/components/button/demo/loading.md
+++ b/components/button/demo/loading.md
@@ -16,19 +16,20 @@ A loading indicator can be added to a button by setting the `loading` property o
 ````jsx
 import { Button } from 'antd';

-const App = React.createClass({
-  getInitialState() {
-    return {
-      loading: false,
-      iconLoading: false,
-    };
-  },
-  enterLoading() {
+class App extends React.Component {
+  state = {
+    loading: false,
+    iconLoading: false,
+  }
+
+  enterLoading = () => {
    this.setState({ loading: true });
-  },
-  enterIconLoading() {
+  }
+
+  enterIconLoading = () => {
    this.setState({ iconLoading: true });
-  },
+  }
+
  render() {
    return (
      <div>
@@ -50,8 +51,8 @@ const App = React.createClass({
        <Button type="primary" shape="circle" loading />
      </div>
    );
-  },
-});
+  }
+}

 ReactDOM.render(<App />, mountNode);
 ````
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -21,7 +21,7 @@ htmlType | to set the original `type` of `button`, see: [MDN](https://developer.
 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 \| { delay: number } | `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

--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -24,7 +24,7 @@ htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标
 icon | 设置按钮的图标类型 | string | -
 shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | -
 size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
-loading | 设置按钮载入状态 | boolean | `false`
+loading | 设置按钮载入状态 | boolean \| { delay: number } | `false`
 onClick | `click` 事件的 handler | function | -
 ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false

--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -82,13 +82,16 @@
    display: block;
  }

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

@@ -108,6 +111,12 @@
    padding-right: 8px;
  }

+  // http://stackoverflow.com/a/21281554/3040605
+  &:focus > span,
+  &:active > span {
+    position: relative;
+  }
+
  // To ensure that a space will be placed between character and `Icon`.
  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
@@ -122,9 +131,9 @@
    bottom: -1px;
    right: -1px;
    border-radius: inherit;
-    border: 1.5px solid @primary-color;
+    border: 0 solid @primary-color;
    opacity: 0.4;
-    animation: buttonEffect 0.4s ease-in-out forwards;
+    animation: buttonEffect .4s;
    display: block;
  }

@@ -139,7 +148,11 @@
  }

  &-background-ghost&-primary {
-    .button-variant-other(@primary-color; transparent; @primary-color);
+    .button-variant-ghost(@primary-color);
+  }
+
+  &-background-ghost&-danger {
+    .button-variant-ghost(@btn-danger-bg);
  }
 }

@@ -150,5 +163,6 @@
    left: -6px;
    bottom: -6px;
    right: -6px;
+    border-width: 6px;
  }
 }
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@@ -39,7 +39,7 @@

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

  &:active,
@@ -50,6 +50,22 @@
  .button-disabled();
 }

+.button-variant-ghost(@color) {
+  .button-color(@color; transparent; @color);
+
+  &:hover,
+  &:focus {
+    .button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`);
+  }
+
+  &:active,
+  &.active {
+    .button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`);
+  }
+
+  .button-disabled();
+}
+
 .button-color(@color; @background; @border) {
  color: @color;
  background-color: @background;
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -26,8 +26,8 @@ export default class Header extends React.Component<HeaderProps, any> {

  getYearSelectElement(year) {
    const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this.props;
-    const start = year - yearSelectOffset;
-    const end = start + yearSelectTotal;
+    const start = year - (yearSelectOffset as number);
+    const end = start + (yearSelectTotal as number);
    const suffix = locale.year === '年' ? '年' : '';

    const options: React.ReactElement<any>[] = [];
--- a/components/calendar/tests/snapshots/demo.test.js.snap
+++ b/components/calendar/tests/snapshots/demo.test.js.snap
--- a/components/calendar/tests/index.test.js
+++ b/components/calendar/tests/index.test.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Moment from 'moment';
+import { mount } from 'enzyme';
+import Calendar from '..';
+
+describe('Calendar', () => {
+  it('Calendar should be selectable', () => {
+    const onSelect = jest.fn();
+    const wrapper = mount(
+      <Calendar onSelect={onSelect} />
+    );
+    wrapper.find('.ant-fullcalendar-cell').at(0).simulate('click');
+    expect(onSelect).toBeCalledWith(expect.anything());
+    const value = onSelect.mock.calls[0][0];
+    expect(Moment.isMoment(value)).toBe(true);
+  });
+});
--- a/components/calendar/demo/locale.md
+++ b/components/calendar/demo/locale.md
@@ -1,30 +0,0 @@
---
-order: 3
-title:
-  zh-CN: 国际化
-  en-US: locale
---
-
-## zh-CN
-
-通过 `locale` 配置语言, 默认支持 en_US, zh_CN
-
-## en-US
-
-To set the language. en_US, zh_CN are supported by default.
-
-````jsx
-import { Calendar } from 'antd';
-import enUS from 'antd/lib/calendar/locale/en_US';
-import moment from 'moment';
-// It's recommended to set moment locale globally, otherwise, you need to set it by `value` or `defaultValue`
-// moment.locale('en');
-
-function onPanelChange(value, mode) {
-  console.log(value, mode);
-}
-
-ReactDOM.render(
-  <Calendar defaultValue={moment().locale('en')} onPanelChange={onPanelChange} locale={enUS} />
-, mountNode);
-````
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@@ -0,0 +1,46 @@
+---
+order: 3
+title:
+  zh-CN: 选择功能
+  en-US: Selectable Calendar
+---
+
+## zh-CN
+
+一个通用的日历面板，支持年/月切换。
+
+## en-US
+
+A basic calendar component with Year/Month switch.
+
+````jsx
+import { Calendar, Alert } from 'antd';
+import moment from 'moment';
+
+class App extends React.Component {
+  state = {
+    value: moment('2017-01-25'),
+    selectedValue: moment('2017-01-25'),
+  }
+  onSelect = (value) => {
+    this.setState({
+      value,
+      selectedValue: value,
+    });
+  }
+  onPanelChange = (value) => {
+    this.setState({ value });
+  }
+  render() {
+    const { value, selectedValue } = this.state;
+    return (
+      <div>
+        <Alert message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`} />
+        <Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -13,11 +13,20 @@ When data is in the form of date, such as schedule, timetable, prices calendar,

 ## API

-```html
+**Note:** Part of locale of Calendar is read from value. So, please set the locale of moment correctly.
+
+```jsx
+import moment from 'moment';
+
+// It's recommended to set locale in entry file globaly.
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+
 <Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={onPanelChange}
+  onSelect={onSelect}
 />
 ```

@@ -27,7 +36,10 @@ When data is in the form of date, such as schedule, timetable, prices calendar,
 | defaultValue | set default date | [moment](http://momentjs.com/) | default date     |
 | mode         | can be set to month or year | string | month  |
 | fullscreen   | to set whether full-screen display   | boolean     | true         |
-| dateCellRender     | to set the way of renderer the date cell | function(date: moment): ReactNode | - |
-| monthCellRender    | to set the way of renderer the month cell | function(date: moment): ReactNode | - |
+| dateCellRender      | to set the way of renderer the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| monthCellRender     | to set the way of renderer the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
+| dateFullCellRender  | to set the way of renderer the date cell,the returned content will override the cell | function(date: moment): ReactNode | - |
+| monthFullCellRender | to set the way of renderer the month cell,the returned content will override the cell | function(date: moment): ReactNode | - |
 | locale       | set locale | object   | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
-| onPanelChange| the callback when panel change | function(date: moment, mode: string) | - |
+| onPanelChange| callback when panel change | function(date: moment, mode: string) | - |
+| onSelect     | callback when select date  | function(date: moment）              | - |
--- a/components/calendar/index.tsx
+++ b/components/calendar/index.tsx
@@ -18,7 +18,7 @@ function zerofixed(v) {

 export interface CalendarContext {
  antLocale?: {
-    Calendar?: any
+    Calendar?: any,
  };
 }

@@ -33,9 +33,12 @@ export interface CalendarProps {
  fullscreen?: boolean;
  dateCellRender?: (date: moment.Moment) => React.ReactNode;
  monthCellRender?: (date: moment.Moment) => React.ReactNode;
+  dateFullCellRender?: (date: moment.Moment) => React.ReactNode;
+  monthFullCellRender?: (date: moment.Moment) => React.ReactNode;
  locale?: any;
  style?: React.CSSProperties;
  onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
+  onSelect?: (date?: moment.Moment) => void;
 }

 export interface CalendarState {
@@ -49,11 +52,15 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
    fullscreen: true,
    prefixCls: PREFIX_CLS,
    mode: 'month',
+    onSelect: noop,
+    onPanelChange: noop,
  };

  static propTypes = {
    monthCellRender: PropTypes.func,
    dateCellRender: PropTypes.func,
+    monthFullCellRender: PropTypes.func,
+    dateFullCellRender: PropTypes.func,
    fullscreen: PropTypes.bool,
    locale: PropTypes.object,
    prefixCls: PropTypes.string,
@@ -61,6 +68,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
    style: PropTypes.object,
    onPanelChange: PropTypes.func,
    value: PropTypes.object,
+    onSelect: PropTypes.func,
  };

  static contextTypes = {
@@ -78,7 +86,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
    if (!moment.isMoment(value)) {
      throw new Error(
        'The value/defaultValue of Calendar must be a moment object after `antd@2.0`, ' +
-        'see: http://u.ant.design/calendar-value'
+        'see: http://u.ant.design/calendar-value',
      );
    }
    this.state = {
@@ -123,13 +131,16 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
    );
  }

-  setValue = (value) => {
-    if (!('value' in this.props) && this.state.value !== value) {
+  setValue = (value, way: 'select' | 'changePanel') => {
+    if (!('value' in this.props)) {
      this.setState({ value });
    }
-    const onPanelChange = this.props.onPanelChange;
-    if (onPanelChange) {
-      onPanelChange(value, this.state.mode);
+    if (way === 'select') {
+      if (this.props.onSelect) {
+        this.props.onSelect(value);
+      }
+    } else if (way === 'changePanel') {
+      this.onPanelChange(value, this.state.mode);
    }
  }

@@ -137,13 +148,29 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
    const mode = (type === 'date') ? 'month' : 'year';
    if (this.state.mode !== mode) {
      this.setState({ mode });
-      const onPanelChange = this.props.onPanelChange;
-      if (onPanelChange) {
-        onPanelChange(this.state.value, mode);
-      }
+      this.onPanelChange(this.state.value, mode);
    }
  }

+  onHeaderValueChange = (value) => {
+    this.setValue(value, 'changePanel');
+  }
+
+  onHeaderTypeChange = (type) => {
+    this.setType(type);
+  }
+
+  onPanelChange(value, mode) {
+    const { onPanelChange } = this.props;
+    if (onPanelChange) {
+      onPanelChange(value, mode);
+    }
+  }
+
+  onSelect = (value) => {
+    this.setValue(value, 'select');
+  }
+
  render() {
    const { state, props, context } = this;
    const { value, mode } = state;
@@ -151,7 +178,7 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
    if (value && localeCode) {
      value.locale(localeCode);
    }
-    const { prefixCls, style, className, fullscreen } = props;
+    const { prefixCls, style, className, fullscreen, dateFullCellRender, monthFullCellRender } = props;
    const type = (mode === 'year') ? 'month' : 'date';
    const locale = getComponentLocale(props, context, 'Calendar', () => require('./locale/zh_CN'));

@@ -160,6 +187,9 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
      cls += (` ${prefixCls}-fullscreen`);
    }

+    const monthCellRender = monthFullCellRender || this.monthCellRender;
+    const dateCellRender = dateFullCellRender || this.dateCellRender;
+
    return (
      <div className={cls} style={style}>
        <Header
@@ -168,8 +198,8 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
          value={value}
          locale={locale.lang}
          prefixCls={prefixCls}
-          onTypeChange={this.setType}
-          onValueChange={this.setValue}
+          onTypeChange={this.onHeaderTypeChange}
+          onValueChange={this.onHeaderValueChange}
        />
        <FullCalendar
          {...props}
@@ -179,8 +209,9 @@ export default class Calendar extends React.Component<CalendarProps, CalendarSta
          prefixCls={prefixCls}
          showHeader={false}
          value={value}
-          monthCellRender={this.monthCellRender}
-          dateCellRender={this.dateCellRender}
+          monthCellRender={monthCellRender}
+          dateCellRender={dateCellRender}
+          onSelect={this.onSelect}
        />
      </div>
    );
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -15,11 +15,20 @@ title: Calendar

 ## API

-```html
+**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
+
+```jsx
+import moment from 'moment';
+
+// 推荐在入口文件全局设置 locale
+import 'moment/locale/zh-cn';
+moment.locale('zh-cn');
+
 <Calendar
  dateCellRender={dateCellRender}
  monthCellRender={monthCellRender}
  onPanelChange={onPanelChange}
+  onSelect={onSelect}
 />
 ```

@@ -29,7 +38,10 @@ title: Calendar
 | defaultValue | 默认展示的日期  | [moment](http://momentjs.com/)     | 默认日期     |
 | mode         | 初始模式，`month/year` | string | month  |
 | fullscreen   | 是否全屏显示   | boolean     | true         |
-| dateCellRender     | 自定义渲染日期单元格| function(date: moment): ReactNode   | 无 |
-| monthCellRender    | 自定义渲染月单元格  | function(date: moment): ReactNode   | 无 |
+| dateCellRender      | 自定义渲染日期单元格，返回内容会被追加到单元格| function(date: moment): ReactNode   | 无 |
+| monthCellRender     | 自定义渲染月单元格，返回内容会被追加到单元格  | function(date: moment): ReactNode   | 无 |
+| dateFullCellRender  | 自定义渲染日期单元格，返回内容覆盖单元格| function(date: moment): ReactNode   | 无 |
+| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格  | function(date: moment): ReactNode   | 无 |
 | locale       | 国际化配置     | object   | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)  |
 | onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
+| onSelect     | 点击选择日期回调 | function(date: moment）              | 无 |
--- a/components/calendar/locale/ca_ES.tsx
+++ b/components/calendar/locale/ca_ES.tsx
@@ -0,0 +1,2 @@
+import ca_ES from '../../date-picker/locale/ca_ES';
+export default ca_ES;
--- a/components/calendar/locale/cs_CZ.tsx
+++ b/components/calendar/locale/cs_CZ.tsx
@@ -0,0 +1,2 @@
+import cs_CZ from '../../date-picker/locale/cs_CZ';
+export default cs_CZ;
--- a/components/calendar/locale/et_EE.tsx
+++ b/components/calendar/locale/et_EE.tsx
@@ -0,0 +1,2 @@
+import et_EE from '../../date-picker/locale/et_EE';
+export default et_EE;
--- a/components/calendar/locale/ja_JP.tsx
+++ b/components/calendar/locale/ja_JP.tsx
@@ -0,0 +1,2 @@
+import ja_JP from '../../date-picker/locale/ja_JP';
+export default ja_JP;
--- a/components/calendar/locale/ko_KR.tsx
+++ b/components/calendar/locale/ko_KR.tsx
@@ -0,0 +1,2 @@
+import ko_KR from '../../date-picker/locale/ko_KR';
+export default ko_KR;
--- a/components/calendar/locale/nl_NL.tsx
+++ b/components/calendar/locale/nl_NL.tsx
@@ -0,0 +1,2 @@
+import nl_NL from '../../date-picker/locale/nl_NL';
+export default nl_NL;
--- a/components/calendar/locale/sk_SK.tsx
+++ b/components/calendar/locale/sk_SK.tsx
@@ -0,0 +1,2 @@
+import sk_SK from '../../date-picker/locale/sk_SK';
+export default sk_SK;
--- a/components/calendar/locale/tr_TR.tsx
+++ b/components/calendar/locale/tr_TR.tsx
@@ -0,0 +1,2 @@
+import tr_TR from '../../date-picker/locale/tr_TR';
+export default tr_TR;
--- a/components/calendar/style/index.less
+++ b/components/calendar/style/index.less
@@ -84,23 +84,30 @@
  &-month,
  &-date {
    text-align: center;
+    transition: all .3s;
  }

  &-value {
    display: block;
    margin: 0 auto;
    color: @text-color;
-    border-radius: 4px;
+    border-radius: @border-radius-base;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    line-height: 22px;
+    transition: all .3s;

    &:hover {
      background: @primary-1;
      cursor: pointer;
    }
+
+    &:active {
+      background: @primary-color;
+      color: #fff;
+    }
  }

  &-month-panel-cell &-value {
@@ -109,30 +116,35 @@

  &-today &-value,
  &-month-panel-current-cell &-value {
+    box-shadow: 0 0 0 1px @primary-color;
+  }
+
+  &-selected-day &-value,
+  &-month-panel-selected-cell &-value {
    background: @primary-color;
    color: #fff;
  }

  &-disabled-cell &-value {
    cursor: not-allowed;
-    color: #bcbcbc;
-    background: #f3f3f3;
+    color: @disabled-color;
+    background: @background-color-base;
    border-radius: 0;
    width: auto;

    &:hover {
-      background: #f3f3f3;
+      background: @background-color-base;
    }
  }

  &-disabled-cell-first-of-row &-value {
-    border-top-left-radius: 4px;
-    border-bottom-left-radius: 4px;
+    border-top-left-radius: @border-radius-base;
+    border-bottom-left-radius: @border-radius-base;
  }

  &-disabled-cell-last-of-row &-value {
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
+    border-top-right-radius: @border-radius-base;
+    border-bottom-right-radius: @border-radius-base;
  }

  &-last-month-cell &-value,
@@ -166,8 +178,8 @@
      margin-left: 16px;
    }
    label.@{ant-prefix}-radio-button {
-      height: 28px;
-      line-height: 26px;
+      height: @input-height-base;
+      line-height: @input-height-base - 2px;
    }
  }

@@ -180,12 +192,16 @@
    height: 116px;
    padding: 4px 8px;
    border-top: 2px solid @border-color-split;
-    transition: background 0.3s ease;
+    transition: background .3s;

    &:hover {
      background: @primary-1;
      cursor: pointer;
    }
+
+    &:active {
+      background: @primary-2;
+    }
  }

  &-fullscreen &-column-header {
@@ -207,12 +223,24 @@
  &-fullscreen &-month-panel-current-cell &-month,
  &-fullscreen &-today &-date {
    border-top-color: @primary-color;
-    background-color: @primary-1;
-    color: @primary-color;
-  }
-  &-fullscreen &-month-panel-current-cell &-value {
+    background: transparent;
+  }
+
+  &-fullscreen &-month-panel-current-cell &-value,
+  &-fullscreen &-today &-value {
+    box-shadow: none;
+  }
+
+  &-fullscreen &-month-panel-selected-cell &-month,
+  &-fullscreen &-selected-day &-date {
+    background: @primary-1;
+  }
+
+  &-fullscreen &-month-panel-selected-cell &-value,
+  &-fullscreen &-selected-day &-value {
    color: @primary-color;
  }
+
  &-fullscreen &-last-month-cell &-date,
  &-fullscreen &-next-month-btn-day &-date {
    color: @disabled-color;
--- a/components/card/tests/snapshots/demo.test.js.snap
+++ b/components/card/tests/snapshots/demo.test.js.snap
@@ -1,23 +1,31 @@
-exports[`test renders ./components/card/demo/basic.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/card/demo/basic.md correctly 1`] = `
 <div
  class="ant-card ant-card-bordered"
-  style="width:300px;">
+  style="width:300px;"
+>
  <div
-    class="ant-card-head">
+    class="ant-card-head"
+  >
    <h3
-      class="ant-card-head-title">
+      class="ant-card-head-title"
+    >
      Card title
    </h3>
  </div>
  <div
-    class="ant-card-extra">
+    class="ant-card-extra"
+  >
    <a
-      href="#">
+      href="#"
+    >
      More
    </a>
  </div>
  <div
-    class="ant-card-body">
+    class="ant-card-body"
+  >
    <p>
      Card content
    </p>
@@ -31,21 +39,26 @@ exports[`test renders ./components/card/demo/basic.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/card/demo/border-less.md correctly 1`] = `
+exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
 <div
-  style="background:#ECECEC;padding:30px;">
+  style="background:#ECECEC;padding:30px;"
+>
  <div
    class="ant-card"
-    style="width:300px;">
+    style="width:300px;"
+  >
    <div
-      class="ant-card-head">
+      class="ant-card-head"
+    >
      <h3
-        class="ant-card-head-title">
+        class="ant-card-head-title"
+      >
        Card title
      </h3>
    </div>
    <div
-      class="ant-card-body">
+      class="ant-card-body"
+    >
      <p>
        Card content
      </p>
@@ -60,58 +73,75 @@ exports[`test renders ./components/card/demo/border-less.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/card/demo/grid.md correctly 1`] = `
+exports[`renders ./components/card/demo/grid.md correctly 1`] = `
 <div
-  style="background:#ECECEC;padding:30px;">
+  style="background:#ECECEC;padding:30px;"
+>
  <div
-    class="ant-row">
+    class="ant-row"
+  >
    <div
-      class="ant-col-8">
+      class="ant-col-8"
+    >
      <div
-        class="ant-card">
+        class="ant-card"
+      >
        <div
-          class="ant-card-head">
+          class="ant-card-head"
+        >
          <h3
-            class="ant-card-head-title">
+            class="ant-card-head-title"
+          >
            Card title
          </h3>
        </div>
        <div
-          class="ant-card-body">
+          class="ant-card-body"
+        >
          Card content
        </div>
      </div>
    </div>
    <div
-      class="ant-col-8">
+      class="ant-col-8"
+    >
      <div
-        class="ant-card">
+        class="ant-card"
+      >
        <div
-          class="ant-card-head">
+          class="ant-card-head"
+        >
          <h3
-            class="ant-card-head-title">
+            class="ant-card-head-title"
+          >
            Card title
          </h3>
        </div>
        <div
-          class="ant-card-body">
+          class="ant-card-body"
+        >
          Card content
        </div>
      </div>
    </div>
    <div
-      class="ant-col-8">
+      class="ant-col-8"
+    >
      <div
-        class="ant-card">
+        class="ant-card"
+      >
        <div
-          class="ant-card-head">
+          class="ant-card-head"
+        >
          <h3
-            class="ant-card-head-title">
+            class="ant-card-head-title"
+          >
            Card title
          </h3>
        </div>
        <div
-          class="ant-card-body">
+          class="ant-card-body"
+        >
          Card content
        </div>
      </div>
@@ -120,79 +150,98 @@ exports[`test renders ./components/card/demo/grid.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/card/demo/loading.md correctly 1`] = `
+exports[`renders ./components/card/demo/loading.md correctly 1`] = `
 <div
  class="ant-card ant-card-loading ant-card-bordered"
-  style="width:34%;">
+  style="width:34%;"
+>
  <div
-    class="ant-card-head">
+    class="ant-card-head"
+  >
    <h3
-      class="ant-card-head-title">
+      class="ant-card-head-title"
+    >
      Card title
    </h3>
  </div>
  <div
-    class="ant-card-body">
+    class="ant-card-body"
+  >
    <div>
      <p
        class="ant-card-loading-block"
-        style="width:94%;" />
+        style="width:94%;"
+      />
      <p>
        <span
          class="ant-card-loading-block"
-          style="width:28%;" />
+          style="width:28%;"
+        />
        <span
          class="ant-card-loading-block"
-          style="width:62%;" />
+          style="width:62%;"
+        />
      </p>
      <p>
        <span
          class="ant-card-loading-block"
-          style="width:22%;" />
+          style="width:22%;"
+        />
        <span
          class="ant-card-loading-block"
-          style="width:66%;" />
+          style="width:66%;"
+        />
      </p>
      <p>
        <span
          class="ant-card-loading-block"
-          style="width:56%;" />
+          style="width:56%;"
+        />
        <span
          class="ant-card-loading-block"
-          style="width:39%;" />
+          style="width:39%;"
+        />
      </p>
      <p>
        <span
          class="ant-card-loading-block"
-          style="width:21%;" />
+          style="width:21%;"
+        />
        <span
          class="ant-card-loading-block"
-          style="width:15%;" />
+          style="width:15%;"
+        />
        <span
          class="ant-card-loading-block"
-          style="width:40%;" />
+          style="width:40%;"
+        />
      </p>
    </div>
  </div>
 </div>
 `;

-exports[`test renders ./components/card/demo/no-padding.md correctly 1`] = `
+exports[`renders ./components/card/demo/no-padding.md correctly 1`] = `
 <div
  class="ant-card ant-card-bordered"
-  style="width:240px;">
+  style="width:240px;"
+>
  <div
    class="ant-card-body"
-    style="padding:0;">
+    style="padding:0;"
+  >
    <div
-      class="custom-image">
+      class="custom-image"
+    >
      <img
        alt="example"
        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
-        width="100%" />
+        width="100%"
+      />
    </div>
    <div
-      class="custom-card">
+      class="custom-card"
+    >
      <h3>
        Europe Street beat
      </h3>
@@ -204,12 +253,14 @@ exports[`test renders ./components/card/demo/no-padding.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/card/demo/simple.md correctly 1`] = `
+exports[`renders ./components/card/demo/simple.md correctly 1`] = `
 <div
  class="ant-card ant-card-bordered"
-  style="width:300px;">
+  style="width:300px;"
+>
  <div
-    class="ant-card-body">
+    class="ant-card-body"
+  >
    <p>
      Card content
    </p>
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -20,8 +20,9 @@
  }

  &-head {
-    height: 48px;
-    line-height: 48px;
+    height: @card-head-height;
+    line-height: @card-head-height;
+    background: @card-head-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    padding: 0 24px;

@@ -32,6 +33,8 @@
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
+      color: @card-head-color;
+      font-weight: 500;
    }
  }

--- a/components/carousel/tests/snapshots/demo.test.js.snap
+++ b/components/carousel/tests/snapshots/demo.test.js.snap
@@ -1,15 +1,22 @@
-exports[`test renders ./components/carousel/demo/autoplay.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
 <div
-  class="ant-carousel">
+  class="ant-carousel"
+>
  <div
-    class="slick-initialized slick-slider">
+    class="slick-initialized slick-slider"
+  >
    <div
-      class="slick-list">
+      class="slick-list"
+    >
      <div
-        class="slick-track">
+        class="slick-track"
+      >
        <div
          class="slick-slide slick-cloned"
-          data-index="-1">
+          data-index="-1"
+        >
          <h3>
            4
          </h3>
@@ -18,7 +25,8 @@ exports[`test renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          class="slick-slide slick-active slick-cloned"
          data-index="0"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            1
          </h3>
@@ -27,7 +35,8 @@ exports[`test renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="1"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            2
          </h3>
@@ -36,7 +45,8 @@ exports[`test renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="2"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            3
          </h3>
@@ -45,14 +55,16 @@ exports[`test renders ./components/carousel/demo/autoplay.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="3"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            4
          </h3>
        </div>
        <div
          class="slick-slide slick-active slick-cloned"
-          data-index="4">
+          data-index="4"
+        >
          <h3>
            1
          </h3>
@@ -63,18 +75,23 @@ exports[`test renders ./components/carousel/demo/autoplay.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/carousel/demo/basic.md correctly 1`] = `
+exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
 <div
-  class="ant-carousel">
+  class="ant-carousel"
+>
  <div
-    class="slick-initialized slick-slider">
+    class="slick-initialized slick-slider"
+  >
    <div
-      class="slick-list">
+      class="slick-list"
+    >
      <div
-        class="slick-track">
+        class="slick-track"
+      >
        <div
          class="slick-slide slick-cloned"
-          data-index="-1">
+          data-index="-1"
+        >
          <h3>
            4
          </h3>
@@ -83,7 +100,8 @@ exports[`test renders ./components/carousel/demo/basic.md correctly 1`] = `
          class="slick-slide slick-active slick-cloned"
          data-index="0"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            1
          </h3>
@@ -92,7 +110,8 @@ exports[`test renders ./components/carousel/demo/basic.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="1"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            2
          </h3>
@@ -101,7 +120,8 @@ exports[`test renders ./components/carousel/demo/basic.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="2"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            3
          </h3>
@@ -110,14 +130,16 @@ exports[`test renders ./components/carousel/demo/basic.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="3"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            4
          </h3>
        </div>
        <div
          class="slick-slide slick-active slick-cloned"
-          data-index="4">
+          data-index="4"
+        >
          <h3>
            1
          </h3>
@@ -128,20 +150,25 @@ exports[`test renders ./components/carousel/demo/basic.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/carousel/demo/fade.md correctly 1`] = `
+exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
 <div
-  class="ant-carousel">
+  class="ant-carousel"
+>
  <div
-    class="slick-initialized slick-slider">
+    class="slick-initialized slick-slider"
+  >
    <div
-      class="slick-list">
+      class="slick-list"
+    >
      <div
-        class="slick-track">
+        class="slick-track"
+      >
        <div
          class="slick-slide slick-active slick-cloned"
          data-index="0"
          style="outline:none;position:relative;left:0;opacity:1;transition:opacity 500ms ease;-webkit-transition:opacity 500ms ease;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            1
          </h3>
@@ -150,7 +177,8 @@ exports[`test renders ./components/carousel/demo/fade.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="1"
          style="outline:none;position:relative;left:0;opacity:0;transition:opacity 500ms ease;-webkit-transition:opacity 500ms ease;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            2
          </h3>
@@ -159,7 +187,8 @@ exports[`test renders ./components/carousel/demo/fade.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="2"
          style="outline:none;position:relative;left:0;opacity:0;transition:opacity 500ms ease;-webkit-transition:opacity 500ms ease;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            3
          </h3>
@@ -168,7 +197,8 @@ exports[`test renders ./components/carousel/demo/fade.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="3"
          style="outline:none;position:relative;left:0;opacity:0;transition:opacity 500ms ease;-webkit-transition:opacity 500ms ease;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            4
          </h3>
@@ -179,18 +209,23 @@ exports[`test renders ./components/carousel/demo/fade.md correctly 1`] = `
 </div>
 `;

-exports[`test renders ./components/carousel/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
 <div
-  class="ant-carousel ant-carousel-vertical">
+  class="ant-carousel ant-carousel-vertical"
+>
  <div
-    class="slick-initialized slick-slider slick-vertical">
+    class="slick-initialized slick-slider slick-vertical"
+  >
    <div
-      class="slick-list">
+      class="slick-list"
+    >
      <div
-        class="slick-track">
+        class="slick-track"
+      >
        <div
          class="slick-slide slick-cloned"
-          data-index="-1">
+          data-index="-1"
+        >
          <h3>
            4
          </h3>
@@ -199,7 +234,8 @@ exports[`test renders ./components/carousel/demo/vertical.md correctly 1`] = `
          class="slick-slide slick-active slick-cloned"
          data-index="0"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            1
          </h3>
@@ -208,7 +244,8 @@ exports[`test renders ./components/carousel/demo/vertical.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="1"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            2
          </h3>
@@ -217,7 +254,8 @@ exports[`test renders ./components/carousel/demo/vertical.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="2"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            3
          </h3>
@@ -226,14 +264,16 @@ exports[`test renders ./components/carousel/demo/vertical.md correctly 1`] = `
          class="slick-slide slick-cloned"
          data-index="3"
          style="outline:none;"
-          tabindex="-1">
+          tabindex="-1"
+        >
          <h3>
            4
          </h3>
        </div>
        <div
          class="slick-slide slick-active slick-cloned"
-          data-index="4">
+          data-index="4"
+        >
          <h3>
            1
          </h3>
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -29,3 +29,15 @@ ReactDOM.render(
  </Carousel>
 , mountNode);
 ````
+
+````css
+/* For demo */
+.ant-carousel .slick-slide {
+  text-align: center;
+  height: 160px;
+  line-height: 160px;
+  background: #364d79;
+  color: #fff;
+  overflow: hidden;
+}
+````
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -25,14 +25,3 @@ A carousel component. Scales with its container.
 | afterChange  | Callback function called after the current index changes    | function(current)  |

 For more info on the parameters, refer to the https://github.com/akiran/react-slick
-
-<style>
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  color: #fff;
-  overflow: hidden;
-}
-</style>
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -1,6 +1,8 @@
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
 import assign from 'object-assign';
+import debounce from 'lodash.debounce';
+
 if (typeof window !== 'undefined') {
  const matchMediaPolyfill = function matchMediaPolyfill(mediaQuery: string): MediaQueryList {
    return {
@@ -18,26 +20,48 @@ if (typeof window !== 'undefined') {
 import SlickCarousel from 'react-slick';
 import React from 'react';

-export type CarouselEffect = 'scrollx' | 'fade'
+export type CarouselEffect = 'scrollx' | 'fade';
 // Carousel
 export interface CarouselProps {
-  /** 动画效果函数，可取 scrollx, fade */
  effect?: CarouselEffect;
-  /** 是否显示面板指示点 */
  dots?: boolean;
-  /** 垂直显示 */
  vertical?: boolean;
-  /** 是否自动切换 */
  autoplay?: boolean;
-  /** 动画效果 */
  easing?: string;
-  /** 切换面板的回调 */
  beforeChange?: (from: number, to: number) => void;
-  /** 切换面板的回调 */
  afterChange?: (current: number) => void;
-  /** 行内样式 */
  style?: React.CSSProperties;
  prefixCls?: string;
+  accessibility?: boolean;
+  nextArrow?: HTMLElement | any;
+  prevArrow?: HTMLElement | any;
+  pauseOnHover?: boolean;
+  className?: string;
+  adaptiveHeight?: boolean;
+  arrows?: boolean;
+  autoplaySpeed?: number;
+  centerMode?: boolean;
+  centerPadding?: string | any;
+  cssEase?: string | any;
+  dotsClass?: string;
+  draggable?: boolean;
+  fade?: boolean;
+  focusOnSelect?: boolean;
+  infinite?: boolean;
+  initialSlide?: number;
+  lazyLoad?: boolean;
+  rtl?: boolean;
+  slide?: string;
+  slidesToShow?: number;
+  slidesToScroll?: number;
+  speed?: number;
+  swipe?: boolean;
+  swipeToSlide?: boolean;
+  touchMove?: boolean;
+  touchThreshold?: number;
+  variableWidth?: boolean;
+  useCSS?: boolean;
+  slickGoTo?: number;
 }

 export default class Carousel extends React.Component<CarouselProps, any> {
@@ -48,6 +72,41 @@ export default class Carousel extends React.Component<CarouselProps, any> {
    draggable: false,
  };

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

--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -26,14 +26,3 @@ subtitle: 走马灯
 | afterChange       | 切换面板的回调                              | function(current)  | 无

 更多参数可参考：https://github.com/akiran/react-slick
-
-<style>
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 130px;
-  background: #506b9e;
-  color: #fff;
-  overflow: hidden;
-}
-</style>
--- a/components/cascader/tests/snapshots/demo.test.js.snap
+++ b/components/cascader/tests/snapshots/demo.test.js.snap
@@ -1,52 +1,65 @@
-exports[`test renders ./components/cascader/demo/basic.md correctly 1`] = `
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/cascader/demo/basic.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    placeholder="Please select"
    readonly=""
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label" />
+    class="ant-cascader-picker-label"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/change-on-select.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/change-on-select.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    placeholder="Please select"
    readonly=""
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label" />
+    class="ant-cascader-picker-label"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/custom-render.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-render.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
  style="width:270px;"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    readonly=""
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label">
+    class="ant-cascader-picker-label"
+  >
    <span>
      Zhejiang / 
    </span>
@@ -62,165 +75,201 @@ exports[`test renders ./components/cascader/demo/custom-render.md correctly 1`]
    </span>
  </span>
  <i
-    class="anticon anticon-cross-circle ant-cascader-picker-clear" />
+    class="anticon anticon-cross-circle ant-cascader-picker-clear"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/custom-trigger.md correctly 1`] = `
 <span>
  Unselect 
  <a
    href="#"
-    tabindex="0">
+    tabindex="0"
+  >
    Change city
  </a>
 </span>
 `;

-exports[`test renders ./components/cascader/demo/default-value.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/default-value.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    readonly=""
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label">
+    class="ant-cascader-picker-label"
+  >
    Zhejiang / Hangzhou / West Lake
  </span>
  <i
-    class="anticon anticon-cross-circle ant-cascader-picker-clear" />
+    class="anticon anticon-cross-circle ant-cascader-picker-clear"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/disabled-option.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    placeholder="Please select"
    readonly=""
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label" />
+    class="ant-cascader-picker-label"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/hover.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/hover.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    placeholder="Please select"
    readonly=""
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label" />
+    class="ant-cascader-picker-label"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/lazy.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/lazy.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    placeholder="Please select"
    readonly=""
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label" />
+    class="ant-cascader-picker-label"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/search.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
 <span
  class="ant-cascader-picker"
-  tabindex="0">
+  tabindex="0"
+>
  <input
    autocomplete="off"
    class="ant-input ant-cascader-input "
    placeholder="Please select"
    type="text"
-    value="" />
+    value=""
+  />
  <span
-    class="ant-cascader-picker-label" />
+    class="ant-cascader-picker-label"
+  />
  <i
-    class="anticon anticon-down ant-cascader-picker-arrow" />
+    class="anticon anticon-down ant-cascader-picker-arrow"
+  />
 </span>
 `;

-exports[`test renders ./components/cascader/demo/size.md correctly 1`] = `
+exports[`renders ./components/cascader/demo/size.md correctly 1`] = `
 <div>
  <span
    class="ant-cascader-picker"
-    tabindex="0">
+    tabindex="0"
+  >
    <input
      autocomplete="off"
      class="ant-input ant-cascader-input ant-input-lg"
      placeholder="Please select"
      readonly=""
      type="text"
-      value="" />
+      value=""
+    />
    <span
-      class="ant-cascader-picker-label" />
+      class="ant-cascader-picker-label"
+    />
    <i
-      class="anticon anticon-down ant-cascader-picker-arrow" />
+      class="anticon anticon-down ant-cascader-picker-arrow"
+    />
  </span>
  <br />
  <br />
  <span
    class="ant-cascader-picker"
-    tabindex="0">
+    tabindex="0"
+  >
    <input
      autocomplete="off"
      class="ant-input ant-cascader-input "
      placeholder="Please select"
      readonly=""
      type="text"
-      value="" />
+      value=""
+    />
    <span
-      class="ant-cascader-picker-label" />
+      class="ant-cascader-picker-label"
+    />
    <i
-      class="anticon anticon-down ant-cascader-picker-arrow" />
+      class="anticon anticon-down ant-cascader-picker-arrow"
+    />
  </span>
  <br />
  <br />
  <span
    class="ant-cascader-picker"
-    tabindex="0">
+    tabindex="0"
+  >
    <input
      autocomplete="off"
      class="ant-input ant-cascader-input ant-input-sm"
      placeholder="Please select"
      readonly=""
      type="text"
-      value="" />
+      value=""
+    />
    <span
-      class="ant-cascader-picker-label" />
+      class="ant-cascader-picker-label"
+    />
    <i
-      class="anticon anticon-down ant-cascader-picker-arrow" />
+      class="anticon anticon-down ant-cascader-picker-arrow"
+    />
  </span>
  <br />
  <br />
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@@ -0,0 +1,216 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cascader can be selected 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft "
+  >
+    <div>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang"
+        >
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu"
+        >
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Hangzhou"
+        >
+          Hangzhou
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader can be selected 2`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft "
+  >
+    <div>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang"
+        >
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu"
+        >
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Hangzhou"
+        >
+          Hangzhou
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item"
+          title="West Lake"
+        >
+          West Lake
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader can be selected 3`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft  ant-cascader-menus-hidden"
+  >
+    <div>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang"
+        >
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu"
+        >
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Hangzhou"
+        >
+          Hangzhou
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-active"
+          title="West Lake"
+        >
+          West Lake
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly when panel is hidden 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-empty ant-cascader-menus-placement-bottomLeft  ant-cascader-menus-hidden"
+  >
+    <div />
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly when panel is open 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft "
+  >
+    <div>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Zhejiang"
+        >
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu"
+        >
+          Jiangsu
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly with defaultValue 1`] = `
+<div>
+  <div
+    class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft "
+  >
+    <div>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Zhejiang"
+        >
+          Zhejiang
+        </li>
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          title="Jiangsu"
+        >
+          Jiangsu
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          title="Hangzhou"
+        >
+          Hangzhou
+        </li>
+      </ul>
+      <ul
+        class="ant-cascader-menu"
+      >
+        <li
+          class="ant-cascader-menu-item"
+          title="West Lake"
+        >
+          West Lake
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
--- a/components/cascader/tests/index.test.js
+++ b/components/cascader/tests/index.test.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { renderToJson } from 'enzyme-to-json';
+import KeyCode from 'rc-util/lib/KeyCode';
+import Cascader from '..';
+
+const options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'xihu',
+      label: 'West Lake',
+    }],
+  }],
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'zhonghuamen',
+      label: 'Zhong Hua Men',
+    }],
+  }],
+}];
+
+describe('Cascader', () => {
+  it('popup correctly when panel is hidden', () => {
+    const wrapper = mount(
+      <Cascader options={options} />
+    );
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+
+  it('popup correctly when panel is open', () => {
+    const wrapper = mount(
+      <Cascader options={options} />
+    );
+    wrapper.find('input').simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+
+  it('popup correctly with defaultValue', () => {
+    const wrapper = mount(
+      <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />
+    );
+    wrapper.find('input').simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+
+  it('can be selected', () => {
+    const wrapper = mount(<Cascader options={options} />);
+    wrapper.find('input').simulate('click');
+    let popupWrapper = mount(wrapper.find('Trigger').node.getComponent());
+    popupWrapper.find('.ant-cascader-menu').at(0).find('.ant-cascader-menu-item').at(0)
+      .simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').node.getComponent());
+    popupWrapper.find('.ant-cascader-menu').at(1).find('.ant-cascader-menu-item').at(0)
+      .simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').node.getComponent());
+    popupWrapper.find('.ant-cascader-menu').at(2).find('.ant-cascader-menu-item').at(0)
+      .simulate('click');
+    expect(renderToJson(render(wrapper.find('Trigger').node.getComponent()))).toMatchSnapshot();
+  });
+
+  it('backspace should work with `Cascader[showSearch]`', () => {
+    const wrapper = mount(<Cascader options={options} showSearch />);
+    wrapper.find('input').simulate('change', { target: { value: '123' } });
+    expect(wrapper.state('inputValue')).toBe('123');
+    wrapper.find('input').simulate('keydown', { keyCode: KeyCode.BACKSPACE });
+    // Simulate onKeyDown will not trigger onChange by default, so the value is still '123'
+    expect(wrapper.state('inputValue')).toBe('123');
+  });
+});
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@@ -32,17 +32,16 @@ const options = [{
  }],
 }];

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

 ReactDOM.render(<CitySwitcher />, mountNode);
 ````
--- a/components/cascader/demo/search.md
+++ b/components/cascader/demo/search.md
@@ -9,10 +9,14 @@ title:

 可以直接搜索选项并选择。

+> `Cascader[showSearch]` 暂不支持服务端搜索，更多信息见 [#5547](https://github.com/ant-design/ant-design/issues/5547)
+
 ## en-US

 Search and select options directly.

+> Now, `Cascader[showSearch]` doesn't support search on server, more info [#5547](https://github.com/ant-design/ant-design/issues/5547)
+
 ````jsx
 import { Cascader } from 'antd';

--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -3,6 +3,7 @@ import RcCascader from 'rc-cascader';
 import arrayTreeFilter from 'array-tree-filter';
 import classNames from 'classnames';
 import omit from 'omit.js';
+import KeyCode from 'rc-util/lib/KeyCode';
 import Input from '../input';
 import Icon from '../icon';

@@ -13,7 +14,7 @@ export interface CascaderOptionType {
  children?: Array<CascaderOptionType>;
 }

-export type CascaderExpandTrigger = 'click' | 'hover'
+export type CascaderExpandTrigger = 'click' | 'hover';

 export interface ShowSearchType {
  filter?: (inputValue: string, path: CascaderOptionType[]) => boolean;
@@ -60,7 +61,7 @@ export interface CascaderProps {
  onPopupVisibleChange?: (popupVisible: boolean) => void;
  prefixCls?: string;
  inputPrefixCls?: string;
-  getPopupContainer?: (triggerNode: Element) => HTMLElement;
+  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
 }

 function highlightKeyword(str: string, keyword: string, prefixCls: string) {
@@ -109,7 +110,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
  refs: {
    [key: string]: any;
    input: {
-      refs: { input: HTMLElement }
+      refs: { input: HTMLElement },
    };
  };

@@ -172,6 +173,12 @@ export default class Cascader extends React.Component<CascaderProps, any> {
    }
  }

+  handleKeyDown = (e) => {
+    if (e.keyCode === KeyCode.BACKSPACE) {
+      e.stopPropagation();
+    }
+  }
+
  handleInputChange = (e) => {
    const inputValue = e.target.value;
    this.setState({ inputValue });
@@ -258,12 +265,13 @@ export default class Cascader extends React.Component<CascaderProps, any> {
      [`${inputPrefixCls}-lg`]: size === 'large',
      [`${inputPrefixCls}-sm`]: size === 'small',
    });
-    const clearIcon = (allowClear && !disabled && value.length > 0) || state.inputValue ?
+    const clearIcon = (allowClear && !disabled && value.length > 0) || state.inputValue ? (
      <Icon
        type="cross-circle"
        className={`${prefixCls}-picker-clear`}
        onClick={this.clearSelection}
-      /> : null;
+      />
+    ) : null;
    const arrowCls = classNames({
      [`${prefixCls}-picker-arrow`]: true,
      [`${prefixCls}-picker-arrow-expand`]: state.popupVisible,
@@ -333,6 +341,7 @@ export default class Cascader extends React.Component<CascaderProps, any> {
          autoComplete="off"
          onClick={showSearch ? this.handleInputClick : undefined}
          onBlur={showSearch ? this.handleInputBlur : undefined}
+          onKeyDown={this.handleKeyDown}
          onChange={showSearch ? this.handleInputChange : undefined}
        />
        <span className={`${prefixCls}-picker-label`}>
--- a/Show More
+++ b/Show More