From 7b3d03c411f1822c8836ea72723bfe873b9cc38b Mon Sep 17 00:00:00 2001
From: Kiku <Kiku.Reise@gmail.com>
Date: Fri, 14 Jun 2019 17:05:51 +0300
Subject: [PATCH] fix (#3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add fault-tolerant processing for rowSelection.getCheckboxProps

* Upload prop onRemove: allow Promise as return type

* onDragEnter的函数定义缺少一个expandedKeys:string[]?

官方的示例里有expandedKeys, 可是typescript定义里没有，所以扩展一下

* Fix docs (#16637)

* Format (#16639)

* `==` to `===`

close #16640

* fix close  animation

* Update drawer.less

* fix space missing in button (#16551)

* feat: Add Mentions component (#16532)

* init

* first demo

* support empty

* add loading support

* add form sample

* update form sample

* omit value & defaultValue

* add 2 rest demo

* placement support

* update docs

* fix test

* update docs

* add test case

* fix lint

* follow textarea style

* update docs style

* :lipstick: unified Cascader selected style with Select

* docs: Add the changelog of 3.18.2 (#16666)

* Bump 3.18.2

* fix form typescript doc

* prettier md files

* Fix stylelint errors

* Add renovate.json

* Update renovate.json

* Refined translation of St.Exupery quote

including link to quote site

* fix horizontal divider style

* :up: support ESC to close drawer

* :white_check_mark: update snapshots

* :lipstick: improve code style of Drawer

* update drawer version

* update config-provider test

* fix shouldComponentUpdate

* Upload prop onRemove: fix action

https://github.com/react-component/upload/tree/d0cf0eecee3b31888791f8c57acddb575bd259d4#api

* Update dependency logrocket to v1

* :lipstick: chore some documents style

* :memo: update customize theme

* :up: rc-drawer 1.9.3

* :clapper: Add example for Select ``optionLabelProp` prop, #16709

* :white_check_mark: update snapshots

* :lipstick: fix emoji lint problem

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md

* New component Descriptions (#14645)

* add new component: DescriptionList

* add warning message

* docs: fix doc typo

* feat: implement the size attribute

* docs: fix doc typo

* refactor: use new name Descriptions

* test: snapshots updated

* feat: support react15

* style: fix code style warring

* style: better var name

* style: better code style

* style: merge css class

* feat: add responsive config

* fix: fix error title

* style: use @border-radius-base

* update snapshot

* feat: set default column

* test: add test script

* style: fix property defaultProps is useless error

* style: more robust code

* style: fix codereview warning

* style: fix review warning

* use responsiveObserveserve

* fix review warning

* bug: add childrenArray copy,prevent changes to incoming parameters

* fix dom error

* fix typo

* fix test

* don't use this

* snapshot updated

* prettier md

* remove descriptions md text

* new rendering method

* doc :add dot

* style: add right border

* Update index.en-US.md

add missing prop `showTitle` in documentation of Pagination

* adjust Carousel children change goto Logic (#16756)

* :memo: Add Programmatic Usage of antd colors

* update preview demo

* :bug: Fix Cascader displayRender not interactive

close #16738 and #10433

this bug had been fixed in bc4143f before, but it was broken by #12407

here we change another method to fix #12395

* Create FUNDING.yml

* :memo: Add opencollective link

* upload disabled remove

* feat: Steps support clickable (#16773)

* support clickable

* update snapshot

* update desc

* Locale (feat #16752): Added Latvian localization (#16780)

* update getPopupContainer (#16778)

since select/index.d.ts requires getPopupContainer={triggerNode => HTMLElement} but parentNode actually is not HTMLElement.

* Remove ancient prop types (#16705)

* Remove ancient Modal.propTypes.align and Progress.propTypes.size

* Remove linkRender and nameRender from Breadcrumb

* :bug: Fix Input parser type

close #15226

* feat: New calendar apis, headerRender method (#16535)

* added new calendar api, renderHeader now we can customize calendar header

* fixed typo for tests

* error handling for renderHeader

* covering all cases with tests

* fixed tests and change console error to warning

* fixed feedbacks and code optimization

* cleanup callback function arguments

* removed unused changes

* fixed tests

* added extra classes

* fixed some comments

* tying to fix test for remote

* tying to fix test for remote in my local machin it works fine

* tying to fix test for remote in my local machin it works fine

* tying to fix test for remote in my local machin it works fine

* updated test snapshots

* fixed comment

* fixed linting

* fixed some texts

* added header for CN and added argument types

* removed extra row

* Allow users to define where tooltips should appear on slider marks (#16641)

* feat: add disable style to upload component

* Fix the problem that the Slider's Tooltip is in the incorrect position when use modal	 (#16717)

* Fix incorrect position of tooltip when use slider

* Remove useless comment

* Reduce code

* Update

*  getTooltipPopupContainer default to body

* Public Slider's ref

* Add docs

* Update docs

* :lipstick: Correct Statistic font color (#16801)

close #15514

* docs: 3.19.0 changelog (#16796)

* add changelog

* add #16535

* update

* add missing changelog

* add #16801 changelog

* adjust description

* more desc

* more info

* change logo

* fix: mentions ts definition update (#16814)

* fix mentions ts definition

* adjust logic of Mentions

* fix: Tooltip not hidden when menu is in control mode (#16812)

* fix: Select ts define (#16817)

* fix: Descriptions warning should work as expect (#16819)

* fix warning

* add MockDate

* Fix typescript compile error (#16816)

* :bug: Fix typo name icons, add warning and update docs (#16818)

close #13007
close #16810

deps: ant-design/ant-design-icons#63

* docs: 3.19.1 change-log (#16820)

* update changelog

* add missing one

* :white_check_mark: Add test case for TransButton

* fix: Tabs card vertical support scroll (#16825)

* Update util.test.js

* fix(Transfer): set state on an unmounted component (#16822)

* chore: Add warning if use `inlineCollapsed` under Sider (#16826)

* typescript: adding forceSubmenuRender as MenuProps

* :lipstick: Optimize examples code style

* Update index.en-US.md

* :zap: export TypographyProps

close #15190

* add onChange prop type definition to Steps

* add onChange prop type definition to Steps (#16845)

* add semicolon

* fix: add webkitRelativePath (#16850)

* fix: fix type of RcFile

* fix: fix type of action in UploadProps

* Update xhr2 requirement from ^0.1.4 to ^0.2.0

Updates the requirements on [xhr2](https://github.com/pwnall/node-xhr2) to permit the latest version.
- [Release notes](https://github.com/pwnall/node-xhr2/releases)
- [Commits](https://github.com/pwnall/node-xhr2/compare/v0.1.4...0.2.0)

* Remove okButtonDisabled/cancelButtonDisabled never used prop defs

- Also remove them from the CHANGELOG because they were never actually
implemented, the prop was renamed to okButtonProps/cancelButtonProps
within PR #10955 but these prop defs were left behind and ended up
incorrectly included in the CHANGELOG.

* 修复Breadcrumb.tsx 中处理route.children 路径不对

<Menu.Item key={child.breadcrumbName || child.path}>
                {itemRender(child, params, routes, [...paths, this.getPath(child.path, params)])}
</Menu.Item>
itemRender(...args) 中路径应该到拼接当前child.path

* fix Breadcrumb.tsx

getPath() 参数赋默认值

* fix: use @error-color & @warning-color instead of @text-color-danger & @text-color-warning #16856

* fix Breadcrumb.tsx

对于子路径是否为空进行判断

* add antd pro 4.0 badge (#16894)

* Update ansi-styles requirement from ^3.2.1 to ^4.0.0

Updates the requirements on [ansi-styles](https://github.com/chalk/ansi-styles) to permit the latest version.
- [Release notes](https://github.com/chalk/ansi-styles/releases)
- [Commits](https://github.com/chalk/ansi-styles/compare/v3.2.1...v4.0.0)

* doc: changelog 3.19.2

* doc: changelog

* tweak: order changelog

* doc: changelog

* doc: changelog

* doc: changelog

* doc: changelog

* doc: format

* doc: changelog

* :memo: changelog

* :memo: changelog

* release: 3.19.2

* :bug: fixes #16871 Cascader - Space during search

* :wrench: Add packtracker

* Remove useless type

* fix: Transfer render Empty when customize without data (#16925)

* fix: Hide Spinner of InputNumber when type is number (#16926)

* fix: Hide Spinner of InputNumber when type is number

* Firefox not obedient

* fix: Breadcrumb validateDOMNesting warning (#16929)

* :bug: Fix Breadcrumb validateDOMNesting warning

```
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by Context.Consumer)
    in span (created by Context.Consumer)
    in a (created by Context.Consumer)
    in Trigger (created by Dropdown)
    in Dropdown (created by Context.Consumer)
    in Dropdown (created by Context.Consumer)
    in span (created by Context.Consumer)
    in BreadcrumbItem (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Breadcrumb (created by TestBreadcrumb)
    in TestBreadcrumb
```

* :white_check_mark: update snapshots

* Update Breadcrumb.tsx

* :bug: Fix abnormal scrollbar in Chrome

when rowSelection and title work together

close #16912

* :bug: Fix Table header extra scrollbar control

close #4637
close #14211

https://github.com/react-component/table/pull/333

* :white_check_mark: update snapshots

* :lipstick: Fix scrollbar border bottom

* :white_check_mark: update snapshots

* :memo: fix size toc overflow style

* :lipstick: use marginRight remind developer

* fix: test ci

* rebase

* fix: Table miss border-raidus in Firefox (#16957)

* Revert "Merge pull request #16174 from ant-design/fix-table-chrome"

This reverts commit 686c1fc34628b95354b3ed7158e27afeba8db84f, reversing
changes made to 924afc2706219d348e3356c568be2f8578d2247f.

* firefox only

* add comment

* :white_check_mark: update snapshots

* :up: upgrade all deps to latest version

* :up: fix for typescript@3.5

* :wrench: ignore other files for packtracker

* Suppress autoprefixer warning

* add new less var

* less variable should be extended

* :white_check_mark: Fix ci

* :memo: Add FAQ for DatePicker/RangePicker mode prop usage

* fix packtracker exclude_assets

* :bug: Fix Divider `orientation="center"` style

close #16987

* Add missing spanish translations

* Export TextProps and update english in error

* :white_check_mark: Fix test snapshots

* Fix typo

* Update colors.zh-CN.md

* docs: 3.19.3 change-log (#16998)

* chore: update package.json

* fix: Table with sort should reset to first page (#17020)

* sort reset pagination

* add test case

* :bug: Fix margin issue of PageHeader extra

close #17025

* :arrow_up: Update majo requirement from ^0.7.1 to ^0.8.0

Updates the requirements on [majo](https://github.com/egoist/majo) to permit the latest version.
- [Release notes](https://github.com/egoist/majo/releases)
- [Commits](https://github.com/egoist/majo/compare/v0.7.1...v0.8.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* :bug: Fix margin issue of PageHeader extra continually

* update calendar (#17038)

* :lipstick: Keep submenu selected style

* Update index.less

* Update default.less

* Update certain-category.md

* Update uncertain-category.md

* :white_check_mark: update snapshots

* :memo: Fix image in feedback spec documentation

* :white_check_mark: update snapshots

* use calc to fix tree line (#17055)

* fix: add link button to basic demo of button docs

* :lipstick: adjust bordered table header scrollbar style

* :lipstick: optimize bordered table header scrollbar style

continue after #17065

* Fix grammar on message documentation

* fix: remove margin for collapse arrow (#17009)

* remove margin for collapse arrow

* change translateY to -21px in collapse

* remove line-height to center arrow

* Fixing date formats for Arabic-Egypt locale

* Update index.zh-CN.md

add getPopupContainer props

* :bug: Fix Input not align with other components in Chrome

close #17082
---
 .github/FUNDING.yml                           |    8 +
 .github/PULL_REQUEST_TEMPLATE.md              |    8 +-
 .github/PULL_REQUEST_TEMPLATE/pr_cn.md        |    8 +-
 CHANGELOG.en-US.md                            |   90 +-
 CHANGELOG.zh-CN.md                            |   89 +-
 .../__snapshots__/index.test.js.snap          |    2 +
 components/_util/__tests__/util.test.js       |   56 +
 components/_util/responsiveObserve.ts         |  101 ++
 components/_util/wave.tsx                     |    2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |    1 +
 .../auto-complete/demo/certain-category.md    |   21 +-
 components/auto-complete/demo/options.md      |    2 +-
 .../auto-complete/demo/uncertain-category.md  |   18 +-
 components/auto-complete/index.zh-CN.md       |    1 +
 components/breadcrumb/Breadcrumb.tsx          |   36 +-
 components/breadcrumb/BreadcrumbItem.tsx      |    4 +-
 .../__snapshots__/Breadcrumb.test.js.snap     |   63 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  129 +-
 components/breadcrumb/demo/overlay.md         |   22 +-
 components/breadcrumb/index.zh-CN.md          |    2 +-
 .../__snapshots__/index.test.js.snap          |   11 +
 components/button/__tests__/index.test.js     |   11 +
 components/button/button.tsx                  |   27 +-
 components/button/demo/basic.md               |    4 +-
 components/calendar/Header.tsx                |   66 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 1069 +++++++++++++++++
 components/calendar/__tests__/index.test.js   |  106 ++
 components/calendar/demo/customize-header.md  |  107 ++
 components/calendar/index.en-US.md            |   31 +-
 components/calendar/index.tsx                 |    7 +-
 components/calendar/index.zh-CN.md            |   27 +-
 components/calendar/locale/lv_LV.tsx          |    2 +
 components/carousel/__tests__/index.test.js   |   28 +-
 components/carousel/index.tsx                 |    2 +-
 components/cascader/index.tsx                 |    3 +-
 components/cascader/style/index.less          |   12 +-
 components/checkbox/demo/group.md             |    8 +-
 components/checkbox/style/mixin.less          |    2 +-
 components/collapse/style/index.less          |    2 -
 components/comment/demo/editor.md             |    2 +-
 components/comment/style/index.less           |   10 +-
 .../__snapshots__/components.test.js.snap     |    6 +
 components/config-provider/index.tsx          |    4 +-
 components/config-provider/renderEmpty.tsx    |    1 +
 .../date-picker/demo/presetted-ranges.md      |    2 +-
 components/date-picker/index.en-US.md         |    4 +
 components/date-picker/index.zh-CN.md         |    4 +
 components/date-picker/locale/ar_EG.tsx       |    4 +
 components/date-picker/locale/lv_LV.tsx       |   19 +
 .../__tests__/__snapshots__/demo.test.js.snap |  611 ++++++++++
 .../__snapshots__/index.test.js.snap          |  101 ++
 .../descriptions/__tests__/demo.test.js       |    3 +
 .../descriptions/__tests__/index.test.js      |  112 ++
 components/descriptions/demo/basic.md         |   31 +
 components/descriptions/demo/border.md        |   50 +
 components/descriptions/demo/responsive.md    |   52 +
 components/descriptions/demo/size.md          |   68 ++
 components/descriptions/index.en-US.md        |   30 +
 components/descriptions/index.tsx             |  256 ++++
 components/descriptions/index.zh-CN.md        |   31 +
 components/descriptions/style/index.less      |  118 ++
 components/descriptions/style/index.tsx       |    2 +
 .../__tests__/__snapshots__/demo.test.js.snap |    2 +-
 components/divider/index.tsx                  |    4 +-
 components/divider/style/index.less           |    5 +-
 .../__snapshots__/Drawer.test.js.snap         |    6 +
 .../__snapshots__/DrawerEvent.test.js.snap    |    1 +
 components/drawer/index.tsx                   |   17 +-
 components/drawer/style/drawer.less           |    2 +
 components/dropdown/style/index.less          |    2 +-
 components/form/context.ts                    |    4 +-
 components/form/demo/style-check-debug.md     |    5 +-
 components/form/index.en-US.md                |   11 +-
 components/form/index.zh-CN.md                |   11 +-
 components/form/style/index.less              |    1 +
 components/grid/__tests__/index.test.js       |   43 +-
 components/grid/row.tsx                       |   74 +-
 components/icon/__tests__/index.test.js       |   18 +
 components/icon/utils.ts                      |   19 +-
 components/index.tsx                          |    4 +
 components/input-number/index.tsx             |    2 +-
 components/input-number/style/index.less      |    8 +-
 .../__tests__/__snapshots__/demo.test.js.snap |    5 +-
 components/input/demo/addon.md                |    2 +-
 components/input/demo/group.md                |    2 +-
 components/input/style/mixin.less             |    4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   32 +-
 components/layout/__tests__/index.test.js     |   23 +-
 .../layout/demo/custom-trigger-debug.md       |    2 +-
 components/layout/demo/side.md                |    2 +-
 components/layout/layout.tsx                  |    4 +-
 .../__snapshots__/index.test.js.snap          |   77 +-
 components/locale-provider/demo/all.md        |    4 +-
 components/locale-provider/es_ES.tsx          |   16 +
 components/locale-provider/lv_LV.tsx          |   42 +
 components/mention/index.en-US.md             |   14 +-
 components/mention/index.tsx                  |    7 +
 components/mention/index.zh-CN.md             |   14 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  154 +++
 components/mentions/__tests__/demo.test.js    |    3 +
 components/mentions/__tests__/index.test.js   |   87 ++
 components/mentions/demo/async.md             |   87 ++
 components/mentions/demo/basic.md             |   42 +
 components/mentions/demo/form.md              |   81 ++
 components/mentions/demo/placement.md         |   29 +
 components/mentions/demo/prefix.md            |   56 +
 components/mentions/demo/readonly.md          |   45 +
 components/mentions/index.en-US.md            |   54 +
 components/mentions/index.tsx                 |  165 +++
 components/mentions/index.zh-CN.md            |   64 +
 components/mentions/style/index.less          |  156 +++
 components/mentions/style/index.tsx           |    5 +
 components/menu/MenuItem.tsx                  |    8 +-
 components/menu/demo/horizontal.md            |   11 +-
 components/menu/demo/inline-collapsed.md      |    2 +-
 components/menu/demo/inline.md                |   11 +-
 components/menu/demo/sider-current.md         |    2 +-
 components/menu/demo/theme.md                 |    2 +-
 components/menu/demo/vertical.md              |   11 +-
 components/menu/index.tsx                     |   11 +-
 components/menu/style/index.less              |    4 +
 components/message/demo/other.md              |    6 +-
 components/modal/Modal.tsx                    |    3 -
 .../__snapshots__/Modal.test.js.snap          |    2 +
 components/page-header/demo/actions.md        |    2 +-
 components/page-header/index.tsx              |    2 +-
 components/page-header/style/index.less       |    8 +-
 components/pagination/index.en-US.md          |    1 +
 components/pagination/style/index.less        |   12 +-
 components/progress/progress.tsx              |    1 -
 components/radio/demo/radiobutton.md          |   41 +-
 components/radio/demo/radiogroup-more.md      |   14 +-
 components/radio/demo/radiogroup-options.md   |   12 +-
 components/radio/demo/radiogroup-with-name.md |   12 +-
 components/radio/demo/radiogroup.md           |    6 +-
 components/radio/demo/size.md                 |   39 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   85 ++
 .../select/demo/automatic-tokenization.md     |    2 +-
 components/select/demo/basic.md               |    2 +-
 components/select/demo/coordinate.md          |    2 +-
 .../select/demo/custom-dropdown-menu.md       |    2 +-
 components/select/demo/label-in-value.md      |    2 +-
 components/select/demo/multiple.md            |    6 +-
 components/select/demo/option-label-prop.md   |   61 +
 components/select/demo/search-box.md          |    2 +-
 components/select/demo/search.md              |    2 +-
 components/select/demo/select-users.md        |    2 +-
 components/select/demo/size.md                |    2 +-
 components/select/demo/suffix.md              |    2 +-
 components/select/demo/tags.md                |    2 +-
 components/select/index.en-US.md              |    8 +-
 components/select/index.tsx                   |    5 +-
 components/select/index.zh-CN.md              |   10 +-
 components/slider/index.en-US.md              |   36 +-
 components/slider/index.tsx                   |   13 +-
 components/slider/index.zh-CN.md              |   38 +-
 components/statistic/style/index.less         |    2 +
 .../__tests__/__snapshots__/demo.test.js.snap |  208 ++++
 components/steps/demo/clickable.md            |   55 +
 .../steps/demo/customized-progress-dot.md     |    2 +-
 components/steps/demo/error.md                |    2 +-
 components/steps/demo/icon.md                 |    2 +-
 components/steps/demo/progress-dot.md         |    2 +-
 components/steps/demo/simple.md               |    2 +-
 components/steps/demo/small-size.md           |    2 +-
 components/steps/demo/step-next.md            |    2 +-
 components/steps/demo/vertical-small.md       |    2 +-
 components/steps/demo/vertical.md             |    2 +-
 components/steps/index.en-US.md               |   21 +-
 components/steps/index.tsx                    |    1 +
 components/steps/index.zh-CN.md               |   21 +-
 components/steps/style/index.less             |   34 +
 components/style/color/colorPalette.less      |    2 +-
 components/style/themes/default.less          |   15 +-
 components/table/Table.tsx                    |   13 +-
 .../table/__tests__/Table.sorter.test.js      |   19 +
 .../__tests__/__snapshots__/demo.test.js.snap |    8 +-
 components/table/demo/grouping-columns.md     |    1 +
 components/table/index.en-US.md               |    2 +-
 components/table/style/index.less             |  284 +++--
 .../__tests__/__snapshots__/demo.test.js.snap |  271 ++++-
 components/tabs/demo/basic.md                 |    2 +-
 components/tabs/demo/card-top.md              |    2 +-
 components/tabs/demo/card.md                  |    2 +-
 components/tabs/demo/custom-add-trigger.md    |    2 +-
 components/tabs/demo/custom-tab-bar-node.md   |    2 +-
 components/tabs/demo/custom-tab-bar.md        |    2 +-
 components/tabs/demo/disabled.md              |    2 +-
 components/tabs/demo/editable-card.md         |    2 +-
 components/tabs/demo/extra.md                 |    2 +-
 components/tabs/demo/icon.md                  |    2 +-
 components/tabs/demo/nest.md                  |    6 +-
 components/tabs/demo/position.md              |    4 +-
 components/tabs/demo/slide.md                 |   40 +-
 components/tabs/style/card-style.less         |    2 +-
 .../__snapshots__/index.test.js.snap          |  970 ++++++++++++++-
 .../time-picker/__tests__/index.test.js       |    2 +-
 components/time-picker/locale/lv_LV.tsx       |    5 +
 components/time-picker/style/index.less       |   11 +
 components/transfer/list.tsx                  |   33 +-
 components/transfer/renderListBody.tsx        |    2 +-
 components/tree/Tree.tsx                      |    7 +-
 components/tree/demo/directory.md             |    3 +-
 components/tree/style/index.less              |    3 +-
 components/typography/Text.tsx                |    4 +-
 components/typography/index.tsx               |    2 +-
 components/typography/style/index.less        |    4 +-
 components/upload/Upload.tsx                  |    4 +-
 components/upload/demo/picture-card.md        |   17 +-
 components/upload/interface.tsx               |    7 +-
 components/upload/style/index.less            |    4 +
 docs/react/customize-theme.en-US.md           |    2 +-
 docs/react/customize-theme.zh-CN.md           |    2 +-
 docs/react/faq.en-US.md                       |   19 +-
 docs/react/faq.zh-CN.md                       |   19 +-
 docs/spec/colors.en-US.md                     |   31 +
 docs/spec/colors.zh-CN.md                     |   35 +-
 docs/spec/feedback.en-US.md                   |    2 +-
 docs/spec/feedback.zh-CN.md                   |    2 +-
 docs/spec/values.en-US.md                     |    2 +-
 package.json                                  |  184 +--
 renovate.json                                 |    6 +
 site/bisheng.config.js                        |    2 +
 site/theme/en-US.js                           |    2 +-
 site/theme/static/toc.less                    |    3 +-
 site/theme/template/Content/ComponentDoc.jsx  |   10 +-
 site/theme/template/IconDisplay/fields.ts     |    3 +
 site/theme/template/IconDisplay/index.tsx     |    2 +-
 site/theme/template/Layout/Header.jsx         |   12 +-
 site/theme/zh-CN.js                           |    2 +-
 tests/__snapshots__/index.test.js.snap        |    2 +
 webpack.config.js                             |   10 +
 232 files changed, 7231 insertions(+), 979 deletions(-)
 create mode 100644 .github/FUNDING.yml
 create mode 100644 components/_util/responsiveObserve.ts
 create mode 100644 components/calendar/demo/customize-header.md
 create mode 100644 components/calendar/locale/lv_LV.tsx
 create mode 100644 components/date-picker/locale/lv_LV.tsx
 create mode 100644 components/descriptions/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/descriptions/__tests__/__snapshots__/index.test.js.snap
 create mode 100644 components/descriptions/__tests__/demo.test.js
 create mode 100644 components/descriptions/__tests__/index.test.js
 create mode 100644 components/descriptions/demo/basic.md
 create mode 100644 components/descriptions/demo/border.md
 create mode 100644 components/descriptions/demo/responsive.md
 create mode 100644 components/descriptions/demo/size.md
 create mode 100644 components/descriptions/index.en-US.md
 create mode 100644 components/descriptions/index.tsx
 create mode 100644 components/descriptions/index.zh-CN.md
 create mode 100644 components/descriptions/style/index.less
 create mode 100644 components/descriptions/style/index.tsx
 create mode 100644 components/locale-provider/lv_LV.tsx
 create mode 100644 components/mentions/__tests__/__snapshots__/demo.test.js.snap
 create mode 100644 components/mentions/__tests__/demo.test.js
 create mode 100644 components/mentions/__tests__/index.test.js
 create mode 100644 components/mentions/demo/async.md
 create mode 100644 components/mentions/demo/basic.md
 create mode 100644 components/mentions/demo/form.md
 create mode 100644 components/mentions/demo/placement.md
 create mode 100644 components/mentions/demo/prefix.md
 create mode 100644 components/mentions/demo/readonly.md
 create mode 100644 components/mentions/index.en-US.md
 create mode 100644 components/mentions/index.tsx
 create mode 100644 components/mentions/index.zh-CN.md
 create mode 100644 components/mentions/style/index.less
 create mode 100644 components/mentions/style/index.tsx
 create mode 100644 components/select/demo/option-label-prop.md
 create mode 100644 components/steps/demo/clickable.md
 create mode 100644 components/time-picker/locale/lv_LV.tsx
 create mode 100644 renovate.json

diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 000000000000..ccf1611407ac
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,8 @@
+# These are supported funding model platforms
+
+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: ant-design
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+custom: # Replace with a single custom sponsorship URL
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 1f2584044244..2e0551a1e66e 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -43,10 +43,10 @@ Please makes sure that these form are filled before submitting your pull request
 Describe changes from userside, and list all potential break changes or other risks.
 --->
 
-| Language | Changelog |
-|---|---
-| 🇺🇸 English | |
-| 🇨🇳 Chinese | |
+| Language   | Changelog |
+| ---------- | --------- |
+| 🇺🇸 English |           |
+| 🇨🇳 Chinese |           |
 
 ### ☑️ Self Check before Merge
 
diff --git a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
index 20df3bc34381..697e91882fe9 100644
--- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
@@ -43,10 +43,10 @@
 > 从用户角度描述具体变化，以及可能的 breaking change 和其他风险？
 -->
 
-| 语言 | 更新描述 |
-|---|---
-| 🇺🇸 英文 | |
-| 🇨🇳 中文 | |
+| 语言    | 更新描述 |
+| ------- | -------- |
+| 🇺🇸 英文 |          |
+| 🇨🇳 中文 |          |
 
 - 中文（可选）:
 
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index f2cab1e935a9..6b32aa4938c3 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,95 @@ timeline: true
 
 ---
 
+## 3.19.3
+
+`2019-06-06`
+
+- 📝 Add FAQ for DatePicker/RangePicker with `mode` cannot be selected. [#16984](https://github.com/ant-design/ant-design/pull/16984)
+- 🐞 Fix Breadcrumb validateDOMNesting warning. [#16929](https://github.com/ant-design/ant-design/pull/16929)
+- 🐞 Fix Breadcrumb path error when `children` is selected. [#16885](https://github.com/ant-design/ant-design/pull/16885) [@haianweifeng](https://github.com/haianweifeng)
+- 🐞 Fix InputNumber with `number` type display native spinner. [#16926](https://github.com/ant-design/ant-design/pull/16926)
+- 🐞 Fix Transfer render Empty when customize without data. [#16925](https://github.com/ant-design/ant-design/pull/16925)
+- 🐞 **Fix Table header extra vertical scrollbar problem.** [#16950](https://github.com/ant-design/ant-design/pull/16950)
+- 🐞 Fix Table miss `border-radius` in Firefox. [#16957](https://github.com/ant-design/ant-design/pull/16957)
+- 🐞 Fix Table error when `rowSelection.getCheckboxProps()` has no return value. [#15224](https://github.com/ant-design/ant-design/pull/15224)
+- 🐞 Fix Table abnormal scrollbar in Chrome when using `title` and `rowSelection`.
+ [#16934](https://github.com/ant-design/ant-design/pull/16934)
+- 🐞 Fix Divider `orientation="center"` style. [#16988](https://github.com/ant-design/ant-design/pull/16988)
+- 🐞 Fix Cascader error when type space. [#16918](https://github.com/ant-design/ant-design/pull/16918) [@Durisvk](https://github.com/Durisvk)
+- 🐞 Fix missing spanish translations. [#17002](https://github.com/ant-design/ant-design/pull/17002) [@morellan](https://github.com/morellan)
+- TypeScript
+  - 🐞 Fix Upload `RcFile` definition. [#16851](https://github.com/ant-design/ant-design/pull/16851)
+  - ⚡️ Export `TextProps` type in Typography. [#17003](https://github.com/ant-design/ant-design/pull/17003) [@Jarvis1010](https://github.com/Jarvis1010)
+
+## 3.19.2
+
+`2019-06-01`
+
+- 🐞 Fix Tabs vertical card mode not scrollable. [#16825](https://github.com/ant-design/ant-design/pull/16825)
+- 🐞 Fix Transfer warn `setStart` on an unmounted component. [#16822](https://github.com/ant-design/ant-design/pull/16822) [@shiningjason](https://github.com/shiningjason)
+- 💄 Using less variables `@error-color`, `@warning-color` instead of `@text-color-danger`, `@text-color-warning`. [#16890](https://github.com/ant-design/ant-design/pull/16890) [@MrHeer](https://github.com/MrHeer)
+- 💄 Add warning if Menu use `inlineCollapsed` under Sider. [#16826](https://github.com/ant-design/ant-design/pull/16826)
+- TypeScript
+  - ⚡️ Add `forceSubmenuRender` into MenuProps. [#16827](https://github.com/ant-design/ant-design/pull/16827)
+  - ⚡️ Export `TypographyProps` type. [#16835](https://github.com/ant-design/ant-design/pull/16835)
+  - ⚡️ Add `onChange` prop type definition to Steps. [#16845](https://github.com/ant-design/ant-design/pull/16845) [@JonathanLee-LX](https://github.com/JonathanLee-LX)
+  - ⚡️ Add `webkitRelativePath` prop type definition to Upload. [#16850](https://github.com/ant-design/ant-design/pull/16850) [@DiamondYuan](https://github.com/DiamondYuan)
+
+## 3.19.1
+
+`2019-05-27`
+
+- 🐞 Fix Tooltip not hidden when Menu collapsed in control mode. [#16812](https://github.com/ant-design/ant-design/pull/16812)
+- 🐞 Fix Description warning with column count not correct. [#16819](https://github.com/ant-design/ant-design/pull/16819)
+- 🐞 Correct typo icon names `canlendar` / `interation` to `calendar` / `interaction`. [#16818](https://github.com/ant-design/ant-design/pull/16818)
+- TypeScript
+  - ⚡️ Fix Mentions definition. [#16814](https://github.com/ant-design/ant-design/pull/16814)
+  - ⚡️ Update Select `onSelect` & `onDeselect` prop definition. [#16817](https://github.com/ant-design/ant-design/pull/16817)
+
+## 3.19.0
+
+`2019-05-26`
+
+- New Components:
+  - 🔥🔥🔥 [Mentions](https://ant.design/components/mentions-cn/) Provides Mentions component and origin Mention marked as deprecated.
+  - 🔥🔥🔥 [Descriptions](https://ant.design/components/descriptions-cn/) Display multiple read-only fields in groups.
+- 🇱🇻 Add Latvian localization support. [#16780](https://github.com/ant-design/ant-design/pull/16780) [@kirbo](https://github.com/kirbo)
+- 🌟 Drawer support close by press `ESC`. [#16694](https://github.com/ant-design/ant-design/pull/16694)
+- 🌟 Steps support click to switch. [#16773](https://github.com/ant-design/ant-design/pull/16773)
+- 🌟 Calendar support `headerRender` to customize header。[#16535](https://github.com/ant-design/ant-design/pull/16535) [@abgaryanharutyun](https://github.com/abgaryanharutyun)
+- 🌟 Slider support `tooltipPlacement` to set tooltip position. [#16641](https://github.com/ant-design/ant-design/pull/16641) [@cmaster11](https://github.com/cmaster11)
+- 🌟 Slider support `getTooltipPopupContainer` to customize tooltip container. [#16717](https://github.com/ant-design/ant-design/pull/16717)
+- 🐞 Fix PageHeader horizontal divider style. [#16684](https://github.com/ant-design/ant-design/pull/16684)
+- 🐞 Fix Carousel `initialSlide` not work when `children` count change. [#16756](https://github.com/ant-design/ant-design/pull/16756)
+- 🐞 Fix Cascader `displayRender` not interactive. [#16782](https://github.com/ant-design/ant-design/pull/16782)
+- 🐞 Fix Upload list still can be removed when `disabled`. [#16786](https://github.com/ant-design/ant-design/pull/16786)
+- 💄 Update Upload `disabled` cursor style. [#16799](https://github.com/ant-design/ant-design/pull/16799) [@attacking](https://github.com/attacking)
+- 💄 Correct Statistic font color. [#16801](https://github.com/ant-design/ant-design/pull/16801)
+- TypeScript
+  - ⚡️ Update Upload `action` prop definition. [#16716](https://github.com/ant-design/ant-design/pull/16716) [@christophehurpeau](https://github.com/christophehurpeau)
+  - ⚡️ Update Upload `onRemove` prop definition. [#16570](https://github.com/ant-design/ant-design/pull/16570) [@christophehurpeau](https://github.com/christophehurpeau)
+  - ⚡️ Update Select `getPopupContainer` prop definition. [#16778](https://github.com/ant-design/ant-design/pull/16778) [@chj-damon](https://github.com/chj-damon)
+  - ⚡️ Update InputNumber `parse` prop definition. [#16797](https://github.com/ant-design/ant-design/pull/16797)
+  - ⚡️ Remove useless props definition. [#16705](https://github.com/ant-design/ant-design/pull/16705) [@sirlantis](https://github.com/sirlantis)
+
+## 3.18.2
+
+`2019-05-20`
+
+- 🐞 Fix space missing for Button with mixed content. [#15342](https://github.com/ant-design/ant-design/issues/15342)
+- 🐞 Fix active status missing for Carousel when `children` is changed. [#16583](https://github.com/ant-design/ant-design/issues/16583)
+- 🐞 Fix panel not close when DatePicker is `blur` by upgrading `rc-calendar` requirement to version `9.13.3`. [#16588](https://github.com/ant-design/ant-design/issues/16588)
+- 🐞 Fix style disorder for Form.Item with `help` prop and `margin-bottom` is negative. [#16584](https://github.com/ant-design/ant-design/pull/16584) [@sbusch](https://github.com/sbusch)
+- 🐞 Fix Spin not align when set `font-size` style. [#15206](https://github.com/ant-design/ant-design/issues/15206)
+- 🐞 Fix `selectedRows` missing when there is `childrenColumnName` in Table. [#16614](https://github.com/ant-design/ant-design/issues/16614)
+- TypeScript
+  - ⚡️ Improve the definition of `children` prop for Breadcrumb. [#16550](https://github.com/ant-design/ant-design/pull/16550) [@Gin-X](https://github.com/Gin-X)
+  - ⚡️ Improve the definition of `onFieldsChange` params for Form. [#16577](https://github.com/ant-design/ant-design/pull/16577) [@SylvanasGone](https://github.com/SylvanasGone)
+  - ⚡️ Improve the definition of `dataSource` and `renderItem` for List. [#16587](https://github.com/ant-design/ant-design/issues/16587)
+  - ⚡️ Improve the definition of `onDragEnter` params for Tree. [#16638](https://github.com/ant-design/ant-design/pull/16638) [@eruca](https://github.com/eruca)
+  - ⚡️ Improve the definition of `event` for Tree。[#16624](https://github.com/ant-design/ant-design/pull/16624) [@ztplz](https://github.com/ztplz)
+
 ## 3.18.1
 
 `2019-05-13`
@@ -1169,7 +1258,6 @@ Component Fixes / Enhancements:
 - 🐞 Cascader adds `fieldNames` and discards the misspelled `filedNames`. [#10896](https://github.com/ant-design/ant-design/issues/10896)
 - 🐞 Fix Timeline dot not working with Tooltip. [0e3b67e](https://github.com/ant-design/ant-design/commit/0e3b67e9999d867cc304f3be61a8a042a2ab92ee)
 - 🐞 Fix border radius when avatar has custom size. [e1e6523](https://github.com/ant-design/ant-design/commit/e1e6523452286ba56f20b73abad762a58ea7d7bc)
-- 🌟 Add `okButtonDisabled` and `cancelButtonDisabled` props to disable ok button and cancel button. [#10955](https://github.com/ant-design/ant-design/pull/10955)
 
 ## 3.6.6
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 9b29408b81f2..e31721aeb7bb 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,94 @@ timeline: true
 
 ---
 
+## 3.19.3
+
+`2019-06-06`
+
+- 📝 增加 DatePicker/RangePicker 指定 `mode` 后无法选择的文档说明。[#16984](https://github.com/ant-design/ant-design/pull/16984)
+- 🐞 修复 Breadcrumb 的 `validateDOMNesting` 警告信息。[#16929](https://github.com/ant-design/ant-design/pull/16929)
+- 🐞 修复 Breadcrumb 选中子路由时浏览器路径问题。[#16885](https://github.com/ant-design/ant-design/pull/16885) [@haianweifeng](https://github.com/haianweifeng)
+- 🐞 修复 InputNumber 设置 `number` 类型时会展示原生按钮的问题。[#16926](https://github.com/ant-design/ant-design/pull/16926)
+- 🐞 修复 Transfer 在自定义列表为空时展示 Empty 样式。[#16925](https://github.com/ant-design/ant-design/pull/16925)
+- 🐞 **修复 Table 头部多余的垂直滚动条样式。**[#16950](https://github.com/ant-design/ant-design/pull/16950)
+- 🐞 修复 Table 的 `rowSelection.getCheckboxProps()` 在没有返回值时报错的问题。[#15224](https://github.com/ant-design/ant-design/pull/15224)
+- 🐞 修复 Firefox 的 Table 丢失 `border-radius` 样式问题。[#16957](https://github.com/ant-design/ant-design/pull/16957)
+- 🐞 修复 Table 当 `title` 和 `rowSelection` 同时指定时在 Chrome 下滚动条异常的问题。[#16934](https://github.com/ant-design/ant-design/pull/16934)
+- 🐞 修复 Divider `orientation="center"` 时样式错位的问题。[#16988](https://github.com/ant-design/ant-design/pull/16988)
+- 🐞 修复 Cascader 搜索时不支持空格输入的问题。[#16918](https://github.com/ant-design/ant-design/pull/16918) [@Durisvk](https://github.com/Durisvk)
+- 🐞 修复部分组件的西班牙语言翻译。[#17002](https://github.com/ant-design/ant-design/pull/17002) [@morellan](https://github.com/morellan)
+- TypeScript
+  - 🐞 修复 Upload 的 `RcFile` 类型定义。[#16851](https://github.com/ant-design/ant-design/pull/16851)
+  - ⚡️ 导出 Typography 中 `TextProps` 的类型定义。[#17003](https://github.com/ant-design/ant-design/pull/17003) [@Jarvis1010](https://github.com/Jarvis1010)
+
+## 3.19.2
+
+`2019-06-01`
+
+- 🐞 修复 Tabs 在垂直卡片模式下标签不能滚动的问题。[#16825](https://github.com/ant-design/ant-design/pull/16825)
+- 🐞 修复 Transfer 组件在 unmount 时 `setState` 警告。[#16822](https://github.com/ant-design/ant-design/pull/16822) [@shiningjason](https://github.com/shiningjason)
+- 💄 使用 Less 变量 `@error-color`、`@warning-color` 代替 `@text-color-danger`、`@text-color-warning`。[#16890](https://github.com/ant-design/ant-design/pull/16890) [@MrHeer](https://github.com/MrHeer)
+- 💄 增加在 Sider 内 Menu 使用 `inlineCollapsed` 时的提示信息。[#16826](https://github.com/ant-design/ant-design/pull/16826)
+- TypeScript
+  - ⚡️ 增加 Menu 中 `forceSubMenuRender` 类型定义。[#16827](https://github.com/ant-design/ant-design/pull/16827)
+  - ⚡️ 导出 Typography 类型定义。[#16835](https://github.com/ant-design/ant-design/pull/16835)
+  - ⚡️ 增加 Steps 中的 `onChange` 类型定义。[#16845](https://github.com/ant-design/ant-design/pull/16845) [@JonathanLee-LX](https://github.com/JonathanLee-LX)
+  - ⚡️ 增加 Upload 中 `webkitRelativePath` 类型定义。[#16850](https://github.com/ant-design/ant-design/pull/16850) [@DiamondYuan](https://github.com/DiamondYuan)
+
+## 3.19.1
+
+`2019-05-27`
+
+- 🐞 修复 Menu 在受控模式下收起 Tooltip 不消失的问题。[#16812](https://github.com/ant-design/ant-design/pull/16812)
+- 🐞 修复 Descriptions 排列警告信息逻辑错误的问题。[#16819](https://github.com/ant-design/ant-design/pull/16819)
+- 🐞 修复图标 `canlendar` 和 `interation` 为正确的拼写 `calendar` 和 `interaction`。[#16818](https://github.com/ant-design/ant-design/pull/16818)
+- TypeScript
+  - ⚡️ 修复 Mentions 定义。[#16814](https://github.com/ant-design/ant-design/pull/16814)
+  - ⚡️ 完善 Select 中 `onSelect` 和 `onDeselect` 属性的定义。[#16817](https://github.com/ant-design/ant-design/pull/16817)
+
+## 3.19.0
+
+`2019-05-26`
+
+- 本月新增组件：
+  - 🔥🔥🔥 [Mentions](https://ant.design/components/mentions-cn/) 新增提及组件并废弃原有 Mention 组件。
+  - 🔥🔥🔥 [Descriptions](https://ant.design/components/descriptions-cn/) 成组展示多个只读字段。
+- 🇱🇻 新增拉脱维亚语支持。[#16780](https://github.com/ant-design/ant-design/pull/16780) [@kirbo](https://github.com/kirbo)
+- 🌟 Drawer 支持 `ESC` 关闭。[#16694](https://github.com/ant-design/ant-design/pull/16694)
+- 🌟 Steps 支持点击切换功能。[#16773](https://github.com/ant-design/ant-design/pull/16773)
+- 🌟 Calendar 支持 `headerRender` 以自定义头部。[#16535](https://github.com/ant-design/ant-design/pull/16535) [@abgaryanharutyun](https://github.com/abgaryanharutyun)
+- 🌟 Slider 支持 `tooltipPlacement` 以定义提示所在位置。[#16641](https://github.com/ant-design/ant-design/pull/16641) [@cmaster11](https://github.com/cmaster11)
+- 🌟 Slider 支持 `getTooltipPopupContainer` 以允许自定义提示所在容器。[#16717](https://github.com/ant-design/ant-design/pull/16717)
+- 🐞 修复 PageHeader 中水平分割线样式问题。[#16684](https://github.com/ant-design/ant-design/pull/16684)
+- 🐞 修复 Carousel `initialSlide` 在 `children` 数量变化时无效的问题。[#16756](https://github.com/ant-design/ant-design/pull/16756)
+- 🐞 修复 Cascader 自定义渲染时元素无法交互的问题。[#16782](https://github.com/ant-design/ant-design/pull/16782)
+- 🐞 修复 Upload 列表在 `disabled` 时仍然可以移除的问题。[#16786](https://github.com/ant-design/ant-design/pull/16786)
+- 💄 增加 Upload `disabled` 状态下鼠标样式。[#16799](https://github.com/ant-design/ant-design/pull/16799) [@attacking](https://github.com/attacking)
+- 💄 修正 Statistic 的字体颜色。[#16801](https://github.com/ant-design/ant-design/pull/16801)
+- TypeScript
+  - ⚡️ 完善 Upload 中 `action` 属性的定义。[#16716](https://github.com/ant-design/ant-design/pull/16716) [@christophehurpeau](https://github.com/christophehurpeau)
+  - ⚡️ 完善 Upload 中 `onRemove` 属性的定义。[#16570](https://github.com/ant-design/ant-design/pull/16570) [@christophehurpeau](https://github.com/christophehurpeau)
+  - ⚡️ 完善 Select 中 `getPopupContainer` 属性的定义。[#16778](https://github.com/ant-design/ant-design/pull/16778) [@chj-damon](https://github.com/chj-damon)
+  - ⚡️ 完善 InputNumber 中 `parser` 属性的定义。[#16797](https://github.com/ant-design/ant-design/pull/16797)
+  - ⚡️ 移除已经失效的属性定义。[#16705](https://github.com/ant-design/ant-design/pull/16705) [@sirlantis](https://github.com/sirlantis)
+
+## 3.18.2
+
+`2019-05-20`
+
+- 🐞 修复 Button 组件中插入文本时空格丢失的问题。[#15342](https://github.com/ant-design/ant-design/issues/15342)
+- 🐞 修复 Carousel 组件的 `children` 数量变化时，面板指示点的选中状态不正常的问题。[#16583](https://github.com/ant-design/ant-design/issues/16583)
+- 🐞 升级 `rc-calendar` 依赖到 `9.13.3` 版本，以修复 DatePicker 组件在失去焦点时面板不会关闭的问题。[#16588](https://github.com/ant-design/ant-design/issues/16588)
+- 🐞 修复 Form.Item 组件带有 `help` 信息，并且 `margin-bottom` 为负数时，导致之后的元素样式错乱的问题。[#16584](https://github.com/ant-design/ant-design/pull/16584) [@sbusch](https://github.com/sbusch)
+- 🐞 修复 Spin 组件在设置 `font-size` 样式时没有水平居中的问题。[#15206](https://github.com/ant-design/ant-design/issues/15206)
+- 🐞 修复 Table 组件指定 `childrenColumnName` 时，`selectedRows` 参数为空的问题。[#16614](https://github.com/ant-design/ant-design/issues/16614)
+- TypeScript
+  - ⚡️ 完善 Breadcrumb 中 `children` 属性的定义。[#16550](https://github.com/ant-design/ant-design/pull/16550) [@Gin-X](https://github.com/Gin-X)
+  - ⚡️ 完善 Form 中 `onFieldsChange` 函数的参数定义。[#16577](https://github.com/ant-design/ant-design/pull/16577) [@SylvanasGone](https://github.com/SylvanasGone)
+  - ⚡️ 完善 List 中 `dataSource` 和 `renderItem` 属性的定义。[#16587](https://github.com/ant-design/ant-design/issues/16587)
+  - ⚡️ 完善 Tree 中 `onDragEnter` 函数的参数定义。[#16638](https://github.com/ant-design/ant-design/pull/16638) [@eruca](https://github.com/eruca)
+  - ⚡️ 完善 Tree 中 event 属性的定义。[#16624](https://github.com/ant-design/ant-design/pull/16624) [@ztplz](https://github.com/ztplz)
+
 ## 3.18.1
 
 `2019-05-13`
@@ -1168,7 +1256,6 @@ timeline: true
 - Tree 组件升级 `rc-tree` 到 `1.12.0`
   - 🌟 新增 `loadedKeys` 属性，用于设置已经加载的节点，需要配合 `loadData` 使用。[#10666](https://github.com/ant-design/ant-design/issues/10666)
   - 🌟 新增 `onLoad` 属性，作为节点加载完毕时的回调函数。[c488aca](https://github.com/ant-design/ant-design/commit/c488aca05e11d942d77c1b6bff45d12bbb1a2bd6)
-- 🌟 增加 `okButtonDisabled` and `cancelButtonDisabled` 属性用于禁用确定和取消按钮。[#10955](https://github.com/ant-design/ant-design/pull/10955)
 - 🌟 Cascader 新增 fieldNames 并废弃拼写错误的 filedNames。[#10896](https://github.com/ant-design/ant-design/issues/10896)
 - 🐞 修复时间轴不能与`Tooltip`一起使用的问题。[0e3b67e](https://github.com/ant-design/ant-design/commit/0e3b67e9999d867cc304f3be61a8a042a2ab92ee)
 - 🐞 修复当 Avatar 自定义大小时，圆角不改变的问题。[e1e6523](https://github.com/ant-design/ant-design/commit/e1e6523452286ba56f20b73abad762a58ea7d7bc)
diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap
index 6056d0fc2848..079920cab0d6 100644
--- a/components/__tests__/__snapshots__/index.test.js.snap
+++ b/components/__tests__/__snapshots__/index.test.js.snap
@@ -21,6 +21,7 @@ Array [
   "Comment",
   "ConfigProvider",
   "DatePicker",
+  "Descriptions",
   "Divider",
   "Dropdown",
   "Drawer",
@@ -34,6 +35,7 @@ Array [
   "LocaleProvider",
   "message",
   "Menu",
+  "Mentions",
   "Modal",
   "Statistic",
   "notification",
diff --git a/components/_util/__tests__/util.test.js b/components/_util/__tests__/util.test.js
index c56e320c4eaf..42a2cb32508c 100644
--- a/components/_util/__tests__/util.test.js
+++ b/components/_util/__tests__/util.test.js
@@ -1,11 +1,14 @@
 import raf from 'raf';
 import React from 'react';
 import { mount } from 'enzyme';
+import KeyCode from 'rc-util/lib/KeyCode';
 import delayRaf from '../raf';
 import throttleByAnimationFrame from '../throttleByAnimationFrame';
 import getDataOrAriaProps from '../getDataOrAriaProps';
 import triggerEvent from '../triggerEvent';
 import Wave from '../wave';
+import TransButton from '../transButton';
+import openAnimation from '../openAnimation';
 
 describe('Test utils function', () => {
   beforeAll(() => {
@@ -163,5 +166,58 @@ describe('Test utils function', () => {
       ).instance();
       expect(wrapper.bindAnimationEvent()).toBe(undefined);
     });
+
+    it('should not throw when click it', () => {
+      expect(() => {
+        const wrapper = mount(<Wave><div /></Wave>);
+        wrapper.simulate('click');
+      }).not.toThrow();
+    });
+
+    it('should not throw when no children', () => {
+      if (process.env.REACT === '15') {
+        return;
+      }
+      expect(() => mount(<Wave />)).not.toThrow();
+    });
+  });
+
+  describe('TransButton', () => {
+    it('can be focus/blur', () => {
+      const wrapper = mount(
+        <TransButton>TransButton</TransButton>,
+      );
+      expect(typeof wrapper.instance().focus).toBe('function');
+      expect(typeof wrapper.instance().blur).toBe('function');
+    });
+
+    it('should trigger onClick when press enter', () => {
+      const onClick = jest.fn();
+      const preventDefault = jest.fn();
+      const wrapper = mount(
+        <TransButton onClick={onClick}>TransButton</TransButton>,
+      );
+      wrapper.simulate('keyUp', { keyCode: KeyCode.ENTER });
+      expect(onClick).toHaveBeenCalled();
+      wrapper.simulate('keyDown', { keyCode: KeyCode.ENTER, preventDefault });
+      expect(preventDefault).toHaveBeenCalled();
+    });
+  });
+
+  describe('openAnimation', () => {
+    it('should support openAnimation', () => {
+      const done = jest.fn();
+      const domNode = document.createElement('div');
+      expect(typeof openAnimation.enter).toBe('function');
+      expect(typeof openAnimation.leave).toBe('function');
+      expect(typeof openAnimation.appear).toBe('function');
+      const appear = openAnimation.appear(domNode, done);
+      const enter = openAnimation.enter(domNode, done);
+      const leave = openAnimation.leave(domNode, done);
+      expect(typeof appear.stop).toBe('function');
+      expect(typeof enter.stop).toBe('function');
+      expect(typeof leave.stop).toBe('function');
+      expect(done).toHaveBeenCalled();
+    });
   });
 });
diff --git a/components/_util/responsiveObserve.ts b/components/_util/responsiveObserve.ts
new file mode 100644
index 000000000000..6ee73cddd205
--- /dev/null
+++ b/components/_util/responsiveObserve.ts
@@ -0,0 +1,101 @@
+// matchMedia polyfill for
+// https://github.com/WickyNilliams/enquire.js/issues/82
+let enquire: any;
+
+if (typeof window !== 'undefined') {
+  const matchMediaPolyfill = (mediaQuery: string) => {
+    return {
+      media: mediaQuery,
+      matches: false,
+      addListener() {},
+      removeListener() {},
+    };
+  };
+  window.matchMedia = window.matchMedia || matchMediaPolyfill;
+  enquire = require('enquire.js');
+}
+
+export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type BreakpointMap = Partial<Record<Breakpoint, string>>;
+
+export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+
+export const responsiveMap: BreakpointMap = {
+  xs: '(max-width: 575px)',
+  sm: '(min-width: 576px)',
+  md: '(min-width: 768px)',
+  lg: '(min-width: 992px)',
+  xl: '(min-width: 1200px)',
+  xxl: '(min-width: 1600px)',
+};
+
+type SubscribeFunc = (screens: BreakpointMap) => void;
+
+let subscribers: Array<{
+  token: string;
+  func: SubscribeFunc;
+}> = [];
+let subUid = -1;
+let screens = {};
+
+const responsiveObserve = {
+  dispatch(pointMap: BreakpointMap) {
+    screens = pointMap;
+    if (subscribers.length < 1) {
+      return false;
+    }
+
+    subscribers.forEach(item => {
+      item.func(screens);
+    });
+
+    return true;
+  },
+  subscribe(func: SubscribeFunc) {
+    if (subscribers.length === 0) {
+      this.register();
+    }
+    const token = (++subUid).toString();
+    subscribers.push({
+      token: token,
+      func: func,
+    });
+    func(screens);
+    return token;
+  },
+  unsubscribe(token: string) {
+    subscribers = subscribers.filter(item => item.token !== token);
+    if (subscribers.length === 0) {
+      this.unregister();
+    }
+  },
+  unregister() {
+    Object.keys(responsiveMap).map((screen: Breakpoint) =>
+      enquire.unregister(responsiveMap[screen]),
+    );
+  },
+  register() {
+    Object.keys(responsiveMap).map((screen: Breakpoint) =>
+      enquire.register(responsiveMap[screen], {
+        match: () => {
+          const pointMap = {
+            ...screens,
+            [screen]: true,
+          };
+          this.dispatch(pointMap);
+        },
+        unmatch: () => {
+          const pointMap = {
+            ...screens,
+            [screen]: false,
+          };
+          this.dispatch(pointMap);
+        },
+        // Keep a empty destory to avoid triggering unmatch when unregister
+        destroy() {},
+      }),
+    );
+  },
+};
+
+export default responsiveObserve;
diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index abaf86e42382..2185455ba6f2 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -158,7 +158,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
 
   componentDidMount() {
     const node = findDOMNode(this) as HTMLElement;
-    if (node.nodeType !== 1) {
+    if (!node || node.nodeType !== 1) {
       return;
     }
     this.instance = this.bindAnimationEvent(node);
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index f30f2613f62a..1069a8781915 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -443,6 +443,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
                 >
                   <button
                     class="ant-btn search-btn ant-btn-primary ant-btn-lg"
+                    style="margin-right:-12px"
                     type="button"
                   >
                     <i
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index 94602c991c90..f4751006a8dd 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -16,12 +16,11 @@ Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spe
 ```jsx
 import { Icon, Input, AutoComplete } from 'antd';
 
-const Option = AutoComplete.Option;
-const OptGroup = AutoComplete.OptGroup;
+const { Option, OptGroup } = AutoComplete;
 
 const dataSource = [
   {
-    title: '话题',
+    title: 'Libraries',
     children: [
       {
         title: 'AntDesign',
@@ -34,23 +33,23 @@ const dataSource = [
     ],
   },
   {
-    title: '问题',
+    title: 'Solutions',
     children: [
       {
-        title: 'AntDesign UI 有多好',
+        title: 'AntDesign UI',
         count: 60100,
       },
       {
-        title: 'AntDesign 是啥',
+        title: 'AntDesign',
         count: 30010,
       },
     ],
   },
   {
-    title: '文章',
+    title: 'Articles',
     children: [
       {
-        title: 'AntDesign 是一个设计语言',
+        title: 'AntDesign design language',
         count: 100000,
       },
     ],
@@ -67,7 +66,7 @@ function renderTitle(title) {
         target="_blank"
         rel="noopener noreferrer"
       >
-        更多
+        more
       </a>
     </span>
   );
@@ -79,7 +78,7 @@ const options = dataSource
       {group.children.map(opt => (
         <Option key={opt.title} value={opt.title}>
           {opt.title}
-          <span className="certain-search-item-count">{opt.count} 人 关注</span>
+          <span className="certain-search-item-count">{opt.count} people</span>
         </Option>
       ))}
     </OptGroup>
@@ -87,7 +86,7 @@ const options = dataSource
   .concat([
     <Option disabled key="all" className="show-all">
       <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
-        查看所有结果
+        View all results
       </a>
     </Option>,
   ]);
diff --git a/components/auto-complete/demo/options.md b/components/auto-complete/demo/options.md
index 604d8b1c08d8..a89e5b9c5728 100644
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@@ -16,7 +16,7 @@ You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of u
 ```jsx
 import { AutoComplete } from 'antd';
 
-const Option = AutoComplete.Option;
+const { Option } = AutoComplete;
 
 class Complete extends React.Component {
   state = {
diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md
index 947fcc44c278..dec42e512816 100644
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -16,7 +16,7 @@ Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/s
 ```jsx
 import { Icon, Button, Input, AutoComplete } from 'antd';
 
-const Option = AutoComplete.Option;
+const { Option } = AutoComplete;
 
 function onSelect(value) {
   console.log('onSelect', value);
@@ -42,7 +42,7 @@ function renderOption(item) {
     <Option key={item.category} text={item.category}>
       <div className="global-search-item">
         <span className="global-search-item-desc">
-          {item.query} 在
+          Found {item.query} on
           <a
             href={`https://s.taobao.com/search?q=${item.query}`}
             target="_blank"
@@ -50,9 +50,8 @@ function renderOption(item) {
           >
             {item.category}
           </a>
-          区块中
         </span>
-        <span className="global-search-item-count">约 {item.count} 个结果</span>
+        <span className="global-search-item-count">{item.count} results</span>
       </div>
     </Option>
   );
@@ -85,7 +84,12 @@ class Complete extends React.Component {
         >
           <Input
             suffix={
-              <Button className="search-btn" size="large" type="primary">
+              <Button
+                className="search-btn"
+                style={{ marginRight: -12 }}
+                size="large"
+                type="primary"
+              >
                 <Icon type="search" />
               </Button>
             }
@@ -116,10 +120,6 @@ ReactDOM.render(<Complete />, mountNode);
   padding-right: 62px;
 }
 
-.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
-  right: 0;
-}
-
 .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index 70e4a9f8cb61..6d2edb45b004 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -31,6 +31,7 @@ const dataSource = ['12345', '23456', '34567'];
 | defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |
 | disabled | 是否禁用 | boolean | false |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
+| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
 | placeholder | 输入框提示 | string | - |
 | value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | 无 |
diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index 3b114a90d9ef..24d3066e263f 100755
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -59,8 +59,6 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
     separator: PropTypes.node,
     routes: PropTypes.array,
     params: PropTypes.object,
-    linkRender: PropTypes.func,
-    nameRender: PropTypes.func,
   };
 
   componentDidMount() {
@@ -72,6 +70,24 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         'see: https://u.ant.design/item-render.',
     );
   }
+
+  getPath = (path: string, params: any) => {
+     path = (path || '').replace(/^\//, '');
+     Object.keys(params).forEach(key => {
+         path = path.replace(`:${key}`, params[key]);
+     });
+     return path;
+  }
+
+  addChildPath = (paths: string[], childPath: string = '', params: any) => {
+    const originalPaths = [...paths];
+    const path = this.getPath(childPath, params);
+    if (path) {
+       originalPaths.push(path);
+    }
+    return originalPaths;
+ }
+
   genForRoutes = ({
     routes = [],
     params = {},
@@ -80,11 +96,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
   }: BreadcrumbProps) => {
     const paths: string[] = [];
     return routes.map(route => {
-      route.path = route.path || '';
-      let path = route.path.replace(/^\//, '');
-      Object.keys(params).forEach(key => {
-        path = path.replace(`:${key}`, params[key]);
-      });
+      const path = this.getPath(route.path, params);
 
       if (path) {
         paths.push(path);
@@ -95,10 +107,12 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         overlay = (
           <Menu>
             {route.children.map(child => (
-              <Menu.Item key={child.breadcrumbName || child.path}>
-                {itemRender(child, params, routes, paths)}
-              </Menu.Item>
-            ))}
+                <Menu.Item key={child.breadcrumbName || child.path}>
+                  {
+                    itemRender(child, params, routes, this.addChildPath(paths, child.path, params))
+                  }
+                </Menu.Item>
+             ))}
           </Menu>
         );
       }
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index 851f92199e6c..37936f4f812c 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -71,10 +71,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
     if (overlay) {
       return (
         <DropDown overlay={overlay} placement="bottomCenter">
-          <a className={`${prefixCls}-overlay-link`}>
+          <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <Icon type="down" />
-          </a>
+          </span>
         </DropDown>
       );
     }
diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
index 1f82c455884f..c5cb3931ccbd 100644
--- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
@@ -71,42 +71,43 @@ exports[`Breadcrumb should render a menu 1`] = `
     </span>
   </span>
   <span>
-    <a
+    <span
       class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
     >
       <span
         class="ant-breadcrumb-link"
-      />
-    </a>
-    <a
-      href="#/index/first"
-    >
-      first
-    </a>
-  </span>
-  <i
-    aria-label="icon: down"
-    class="anticon anticon-down"
-  >
-    <svg
-      aria-hidden="true"
-      class=""
-      data-icon="down"
-      fill="currentColor"
-      focusable="false"
-      height="1em"
-      viewBox="64 64 896 896"
-      width="1em"
+      >
+        <a
+          href="#/index/first"
+        >
+          first
+        </a>
+      </span>
+      <i
+        aria-label="icon: down"
+        class="anticon anticon-down"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </i>
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
     >
-      <path
-        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-      />
-    </svg>
-  </i>
-  <span
-    class="ant-breadcrumb-separator"
-  >
-    /
+      /
+    </span>
   </span>
   <span>
     <span
diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
index ee3c6fbe74be..3480ab2f1df7 100644
--- a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
@@ -64,89 +64,88 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
-<div>
-  <div
-    class="ant-breadcrumb"
-  >
-    <span>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        Ant Design
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Ant Design
     </span>
-    <span>
-      <span
-        class="ant-breadcrumb-link"
-      >
-        <a
-          href=""
-        >
-          Component
-        </a>
-      </span>
-      <span
-        class="ant-breadcrumb-separator"
-      >
-        /
-      </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
     </span>
-    <span>
-      <a
-        class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
-      >
-        <span
-          class="ant-breadcrumb-link"
-        />
-      </a>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
       <a
         href=""
       >
-        General
+        Component
       </a>
     </span>
-    <i
-      aria-label="icon: down"
-      class="anticon anticon-down"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="down"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-        />
-      </svg>
-    </i>
     <span
       class="ant-breadcrumb-separator"
     >
       /
     </span>
-    <span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+    >
       <span
         class="ant-breadcrumb-link"
       >
-        Button
+        <a
+          href=""
+        >
+          General
+        </a>
       </span>
-      <span
-        class="ant-breadcrumb-separator"
+      <i
+        aria-label="icon: down"
+        class="anticon anticon-down"
       >
-        /
-      </span>
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </i>
     </span>
-  </div>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Button
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
 </div>
 `;
 
diff --git a/components/breadcrumb/demo/overlay.md b/components/breadcrumb/demo/overlay.md
index 0789262d9baa..11f839c0e58a 100644
--- a/components/breadcrumb/demo/overlay.md
+++ b/components/breadcrumb/demo/overlay.md
@@ -37,18 +37,16 @@ const menu = (
 );
 
 ReactDOM.render(
-  <div>
-    <Breadcrumb>
-      <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
-      <Breadcrumb.Item>
-        <a href="">Component</a>
-      </Breadcrumb.Item>
-      <Breadcrumb.Item overlay={menu}>
-        <a href="">General</a>
-      </Breadcrumb.Item>
-      <Breadcrumb.Item>Button</Breadcrumb.Item>
-    </Breadcrumb>
-  </div>,
+  <Breadcrumb>
+    <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Component</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item overlay={menu}>
+      <a href="">General</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>Button</Breadcrumb.Item>
+  </Breadcrumb>,
   mountNode,
 );
 ```
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
index edfe7805f61a..5726fc8200b4 100644
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -31,7 +31,7 @@ title: Breadcrumb
 | href      | 链接的目的地   | string                                 | -      |
 | separator | 自定义的分隔符 | string\|ReactNode                      | '/'    |
 | overlay   | 下来菜单的内容 | [Menu](/components/menu) \| () => Menu | -      |
-| onClick   | 单击事件       | (e:MouseEventHandler)=>void            | -      |
+| onClick   | 单击事件       | (e:MouseEvent)=>void                   | -      |
 
 ### routes
 
diff --git a/components/button/__tests__/__snapshots__/index.test.js.snap b/components/button/__tests__/__snapshots__/index.test.js.snap
index 463fbb629c8d..9206286b7da0 100644
--- a/components/button/__tests__/__snapshots__/index.test.js.snap
+++ b/components/button/__tests__/__snapshots__/index.test.js.snap
@@ -211,6 +211,17 @@ exports[`Button should has click wave effect 1`] = `
 </button>
 `;
 
+exports[`Button should merge text if children using variable 1`] = `
+<button
+  class="ant-btn"
+  type="button"
+>
+  <span>
+    This is a test 1
+  </span>
+</button>
+`;
+
 exports[`Button should not render as link button when href is undefined 1`] = `
 <button
   class="ant-btn ant-btn-primary"
diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
index ed48a6bd944c..4dea37683c26 100644
--- a/components/button/__tests__/index.test.js
+++ b/components/button/__tests__/index.test.js
@@ -157,4 +157,15 @@ describe('Button', () => {
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/15342
+  it('should merge text if children using variable', () => {
+    const wrapper = mount(
+      <Button>
+        This {'is'} a test {1}
+      </Button>,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });
diff --git a/components/button/button.tsx b/components/button/button.tsx
index b6a94e606861..abbf9ebf0b41 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -15,6 +15,29 @@ function isString(str: any) {
   return typeof str === 'string';
 }
 
+function spaceChildren(children: React.ReactNode, needInserted: boolean) {
+  let isPrevChildPure: boolean = false;
+  const childList: React.ReactNode[] = [];
+  React.Children.forEach(children, child => {
+    const type = typeof child;
+    const isCurrentChildPure = type === 'string' || type === 'number';
+    if (isPrevChildPure && isCurrentChildPure) {
+      const lastIndex = childList.length - 1;
+      const lastChild = childList[lastIndex];
+      childList[lastIndex] = `${lastChild}${child}`;
+    } else {
+      childList.push(child);
+    }
+
+    isPrevChildPure = isCurrentChildPure;
+  });
+
+  // Pass to React.Children.map to auto fill key
+  return React.Children.map(childList, child =>
+    insertSpace(child as React.ReactChild, needInserted),
+  );
+}
+
 // Insert one space between two chinese characters automatically.
 function insertSpace(child: React.ReactChild, needInserted: boolean) {
   // Check the child if is undefined or null.
@@ -243,9 +266,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     const iconNode = iconType ? <Icon type={iconType} /> : null;
     const kids =
       children || children === 0
-        ? React.Children.map(children, child =>
-            insertSpace(child as React.ReactChild, this.isNeedInserted() && autoInsertSpace),
-          )
+        ? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)
         : null;
 
     const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType']);
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index d1a062165017..98fbfa3666c9 100644
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
+按钮有五种类型：主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
 
 ## en-US
 
-There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
+There are `primary` button, `default` button, `dashed` button, `danger` button and `link` button in antd.
 
 ```jsx
 import { Button } from 'antd';
diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx
index c0413118233b..e305d0ad3d41 100644
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -3,7 +3,14 @@ import * as moment from 'moment';
 import Select from '../select';
 import { Group, Button, RadioChangeEvent } from '../radio';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-const Option = Select.Option;
+const { Option } = Select;
+
+export interface RenderHeader {
+  value: moment.Moment;
+  onChange?: (value: moment.Moment) => void;
+  type: string;
+  onTypeChange: (type: string) => void;
+}
 
 export interface HeaderProps {
   prefixCls?: string;
@@ -14,8 +21,9 @@ export interface HeaderProps {
   type?: string;
   onValueChange?: (value: moment.Moment) => void;
   onTypeChange?: (type: string) => void;
-  value: any;
+  value: moment.Moment;
   validRange?: [moment.Moment, moment.Moment];
+  headerRender: (header: RenderHeader) => React.ReactNode;
 }
 
 export default class Header extends React.Component<HeaderProps, any> {
@@ -79,6 +87,7 @@ export default class Header extends React.Component<HeaderProps, any> {
         start = rangeStart.get('month');
       }
     }
+
     for (let index = start; index < end; index++) {
       options.push(<Option key={`${index}`}>{months[index]}</Option>);
     }
@@ -128,10 +137,14 @@ export default class Header extends React.Component<HeaderProps, any> {
     }
   };
 
-  onTypeChange = (e: RadioChangeEvent) => {
+  onInternalTypeChange = (e: RadioChangeEvent) => {
+    this.onTypeChange(e.target.value);
+  };
+
+  onTypeChange = (type: string) => {
     const onTypeChange = this.props.onTypeChange;
     if (onTypeChange) {
-      onTypeChange(e.target.value);
+      onTypeChange(type);
     }
   };
 
@@ -139,26 +152,53 @@ export default class Header extends React.Component<HeaderProps, any> {
     this.calenderHeaderNode = node;
   };
 
-  renderHeader = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, type, value, locale, fullscreen } = this.props;
+  getMonthYearSelections = (getPrefixCls: ConfigConsumerProps['getPrefixCls']) => {
+    const { prefixCls: customizePrefixCls, type, value } = this.props;
+
     const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
-    const yearSelect = this.getYearSelectElement(prefixCls, value.year());
-    const monthSelect =
+    const yearReactNode = this.getYearSelectElement(prefixCls, value.year());
+    const monthReactNode =
       type === 'month'
         ? this.getMonthSelectElement(prefixCls, value.month(), this.getMonthsLocale(value))
         : null;
+    return {
+      yearReactNode,
+      monthReactNode,
+    };
+  };
+
+  getTypeSwitch = () => {
+    const { locale, type, fullscreen } = this.props;
     const size = fullscreen ? 'default' : 'small';
-    const typeSwitch = (
-      <Group onChange={this.onTypeChange} value={type} size={size}>
+    return (
+      <Group onChange={this.onInternalTypeChange} value={type} size={size}>
         <Button value="month">{locale.month}</Button>
         <Button value="year">{locale.year}</Button>
       </Group>
     );
+  };
 
-    return (
+  headerRenderCustom = (): React.ReactNode => {
+    const { headerRender, type, onValueChange, value } = this.props;
+
+    return headerRender({
+      value,
+      type: type || 'month',
+      onChange: onValueChange,
+      onTypeChange: this.onTypeChange,
+    });
+  };
+
+  renderHeader = ({ getPrefixCls }: ConfigConsumerProps) => {
+    const { prefixCls, headerRender } = this.props;
+    const typeSwitch = this.getTypeSwitch();
+    const { yearReactNode, monthReactNode } = this.getMonthYearSelections(getPrefixCls);
+    return headerRender ? (
+      this.headerRenderCustom()
+    ) : (
       <div className={`${prefixCls}-header`} ref={this.getCalenderHeaderNode}>
-        {yearSelect}
-        {monthSelect}
+        {yearReactNode}
+        {monthReactNode}
         {typeSwitch}
       </div>
     );
diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
index 0f444fe610f3..ad34a8e43fa0 100644
--- a/components/calendar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -2092,6 +2092,1075 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] = `
+<div
+  style="width:300px;border:1px solid #d9d9d9;border-radius:4px"
+>
+  <div
+    class=""
+  >
+    <div
+      style="padding:10px"
+    >
+      <div
+        style="margin-bottom:10px"
+      >
+        Custom header 
+      </div>
+      <div
+        class="ant-row-flex ant-row-flex-space-between"
+      >
+        <div
+          class="ant-col"
+        >
+          <div
+            class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
+          >
+            <label
+              class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+            >
+              <span
+                class="ant-radio-button ant-radio-button-checked"
+              >
+                <input
+                  checked=""
+                  class="ant-radio-button-input"
+                  type="radio"
+                  value="month"
+                />
+                <span
+                  class="ant-radio-button-inner"
+                />
+              </span>
+              <span>
+                Month
+              </span>
+            </label>
+            <label
+              class="ant-radio-button-wrapper"
+            >
+              <span
+                class="ant-radio-button"
+              >
+                <input
+                  class="ant-radio-button-input"
+                  type="radio"
+                  value="year"
+                />
+                <span
+                  class="ant-radio-button-inner"
+                />
+              </span>
+              <span>
+                Year
+              </span>
+            </label>
+          </div>
+        </div>
+        <div
+          class="ant-col"
+        >
+          <div
+            class="ant-select-sm my-year-select ant-select ant-select-enabled"
+          >
+            <div
+              aria-autocomplete="list"
+              aria-controls=""
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="ant-select-selection
+            ant-select-selection--single"
+              role="combobox"
+              tabindex="0"
+            >
+              <div
+                class="ant-select-selection__rendered"
+              >
+                <div
+                  class="ant-select-selection-selected-value"
+                  style="display:block;opacity:1"
+                  title="2016"
+                >
+                  2016
+                </div>
+              </div>
+              <span
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
+              >
+                <i
+                  aria-label="icon: down"
+                  class="anticon anticon-down ant-select-arrow-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </i>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="ant-col"
+        >
+          <div
+            class="ant-select-sm ant-select ant-select-enabled"
+          >
+            <div
+              aria-autocomplete="list"
+              aria-controls=""
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="ant-select-selection
+            ant-select-selection--single"
+              role="combobox"
+              tabindex="0"
+            >
+              <div
+                class="ant-select-selection__rendered"
+              >
+                <div
+                  class="ant-select-selection-selected-value"
+                  style="display:block;opacity:1"
+                  title="Nov"
+                >
+                  Nov
+                </div>
+              </div>
+              <span
+                class="ant-select-arrow"
+                style="user-select:none;-webkit-user-select:none"
+                unselectable="on"
+              >
+                <i
+                  aria-label="icon: down"
+                  class="anticon anticon-down ant-select-arrow-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </i>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-fullcalendar ant-fullcalendar-full"
+      tabindex="0"
+    >
+      <div
+        class="ant-fullcalendar-calendar-body"
+      >
+        <table
+          cellspacing="0"
+          class="ant-fullcalendar-table"
+          role="grid"
+        >
+          <thead>
+            <tr
+              role="row"
+            >
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="Sun"
+              >
+                <span
+                  class="ant-fullcalendar-column-header-inner"
+                >
+                  Su
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="Mon"
+              >
+                <span
+                  class="ant-fullcalendar-column-header-inner"
+                >
+                  Mo
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="Tue"
+              >
+                <span
+                  class="ant-fullcalendar-column-header-inner"
+                >
+                  Tu
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="Wed"
+              >
+                <span
+                  class="ant-fullcalendar-column-header-inner"
+                >
+                  We
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="Thu"
+              >
+                <span
+                  class="ant-fullcalendar-column-header-inner"
+                >
+                  Th
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="Fri"
+              >
+                <span
+                  class="ant-fullcalendar-column-header-inner"
+                >
+                  Fr
+                </span>
+              </th>
+              <th
+                class="ant-fullcalendar-column-header"
+                role="columnheader"
+                title="Sat"
+              >
+                <span
+                  class="ant-fullcalendar-column-header-inner"
+                >
+                  Sa
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody
+            class="ant-fullcalendar-tbody"
+          >
+            <tr
+              class=""
+              role="row"
+            >
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell"
+                role="gridcell"
+                title="October 30, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    30
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month"
+                role="gridcell"
+                title="October 31, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    31
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 1, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    01
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 2, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    02
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 3, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    03
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 4, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    04
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 5, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    05
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr
+              class=""
+              role="row"
+            >
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 6, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    06
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 7, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    07
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 8, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    08
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 9, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    09
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 10, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    10
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 11, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    11
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 12, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    12
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr
+              class=""
+              role="row"
+            >
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 13, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    13
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 14, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    14
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 15, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    15
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 16, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    16
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 17, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    17
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 18, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    18
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 19, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    19
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="ant-fullcalendar-current-week ant-fullcalendar-active-week"
+              role="row"
+            >
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 20, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    20
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 21, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    21
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day"
+                role="gridcell"
+                title="November 22, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    22
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 23, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    23
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 24, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    24
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 25, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    25
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 26, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    26
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr
+              class=""
+              role="row"
+            >
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 27, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    27
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 28, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    28
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell"
+                role="gridcell"
+                title="November 29, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    29
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month"
+                role="gridcell"
+                title="November 30, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    30
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 1, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    01
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 2, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    02
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 3, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    03
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr
+              class=""
+              role="row"
+            >
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 4, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    04
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 5, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    05
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 6, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    06
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 7, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    07
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 8, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    08
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 9, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    09
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+              <td
+                class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day"
+                role="gridcell"
+                title="December 10, 2016"
+              >
+                <div
+                  class="ant-fullcalendar-date"
+                >
+                  <div
+                    class="ant-fullcalendar-value"
+                  >
+                    10
+                  </div>
+                  <div
+                    class="ant-fullcalendar-content"
+                  />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
 <div
   class=" ant-fullcalendar-fullscreen"
diff --git a/components/calendar/__tests__/index.test.js b/components/calendar/__tests__/index.test.js
index 035275867313..10fae3caeb45 100644
--- a/components/calendar/__tests__/index.test.js
+++ b/components/calendar/__tests__/index.test.js
@@ -4,6 +4,9 @@ import { mount } from 'enzyme';
 import MockDate from 'mockdate';
 import Calendar from '..';
 import Header from '../Header';
+import Select from '../../select';
+import Group from '../../radio/group';
+import Button from '../../radio/radioButton';
 
 describe('Calendar', () => {
   it('Calendar should be selectable', () => {
@@ -256,4 +259,107 @@ describe('Calendar', () => {
       .simulate('change');
     expect(onTypeChange).toHaveBeenCalledWith('year');
   });
+
+  it('headerRender should work correctly', () => {
+    const onMonthChange = jest.fn();
+    const onYearChange = jest.fn();
+    const onTypeChange = jest.fn();
+    const headerRender = jest.fn(({ value }) => {
+      const year = value.year();
+      const options = [];
+      for (let i = year - 100; i < year + 100; i += 1) {
+        options.push(
+          <Select.Option className="year-item" key={i} value={i}>
+            {i}
+          </Select.Option>,
+        );
+      }
+
+      return (
+        <Select
+          size="small"
+          dropdownMatchSelectWidth={false}
+          className="my-year-select"
+          onChange={onYearChange}
+          value={String(year)}
+        >
+          {options}
+        </Select>
+      );
+    });
+    const wrapperWithYear = mount(<Calendar fullscreen={false} headerRender={headerRender} />);
+
+    wrapperWithYear.find('.ant-select').simulate('click');
+    wrapperWithYear.update();
+
+    wrapperWithYear
+      .find('.year-item')
+      .last()
+      .simulate('click');
+
+    expect(onYearChange).toHaveBeenCalled();
+    const headerRenderWithMonth = jest.fn(({ value }) => {
+      const start = 0;
+      const end = 12;
+      const monthOptions = [];
+      const current = value.clone();
+      const localeData = value.localeData();
+      const months = [];
+      for (let i = 0; i < 12; i += 1) {
+        current.month(i);
+        months.push(localeData.monthsShort(current));
+      }
+
+      for (let index = start; index < end; index += 1) {
+        monthOptions.push(
+          <Select.Option className="month-item" key={`${index}`}>
+            {months[index]}
+          </Select.Option>,
+        );
+      }
+      const month = value.month();
+      return (
+        <Select
+          size="small"
+          dropdownMatchSelectWidth={false}
+          value={String(month)}
+          className="my-mont-select"
+          onChange={onMonthChange}
+        >
+          {monthOptions}
+        </Select>
+      );
+    });
+    const wrapperWithMonth = mount(
+      <Calendar fullscreen={false} headerRender={headerRenderWithMonth} />,
+    );
+
+    wrapperWithMonth.find('.ant-select').simulate('click');
+    wrapperWithMonth.update();
+
+    wrapperWithMonth
+      .find('.month-item')
+      .last()
+      .simulate('click');
+    expect(onMonthChange).toHaveBeenCalled();
+
+    const headerRenderWithTypeChange = jest.fn(({ type }) => {
+      return (
+        <Group size="small" onChange={onTypeChange} value={type}>
+          <Button value="month">Month</Button>
+          <Button value="year">Year</Button>
+        </Group>
+      );
+    });
+
+    const wrapperWithTypeChange = mount(
+      <Calendar fullscreen={false} headerRender={headerRenderWithTypeChange} />,
+    );
+
+    wrapperWithTypeChange
+      .find('.ant-radio-button-input')
+      .last()
+      .simulate('change');
+    expect(onTypeChange).toHaveBeenCalled();
+  });
 });
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
new file mode 100644
index 000000000000..a64f13f51792
--- /dev/null
+++ b/components/calendar/demo/customize-header.md
@@ -0,0 +1,107 @@
+---
+order: 4
+title:
+  zh-CN: 自定义头部
+  en-US: Customize Header
+---
+
+## zh-CN
+
+自定义日历头部内容。
+
+## en-US
+
+Customize Calendar header content.
+
+```jsx
+import { Calendar, Select, Radio, Col, Row } from 'antd';
+
+const { Group, Button } = Radio;
+
+function onPanelChange(value, mode) {
+  console.log(value, mode);
+}
+
+ReactDOM.render(
+  <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
+    <Calendar
+      fullscreen={false}
+      headerRender={({ value, type, onChange, onTypeChange }) => {
+        const start = 0;
+        const end = 12;
+        const monthOptions = [];
+
+        const current = value.clone();
+        const localeData = value.localeData();
+        const months = [];
+        for (let i = 0; i < 12; i++) {
+          current.month(i);
+          months.push(localeData.monthsShort(current));
+        }
+
+        for (let index = start; index < end; index++) {
+          monthOptions.push(
+            <Select.Option className="month-item" key={`${index}`}>
+              {months[index]}
+            </Select.Option>,
+          );
+        }
+        const month = value.month();
+
+        const year = value.year();
+        const options = [];
+        for (let i = year - 10; i < year + 10; i += 1) {
+          options.push(
+            <Select.Option key={i} value={i} className="year-item">
+              {i}
+            </Select.Option>,
+          );
+        }
+        return (
+          <div style={{ padding: 10 }}>
+            <div style={{ marginBottom: '10px' }}>Custom header </div>
+            <Row type="flex" justify="space-between">
+              <Col>
+                <Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
+                  <Button value="month">Month</Button>
+                  <Button value="year">Year</Button>
+                </Group>
+              </Col>
+              <Col>
+                <Select
+                  size="small"
+                  dropdownMatchSelectWidth={false}
+                  className="my-year-select"
+                  onChange={newYear => {
+                    const now = value.clone().year(newYear);
+                    onChange(now);
+                  }}
+                  value={String(year)}
+                >
+                  {options}
+                </Select>
+              </Col>
+              <Col>
+                <Select
+                  size="small"
+                  dropdownMatchSelectWidth={false}
+                  value={String(month)}
+                  onChange={selectedMonth => {
+                    const newValue = value.clone();
+                    newValue.month(parseInt(selectedMonth, 10));
+                    onChange(newValue);
+                  }}
+                >
+                  {monthOptions}
+                </Select>
+              </Col>
+            </Row>
+          </div>
+        );
+      }}
+      onPanelChange={onPanelChange}
+    />
+  </div>,
+  mountNode,
+);
+```
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
index 0ed680da5628..1cd91c9cb838 100644
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -29,19 +29,20 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 />
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
-| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
-| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
-| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |
-| fullscreen | Whether to display in full-screen | boolean | `true` |
-| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
-| mode | The display mode of the calendar | `month` \| `year` | `month` |
-| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
-| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - |
-| validRange | to set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |  |
+| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |  |
+| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |  |
+| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |  |
+| fullscreen | Whether to display in full-screen | boolean | `true` |  |
+| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
+| mode | The display mode of the calendar | `month` \| `year` | `month` |  |
+| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |  |
+| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - |  |
+| validRange | to set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
 | value | The current selected date | [moment](http://momentjs.com/) | current date |
-| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
-| onSelect | Callback for when a date is selected | function(date: moment） | - |
-| onChange | Callback for when date changes | function(date: moment） | - |
+| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |  |
+| onSelect | Callback for when a date is selected | function(date: moment） | - |  |
+| onChange | Callback for when date changes | function(date: moment） | - |  |
+| headerRender | render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | 3.19.0 |
diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx
index 65ae98fb60b6..25ca8e6ff937 100644
--- a/components/calendar/index.tsx
+++ b/components/calendar/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import * as moment from 'moment';
 import FullCalendar from 'rc-calendar/lib/FullCalendar';
-import Header from './Header';
+import Header, { RenderHeader } from './Header';
 import enUS from './locale/en_US';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -23,7 +23,6 @@ function zerofixed(v: number) {
 }
 
 export type CalendarMode = 'month' | 'year';
-
 export interface CalendarProps {
   prefixCls?: string;
   className?: string;
@@ -42,6 +41,7 @@ export interface CalendarProps {
   onChange?: (date?: moment.Moment) => void;
   disabledDate?: (current: moment.Moment) => boolean;
   validRange?: [moment.Moment, moment.Moment];
+  headerRender: (header: RenderHeader) => React.ReactNode;
 }
 
 export interface CalendarState {
@@ -56,6 +56,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
     onSelect: noop,
     onPanelChange: noop,
     onChange: noop,
+    headerRender: null,
   };
 
   static propTypes = {
@@ -205,6 +206,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
       style,
       className,
       fullscreen,
+      headerRender,
       dateFullCellRender,
       monthFullCellRender,
     } = props;
@@ -237,6 +239,7 @@ class Calendar extends React.Component<CalendarProps, CalendarState> {
               <Header
                 fullscreen={fullscreen}
                 type={mode}
+                headerRender={headerRender}
                 value={value}
                 locale={locale.lang}
                 prefixCls={prefixCls}
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
index 74e7b6a3c0d9..a40623200633 100644
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -30,19 +30,20 @@ title: Calendar
 />
 ```
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
-| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |  |
+| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |  |
 | defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
-| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
-| fullscreen | 是否全屏显示 | boolean | true |
-| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
+| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |  |
+| fullscreen | 是否全屏显示 | boolean | true |  |
+| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 初始模式，`month/year` | string | month |
-| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
-| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
-| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
+| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |  |
+| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |  |
+| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |  |
 | value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
-| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
-| onSelect | 点击选择日期回调 | function(date: moment） | 无 |
-| onChange | 日期变化回调 | function(date: moment） | 无 |
+| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |  |
+| onSelect | 点击选择日期回调 | function(date: moment） | 无 |  |
+| onChange | 日期变化回调 | function(date: moment） | 无 |  |
+| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | 无 | 3.19.0 |
diff --git a/components/calendar/locale/lv_LV.tsx b/components/calendar/locale/lv_LV.tsx
new file mode 100644
index 000000000000..e947c8c42e35
--- /dev/null
+++ b/components/calendar/locale/lv_LV.tsx
@@ -0,0 +1,2 @@
+import lv_LV from '../../date-picker/locale/lv_LV';
+export default lv_LV;
diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
index c27f0edacb51..5ad52c864920 100644
--- a/components/carousel/__tests__/index.test.js
+++ b/components/carousel/__tests__/index.test.js
@@ -106,12 +106,28 @@ describe('Carousel', () => {
     warnSpy.mockRestore();
   });
 
-  it('should active when children change', () => {
-    const wrapper = mount(<Carousel />);
-    wrapper.setProps({
-      children: <div />,
+  describe('should active when children change', () => {
+    it('should active', () => {
+      const wrapper = mount(<Carousel />);
+      wrapper.setProps({
+        children: <div />,
+      });
+      wrapper.update();
+      expect(wrapper.find('.slick-active').length).toBeTruthy();
+    });
+
+    it('should keep initialSlide', () => {
+      const wrapper = mount(<Carousel initialSlide={1} />);
+      wrapper.setProps({
+        children: [<div key="1" />, <div key="2" />, <div key="3" />],
+      });
+      wrapper.update();
+      expect(
+        wrapper
+          .find('.slick-dots li')
+          .at(1)
+          .hasClass('slick-active'),
+      ).toBeTruthy();
     });
-    wrapper.update();
-    expect(wrapper.find('.slick-active').length).toBeTruthy();
   });
 });
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index da9319616b8a..e9f0b3a3ffb5 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -73,7 +73,7 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
 
   componentDidUpdate(prevProps: CarouselProps) {
     if (React.Children.count(this.props.children) !== React.Children.count(prevProps.children)) {
-      this.goTo(0, false);
+      this.goTo(this.props.initialSlide || 0, false);
     }
   }
 
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 676e7e95f353..17fc1dbbe589 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -292,7 +292,8 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
   };
 
   handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.keyCode === KeyCode.BACKSPACE) {
+    // SPACE => https://github.com/ant-design/ant-design/issues/16871
+    if (e.keyCode === KeyCode.BACKSPACE || e.keyCode === KeyCode.SPACE) {
       e.stopPropagation();
     }
   };
diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
index b2f37336021b..eeb0a53d2388 100644
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@@ -8,7 +8,8 @@
   .reset-component;
 
   &-input.@{ant-prefix}-input {
-    position: relative;
+    // Keep it static for https://github.com/ant-design/ant-design/issues/16738
+    position: static;
     width: 100%;
     // Add important to fix https://github.com/ant-design/ant-design/issues/5078
     // because input.less will compile after cascader.less
@@ -109,6 +110,11 @@
     }
   }
 
+  // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810
+  &-picker-label:hover + &-input {
+    .hover;
+  }
+
   &-picker-small &-picker-clear,
   &-picker-small &-picker-arrow {
     right: @control-padding-horizontal-sm;
@@ -195,8 +201,8 @@
     &-active:not(&-disabled) {
       &,
       &:hover {
-        font-weight: 600;
-        background: @background-color-base;
+        font-weight: @select-item-selected-font-weight;
+        background-color: @background-color-light;
       }
     }
     &-expand {
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index e80c5a9ef789..bb92c8f9f187 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -16,8 +16,6 @@ Generate a group of checkboxes from an array.
 ```jsx
 import { Checkbox } from 'antd';
 
-const CheckboxGroup = Checkbox.Group;
-
 function onChange(checkedValues) {
   console.log('checked = ', checkedValues);
 }
@@ -36,13 +34,13 @@ const optionsWithDisabled = [
 
 ReactDOM.render(
   <div>
-    <CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
+    <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />
     <br />
     <br />
-    <CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
+    <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />
     <br />
     <br />
-    <CheckboxGroup
+    <Checkbox.Group
       options={optionsWithDisabled}
       disabled
       defaultValue={['Apple']}
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
index 6e136528a03f..2e7d5ea1f26b 100644
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -175,7 +175,7 @@
   // 半选状态
   .@{checkbox-prefix-cls}-indeterminate {
     .@{checkbox-inner-prefix-cls} {
-      background-color: #fff;
+      background-color: @component-background;
       border-color: @border-color-base;
     }
     .@{checkbox-inner-prefix-cls}::after {
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
index 93791bfba33a..9378af6f74c6 100644
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@@ -37,9 +37,7 @@
         top: 50%;
         left: @padding-md;
         display: inline-block;
-        margin-top: 2px;
         font-size: @font-size-sm;
-        line-height: 46px;
         transform: translateY(-50%);
 
         & svg {
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index 0560342789a0..b4d9169c1720 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -17,7 +17,7 @@ Comment can be used as an editor, so the user can customize the contents of the
 import { Comment, Avatar, Form, Button, List, Input } from 'antd';
 import moment from 'moment';
 
-const TextArea = Input.TextArea;
+const { TextArea } = Input;
 
 const CommentList = ({ comments }) => (
   <List
diff --git a/components/comment/style/index.less b/components/comment/style/index.less
index 78548a27abda..b83a73447746 100644
--- a/components/comment/style/index.less
+++ b/components/comment/style/index.less
@@ -27,25 +27,25 @@
     position: relative;
     flex: 1 1 auto;
     min-width: 1px;
-    font-size: 14px;
+    font-size: @comment-font-size-base;
     word-wrap: break-word;
 
     &-author {
       display: flex;
       justify-content: flex-start;
       margin-bottom: 4px;
-      font-size: 14px;
+      font-size: @comment-font-size-base;
       & > a,
       & > span {
         height: 18px;
         padding-right: 8px;
-        font-size: 12px;
+        font-size: @comment-font-size-sm;
         line-height: 18px;
       }
 
       &-name {
         color: @comment-author-name-color;
-        font-size: 14px;
+        font-size: @comment-font-size-base;
         transition: color 0.3s;
         > * {
           color: @comment-author-name-color;
@@ -76,7 +76,7 @@
       > span {
         padding-right: 10px;
         color: @comment-action-color;
-        font-size: 12px;
+        font-size: @comment-font-size-sm;
         cursor: pointer;
         transition: color 0.3s;
         user-select: none;
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index bd5bb1ed48c9..abe53c950453 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -6771,6 +6771,7 @@ exports[`ConfigProvider components Drawer configProvider 1`] = `
 >
   <div
     class="config-drawer config-drawer-right"
+    tabindex="-1"
   >
     <div
       class="config-drawer-mask"
@@ -6830,6 +6831,7 @@ exports[`ConfigProvider components Drawer normal 1`] = `
 >
   <div
     class="ant-drawer ant-drawer-right"
+    tabindex="-1"
   >
     <div
       class="ant-drawer-mask"
@@ -6889,6 +6891,7 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
 >
   <div
     class="prefix-Drawer prefix-Drawer-right"
+    tabindex="-1"
   >
     <div
       class="prefix-Drawer-mask"
@@ -8172,6 +8175,7 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
           <button
             aria-label="Close"
             class="config-modal-close"
+            type="button"
           >
             <span
               class="config-modal-close-x"
@@ -8263,6 +8267,7 @@ exports[`ConfigProvider components Modal normal 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -8354,6 +8359,7 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
           <button
             aria-label="Close"
             class="prefix-Modal-close"
+            type="button"
           >
             <span
               class="prefix-Modal-close-x"
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 03c3362054e9..ca9e600782f7 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import createReactContext, { Context } from '@ant-design/create-react-context';
+import createReactContext from '@ant-design/create-react-context';
 
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
 
@@ -36,7 +36,7 @@ export interface ConfigProviderProps {
   autoInsertSpaceInButton?: boolean;
 }
 
-const ConfigContext: Context<ConfigConsumerProps | null> = createReactContext({
+const ConfigContext = createReactContext<ConfigConsumerProps>({
   // We provide a default function for Context without provider
   getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
     if (customizePrefixCls) return customizePrefixCls;
diff --git a/components/config-provider/renderEmpty.tsx b/components/config-provider/renderEmpty.tsx
index 8b9d803dde84..52b0e5cca96e 100644
--- a/components/config-provider/renderEmpty.tsx
+++ b/components/config-provider/renderEmpty.tsx
@@ -16,6 +16,7 @@ const renderEmpty = (componentName?: string): React.ReactNode => (
         case 'TreeSelect':
         case 'Cascader':
         case 'Transfer':
+        case 'Mentions':
           return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} className={`${prefix}-small`} />;
         default:
           return <Empty />;
diff --git a/components/date-picker/demo/presetted-ranges.md b/components/date-picker/demo/presetted-ranges.md
index 30b27d8cfa4b..d7cb1c49d861 100644
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@@ -17,7 +17,7 @@ We can set presetted ranges to RangePicker to improve user experience.
 import { DatePicker } from 'antd';
 import moment from 'moment';
 
-const RangePicker = DatePicker.RangePicker;
+const { RangePicker } = DatePicker;
 
 function onChange(dates, dateStrings) {
   console.log('From: ', dates[0], ', to: ', dates[1]);
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index ab987204469c..a4b9922b50fc 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -135,3 +135,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
   margin: 0 8px 12px 0;
 }
 </style>
+
+## FAQ
+
+- [When set mode to DatePicker/RangePicker, cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?)
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 21fc1d72d114..41f836190303 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -138,3 +138,7 @@ moment.locale('zh-cn');
   margin: 0 8px 12px 0;
 }
 </style>
+
+## FAQ
+
+- [当我指定了 DatePicker/RangePicker 的 `mode` 属性后，点击后无法选择年份/月份？](/docs/react/faq-cn#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)
diff --git a/components/date-picker/locale/ar_EG.tsx b/components/date-picker/locale/ar_EG.tsx
index fcdaa12adc61..ad840b669bb8 100644
--- a/components/date-picker/locale/ar_EG.tsx
+++ b/components/date-picker/locale/ar_EG.tsx
@@ -11,6 +11,10 @@ const locale = {
   timePickerLocale: {
     ...TimePickerLocale,
   },
+  dateFormat: 'DD-MM-YYYY',
+  monthFormat: 'MM-YYYY',
+  dateTimeFormat: 'DD-MM-YYYY HH:mm:ss',
+  weekFormat: 'wo-YYYY',
 };
 
 // All settings at:
diff --git a/components/date-picker/locale/lv_LV.tsx b/components/date-picker/locale/lv_LV.tsx
new file mode 100644
index 000000000000..254b1280bb85
--- /dev/null
+++ b/components/date-picker/locale/lv_LV.tsx
@@ -0,0 +1,19 @@
+import CalendarLocale from 'rc-calendar/lib/locale/lv_LV';
+import TimePickerLocale from '../../time-picker/locale/lv_LV';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Izvēlieties datumu',
+    rangePlaceholder: ['Sākuma datums', 'Beigu datums'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;
diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000000..0eeb89fdfa95
--- /dev/null
+++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,611 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
+<div
+  class="ant-descriptions"
+>
+  <div
+    class="ant-descriptions-title"
+  >
+    User Info
+  </div>
+  <div
+    class="ant-descriptions-view"
+  >
+    <table>
+      <tbody>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <span
+              class="ant-descriptions-item-label"
+            >
+              UserName
+            </span>
+            <span
+              class="ant-descriptions-item-content"
+            >
+              Zhou Maomao
+            </span>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <span
+              class="ant-descriptions-item-label"
+            >
+              Telephone
+            </span>
+            <span
+              class="ant-descriptions-item-content"
+            >
+              1810000000
+            </span>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <span
+              class="ant-descriptions-item-label"
+            >
+              Live
+            </span>
+            <span
+              class="ant-descriptions-item-content"
+            >
+              Hangzhou, Zhejiang
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <span
+              class="ant-descriptions-item-label"
+            >
+              Remark
+            </span>
+            <span
+              class="ant-descriptions-item-content"
+            >
+              empty
+            </span>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="2"
+          >
+            <span
+              class="ant-descriptions-item-label"
+            >
+              Address
+            </span>
+            <span
+              class="ant-descriptions-item-content"
+            >
+              No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
+<div
+  class="ant-descriptions bordered"
+>
+  <div
+    class="ant-descriptions-title"
+  >
+    User Info
+  </div>
+  <div
+    class="ant-descriptions-view"
+  >
+    <table>
+      <tbody>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Product
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            Cloud Database
+          </td>
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Billing Mode
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            Prepaid
+          </td>
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Automatic Renewal
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            YES
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Order time
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            2018-04-24 18:00:00
+          </td>
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Usage Time
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="5"
+          >
+            2019-04-24 18:00:00
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Status
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="5"
+          >
+            <span
+              class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+            >
+              <span
+                class="ant-badge-status-dot ant-badge-status-processing"
+              />
+              <span
+                class="ant-badge-status-text"
+              >
+                Running
+              </span>
+            </span>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Negotiated Amount
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            $80.00
+          </td>
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Discount
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            $20.00
+          </td>
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Official Receipts
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="1"
+          >
+            $60.00
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item-label"
+          >
+            Config Info
+          </td>
+          <td
+            class="ant-descriptions-item-content"
+            colspan="5"
+          >
+            Data disk type: MongoDB
+            <br />
+            Database version: 3.4
+            <br />
+            Package: dds.mongo.mid
+            <br />
+            Storage space: 10 GB
+            <br />
+            Replication_factor:3
+            <br />
+            Region: East China 1
+            <br />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
+<div>
+  <div
+    class="ant-descriptions"
+  >
+    <div
+      class="ant-descriptions-title"
+    >
+      Responsive Descriptions
+    </div>
+    <div
+      class="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Product
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Billing
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Prepaid
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                time
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                18:00:00
+              </span>
+            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Amount
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $80.00
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Discount
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $20.00
+              </span>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Official
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $60.00
+              </span>
+            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item"
+              colspan="3"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Config Info
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Data disk type: MongoDB
+                <br />
+                Database version: 3.4
+                <br />
+                Package: dds.mongo.mid
+                <br />
+                Storage space: 10 GB
+                <br />
+                Replication_factor:3
+                <br />
+                Region: East China 1
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
+<div>
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-wrapper ant-radio-wrapper-checked"
+    >
+      <span
+        class="ant-radio ant-radio-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-input"
+          type="radio"
+          value="default"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        default
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="middle"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        middle
+      </span>
+    </label>
+    <label
+      class="ant-radio-wrapper"
+    >
+      <span
+        class="ant-radio"
+      >
+        <input
+          class="ant-radio-input"
+          type="radio"
+          value="small"
+        />
+        <span
+          class="ant-radio-inner"
+        />
+      </span>
+      <span>
+        small
+      </span>
+    </label>
+  </div>
+  <br />
+  <br />
+  <div
+    class="ant-descriptions bordered"
+  >
+    <div
+      class="ant-descriptions-title"
+    >
+      Custom Size
+    </div>
+    <div
+      class="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item-label"
+            >
+              Product
+            </td>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              Cloud Database
+            </td>
+            <td
+              class="ant-descriptions-item-label"
+            >
+              Billing
+            </td>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              Prepaid
+            </td>
+            <td
+              class="ant-descriptions-item-label"
+            >
+              time
+            </td>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              18:00:00
+            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item-label"
+            >
+              Amount
+            </td>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              $80.00
+            </td>
+            <td
+              class="ant-descriptions-item-label"
+            >
+              Discount
+            </td>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              $20.00
+            </td>
+            <td
+              class="ant-descriptions-item-label"
+            >
+              Official
+            </td>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="1"
+            >
+              $60.00
+            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item-label"
+            >
+              Config Info
+            </td>
+            <td
+              class="ant-descriptions-item-content"
+              colspan="5"
+            >
+              Data disk type: MongoDB
+              <br />
+              Database version: 3.4
+              <br />
+              Package: dds.mongo.mid
+              <br />
+              Storage space: 10 GB
+              <br />
+              Replication_factor:3
+              <br />
+              Region: East China 1
+              <br />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/descriptions/__tests__/__snapshots__/index.test.js.snap b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
new file mode 100644
index 000000000000..1d3ad5bcfc55
--- /dev/null
+++ b/components/descriptions/__tests__/__snapshots__/index.test.js.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Descriptions column is number 1`] = `
+<Descriptions
+  column="3"
+  size="default"
+>
+  <div
+    className="ant-descriptions"
+  >
+    <div
+      className="ant-descriptions-view"
+    >
+      <table>
+        <tbody>
+          <tr
+            className="ant-descriptions-row"
+            key="0"
+          >
+            <td
+              className="ant-descriptions-item"
+              colSpan={1}
+              key=".$.0"
+            >
+              <span
+                className="ant-descriptions-item-label"
+                key="label"
+              >
+                Product
+              </span>
+              <span
+                className="ant-descriptions-item-content"
+                key="content"
+              >
+                Cloud Database
+              </span>
+            </td>
+            <td
+              className="ant-descriptions-item"
+              colSpan={1}
+              key=".$.1"
+            >
+              <span
+                className="ant-descriptions-item-label"
+                key="label"
+              >
+                Billing
+              </span>
+              <span
+                className="ant-descriptions-item-content"
+                key="content"
+              >
+                Prepaid
+              </span>
+            </td>
+            <td
+              className="ant-descriptions-item"
+              colSpan={1}
+            >
+              <span
+                className="ant-descriptions-item-label"
+                key="label"
+              >
+                time
+              </span>
+              <span
+                className="ant-descriptions-item-content"
+                key="content"
+              >
+                18:00:00
+              </span>
+            </td>
+          </tr>
+          <tr
+            className="ant-descriptions-row"
+            key="1"
+          >
+            <td
+              className="ant-descriptions-item"
+              colSpan={3}
+            >
+              <span
+                className="ant-descriptions-item-label"
+                key="label"
+              >
+                Amount
+              </span>
+              <span
+                className="ant-descriptions-item-content"
+                key="content"
+              >
+                $80.00
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</Descriptions>
+`;
diff --git a/components/descriptions/__tests__/demo.test.js b/components/descriptions/__tests__/demo.test.js
new file mode 100644
index 000000000000..966d453bea2a
--- /dev/null
+++ b/components/descriptions/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('descriptions');
diff --git a/components/descriptions/__tests__/index.test.js b/components/descriptions/__tests__/index.test.js
new file mode 100644
index 000000000000..d99e4530d1a6
--- /dev/null
+++ b/components/descriptions/__tests__/index.test.js
@@ -0,0 +1,112 @@
+import React from 'react';
+import MockDate from 'mockdate';
+import { mount } from 'enzyme';
+import Descriptions from '..';
+
+jest.mock('enquire.js', () => {
+  let that;
+  let unmatchFun;
+  return {
+    unregister: jest.fn(),
+    register: (media, options) => {
+      if (media === '(max-width: 575px)') {
+        that = this;
+        options.match.call(that);
+        unmatchFun = options.unmatch;
+      }
+    },
+    callunmatch() {
+      unmatchFun.call(that);
+    },
+  };
+});
+
+describe('Descriptions', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    MockDate.reset();
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
+  it('when max-width: 575px，column=1', () => {
+    // eslint-disable-next-line global-require
+    const enquire = require('enquire.js');
+    const wrapper = mount(
+      <Descriptions>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper.find('tr')).toHaveLength(4);
+
+    enquire.callunmatch();
+    wrapper.unmount();
+  });
+
+  it('when max-width: 575px，column=2', () => {
+    // eslint-disable-next-line global-require
+    const enquire = require('enquire.js');
+    const wrapper = mount(
+      <Descriptions column={{ xs: 2 }}>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper.find('tr')).toHaveLength(2);
+
+    enquire.callunmatch();
+    wrapper.unmount();
+  });
+
+  it('column is number', () => {
+    // eslint-disable-next-line global-require
+    const wrapper = mount(
+      <Descriptions column="3">
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper).toMatchSnapshot();
+    wrapper.unmount();
+  });
+
+  it('when typeof column is object', () => {
+    const wrapper = mount(
+      <Descriptions column={{ xs: 8, sm: 16, md: 24 }}>
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper.instance().getColumn()).toBe(8);
+    wrapper.unmount();
+  });
+
+  it('warning if ecceed the row span', () => {
+    mount(
+      <Descriptions column={3}>
+        <Descriptions.Item label="Product" span={2}>
+          Cloud Database
+        </Descriptions.Item>
+        <Descriptions.Item label="Billing" span={2}>
+          Prepaid
+        </Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Descriptions] Sum of column `span` in a line exceeds `column` of Descriptions.',
+    );
+  });
+});
diff --git a/components/descriptions/demo/basic.md b/components/descriptions/demo/basic.md
new file mode 100644
index 000000000000..f4d2232c3d8e
--- /dev/null
+++ b/components/descriptions/demo/basic.md
@@ -0,0 +1,31 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+简单的展示。
+
+## en-US
+
+Simplest Usage.
+
+```jsx
+import { Descriptions } from 'antd';
+
+ReactDOM.render(
+  <Descriptions title="User Info">
+    <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
+    <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
+    <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
+    <Descriptions.Item label="Remark">empty</Descriptions.Item>
+    <Descriptions.Item label="Address">
+      No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+    </Descriptions.Item>
+  </Descriptions>,
+  mountNode,
+);
+```
diff --git a/components/descriptions/demo/border.md b/components/descriptions/demo/border.md
new file mode 100644
index 000000000000..ec59e74cb23e
--- /dev/null
+++ b/components/descriptions/demo/border.md
@@ -0,0 +1,50 @@
+---
+order: 1
+title:
+  zh-CN: 带边框的
+  en-US: border
+---
+
+## zh-CN
+
+带边框和背景颜色列表。
+
+## en-US
+
+Descriptions with border and background color.
+
+```jsx
+import { Descriptions, Badge } from 'antd';
+
+ReactDOM.render(
+  <Descriptions title="User Info" bordered>
+    <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+    <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
+    <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
+    <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
+    <Descriptions.Item label="Usage Time" span={3}>
+      2019-04-24 18:00:00
+    </Descriptions.Item>
+    <Descriptions.Item label="Status" span={3}>
+      <Badge status="processing" text="Running" />
+    </Descriptions.Item>
+    <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
+    <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+    <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
+    <Descriptions.Item label="Config Info">
+      Data disk type: MongoDB
+      <br />
+      Database version: 3.4
+      <br />
+      Package: dds.mongo.mid
+      <br />
+      Storage space: 10 GB
+      <br />
+      Replication_factor:3
+      <br />
+      Region: East China 1<br />
+    </Descriptions.Item>
+  </Descriptions>,
+  mountNode,
+);
+```
diff --git a/components/descriptions/demo/responsive.md b/components/descriptions/demo/responsive.md
new file mode 100644
index 000000000000..04dc0e1b8dec
--- /dev/null
+++ b/components/descriptions/demo/responsive.md
@@ -0,0 +1,52 @@
+---
+order: 3
+title:
+  zh-CN: 响应式
+  en-US: responsive
+---
+
+## zh-CN
+
+通过响应式的配置可以实现在小屏幕设备上的完美呈现。
+
+## en-US
+
+Responsive configuration enables perfect presentation on small screen devices.
+
+```jsx
+import { Descriptions } from 'antd';
+
+const Demo = () => {
+  return (
+    <div>
+      <Descriptions
+        title="Responsive Descriptions"
+        border
+        column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
+      >
+        <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+        <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+        <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+        <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+        <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+        <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+        <Descriptions.Item label="Config Info">
+          Data disk type: MongoDB
+          <br />
+          Database version: 3.4
+          <br />
+          Package: dds.mongo.mid
+          <br />
+          Storage space: 10 GB
+          <br />
+          Replication_factor:3
+          <br />
+          Region: East China 1
+        </Descriptions.Item>
+      </Descriptions>
+    </div>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
+```
diff --git a/components/descriptions/demo/size.md b/components/descriptions/demo/size.md
new file mode 100644
index 000000000000..c321302fc202
--- /dev/null
+++ b/components/descriptions/demo/size.md
@@ -0,0 +1,68 @@
+---
+order: 2
+title:
+  zh-CN: 自定义尺寸
+  en-US: Custom size
+---
+
+## zh-CN
+
+自定义尺寸，适应在各种容器中展示。
+
+## en-US
+
+Custom sizes to fit in a variety of containers.
+
+```jsx
+import { Descriptions, Radio } from 'antd';
+
+class Demo extends React.Component {
+  state = {
+    size: 'default',
+  };
+
+  onChange = e => {
+    console.log('size checked', e.target.value);
+    this.setState({
+      size: e.target.value,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <Radio.Group onChange={this.onChange} value={this.state.size}>
+          <Radio value="default">default</Radio>
+          <Radio value="middle">middle</Radio>
+          <Radio value="small">small</Radio>
+        </Radio.Group>
+        <br />
+        <br />
+        <Descriptions bordered title="Custom Size" border size={this.state.size}>
+          <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+          <Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
+          <Descriptions.Item label="time">18:00:00</Descriptions.Item>
+          <Descriptions.Item label="Amount">$80.00</Descriptions.Item>
+          <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+          <Descriptions.Item label="Official">$60.00</Descriptions.Item>
+          <Descriptions.Item label="Config Info">
+            Data disk type: MongoDB
+            <br />
+            Database version: 3.4
+            <br />
+            Package: dds.mongo.mid
+            <br />
+            Storage space: 10 GB
+            <br />
+            Replication_factor:3
+            <br />
+            Region: East China 1<br />
+          </Descriptions.Item>
+        </Descriptions>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+```
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
new file mode 100644
index 000000000000..cd500afd8d5d
--- /dev/null
+++ b/components/descriptions/index.en-US.md
@@ -0,0 +1,30 @@
+---
+category: Components
+type: Data Display
+title: Description List
+cols: 1
+---
+
+Display multiple read-only fields in groups.
+
+## When To Use
+
+Commonly displayed on the details page.
+
+## API
+
+### Descriptions
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | The title of the description list, placed at the top | ReactNode | - |
+| bordered | whether to display the border | boolean | false |
+| column | the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 |
+| size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false |
+
+### DescriptionItem
+
+| Property | Description                    | Type      | Default |
+| -------- | ------------------------------ | --------- | ------- |
+| label    | description of the content     | ReactNode | -       |
+| span     | The number of columns included | number    | 1       |
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
new file mode 100644
index 000000000000..6851b396fbf8
--- /dev/null
+++ b/components/descriptions/index.tsx
@@ -0,0 +1,256 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import warning from '../_util/warning';
+import ResponsiveObserve, {
+  Breakpoint,
+  BreakpointMap,
+  responsiveArray,
+} from '../_util/responsiveObserve';
+import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+
+export interface DescriptionsItemProps {
+  prefixCls?: string;
+  label: React.ReactNode;
+  children: JSX.Element;
+  span?: number;
+}
+
+const DescriptionsItem: React.SFC<DescriptionsItemProps> = ({ children }) => children;
+
+export interface DescriptionsProps {
+  prefixCls?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  bordered?: boolean;
+  size?: 'middle' | 'small' | 'default';
+  children?: React.ReactNode;
+  title?: string;
+  column?: number | Partial<Record<Breakpoint, number>>;
+}
+
+/**
+ * Convert children into `column` groups.
+ * @param cloneChildren: DescriptionsItem
+ * @param column: number
+ */
+const generateChildrenRows = (
+  cloneChildren: React.ReactNode,
+  column: number,
+): React.ReactElement<DescriptionsItemProps>[][] => {
+  const childrenArray: React.ReactElement<DescriptionsItemProps>[][] = [];
+  let columnArray: React.ReactElement<DescriptionsItemProps>[] = [];
+  let totalRowSpan = 0;
+  React.Children.forEach(cloneChildren, (node: React.ReactElement<DescriptionsItemProps>) => {
+    columnArray.push(node);
+    if (node.props.span) {
+      totalRowSpan += node.props.span;
+    } else {
+      totalRowSpan += 1;
+    }
+    if (totalRowSpan >= column) {
+      warning(
+        totalRowSpan <= column,
+        'Descriptions',
+        'Sum of column `span` in a line exceeds `column` of Descriptions.',
+      );
+
+      childrenArray.push(columnArray);
+      columnArray = [];
+      totalRowSpan = 0;
+    }
+  });
+  if (columnArray.length > 0) {
+    childrenArray.push(columnArray);
+    columnArray = [];
+  }
+  return childrenArray;
+};
+
+/**
+ * This code is for handling react15 does not support returning an array,
+ * It can convert a children into two td
+ * @param child DescriptionsItem
+ * @returns
+ * <>
+ *   <td>{DescriptionsItem.label}</td>
+ *   <td>{DescriptionsItem.children}</td>
+ * </>
+ */
+const renderCol = (child: React.ReactElement<DescriptionsItemProps>, bordered: boolean) => {
+  const { prefixCls, label, children, span = 1 } = child.props;
+  if (bordered) {
+    return [
+      <td className={`${prefixCls}-item-label`} key="label">
+        {label}
+      </td>,
+      <td className={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
+        {children}
+      </td>,
+    ];
+  }
+  return (
+    <td colSpan={span} className={`${prefixCls}-item`}>
+      <span className={`${prefixCls}-item-label`} key="label">
+        {label}
+      </span>
+      <span className={`${prefixCls}-item-content`} key="content">
+        {children}
+      </span>
+    </td>
+  );
+};
+
+const renderRow = (
+  children: React.ReactElement<DescriptionsItemProps>[],
+  index: number,
+  { prefixCls, column, isLast }: { prefixCls: string; column: number; isLast: boolean },
+  bordered: boolean,
+) => {
+  // copy children,prevent changes to incoming parameters
+  const childrenArray = [...children];
+  let lastChildren = childrenArray.pop() as React.ReactElement<DescriptionsItemProps>;
+  const span = column - childrenArray.length;
+  if (isLast) {
+    lastChildren = React.cloneElement(lastChildren as React.ReactElement<DescriptionsItemProps>, {
+      span,
+    });
+  }
+  const cloneChildren = React.Children.map(
+    childrenArray,
+    (childrenItem: React.ReactElement<DescriptionsItemProps>) => {
+      return renderCol(childrenItem, bordered);
+    },
+  );
+  return (
+    <tr className={`${prefixCls}-row`} key={index}>
+      {cloneChildren}
+      {renderCol(lastChildren, bordered)}
+    </tr>
+  );
+};
+
+const defaultColumnMap = {
+  xxl: 3,
+  xl: 3,
+  lg: 3,
+  md: 3,
+  sm: 2,
+  xs: 1,
+};
+
+class Descriptions extends React.Component<
+  DescriptionsProps,
+  {
+    screens: BreakpointMap;
+  }
+> {
+  static defaultProps: DescriptionsProps = {
+    size: 'default',
+    column: defaultColumnMap,
+  };
+  static Item: typeof DescriptionsItem;
+  state: {
+    screens: BreakpointMap;
+  } = {
+    screens: {},
+  };
+  token: string;
+  componentDidMount() {
+    const { column } = this.props;
+    this.token = ResponsiveObserve.subscribe(screens => {
+      if (typeof column !== 'object') {
+        return;
+      }
+      this.setState({
+        screens,
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    ResponsiveObserve.unsubscribe(this.token);
+  }
+
+  getColumn(): number {
+    const { column } = this.props;
+    if (typeof column === 'object') {
+      for (let i = 0; i < responsiveArray.length; i++) {
+        const breakpoint: Breakpoint = responsiveArray[i];
+        if (this.state.screens[breakpoint] && column[breakpoint] !== undefined) {
+          return column[breakpoint] || defaultColumnMap[breakpoint];
+        }
+      }
+    }
+    //If the configuration is not an object, it is a number, return number
+    if (typeof column === 'number') {
+      return column as number;
+    }
+    // If it is an object, but no response is found, this happens only in the test.
+    // Maybe there are some strange environments
+    return 3;
+  }
+
+  render() {
+    return (
+      <ConfigConsumer>
+        {({ getPrefixCls }: ConfigConsumerProps) => {
+          const {
+            className,
+            prefixCls: customizePrefixCls,
+            title,
+            size,
+            children,
+            bordered = false,
+          } = this.props;
+          const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
+
+          const column = this.getColumn();
+          const cloneChildren = React.Children.map(
+            children,
+            (child: React.ReactElement<DescriptionsItemProps>) => {
+              return React.cloneElement(child, {
+                prefixCls,
+              });
+            },
+          );
+
+          const childrenArray: Array<
+            React.ReactElement<DescriptionsItemProps>[]
+          > = generateChildrenRows(cloneChildren, column);
+          return (
+            <div
+              className={classNames(prefixCls, className, {
+                [size as string]: size !== 'default',
+                bordered,
+              })}
+            >
+              {title && <div className={`${prefixCls}-title`}>{title}</div>}
+              <div className={`${prefixCls}-view`}>
+                <table>
+                  <tbody>
+                    {childrenArray.map((child, index) =>
+                      renderRow(
+                        child,
+                        index,
+                        {
+                          prefixCls,
+                          column,
+                          isLast: index + 1 === childrenArray.length,
+                        },
+                        bordered,
+                      ),
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          );
+        }}
+      </ConfigConsumer>
+    );
+  }
+}
+
+Descriptions.Item = DescriptionsItem;
+
+export default Descriptions;
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
new file mode 100644
index 000000000000..ba8c034907ab
--- /dev/null
+++ b/components/descriptions/index.zh-CN.md
@@ -0,0 +1,31 @@
+---
+category: Components
+subtitle: 描述列表
+type: 数据展示
+title: Descriptions
+cols: 1
+---
+
+成组展示多个只读字段。
+
+## 何时使用
+
+常见于详情页的信息展示。
+
+## API
+
+### Descriptions
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 描述列表的标题，显示在最顶部 | ReactNode | - |
+| bordered | 是否展示边框 | boolean | false |
+| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |
+| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false |
+
+### DescriptionItem
+
+| 参数  | 说明         | 类型      | 默认值 |
+| ----- | ------------ | --------- | ------ |
+| label | 内容的描述   | ReactNode | -      |
+| span  | 包含列的数量 | number    | 1      |
diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
new file mode 100644
index 000000000000..fcc29e539b70
--- /dev/null
+++ b/components/descriptions/style/index.less
@@ -0,0 +1,118 @@
+@import '../../style/themes/default';
+@import '../../style/mixins/index';
+
+@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
+
+@descriptions-default-padding: 16px 24px;
+@descriptions-middle-padding: 12px 24px;
+@descriptions-small-padding: 8px 16px;
+
+.@{descriptions-prefix-cls} {
+  &-title {
+    margin-bottom: 20px;
+    color: @heading-color;
+    font-weight: bold;
+    font-size: @font-size-lg;
+    line-height: @line-height-base;
+  }
+
+  &-view {
+    width: 100%;
+    overflow: hidden;
+    border-radius: @border-radius-base;
+    table {
+      width: 100%;
+    }
+  }
+
+  &-row {
+    > td {
+      padding-bottom: 16px;
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &-item-label {
+    color: @heading-color;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    white-space: nowrap;
+    &::after {
+      position: relative;
+      top: -0.5px;
+      margin: 0 8px 0 2px;
+      content: ':';
+    }
+  }
+
+  &-item-content {
+    display: table-cell;
+    color: @text-color;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+  }
+
+  &-item {
+    padding-bottom: 0;
+    > span {
+      display: inline-block;
+    }
+    .@{descriptions-prefix-cls}-item-label {
+      float: left;
+      padding: 0 !important;
+    }
+    .@{descriptions-prefix-cls}-item-content {
+      float: left;
+      padding: 0 !important;
+    }
+  }
+
+  // padding setting
+  .@{descriptions-prefix-cls}-item-label,
+  .@{descriptions-prefix-cls}-item-content {
+    padding: @descriptions-default-padding;
+  }
+
+  &.bordered.middle {
+    .@{descriptions-prefix-cls}-item-label,
+    .@{descriptions-prefix-cls}-item-content {
+      padding: @descriptions-middle-padding;
+    }
+  }
+  &.bordered.small {
+    .@{descriptions-prefix-cls}-item-label,
+    .@{descriptions-prefix-cls}-item-content {
+      padding: @descriptions-small-padding;
+    }
+  }
+  &.bordered {
+    .@{descriptions-prefix-cls}-view {
+      border: 1px solid @border-color-split;
+    }
+    .@{descriptions-prefix-cls}-item-label,
+    .@{descriptions-prefix-cls}-item-content {
+      border-right: 1px solid @border-color-split;
+    }
+
+    .@{descriptions-prefix-cls}-item-label:last-child,
+    .@{descriptions-prefix-cls}-item-content:last-child {
+      border-right: none;
+    }
+
+    .@{descriptions-prefix-cls}-row {
+      border-bottom: 1px solid @border-color-split;
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .@{descriptions-prefix-cls}-item-label {
+      background-color: #fafafa;
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/components/descriptions/style/index.tsx b/components/descriptions/style/index.tsx
new file mode 100644
index 000000000000..3a3ab0de59ac
--- /dev/null
+++ b/components/descriptions/style/index.tsx
@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';
diff --git a/components/divider/__tests__/__snapshots__/demo.test.js.snap b/components/divider/__tests__/__snapshots__/demo.test.js.snap
index 9e7906d16fcc..22c9b0768086 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.js.snap
@@ -12,7 +12,7 @@ exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
   </p>
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-center"
   >
     <span
       class="ant-divider-inner-text"
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index fea5167045ad..d8b993b8fe4a 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -5,7 +5,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 export interface DividerProps {
   prefixCls?: string;
   type?: 'horizontal' | 'vertical';
-  orientation?: 'left' | 'right' | '';
+  orientation?: 'left' | 'right' | 'center';
   className?: string;
   children?: React.ReactNode;
   dashed?: boolean;
@@ -18,7 +18,7 @@ const Divider: React.SFC<DividerProps> = props => (
       const {
         prefixCls: customizePrefixCls,
         type = 'horizontal',
-        orientation = '',
+        orientation = 'center',
         className,
         children,
         dashed,
diff --git a/components/divider/style/index.less b/components/divider/style/index.less
index bb3110481c87..78fab57b2dba 100644
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@@ -18,6 +18,7 @@
     margin: 0 8px;
     vertical-align: middle;
   }
+
   &-horizontal {
     display: block;
     clear: both;
@@ -27,7 +28,7 @@
     margin: 24px 0;
   }
 
-  &-horizontal&-with-text,
+  &-horizontal&-with-text-center,
   &-horizontal&-with-text-left,
   &-horizontal&-with-text-right {
     display: table;
@@ -89,7 +90,7 @@
     background: none;
     border-top: 1px dashed @border-color-split;
   }
-  &-horizontal&-with-text&-dashed,
+  &-horizontal&-with-text-center&-dashed,
   &-horizontal&-with-text-left&-dashed,
   &-horizontal&-with-text-right&-dashed {
     border-top: 0;
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index f59066fda65c..65212ee27231 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -6,6 +6,7 @@ exports[`Drawer className is test_drawer 1`] = `
 >
   <div
     class="ant-drawer ant-drawer-right test_drawer"
+    tabindex="-1"
   >
     <div
       class="ant-drawer-mask"
@@ -67,6 +68,7 @@ exports[`Drawer closable is false 1`] = `
 >
   <div
     class="ant-drawer ant-drawer-right"
+    tabindex="-1"
   >
     <div
       class="ant-drawer-mask"
@@ -100,6 +102,7 @@ exports[`Drawer destroyOnClose is true 1`] = `
 >
   <div
     class="ant-drawer ant-drawer-right"
+    tabindex="-1"
   >
     <div
       class="ant-drawer-mask"
@@ -161,6 +164,7 @@ exports[`Drawer have a title 1`] = `
 >
   <div
     class="ant-drawer ant-drawer-right"
+    tabindex="-1"
   >
     <div
       class="ant-drawer-mask"
@@ -227,6 +231,7 @@ exports[`Drawer render correctly 1`] = `
 >
   <div
     class="ant-drawer ant-drawer-right"
+    tabindex="-1"
   >
     <div
       class="ant-drawer-mask"
@@ -288,6 +293,7 @@ exports[`Drawer render top drawer 1`] = `
 >
   <div
     class="ant-drawer ant-drawer-top"
+    tabindex="-1"
   >
     <div
       class="ant-drawer-mask"
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index dfaccd3f45bc..252151e4c1cb 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -15,6 +15,7 @@ exports[`Drawer render correctly 1`] = `
   >
     <div
       class="ant-drawer ant-drawer-right ant-drawer-open"
+      tabindex="-1"
     >
       <div
         class="ant-drawer-mask"
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 9195e29a0c2b..c0aa13d6cd8f 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import RcDrawer from 'rc-drawer';
-import createReactContext, { Context } from '@ant-design/create-react-context';
+import createReactContext from '@ant-design/create-react-context';
 import warning from '../_util/warning';
 import classNames from 'classnames';
 import Icon from '../icon';
 import { withConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { tuple } from '../_util/type';
 
-const DrawerContext: Context<Drawer | null> = createReactContext(null);
+const DrawerContext = createReactContext<Drawer | null>(null);
 
 type EventType = React.MouseEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement>;
 
@@ -88,8 +88,9 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   destroyClose: boolean;
 
   public componentDidUpdate(preProps: DrawerProps) {
-    if (preProps.visible !== this.props.visible && this.parentDrawer) {
-      if (this.props.visible) {
+    const { visible } = this.props;
+    if (preProps.visible !== visible && this.parentDrawer) {
+      if (visible) {
         this.parentDrawer.push();
       } else {
         this.parentDrawer.pull();
@@ -98,11 +99,9 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
   }
 
   close = (e: EventType) => {
-    if (this.props.visible !== undefined) {
-      if (this.props.onClose) {
-        this.props.onClose(e);
-      }
-      return;
+    const { visible, onClose } = this.props;
+    if (visible !== undefined && onClose) {
+      onClose(e);
     }
   };
 
diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
index b3d0259f34ce..228c5851654f 100644
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@@ -187,6 +187,8 @@
 
   &-mask {
     position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 0;
     background-color: @modal-mask-bg;
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index ffba8cd93904..99b198566a4c 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -102,7 +102,7 @@
 
       &-selected,
       &-selected > a {
-        color: @primary-color;
+        color: @dropdown-selected-color;
         background-color: @item-active-bg;
       }
 
diff --git a/components/form/context.ts b/components/form/context.ts
index 9caf0828fcf5..1a9508000b6d 100644
--- a/components/form/context.ts
+++ b/components/form/context.ts
@@ -1,4 +1,4 @@
-import createReactContext, { Context } from '@ant-design/create-react-context';
+import createReactContext from '@ant-design/create-react-context';
 import { ColProps } from '../grid/col';
 import { FormLabelAlign } from './FormItem';
 
@@ -10,7 +10,7 @@ export interface FormContextProps {
   wrapperCol?: ColProps;
 }
 
-export const FormContext: Context<FormContextProps> = createReactContext({
+export const FormContext = createReactContext<FormContextProps>({
   labelAlign: 'right',
   vertical: false,
 });
diff --git a/components/form/demo/style-check-debug.md b/components/form/demo/style-check-debug.md
index 38347775475d..827ad673af77 100644
--- a/components/form/demo/style-check-debug.md
+++ b/components/form/demo/style-check-debug.md
@@ -17,7 +17,6 @@ Please check this before commit.
 ```jsx
 import { Button, Modal, Form, Row, Col, Input, Select, InputNumber, Radio, DatePicker } from 'antd';
 
-const RadioGroup = Radio.Group;
 const ColSpan = { lg: 12, md: 24 };
 
 class App extends React.Component {
@@ -140,10 +139,10 @@ class App extends React.Component {
             </Col>
             <Col {...ColSpan}>
               <Item label="RadioGroup: 64px">
-                <RadioGroup>
+                <Radio.Group>
                   <Radio value={0}>男</Radio>
                   <Radio value={1}>女</Radio>
-                </RadioGroup>
+                </Radio.Group>
               </Item>
             </Col>
           </Row>
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 6fa0161efcc6..2ab893647a0d 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -225,7 +225,7 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
 
 ## Using in TypeScript
 
-```jsx
+```tsx
 import { Form } from 'antd';
 import { FormComponentProps } from 'antd/lib/form';
 
@@ -238,12 +238,9 @@ class UserForm extends React.Component<UserFormProps, any> {
   // ...
 }
 
-const App =
-  Form.create <
-  UserFormProps >
-  {
-    // ...
-  }(UserForm);
+const App = Form.create<UserFormProps>({
+  // ...
+})(UserForm);
 ```
 
 <style>
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 0dd24ae85411..d60204cb398a 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -227,7 +227,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
 
 ## 在 TypeScript 中使用
 
-```jsx
+```tsx
 import { Form } from 'antd';
 import { FormComponentProps } from 'antd/lib/form';
 
@@ -240,12 +240,9 @@ class UserForm extends React.Component<UserFormProps, any> {
   // ...
 }
 
-const App =
-  Form.create <
-  UserFormProps >
-  {
-    // ...
-  }(UserForm);
+const App = Form.create<UserFormProps>({
+  // ...
+})(UserForm);
 ```
 
 <style>
diff --git a/components/form/style/index.less b/components/form/style/index.less
index 303275b4d436..11974f3ee7dd 100644
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@@ -216,6 +216,7 @@ form {
     }
   }
 
+  .@{ant-prefix}-mentions,
   textarea.@{ant-prefix}-input {
     height: auto;
     margin-bottom: 4px;
diff --git a/components/grid/__tests__/index.test.js b/components/grid/__tests__/index.test.js
index f0d42d6b67fd..3aeadcf53de5 100644
--- a/components/grid/__tests__/index.test.js
+++ b/components/grid/__tests__/index.test.js
@@ -7,8 +7,8 @@ jest.mock('enquire.js', () => {
   let unmatchFun;
   return {
     unregister: jest.fn(),
-    register: (meidia, options) => {
-      if (meidia === '(max-width: 575px)') {
+    register: (media, options) => {
+      if (media === '(max-width: 575px)') {
         that = this;
         options.match.call(that);
         unmatchFun = options.unmatch;
@@ -31,23 +31,10 @@ describe('Grid', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should work correct when gutter is object', () => {
-    // eslint-disable-next-line global-require
-    const enquire = require('enquire.js');
-    const wrapper = mount(<Row gutter={{ xs: 20 }} />);
-    expect(wrapper.find('div').prop('style')).toEqual({
-      marginLeft: -10,
-      marginRight: -10,
-    });
-    enquire.callunmatch();
-    expect(
-      wrapper
-        .update()
-        .find('div')
-        .prop('style'),
-    ).toEqual(undefined);
+  it('when typeof getGutter is object', () => {
+    const wrapper = mount(<Row gutter={{ xs: 8, sm: 16, md: 24 }} />);
+    expect(wrapper.instance().getGutter()).toBe(8);
     wrapper.unmount();
-    expect(enquire.unregister).toHaveBeenCalledTimes(6);
   });
 
   it('renders wrapped Col correctly', () => {
@@ -70,8 +57,22 @@ describe('Grid', () => {
     expect(willUnmount).toHaveBeenCalled();
   });
 
-  it('when typeof getGutter is object', () => {
-    const wrapper = mount(<Row gutter={{ xs: 8, sm: 16, md: 24 }} />).instance();
-    expect(wrapper.getGutter()).toBe(8);
+  it('should work correct when gutter is object', () => {
+    // eslint-disable-next-line global-require
+    const enquire = require('enquire.js');
+    const wrapper = mount(<Row gutter={{ xs: 20 }} />);
+    expect(wrapper.find('div').prop('style')).toEqual({
+      marginLeft: -10,
+      marginRight: -10,
+    });
+    enquire.callunmatch();
+    expect(
+      wrapper
+        .update()
+        .find('div')
+        .prop('style'),
+    ).toEqual(undefined);
+    wrapper.unmount();
+    expect(enquire.unregister).toHaveBeenCalled();
   });
 });
diff --git a/components/grid/row.tsx b/components/grid/row.tsx
index d1c341416c6e..b6932b6a54a8 100644
--- a/components/grid/row.tsx
+++ b/components/grid/row.tsx
@@ -1,29 +1,15 @@
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-
-// matchMedia polyfill for
-// https://github.com/WickyNilliams/enquire.js/issues/82
-let enquire: any;
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = (mediaQuery: string) => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  window.matchMedia = window.matchMedia || matchMediaPolyfill;
-  enquire = require('enquire.js');
-}
-
 import * as React from 'react';
 import classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import RowContext from './RowContext';
 import { tuple } from '../_util/type';
+import ResponsiveObserve, {
+  Breakpoint,
+  BreakpointMap,
+  responsiveArray,
+} from '../_util/responsiveObserve';
 
-export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-export type BreakpointMap = Partial<Record<Breakpoint, string>>;
 const RowAligns = tuple('top', 'middle', 'bottom');
 const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -38,17 +24,6 @@ export interface RowState {
   screens: BreakpointMap;
 }
 
-const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-
-const responsiveMap: BreakpointMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)',
-};
-
 export default class Row extends React.Component<RowProps, RowState> {
   static defaultProps = {
     gutter: 0,
@@ -67,41 +42,16 @@ export default class Row extends React.Component<RowProps, RowState> {
   state: RowState = {
     screens: {},
   };
-
+  token: string;
   componentDidMount() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.register(responsiveMap[screen], {
-        match: () => {
-          if (typeof this.props.gutter !== 'object') {
-            return;
-          }
-          this.setState(prevState => ({
-            screens: {
-              ...prevState.screens,
-              [screen]: true,
-            },
-          }));
-        },
-        unmatch: () => {
-          if (typeof this.props.gutter !== 'object') {
-            return;
-          }
-          this.setState(prevState => ({
-            screens: {
-              ...prevState.screens,
-              [screen]: false,
-            },
-          }));
-        },
-        // Keep a empty destory to avoid triggering unmatch when unregister
-        destroy() {},
-      }),
-    );
+    this.token = ResponsiveObserve.subscribe(screens => {
+      if (typeof this.props.gutter === 'object') {
+        this.setState({ screens });
+      }
+    });
   }
   componentWillUnmount() {
-    Object.keys(responsiveMap).map((screen: Breakpoint) =>
-      enquire.unregister(responsiveMap[screen]),
-    );
+    ResponsiveObserve.unsubscribe(this.token);
   }
   getGutter(): number | undefined {
     const { gutter } = this.props;
diff --git a/components/icon/__tests__/index.test.js b/components/icon/__tests__/index.test.js
index 5162b6447e4b..16782325936b 100644
--- a/components/icon/__tests__/index.test.js
+++ b/components/icon/__tests__/index.test.js
@@ -226,4 +226,22 @@ describe('utils', () => {
       'home-o',
     ]);
   });
+
+  it('should depracate typo icon name', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Icon type="interation" />);
+    expect(errorSpy).toHaveBeenLastCalledWith(
+      "Warning: [antd: Icon] Icon 'interation' is typo and depracated, please use 'interaction' instead.",
+    );
+    render(<Icon type="cross" />);
+    expect(errorSpy).toHaveBeenLastCalledWith(
+      "Warning: [antd: Icon] Icon 'cross' is typo and depracated, please use 'close' instead.",
+    );
+    render(<Icon type="canlendar" theme="twoTone" />);
+    expect(errorSpy).toHaveBeenLastCalledWith(
+      "Warning: [antd: Icon] Icon 'canlendar' is typo and depracated, please use 'calendar' instead.",
+    );
+    expect(errorSpy).toHaveBeenCalledTimes(3);
+    errorSpy.mockRestore();
+  });
 });
diff --git a/components/icon/utils.ts b/components/icon/utils.ts
index d07669310440..92e0b9a5511d 100644
--- a/components/icon/utils.ts
+++ b/components/icon/utils.ts
@@ -50,10 +50,25 @@ export function withThemeSuffix(type: string, theme: ThemeType) {
 
 // For alias or compatibility
 export function alias(type: string) {
+  let newType = type;
   switch (type) {
     case 'cross':
-      return 'close';
+      newType = 'close';
+      break;
+    // https://github.com/ant-design/ant-design/issues/13007
+    case 'interation':
+      newType = 'interaction';
+      break;
+    // https://github.com/ant-design/ant-design/issues/16810
+    case 'canlendar':
+      newType = 'calendar';
+      break;
     default:
   }
-  return type;
+  warning(
+    newType === type,
+    'Icon',
+    `Icon '${type}' is typo and depracated, please use '${newType}' instead.`,
+  );
+  return newType;
 }
diff --git a/components/index.tsx b/components/index.tsx
index a01bc9308813..4130c5c7fb97 100644
--- a/components/index.tsx
+++ b/components/index.tsx
@@ -53,6 +53,8 @@ export { default as ConfigProvider } from './config-provider';
 
 export { default as DatePicker } from './date-picker';
 
+export { default as Descriptions } from './descriptions';
+
 export { default as Divider } from './divider';
 
 export { default as Dropdown } from './dropdown';
@@ -79,6 +81,8 @@ export { default as message } from './message';
 
 export { default as Menu } from './menu';
 
+export { default as Mentions } from './mentions';
+
 export { default as Modal } from './modal';
 
 export { default as Statistic } from './statistic';
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index 679cc515bf53..358aaf569f7a 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -21,7 +21,7 @@ export interface InputNumberProps
   disabled?: boolean;
   size?: 'large' | 'small' | 'default';
   formatter?: (value: number | string | undefined) => string;
-  parser?: (displayValue: string | undefined) => number;
+  parser?: (displayValue: string | undefined) => number | string;
   decimalSeparator?: string;
   placeholder?: string;
   style?: React.CSSProperties;
diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
index 597c38ac393f..8cf7efed1f60 100644
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@@ -77,8 +77,14 @@
     border-radius: @border-radius-base;
     outline: 0;
     transition: all 0.3s linear;
-    -moz-appearance: textfield;
+    -moz-appearance: textfield !important;
     .placeholder();
+
+    &[type='number']::-webkit-inner-spin-button,
+    &[type='number']::-webkit-outer-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+    }
   }
 
   &-lg {
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 1e796ac855e2..508568e1c43d 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -1198,10 +1198,7 @@ exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
     type="button"
   >
     <span>
-      Auto Resize: 
-    </span>
-    <span>
-      false
+      Auto Resize: false
     </span>
   </button>
   <textarea
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index 0cb4a5746a36..1aa974d31890 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -16,7 +16,7 @@ Using pre & post tabs example.
 ```jsx
 import { Input, Select, Icon } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 const selectBefore = (
   <Select defaultValue="Http://" style={{ width: 90 }}>
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index fbd42d231be2..d35f9893d379 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -21,7 +21,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
 import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
 
 const InputGroup = Input.Group;
-const Option = Select.Option;
+const { Option } = Select;
 
 const options = [
   {
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
index f8a917d4d1aa..0bc2b8f0c6d8 100644
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@@ -8,11 +8,13 @@
   height: @input-height-lg;
   padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
   font-size: @font-size-lg;
+  line-height: @input-height-lg;
 }
 
 .input-sm() {
   height: @input-height-sm;
   padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
+  line-height: @input-height-sm;
 }
 
 // input status
@@ -49,7 +51,7 @@
   padding: @input-padding-vertical-base @input-padding-horizontal-base;
   color: @input-color;
   font-size: @font-size-base;
-  line-height: @line-height-base;
+  line-height: @input-height-base;
   background-color: @input-bg;
   background-image: none;
   border: @border-width-base @border-style-base @input-border-color;
diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
index be5c0d1d26ad..92c03b3338d0 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -285,7 +285,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -309,7 +309,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -333,7 +333,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -357,7 +357,7 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;visibility:hidden;position:absolute"
+        style="visibility:hidden;position:absolute"
       >
         <div
           aria-expanded="false"
@@ -1269,7 +1269,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1293,7 +1293,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1317,7 +1317,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1341,7 +1341,7 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;visibility:hidden;position:absolute"
+        style="visibility:hidden;position:absolute"
       >
         <div
           aria-expanded="false"
@@ -1436,7 +1436,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1460,7 +1460,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1484,7 +1484,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1508,7 +1508,7 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;visibility:hidden;position:absolute"
+        style="visibility:hidden;position:absolute"
       >
         <div
           aria-expanded="false"
@@ -1772,7 +1772,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1796,7 +1796,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1820,7 +1820,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;display:none"
+        style="display:none"
       >
         <div
           aria-expanded="false"
@@ -1844,7 +1844,7 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
       <li
         class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
         role="menuitem"
-        style="line-height:64px;visibility:hidden;position:absolute"
+        style="visibility:hidden;position:absolute"
       >
         <div
           aria-expanded="false"
diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.js
index 878f717436cb..43a452f4ae4a 100644
--- a/components/layout/__tests__/index.test.js
+++ b/components/layout/__tests__/index.test.js
@@ -138,7 +138,17 @@ describe('Layout', () => {
   });
 });
 
-describe('Sider onBreakpoint', () => {
+describe('Sider', () => {
+  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+  afterEach(() => {
+    errorSpy.mockReset();
+  });
+
+  afterAll(() => {
+    errorSpy.mockRestore();
+  });
+
   beforeAll(() => {
     Object.defineProperty(window, 'matchMedia', {
       value: jest.fn(() => ({
@@ -159,4 +169,15 @@ describe('Sider onBreakpoint', () => {
     );
     expect(onBreakpoint).toHaveBeenCalledWith(true);
   });
+
+  it('should warning if use `inlineCollapsed` with menu', () => {
+    mount(
+      <Sider collapsible>
+        <Menu mode="inline" inlineCollapsed />
+      </Sider>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Menu] `inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
+    );
+  });
 });
diff --git a/components/layout/demo/custom-trigger-debug.md b/components/layout/demo/custom-trigger-debug.md
index c8a47586c46f..d1740c3988c7 100644
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@@ -14,7 +14,7 @@ debug: true
 import { Layout, Menu, Icon } from 'antd';
 
 const { Header, Sider, Content } = Layout;
-const SubMenu = Menu.SubMenu;
+const { SubMenu } = Menu;
 
 class SiderDemo extends React.Component {
   state = {
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 7ae54a8b6ad0..deb9aa8c4486 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -24,7 +24,7 @@ The level of the aside navigation is scalable. The first, second, and third leve
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';
 
 const { Header, Content, Footer, Sider } = Layout;
-const SubMenu = Menu.SubMenu;
+const { SubMenu } = Menu;
 
 class SiderDemo extends React.Component {
   state = {
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index 8a03fdb73dba..8b2e8297577f 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import createContext, { Context } from '@ant-design/create-react-context';
+import createContext from '@ant-design/create-react-context';
 import { SiderProps } from './Sider';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
@@ -19,7 +19,7 @@ export interface LayoutContextProps {
     removeSider: (id: string) => void;
   };
 }
-export const LayoutContext: Context<LayoutContextProps> = createContext({
+export const LayoutContext = createContext<LayoutContextProps>({
   siderHook: {
     addSider: () => null,
     removeSider: () => null,
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
index 58ed236d84f6..e602e45bf043 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
@@ -7523,6 +7523,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -12626,6 +12627,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -17729,6 +17731,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -22832,6 +22835,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -27935,6 +27939,7 @@ exports[`Locale Provider should display the text as da 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -33038,6 +33043,7 @@ exports[`Locale Provider should display the text as de 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -38141,6 +38147,7 @@ exports[`Locale Provider should display the text as el 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -43244,6 +43251,7 @@ exports[`Locale Provider should display the text as en 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -48347,6 +48355,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -48438,7 +48447,7 @@ exports[`Locale Provider should display the text as es 1`] = `
         class="ant-pagination-item-link"
       >
         <i
-          aria-label="icon: left"
+          aria-label="ícono: left"
           class="anticon anticon-left"
         >
           <svg
@@ -48513,7 +48522,7 @@ exports[`Locale Provider should display the text as es 1`] = `
         class="ant-pagination-item-link"
       >
         <i
-          aria-label="icon: right"
+          aria-label="ícono: right"
           class="anticon anticon-right"
         >
           <svg
@@ -48566,7 +48575,7 @@ exports[`Locale Provider should display the text as es 1`] = `
             unselectable="on"
           >
             <i
-              aria-label="icon: down"
+              aria-label="ícono: down"
               class="anticon anticon-down ant-select-arrow-icon"
             >
               <svg
@@ -48632,7 +48641,7 @@ exports[`Locale Provider should display the text as es 1`] = `
         unselectable="on"
       >
         <i
-          aria-label="icon: down"
+          aria-label="ícono: down"
           class="anticon anticon-down ant-select-arrow-icon"
         >
           <svg
@@ -48666,7 +48675,7 @@ exports[`Locale Provider should display the text as es 1`] = `
         value=""
       />
       <i
-        aria-label="icon: calendar"
+        aria-label="ícono: calendar"
         class="anticon anticon-calendar ant-calendar-picker-icon"
       >
         <svg
@@ -49475,7 +49484,7 @@ exports[`Locale Provider should display the text as es 1`] = `
       class="ant-time-picker-icon"
     >
       <i
-        aria-label="icon: clock-circle"
+        aria-label="ícono: clock-circle"
         class="anticon anticon-clock-circle ant-time-picker-clock-icon"
       >
         <svg
@@ -50433,7 +50442,7 @@ exports[`Locale Provider should display the text as es 1`] = `
         value=""
       />
       <i
-        aria-label="icon: calendar"
+        aria-label="ícono: calendar"
         class="anticon anticon-calendar ant-calendar-picker-icon"
       >
         <svg
@@ -51968,7 +51977,7 @@ exports[`Locale Provider should display the text as es 1`] = `
                 class="ant-popover-message"
               >
                 <i
-                  aria-label="icon: exclamation-circle"
+                  aria-label="ícono: exclamation-circle"
                   class="anticon anticon-exclamation-circle"
                 >
                   <svg
@@ -52071,7 +52080,7 @@ exports[`Locale Provider should display the text as es 1`] = `
               class="ant-transfer-list-search-action"
             >
               <i
-                aria-label="icon: search"
+                aria-label="ícono: search"
                 class="anticon anticon-search"
               >
                 <svg
@@ -52124,7 +52133,7 @@ exports[`Locale Provider should display the text as es 1`] = `
         type="button"
       >
         <i
-          aria-label="icon: right"
+          aria-label="ícono: right"
           class="anticon anticon-right"
         >
           <svg
@@ -52149,7 +52158,7 @@ exports[`Locale Provider should display the text as es 1`] = `
         type="button"
       >
         <i
-          aria-label="icon: left"
+          aria-label="ícono: left"
           class="anticon anticon-left"
         >
           <svg
@@ -52219,7 +52228,7 @@ exports[`Locale Provider should display the text as es 1`] = `
               class="ant-transfer-list-search-action"
             >
               <i
-                aria-label="icon: search"
+                aria-label="ícono: search"
                 class="anticon anticon-search"
               >
                 <svg
@@ -52300,7 +52309,7 @@ exports[`Locale Provider should display the text as es 1`] = `
             unselectable="on"
           >
             <i
-              aria-label="icon: down"
+              aria-label="ícono: down"
               class="anticon anticon-down ant-select-arrow-icon"
             >
               <svg
@@ -52351,7 +52360,7 @@ exports[`Locale Provider should display the text as es 1`] = `
             unselectable="on"
           >
             <i
-              aria-label="icon: down"
+              aria-label="ícono: down"
               class="anticon anticon-down ant-select-arrow-icon"
             >
               <svg
@@ -53352,7 +53361,7 @@ exports[`Locale Provider should display the text as es 1`] = `
                         </div>
                       </span>
                       <i
-                        aria-label="icon: filter"
+                        aria-label="ícono: filter"
                         class="anticon anticon-filter ant-dropdown-trigger"
                         tabindex="-1"
                         title="Filtrar menú"
@@ -53450,12 +53459,13 @@ exports[`Locale Provider should display the text as es 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
             >
               <i
-                aria-label="icon: close"
+                aria-label="ícono: close"
                 class="anticon anticon-close ant-modal-close-icon"
               >
                 <svg
@@ -58553,6 +58563,7 @@ exports[`Locale Provider should display the text as et 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -63656,6 +63667,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -68759,6 +68771,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -73862,6 +73875,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -78965,6 +78979,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -84068,6 +84083,7 @@ exports[`Locale Provider should display the text as he 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -89171,6 +89187,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -94274,6 +94291,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -99377,6 +99395,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -104480,6 +104499,7 @@ exports[`Locale Provider should display the text as id 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -109583,6 +109603,7 @@ exports[`Locale Provider should display the text as is 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -114686,6 +114707,7 @@ exports[`Locale Provider should display the text as it 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -119789,6 +119811,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -124892,6 +124915,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -129995,6 +130019,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -135098,6 +135123,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -140201,6 +140227,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -145304,6 +145331,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -150407,6 +150435,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -155510,6 +155539,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -160613,6 +160643,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -165716,6 +165747,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -170819,6 +170851,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -175922,6 +175955,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -181025,6 +181059,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -186128,6 +186163,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -191231,6 +191267,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -196334,6 +196371,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -201437,6 +201475,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -206540,6 +206579,7 @@ exports[`Locale Provider should display the text as th 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -211643,6 +211683,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -216746,6 +216787,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -221849,6 +221891,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -226952,6 +226995,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -232055,6 +232099,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md
index bfd9ed23223a..375ac5fb3964 100644
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@@ -34,8 +34,8 @@ import 'moment/locale/zh-cn';
 
 moment.locale('en');
 
-const Option = Select.Option;
-const RangePicker = DatePicker.RangePicker;
+const { Option } = Select;
+const { RangePicker } = DatePicker;
 
 const columns = [
   {
diff --git a/components/locale-provider/es_ES.tsx b/components/locale-provider/es_ES.tsx
index a82cb2359721..2932e4d8bb8d 100644
--- a/components/locale-provider/es_ES.tsx
+++ b/components/locale-provider/es_ES.tsx
@@ -9,12 +9,16 @@ export default {
   DatePicker,
   TimePicker,
   Calendar,
+  global: {
+    placeholder: 'Seleccione',
+  },
   Table: {
     filterTitle: 'Filtrar menú',
     filterConfirm: 'Aceptar',
     filterReset: 'Reiniciar',
     selectAll: 'Seleccionar todo',
     selectInvert: 'Invertir selección',
+    sortTitle: 'Ordenar',
   },
   Modal: {
     okText: 'Aceptar',
@@ -39,4 +43,16 @@ export default {
   Empty: {
     description: 'No hay datos',
   },
+  Icon: {
+    icon: 'ícono',
+  },
+  Text: {
+    edit: 'editar',
+    copy: 'copiar',
+    copied: 'copiado',
+    expand: 'expandir',
+  },
+  PageHeader: {
+    back: 'volver',
+  },
 };
diff --git a/components/locale-provider/lv_LV.tsx b/components/locale-provider/lv_LV.tsx
new file mode 100644
index 000000000000..6ff46c217cc9
--- /dev/null
+++ b/components/locale-provider/lv_LV.tsx
@@ -0,0 +1,42 @@
+import Pagination from 'rc-pagination/lib/locale/lv_LV';
+import DatePicker from '../date-picker/locale/lv_LV';
+import TimePicker from '../time-picker/locale/lv_LV';
+import Calendar from '../calendar/locale/lv_LV';
+
+export default {
+  locale: 'lv',
+  Pagination,
+  DatePicker,
+  TimePicker,
+  Calendar,
+  Table: {
+    filterTitle: 'Filtrēšanas izvēlne',
+    filterConfirm: 'OK',
+    filterReset: 'Atiestatīt',
+    selectAll: 'Atlasiet pašreizējo lapu',
+    selectInvert: 'Pārvērst pašreizējo lapu',
+  },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Atcelt',
+    justOkText: 'OK',
+  },
+  Popconfirm: {
+    okText: 'OK',
+    cancelText: 'Atcelt',
+  },
+  Transfer: {
+    searchPlaceholder: 'Meklēt šeit',
+    itemUnit: 'vienumu',
+    itemsUnit: 'vienumus',
+  },
+  Upload: {
+    uploading: 'Augšupielāde...',
+    removeFile: 'Noņemt failu',
+    uploadError: 'Augšupielādes kļūda',
+    previewFile: 'Priekšskatiet failu',
+  },
+  Empty: {
+    description: 'Nav datu',
+  },
+};
diff --git a/components/mention/index.en-US.md b/components/mention/index.en-US.md
index 461bb0821f63..f333f68bdf34 100644
--- a/components/mention/index.en-US.md
+++ b/components/mention/index.en-US.md
@@ -1,14 +1,18 @@
 ---
 category: Components
-type: Data Entry
-title: Mention
+type: Deprecated
+title: Mention (Deprecated)
 ---
 
-Mention component.
+Mention component. Deprecated, please use [Mentions](/components/mentions) instead.
 
-## When To Use
+## Why deprecated?
 
-When need to mention someone or something.
+<div class="ant-alert ant-alert-error ant-alert-no-icon">
+Mention use
+<a href="https://www.npmjs.com/package/draft-js" target="_blank" rel="noopener noreferrer">Draft.js</a>
+to measure tips position, which use nearly 11.6% package size. We hope to reduce bundle size by using lightweight solution to handle this.
+</div>
 
 ## API
 
diff --git a/components/mention/index.tsx b/components/mention/index.tsx
index 94c16358255e..01fbde1ec64d 100644
--- a/components/mention/index.tsx
+++ b/components/mention/index.tsx
@@ -3,6 +3,7 @@ import RcMention, { Nav, toString, toEditorState, getMentions } from 'rc-editor-
 import { polyfill } from 'react-lifecycles-compat';
 import classNames from 'classnames';
 import Icon from '../icon';
+import warning from '../_util/warning';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export type MentionPlacement = 'top' | 'bottom';
@@ -56,6 +57,12 @@ class Mention extends React.Component<MentionProps, MentionState> {
       filteredSuggestions: props.defaultSuggestions,
       focus: false,
     };
+
+    warning(
+      false,
+      'Mention',
+      'Mention component is deprecated. Please use Mentions component instead.',
+    );
   }
 
   onSearchChange = (value: string, prefix: string) => {
diff --git a/components/mention/index.zh-CN.md b/components/mention/index.zh-CN.md
index 9658b16f6b3b..8351b7312851 100644
--- a/components/mention/index.zh-CN.md
+++ b/components/mention/index.zh-CN.md
@@ -1,15 +1,19 @@
 ---
 category: Components
-subtitle: 提及
-type: 数据录入
+type: 废弃
+subtitle: 提及（废弃）
 title: Mention
 ---
 
-提及组件。
+提及组件。已废弃，请使用 [Mentions](/components/mentions) 代替。
 
-## 何时使用
+## 为何废弃？
 
-用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
+<div class="ant-alert ant-alert-error ant-alert-no-icon">
+Mention 组件使用了
+<a href="https://www.npmjs.com/package/draft-js" target="_blank" rel="noopener noreferrer">Draft.js</a>
+进行提示定位，占用了约 11.6% 的包大小。因而我们决定使用更轻量级的解决方案以便于在未来降低整个包的大小。
+</div>
 
 ## API
 
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000000..c377b1bf316b
--- /dev/null
+++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/mentions/demo/async.md correctly 1`] = `
+<div
+  class="ant-mentions"
+  style="width:100%"
+>
+  <textarea
+    rows="1"
+  />
+</div>
+`;
+
+exports[`renders ./components/mentions/demo/basic.md correctly 1`] = `
+<div
+  class="ant-mentions"
+  style="width:100%"
+>
+  <textarea
+    rows="1"
+  >
+    @afc163
+  </textarea>
+</div>
+`;
+
+exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-6 ant-form-item-label"
+    >
+      <label
+        class=""
+        for="mention"
+        title="Top coders"
+      >
+        Top coders
+      </label>
+    </div>
+    <div
+      class="ant-col ant-col-16 ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control"
+      >
+        <span
+          class="ant-form-item-children"
+        >
+          <div
+            class="ant-mentions"
+          >
+            <textarea
+              data-__field="[object Object]"
+              data-__meta="[object Object]"
+              id="mention"
+              rows="3"
+            />
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control"
+      >
+        <span
+          class="ant-form-item-children"
+        >
+          <button
+            class="ant-btn ant-btn-primary"
+            type="button"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+             
+          <button
+            class="ant-btn"
+            type="button"
+          >
+            <span>
+              Reset
+            </span>
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./components/mentions/demo/placement.md correctly 1`] = `
+<div
+  class="ant-mentions"
+  style="width:100%"
+>
+  <textarea
+    rows="1"
+  />
+</div>
+`;
+
+exports[`renders ./components/mentions/demo/prefix.md correctly 1`] = `
+<div
+  class="ant-mentions"
+  style="width:100%"
+>
+  <textarea
+    placeholder="input @ to mention people, # to mention tag"
+    rows="1"
+  />
+</div>
+`;
+
+exports[`renders ./components/mentions/demo/readonly.md correctly 1`] = `
+<div>
+  <div
+    style="margin-bottom:10px"
+  >
+    <div
+      class="ant-mentions ant-mentions-disabled"
+      style="width:100%"
+    >
+      <textarea
+        disabled=""
+        placeholder="this is disabled Mentions"
+        rows="1"
+      />
+    </div>
+  </div>
+  <div
+    class="ant-mentions"
+    style="width:100%"
+  >
+    <textarea
+      placeholder="this is readOnly Mentions"
+      readonly=""
+      rows="1"
+    />
+  </div>
+</div>
+`;
diff --git a/components/mentions/__tests__/demo.test.js b/components/mentions/__tests__/demo.test.js
new file mode 100644
index 000000000000..1946e5565005
--- /dev/null
+++ b/components/mentions/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('mentions');
diff --git a/components/mentions/__tests__/index.test.js b/components/mentions/__tests__/index.test.js
new file mode 100644
index 000000000000..2329f46f49c1
--- /dev/null
+++ b/components/mentions/__tests__/index.test.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Mentions from '..';
+
+const { getMentions } = Mentions;
+
+function simulateInput(wrapper, text = '', keyEvent) {
+  const lastChar = text[text.length - 1];
+  const myKeyEvent = keyEvent || {
+    which: lastChar.charCodeAt(0),
+    key: lastChar,
+    target: {
+      value: text,
+      selectionStart: text.length,
+    },
+  };
+
+  wrapper.find('textarea').simulate('keyDown', myKeyEvent);
+
+  const textareaInstance = wrapper.find('textarea').instance();
+  textareaInstance.value = text;
+  textareaInstance.selectionStart = text.length;
+  textareaInstance.selectionStart = text.length;
+
+  if (!keyEvent) {
+    wrapper.find('textarea').simulate('change', {
+      target: { value: text },
+    });
+  }
+
+  wrapper.find('textarea').simulate('keyUp', myKeyEvent);
+  wrapper.update();
+}
+
+describe('Mentions', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('getMentions', () => {
+    const mentions = getMentions('@light #bamboo cat', { prefix: ['@', '#'] });
+    expect(mentions).toEqual([
+      {
+        prefix: '@',
+        value: 'light',
+      },
+      {
+        prefix: '#',
+        value: 'bamboo',
+      },
+    ]);
+  });
+
+  it('focus', () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+
+    const wrapper = mount(<Mentions onFocus={onFocus} onBlur={onBlur} />);
+    wrapper.find('textarea').simulate('focus');
+    expect(wrapper.find('.ant-mentions').hasClass('ant-mentions-focused')).toBeTruthy();
+    expect(onFocus).toHaveBeenCalled();
+
+    wrapper.find('textarea').simulate('blur');
+    jest.runAllTimers();
+    wrapper.update();
+    expect(wrapper.find('.ant-mentions').hasClass('ant-mentions-focused')).toBeFalsy();
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it('loading', () => {
+    const wrapper = mount(<Mentions loading />);
+    simulateInput(wrapper, '@');
+    expect(wrapper.find('.ant-mentions-dropdown-menu-item').length).toBe(1);
+    expect(wrapper.find('.ant-spin').length).toBeTruthy();
+  });
+
+  it('notFoundContent', () => {
+    const wrapper = mount(<Mentions notFoundContent={<span className="bamboo-light" />} />);
+    simulateInput(wrapper, '@');
+    expect(wrapper.find('.ant-mentions-dropdown-menu-item').length).toBe(1);
+    expect(wrapper.find('.bamboo-light').length).toBeTruthy();
+  });
+});
diff --git a/components/mentions/demo/async.md b/components/mentions/demo/async.md
new file mode 100644
index 000000000000..b3bd078340f1
--- /dev/null
+++ b/components/mentions/demo/async.md
@@ -0,0 +1,87 @@
+---
+order: 1
+title:
+  zh-CN: 异步加载
+  en-US: Asynchronous loading
+---
+
+## zh-CN
+
+匹配内容列表为异步返回时。
+
+## en-US
+
+async
+
+```jsx
+import { Mentions } from 'antd';
+import debounce from 'lodash/debounce';
+
+const { Option } = Mentions;
+
+class AsyncMention extends React.Component {
+  constructor() {
+    super();
+
+    this.loadGithubUsers = debounce(this.loadGithubUsers, 800);
+  }
+
+  state = {
+    search: '',
+    loading: false,
+    users: [],
+  };
+
+  onSearch = search => {
+    this.setState({ search, loading: !!search, users: [] });
+    console.log('Search:', search);
+    this.loadGithubUsers(search);
+  };
+
+  loadGithubUsers(key) {
+    if (!key) {
+      this.setState({
+        users: [],
+      });
+      return;
+    }
+
+    fetch(`https://api.github.com/search/users?q=${key}`)
+      .then(res => res.json())
+      .then(({ items = [] }) => {
+        const { search } = this.state;
+        if (search !== key) return;
+
+        this.setState({
+          users: items.slice(0, 10),
+          loading: false,
+        });
+      });
+  }
+
+  render() {
+    const { users, loading } = this.state;
+
+    return (
+      <Mentions style={{ width: '100%' }} loading={loading} onSearch={this.onSearch}>
+        {users.map(({ login, avatar_url: avatar }) => (
+          <Option key={login} value={login} className="antd-demo-dynamic-option">
+            <img src={avatar} alt={login} />
+            <span>{login}</span>
+          </Option>
+        ))}
+      </Mentions>
+    );
+  }
+}
+
+ReactDOM.render(<AsyncMention />, mountNode);
+```
+
+<style>
+.antd-demo-dynamic-option img {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+}
+</style>
diff --git a/components/mentions/demo/basic.md b/components/mentions/demo/basic.md
new file mode 100644
index 000000000000..ee9762c691b3
--- /dev/null
+++ b/components/mentions/demo/basic.md
@@ -0,0 +1,42 @@
+---
+order: 0
+title:
+  zh-CN: 基本使用
+  en-US: Basic
+---
+
+## zh-CN
+
+基本使用
+
+## en-US
+
+Basic usage.
+
+```jsx
+import { Mentions } from 'antd';
+
+const { Option } = Mentions;
+
+function onChange(value) {
+  console.log('Change:', value);
+}
+
+function onSelect(option) {
+  console.log('select', option);
+}
+
+ReactDOM.render(
+  <Mentions
+    style={{ width: '100%' }}
+    onChange={onChange}
+    onSelect={onSelect}
+    defaultValue="@afc163"
+  >
+    <Option value="afc163">afc163</Option>
+    <Option value="zombieJ">zombieJ</Option>
+    <Option value="yesmeck">yesmeck</Option>
+  </Mentions>,
+  mountNode,
+);
+```
diff --git a/components/mentions/demo/form.md b/components/mentions/demo/form.md
new file mode 100644
index 000000000000..36027833b4ea
--- /dev/null
+++ b/components/mentions/demo/form.md
@@ -0,0 +1,81 @@
+---
+order: 2
+title:
+  zh-CN: 配合 Form 使用
+  en-US: With Form
+---
+
+## zh-CN
+
+受控模式，例如配合 Form 使用。
+
+## en-US
+
+Controlled mode, for example, to work with `Form`.
+
+```jsx
+import { Mentions, Form, Button } from 'antd';
+
+const { Option, getMentions } = Mentions;
+
+class App extends React.Component {
+  handleReset = e => {
+    e.preventDefault();
+    this.props.form.resetFields();
+  };
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields((errors, values) => {
+      if (errors) {
+        console.log('Errors in the form!!!');
+        return;
+      }
+      console.log('Submit!!!');
+      console.log(values);
+    });
+  };
+
+  checkMention = (rule, value, callback) => {
+    const mentions = getMentions(value);
+    if (mentions.length < 2) {
+      callback(new Error('More than one must be selected!'));
+    } else {
+      callback();
+    }
+  };
+
+  render() {
+    const {
+      form: { getFieldDecorator },
+    } = this.props;
+
+    return (
+      <Form layout="horizontal">
+        <Form.Item label="Top coders" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
+          {getFieldDecorator('mention', {
+            rules: [{ validator: this.checkMention }],
+          })(
+            <Mentions rows="3">
+              <Option value="afc163">afc163</Option>
+              <Option value="zombieJ">zombieJ</Option>
+              <Option value="yesmeck">yesmeck</Option>
+            </Mentions>,
+          )}
+        </Form.Item>
+        <Form.Item wrapperCol={{ span: 14, offset: 6 }}>
+          <Button type="primary" onClick={this.handleSubmit}>
+            Submit
+          </Button>
+          &nbsp;&nbsp;&nbsp;
+          <Button onClick={this.handleReset}>Reset</Button>
+        </Form.Item>
+      </Form>
+    );
+  }
+}
+
+const FormDemo = Form.create()(App);
+
+ReactDOM.render(<FormDemo />, mountNode);
+```
diff --git a/components/mentions/demo/placement.md b/components/mentions/demo/placement.md
new file mode 100644
index 000000000000..450a71eec29f
--- /dev/null
+++ b/components/mentions/demo/placement.md
@@ -0,0 +1,29 @@
+---
+order: 5
+title:
+  zh-CN: 向上展开
+  en-US: Placement
+---
+
+## zh-CN
+
+向上展开建议。
+
+## en-US
+
+Change the suggestions placement.
+
+```jsx
+import { Mentions } from 'antd';
+
+const { Option } = Mentions;
+
+ReactDOM.render(
+  <Mentions style={{ width: '100%' }} placement="top">
+    <Option value="afc163">afc163</Option>
+    <Option value="zombieJ">zombieJ</Option>
+    <Option value="yesmeck">yesmeck</Option>
+  </Mentions>,
+  mountNode,
+);
+```
diff --git a/components/mentions/demo/prefix.md b/components/mentions/demo/prefix.md
new file mode 100644
index 000000000000..f70a73ad37c4
--- /dev/null
+++ b/components/mentions/demo/prefix.md
@@ -0,0 +1,56 @@
+---
+order: 3
+title:
+  zh-CN: 自定义触发字符
+  en-US: Customize Trigger Token
+---
+
+## zh-CN
+
+通过 `prefix` 属性自定义触发字符。默认为 `@`, 可以定义为数组。
+
+## en-US
+
+Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also supported.
+
+```jsx
+import { Mentions } from 'antd';
+
+const { Option } = Mentions;
+
+const MOCK_DATA = {
+  '@': ['afc163', 'zombiej', 'yesmeck'],
+  '#': ['1.0', '2.0', '3.0'],
+};
+
+class App extends React.Component {
+  state = {
+    prefix: '@',
+  };
+
+  onSearch = (_, prefix) => {
+    this.setState({ prefix });
+  };
+
+  render() {
+    const { prefix } = this.state;
+
+    return (
+      <Mentions
+        style={{ width: '100%' }}
+        placeholder="input @ to mention people, # to mention tag"
+        prefix={['@', '#']}
+        onSearch={this.onSearch}
+      >
+        {(MOCK_DATA[prefix] || []).map(value => (
+          <Option key={value} value={value}>
+            {value}
+          </Option>
+        ))}
+      </Mentions>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+```
diff --git a/components/mentions/demo/readonly.md b/components/mentions/demo/readonly.md
new file mode 100644
index 000000000000..864f4fcb8659
--- /dev/null
+++ b/components/mentions/demo/readonly.md
@@ -0,0 +1,45 @@
+---
+order: 4
+title:
+  zh-CN: 无效或只读
+  en-US: disabled or readOnly
+---
+
+## zh-CN
+
+通过 `disabled` 属性设置是否生效。通过 `readOnly` 属性设置是否只读。
+
+## en-US
+
+Configurate `disabled` and `readOnly`.
+
+```jsx
+import { Mentions } from 'antd';
+
+const { Option } = Mentions;
+
+function getOptions() {
+  return ['afc163', 'zombiej', 'yesmeck'].map(value => (
+    <Option key={value} value={value}>
+      {value}
+    </Option>
+  ));
+}
+
+function App() {
+  return (
+    <div>
+      <div style={{ marginBottom: 10 }}>
+        <Mentions style={{ width: '100%' }} placeholder="this is disabled Mentions" disabled>
+          {getOptions()}
+        </Mentions>
+      </div>
+      <Mentions style={{ width: '100%' }} placeholder="this is readOnly Mentions" readOnly>
+        {getOptions()}
+      </Mentions>
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, mountNode);
+```
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
new file mode 100644
index 000000000000..547a7900780c
--- /dev/null
+++ b/components/mentions/index.en-US.md
@@ -0,0 +1,54 @@
+---
+category: Components
+type: Data Entry
+title: Mentions
+---
+
+Mention component.
+
+> Mention component is deprecated. Please click [here](/components/mention) to view old document.
+
+## When To Use
+
+When need to mention someone or something.
+
+## API
+
+```jsx
+<Mentions onChange={onChange}>
+  <Mentions.Option value="sample">Sample</Mentions.Option>
+</Mentions>
+```
+
+### Mention
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| autoFocus | Auto get focus when component mounted | boolean | `false` |
+| defaultValue | Default value | string | - |
+| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
+| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
+| placement | Set popup placement | 'top' \| 'bottom' | 'bottom' |
+| prefix | Set trigger prefix keyword | string \| string[] | '@' |
+| split | Set split string before and after selected mention | string | ' ' |
+| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
+| value | Set value of mentions | string | - |
+| onChange | Trigger when value changed | (text: string) => void | - |
+| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
+| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
+| onFocus | Trigger when mentions get focus | () => void | - |
+| onBlur | Trigger when mentions lose focus | () => void | - |
+
+### Mention methods
+
+| Name    | Description  |
+| ------- | ------------ |
+| blur()  | remove focus |
+| focus() | get focus    |
+
+### Option
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| children | suggestion content | ReactNode | - |
+| value | value of suggestion, the value will insert into input filed while selected | string | '' |
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
new file mode 100644
index 000000000000..0e756ea22c65
--- /dev/null
+++ b/components/mentions/index.tsx
@@ -0,0 +1,165 @@
+import classNames from 'classnames';
+import omit from 'omit.js';
+import * as React from 'react';
+import { polyfill } from 'react-lifecycles-compat';
+import RcMentions from 'rc-mentions';
+import { MentionsProps as RcMentionsProps } from 'rc-mentions/lib/Mentions';
+import { OptionProps as RcOptionProps } from 'rc-mentions/lib/Option';
+import Spin from '../spin';
+import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
+
+const Option: React.FunctionComponent<RcOptionProps> = RcMentions.Option;
+
+function loadingFilterOption() {
+  return true;
+}
+
+export type MentionPlacement = 'top' | 'bottom';
+
+export interface OptionProps {
+  value: string;
+  children: React.ReactNode;
+  [key: string]: any;
+}
+
+export interface MentionProps extends RcMentionsProps {
+  loading?: boolean;
+}
+
+export interface MentionState {
+  focused: boolean;
+}
+
+interface MentionsConfig {
+  prefix?: string | string[];
+  split?: string;
+}
+
+interface MentionsEntity {
+  prefix: string;
+  value: string;
+}
+
+class Mentions extends React.Component<MentionProps, MentionState> {
+  static Option = Option;
+
+  static getMentions = (value: string = '', config?: MentionsConfig): MentionsEntity[] => {
+    const { prefix = '@', split = ' ' } = config || {};
+    const prefixList: string[] = Array.isArray(prefix) ? prefix : [prefix];
+
+    return value
+      .split(split)
+      .map(
+        (str = ''): MentionsEntity | null => {
+          let hitPrefix: string | null = null;
+
+          prefixList.some(prefixStr => {
+            const startStr = str.slice(0, prefixStr.length);
+            if (startStr === prefixStr) {
+              hitPrefix = prefixStr;
+              return true;
+            }
+            return false;
+          });
+
+          if (hitPrefix !== null) {
+            return {
+              prefix: hitPrefix,
+              value: str.slice(hitPrefix!.length),
+            };
+          }
+          return null;
+        },
+      )
+      .filter((entity): entity is MentionsEntity => !!entity && !!entity.value);
+  };
+
+  state = {
+    focused: false,
+  };
+
+  onFocus: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {
+    const { onFocus } = this.props;
+    if (onFocus) {
+      onFocus(...args);
+    }
+    this.setState({
+      focused: true,
+    });
+  };
+
+  onBlur: React.FocusEventHandler<HTMLTextAreaElement> = (...args) => {
+    const { onBlur } = this.props;
+    if (onBlur) {
+      onBlur(...args);
+    }
+    this.setState({
+      focused: false,
+    });
+  };
+
+  getNotFoundContent(renderEmpty: RenderEmptyHandler) {
+    const { notFoundContent } = this.props;
+    if (notFoundContent !== undefined) {
+      return notFoundContent;
+    }
+
+    return renderEmpty('Select');
+  }
+
+  getOptions = () => {
+    const { children, loading } = this.props;
+    if (loading) {
+      return (
+        <Option value={'ANTD_SEARCHING'} disabled>
+          <Spin size="small" />
+        </Option>
+      );
+    }
+
+    return children;
+  };
+
+  getFilterOption = (): any => {
+    const { filterOption, loading } = this.props;
+    if (loading) {
+      return loadingFilterOption;
+    }
+    return filterOption;
+  };
+
+  renderMentions = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
+    const { focused } = this.state;
+    const { prefixCls: customizePrefixCls, className, disabled, ...restProps } = this.props;
+    const prefixCls = getPrefixCls('mentions', customizePrefixCls);
+    const mentionsProps = omit(restProps, ['loading']);
+
+    const mergedClassName = classNames(className, {
+      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-focused`]: focused,
+    });
+
+    return (
+      <RcMentions
+        prefixCls={prefixCls}
+        notFoundContent={this.getNotFoundContent(renderEmpty)}
+        className={mergedClassName}
+        disabled={disabled}
+        {...mentionsProps}
+        filterOption={this.getFilterOption()}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+      >
+        {this.getOptions()}
+      </RcMentions>
+    );
+  };
+
+  render() {
+    return <ConfigConsumer>{this.renderMentions}</ConfigConsumer>;
+  }
+}
+
+polyfill(Mentions);
+
+export default Mentions;
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
new file mode 100644
index 000000000000..df5877f5e622
--- /dev/null
+++ b/components/mentions/index.zh-CN.md
@@ -0,0 +1,64 @@
+---
+category: Components
+subtitle: 提及
+type: 数据录入
+title: Mentions
+---
+
+提及组件。
+
+> 原 Mention 组件已废弃，原文档请点击[这里](/components/mention)。
+
+## 何时使用
+
+用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
+
+## API
+
+```jsx
+<Mention
+  onChange={onChange}
+  suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
+/>
+```
+
+## API
+
+```jsx
+<Mentions onChange={onChange}>
+  <Mentions.Option value="sample">Sample</Mentions.Option>
+</Mentions>
+```
+
+### Mention
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoFocus | 自动获得焦点 | boolean | `false` |
+| defaultValue | 默认值 | string | - |
+| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - |
+| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' |
+| placement | 弹出层展示位置 | 'top' \| 'bottom' | 'bottom' |
+| prefix | 设置触发关键字 | string \| string[] | '@' |
+| split | 设置选中项前后分隔符 | string | ' ' |
+| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - |
+| value | 设置值 | string | - |
+| onChange | 值改变时触发 | (text: string) => void | - |
+| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |
+| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |
+| onFocus | 获得焦点时触发 | () => void | - |
+| onBlur | 失去焦点时触发 | () => void | - |
+
+### Mention 方法
+
+| 名称    | 描述     |
+| ------- | -------- |
+| blur()  | 移除焦点 |
+| focus() | 获取焦点 |
+
+### Option
+
+| 参数     | 说明           | 类型      | 默认值 |
+| -------- | -------------- | --------- | ------ |
+| children | 选项内容       | ReactNode | -      |
+| value    | 选择时填充的值 | string    | ''     |
diff --git a/components/mentions/style/index.less b/components/mentions/style/index.less
new file mode 100644
index 000000000000..557e63204c3a
--- /dev/null
+++ b/components/mentions/style/index.less
@@ -0,0 +1,156 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@mention-prefix-cls: ~'@{ant-prefix}-mentions';
+
+.@{mention-prefix-cls} {
+  .reset-component;
+  .input;
+
+  position: relative;
+  display: inline-block;
+  height: auto;
+  white-space: pre-wrap;
+  padding: 0;
+  overflow: hidden;
+  vertical-align: bottom;
+
+  // =================== Status ===================
+  &-disabled {
+    > textarea {
+      .disabled();
+    }
+  }
+
+  &-focused {
+    .active();
+  }
+
+  // ================= Input Area =================
+  > textarea,
+  &-measure {
+    margin: 0;
+    padding: @input-padding-vertical-base @input-padding-horizontal-base;
+    overflow: inherit;
+    overflow-x: initial;
+    overflow-y: auto;
+    font-weight: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-style: inherit;
+    font-variant: inherit;
+    font-size-adjust: inherit;
+    font-stretch: inherit;
+    line-height: inherit;
+    direction: inherit;
+    letter-spacing: inherit;
+    white-space: inherit;
+    text-align: inherit;
+    vertical-align: top;
+    word-wrap: break-word;
+    word-break: inherit;
+    tab-size: inherit;
+  }
+
+  > textarea {
+    width: 100%;
+    border: none;
+    outline: none;
+    resize: none;
+
+    &:read-only {
+      cursor: default;
+    }
+  }
+
+  &-measure {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    color: transparent;
+    pointer-events: none;
+  }
+
+  // ================== Dropdown ==================
+  &-dropdown {
+    // Ref select dropdown style
+    .reset-component;
+
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+    z-index: @zindex-dropdown;
+    box-sizing: border-box;
+    font-size: @font-size-base;
+    font-variant: initial;
+    background-color: @component-background;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-shadow: @box-shadow-base;
+
+    &-hidden {
+      display: none;
+    }
+
+    &-menu {
+      max-height: 250px;
+      margin-bottom: 0;
+      padding-left: 0; // Override default ul/ol
+      overflow: auto;
+      list-style: none;
+      outline: none;
+
+      &-item {
+        position: relative;
+        display: block;
+        padding: 5px @control-padding-horizontal;
+        overflow: hidden;
+        color: @text-color;
+        font-weight: normal;
+        line-height: 22px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+        min-width: 100px;
+        transition: background 0.3s ease;
+
+        &:hover {
+          background-color: @item-hover-bg;
+        }
+
+        &:first-child {
+          border-radius: @border-radius-base @border-radius-base 0 0;
+        }
+
+        &:last-child {
+          border-radius: 0 0 @border-radius-base @border-radius-base;
+        }
+
+        &-disabled {
+          color: @disabled-color;
+          cursor: not-allowed;
+
+          &:hover {
+            color: @disabled-color;
+            background-color: @component-background;
+            cursor: not-allowed;
+          }
+        }
+
+        &-selected {
+          color: @text-color;
+          font-weight: @select-item-selected-font-weight;
+          background-color: @background-color-light;
+        }
+
+        &-active {
+          background-color: @item-active-bg;
+        }
+      }
+    }
+  }
+}
diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx
new file mode 100644
index 000000000000..5fa72cf4f674
--- /dev/null
+++ b/components/mentions/style/index.tsx
@@ -0,0 +1,5 @@
+import './index.less';
+
+// style dependencies
+import '../../empty/style';
+import '../../spin/style';
diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx
index f09cef532cea..9ee06d19322c 100644
--- a/components/menu/MenuItem.tsx
+++ b/components/menu/MenuItem.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Item } from 'rc-menu';
 import { ClickParam } from '.';
 import { MenuContext, MenuContextProps } from './';
-import Tooltip from '../tooltip';
+import Tooltip, { TooltipProps } from '../tooltip';
 import { SiderContext, SiderContextProps } from '../layout/Sider';
 
 export interface MenuItemProps {
@@ -37,13 +37,19 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     return (
       <MenuContext.Consumer>
         {({ inlineCollapsed }: MenuContextProps) => {
+          const tooltipProps: TooltipProps = {};
+
           let titleNode = title || (level === 1 ? children : '');
           if (!siderCollapsed && !inlineCollapsed) {
             titleNode = null;
+            // Reset `visible` to fix control mode tooltip display not correct
+            // ref: https://github.com/ant-design/ant-design/issues/16742
+            tooltipProps.visible = false;
           }
 
           return (
             <Tooltip
+              {...tooltipProps}
               title={titleNode}
               placement="right"
               overlayClassName={`${rootPrefixCls}-inline-collapsed-tooltip`}
diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md
index bc8427c4ddf7..e31dae894aa2 100755
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -16,8 +16,7 @@ Horizontal top navigation menu.
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
+const { SubMenu }  = Menu;
 
 class App extends React.Component {
   state = {
@@ -50,14 +49,14 @@ class App extends React.Component {
             </span>
           }
         >
-          <MenuItemGroup title="Item 1">
+          <Menu.ItemGroup title="Item 1">
             <Menu.Item key="setting:1">Option 1</Menu.Item>
             <Menu.Item key="setting:2">Option 2</Menu.Item>
-          </MenuItemGroup>
-          <MenuItemGroup title="Item 2">
+          </Menu.ItemGroup>
+          <Menu.ItemGroup title="Item 2">
             <Menu.Item key="setting:3">Option 3</Menu.Item>
             <Menu.Item key="setting:4">Option 4</Menu.Item>
-          </MenuItemGroup>
+          </Menu.ItemGroup>
         </SubMenu>
         <Menu.Item key="alipay">
           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md
index 76936207b241..807d21f7d1ec 100644
--- a/components/menu/demo/inline-collapsed.md
+++ b/components/menu/demo/inline-collapsed.md
@@ -20,7 +20,7 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
 ```jsx
 import { Menu, Icon, Button } from 'antd';
 
-const SubMenu = Menu.SubMenu;
+const { SubMenu }  = Menu;
 
 class App extends React.Component {
   state = {
diff --git a/components/menu/demo/inline.md b/components/menu/demo/inline.md
index 5453b14bd351..2a1b85ea7eb8 100755
--- a/components/menu/demo/inline.md
+++ b/components/menu/demo/inline.md
@@ -16,8 +16,7 @@ Vertical menu with inline submenus.
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
+const { SubMenu }  = Menu;
 
 class Sider extends React.Component {
   handleClick = e => {
@@ -42,14 +41,14 @@ class Sider extends React.Component {
             </span>
           }
         >
-          <MenuItemGroup key="g1" title="Item 1">
+          <Menu.ItemGroup key="g1" title="Item 1">
             <Menu.Item key="1">Option 1</Menu.Item>
             <Menu.Item key="2">Option 2</Menu.Item>
-          </MenuItemGroup>
-          <MenuItemGroup key="g2" title="Item 2">
+          </Menu.ItemGroup>
+          <Menu.ItemGroup key="g2" title="Item 2">
             <Menu.Item key="3">Option 3</Menu.Item>
             <Menu.Item key="4">Option 4</Menu.Item>
-          </MenuItemGroup>
+          </Menu.ItemGroup>
         </SubMenu>
         <SubMenu
           key="sub2"
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 5170e7e24db5..64998a4b20b5 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -16,7 +16,7 @@ Click the menu and you will see that all the other menus gets collapsed to keep
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const SubMenu = Menu.SubMenu;
+const { SubMenu }  = Menu;
 
 class Sider extends React.Component {
   // submenu keys of first level
diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md
index 40eca360f34b..17155597c95d 100755
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@@ -16,7 +16,7 @@ There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
 ```jsx
 import { Menu, Icon, Switch } from 'antd';
 
-const SubMenu = Menu.SubMenu;
+const { SubMenu }  = Menu;
 
 class Sider extends React.Component {
   state = {
diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md
index 3d4a93a76f0d..f23f97ac8260 100755
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -16,8 +16,7 @@ Submenus open as pop-ups.
 ```jsx
 import { Menu, Icon } from 'antd';
 
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
+const { SubMenu }  = Menu;
 
 function handleClick(e) {
   console.log('click', e);
@@ -34,14 +33,14 @@ ReactDOM.render(
         </span>
       }
     >
-      <MenuItemGroup title="Item 1">
+      <Menu.ItemGroup title="Item 1">
         <Menu.Item key="1">Option 1</Menu.Item>
         <Menu.Item key="2">Option 2</Menu.Item>
-      </MenuItemGroup>
-      <MenuItemGroup title="Iteom 2">
+      </Menu.ItemGroup>
+      <Menu.ItemGroup title="Iteom 2">
         <Menu.Item key="3">Option 3</Menu.Item>
         <Menu.Item key="4">Option 4</Menu.Item>
-      </MenuItemGroup>
+      </Menu.ItemGroup>
     </SubMenu>
     <SubMenu
       key="sub2"
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index c3d33b8fba98..46816117cc76 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import RcMenu, { Divider, ItemGroup } from 'rc-menu';
-import createContext, { Context } from '@ant-design/create-react-context';
+import createContext from '@ant-design/create-react-context';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import SubMenu from './SubMenu';
@@ -58,6 +58,7 @@ export interface MenuProps {
   onMouseEnter?: (e: MouseEvent) => void;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   overflowedIndicator?: React.ReactNode;
+  forceSubMenuRender?: boolean;
 }
 
 type InternalMenuProps = MenuProps & SiderContextProps;
@@ -78,7 +79,7 @@ export interface MenuContextProps {
   antdMenuTheme?: MenuTheme;
 }
 
-export const MenuContext: Context<MenuContextProps> = createContext({
+export const MenuContext = createContext<MenuContextProps>({
   inlineCollapsed: false,
 });
 
@@ -142,6 +143,12 @@ class InternalMenu extends React.Component<InternalMenuProps, MenuState> {
       '`inlineCollapsed` should only be used when `mode` is inline.',
     );
 
+    warning(
+      !(props.siderCollapsed !== undefined && 'inlineCollapsed' in props),
+      'Menu',
+      '`inlineCollapsed` not control Menu under Sider. Should set `collapsed` on Sider instead.',
+    );
+
     let openKeys;
     if ('openKeys' in props) {
       openKeys = props.openKeys;
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index 78b21fb68b9c..acbfdef49efe 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -43,6 +43,10 @@
       padding 0.15s @ease-in-out;
   }
 
+  &-submenu-selected {
+    color: @menu-highlight-color;
+  }
+
   &-item:active,
   &-submenu-title:active {
     background: @menu-item-active-bg;
diff --git a/components/message/demo/other.md b/components/message/demo/other.md
index fb6fd3aadc9a..bf4089d5ef3e 100644
--- a/components/message/demo/other.md
+++ b/components/message/demo/other.md
@@ -17,15 +17,15 @@ Messages of success, error and warning types.
 import { message, Button } from 'antd';
 
 const success = () => {
-  message.success('This is a message of success');
+  message.success('This is a success message');
 };
 
 const error = () => {
-  message.error('This is a message of error');
+  message.error('This is an error message');
 };
 
 const warning = () => {
-  message.warning('This is message of warning');
+  message.warning('This is a warning message');
 };
 
 ReactDOM.render(
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index cb4be684cf09..d656470b4182 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -140,8 +140,6 @@ export default class Modal extends React.Component<ModalProps, {}> {
     confirmLoading: false,
     visible: false,
     okType: 'primary' as ButtonType,
-    okButtonDisabled: false,
-    cancelButtonDisabled: false,
   };
 
   static propTypes = {
@@ -154,7 +152,6 @@ export default class Modal extends React.Component<ModalProps, {}> {
     width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     confirmLoading: PropTypes.bool,
     visible: PropTypes.bool,
-    align: PropTypes.object,
     footer: PropTypes.node,
     title: PropTypes.node,
     closable: PropTypes.bool,
diff --git a/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index 426532fc2874..d2d8fa541722 100644
--- a/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -28,6 +28,7 @@ exports[`Modal render correctly 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
@@ -120,6 +121,7 @@ exports[`Modal render without footer 1`] = `
           <button
             aria-label="Close"
             class="ant-modal-close"
+            type="button"
           >
             <span
               class="ant-modal-close-x"
diff --git a/components/page-header/demo/actions.md b/components/page-header/demo/actions.md
index a06db8280d00..b0cf6641ce2f 100644
--- a/components/page-header/demo/actions.md
+++ b/components/page-header/demo/actions.md
@@ -16,7 +16,7 @@ Use the operating area and customize the sub-nodes, suitable for use in the need
 ```jsx
 import { PageHeader, Tag, Tabs, Button, Statistic, Row, Col } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 const Description = ({ term, children, span = 12 }) => (
   <Col span={span}>
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index f79d526c6b25..afc5d14c5e64 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -70,7 +70,7 @@ const renderTitle = (prefixCls: string, props: PageHeaderProps) => {
   const titlePrefixCls = `${prefixCls}-title-view`;
   if (title || subTitle || tags || extra) {
     return (
-      <div className={`${prefixCls}-title-view`}>
+      <div className={titlePrefixCls}>
         {title && <span className={`${titlePrefixCls}-title`}>{title}</span>}
         {subTitle && <span className={`${titlePrefixCls}-sub-title`}>{subTitle}</span>}
         {tags && <span className={`${titlePrefixCls}-tags`}>{tags}</span>}
diff --git a/components/page-header/style/index.less b/components/page-header/style/index.less
index 09ad97cfe6fb..c47cb73d4188 100644
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@@ -27,7 +27,7 @@
     }
   }
 
-  .@{ant-prefix}-divider {
+  .@{ant-prefix}-divider-vertical {
     height: 14px;
     margin: 0 12px;
   }
@@ -65,10 +65,10 @@
       top: 16px;
       right: @page-header-padding-horizontal;
       > * {
-        margin-right: 8px;
+        margin-left: 8px;
       }
-      > *:last-child {
-        margin-right: 0;
+      > *:first-child {
+        margin-left: 0;
       }
     }
   }
diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md
index 6174db2ce00a..a3b0a70d168d 100644
--- a/components/pagination/index.en-US.md
+++ b/components/pagination/index.en-US.md
@@ -31,6 +31,7 @@ A long list can be divided into several pages by `Pagination`, and only one page
 | showLessItems | show less page items | boolean | false |  |
 | showQuickJumper | determine whether you can jump to pages directly | boolean \| `{ goButton: ReactNode }` | false |  |
 | showSizeChanger | determine whether `pageSize` can be changed | boolean | false |  |
+| showTitle | show page items title | boolean | true |  |
 | showTotal | to display the total number and range | Function(total, range) | - |  |
 | simple | whether to use simple mode | boolean | - |  |
 | size | specify the size of `Pagination`, can be set to `small` | string | "" |  |
diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
index 7fa92eef0f4d..8b6a5fef5c96 100644
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -334,20 +334,20 @@
     cursor: not-allowed;
 
     .@{pagination-prefix-cls}-item {
-      cursor: not-allowed;
-      border-color: @border-color-base;
       background: @disabled-bg;
+      border-color: @border-color-base;
+      cursor: not-allowed;
 
       a {
-        cursor: not-allowed;
         color: @disabled-color;
         background: transparent;
         border: none;
+        cursor: not-allowed;
       }
 
       &-active {
-        border-color: transparent;
         background: darken(@disabled-bg, 10%);
+        border-color: transparent;
         a {
           color: #fff;
         }
@@ -358,10 +358,10 @@
       &,
       &:hover,
       &:focus {
-        border-color: @border-color-base;
         color: @text-color-secondary;
-        cursor: not-allowed;
         background: @disabled-bg;
+        border-color: @border-color-base;
+        cursor: not-allowed;
       }
     }
 
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index 42c15d1aab83..067ef1db1aec 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -58,7 +58,6 @@ export default class Progress extends React.Component<ProgressProps> {
     trailColor: PropTypes.string,
     format: PropTypes.func,
     gapDegree: PropTypes.number,
-    default: PropTypes.oneOf(['default', 'small']),
   };
 
   getPercentNumber() {
diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md
index 230b65befb04..4c4c3d0933f4 100644
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@@ -16,9 +16,6 @@ The combination of radio button style.
 ```jsx
 import { Radio } from 'antd';
 
-const RadioButton = Radio.Button;
-const RadioGroup = Radio.Group;
-
 function onChange(e) {
   console.log(`radio checked:${e.target.value}`);
 }
@@ -26,30 +23,30 @@ function onChange(e) {
 ReactDOM.render(
   <div>
     <div>
-      <RadioGroup onChange={onChange} defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
     </div>
     <div style={{ marginTop: 16 }}>
-      <RadioGroup onChange={onChange} defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b" disabled>
+      <Radio.Group onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b" disabled>
           Shanghai
-        </RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
+        </Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
     </div>
     <div style={{ marginTop: 16 }}>
-      <RadioGroup disabled onChange={onChange} defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
+      <Radio.Group disabled onChange={onChange} defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
     </div>
   </div>,
   mountNode,
diff --git a/components/radio/demo/radiogroup-more.md b/components/radio/demo/radiogroup-more.md
index df93f4b2aba1..5581cdc58fba 100644
--- a/components/radio/demo/radiogroup-more.md
+++ b/components/radio/demo/radiogroup-more.md
@@ -1,23 +1,21 @@
 ---
 order: 2
 title:
-  zh-CN: RadioGroup 垂直
-  en-US: Vertical RadioGroup
+  zh-CN: Radio.Group 垂直
+  en-US: Vertical Radio.Group
 ---
 
 ## zh-CN
 
-垂直的 RadioGroup，配合更多输入框选项。
+垂直的 Radio.Group，配合更多输入框选项。
 
 ## en-US
 
-Vertical RadioGroup, with more radios.
+Vertical Radio.Group, with more radios.
 
 ```jsx
 import { Radio, Input } from 'antd';
 
-const RadioGroup = Radio.Group;
-
 class App extends React.Component {
   state = {
     value: 1,
@@ -37,7 +35,7 @@ class App extends React.Component {
       lineHeight: '30px',
     };
     return (
-      <RadioGroup onChange={this.onChange} value={this.state.value}>
+      <Radio.Group onChange={this.onChange} value={this.state.value}>
         <Radio style={radioStyle} value={1}>
           Option A
         </Radio>
@@ -51,7 +49,7 @@ class App extends React.Component {
           More...
           {this.state.value === 4 ? <Input style={{ width: 100, marginLeft: 10 }} /> : null}
         </Radio>
-      </RadioGroup>
+      </Radio.Group>
     );
   }
 }
diff --git a/components/radio/demo/radiogroup-options.md b/components/radio/demo/radiogroup-options.md
index 7889c4c5f828..e812e3a85594 100644
--- a/components/radio/demo/radiogroup-options.md
+++ b/components/radio/demo/radiogroup-options.md
@@ -1,8 +1,8 @@
 ---
 order: 2
 title:
-  zh-CN: RadioGroup 组合 - 配置方式
-  en-US: RadioGroup group - optional
+  zh-CN: Radio.Group 组合 - 配置方式
+  en-US: Radio.Group group - optional
 ---
 
 ## zh-CN
@@ -16,8 +16,6 @@ Render radios by configuring `options`.
 ```jsx
 import { Radio } from 'antd';
 
-const RadioGroup = Radio.Group;
-
 const plainOptions = ['Apple', 'Pear', 'Orange'];
 const options = [
   { label: 'Apple', value: 'Apple' },
@@ -61,9 +59,9 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <RadioGroup options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
-        <RadioGroup options={options} onChange={this.onChange2} value={this.state.value2} />
-        <RadioGroup
+        <Radio.Group options={plainOptions} onChange={this.onChange1} value={this.state.value1} />
+        <Radio.Group options={options} onChange={this.onChange2} value={this.state.value2} />
+        <Radio.Group
           options={optionsWithDisabled}
           onChange={this.onChange3}
           value={this.state.value3}
diff --git a/components/radio/demo/radiogroup-with-name.md b/components/radio/demo/radiogroup-with-name.md
index 318977137bdd..057507384131 100644
--- a/components/radio/demo/radiogroup-with-name.md
+++ b/components/radio/demo/radiogroup-with-name.md
@@ -2,30 +2,28 @@
 order: 4
 title:
   zh-CN: 单选组合 - 配合 name 使用
-  en-US: RadioGroup with name
+  en-US: Radio.Group with name
 ---
 
 ## zh-CN
 
-可以为 RadioGroup 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
+可以为 Radio.Group 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 Radio.Group 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
 
 ## en-US
 
-Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup.
+Passing the `name` property to all `input[type="radio"]` that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.
 
 ```jsx
 import { Radio } from 'antd';
 
-const RadioGroup = Radio.Group;
-
 function App() {
   return (
-    <RadioGroup name="radiogroup" defaultValue={1}>
+    <Radio.Group name="radiogroup" defaultValue={1}>
       <Radio value={1}>A</Radio>
       <Radio value={2}>B</Radio>
       <Radio value={3}>C</Radio>
       <Radio value={4}>D</Radio>
-    </RadioGroup>
+    </Radio.Group>
   );
 }
 
diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md
index 426db8c713b5..e625af8689f2 100644
--- a/components/radio/demo/radiogroup.md
+++ b/components/radio/demo/radiogroup.md
@@ -16,8 +16,6 @@ A group of radio components.
 ```jsx
 import { Radio } from 'antd';
 
-const RadioGroup = Radio.Group;
-
 class App extends React.Component {
   state = {
     value: 1,
@@ -32,12 +30,12 @@ class App extends React.Component {
 
   render() {
     return (
-      <RadioGroup onChange={this.onChange} value={this.state.value}>
+      <Radio.Group onChange={this.onChange} value={this.state.value}>
         <Radio value={1}>A</Radio>
         <Radio value={2}>B</Radio>
         <Radio value={3}>C</Radio>
         <Radio value={4}>D</Radio>
-      </RadioGroup>
+      </Radio.Group>
     );
   }
 }
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
index 23762a165d50..d8954cdb75a9 100644
--- a/components/radio/demo/size.md
+++ b/components/radio/demo/size.md
@@ -16,34 +16,31 @@ There are three sizes available: large, medium, and small. It can coordinate wit
 ```jsx
 import { Radio } from 'antd';
 
-const RadioButton = Radio.Button;
-const RadioGroup = Radio.Group;
-
 ReactDOM.render(
   <div>
     <div>
-      <RadioGroup defaultValue="a" size="large">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
+      <Radio.Group defaultValue="a" size="large">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
     </div>
     <div style={{ marginTop: 16 }}>
-      <RadioGroup defaultValue="a">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
+      <Radio.Group defaultValue="a">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
     </div>
     <div style={{ marginTop: 16 }}>
-      <RadioGroup defaultValue="a" size="small">
-        <RadioButton value="a">Hangzhou</RadioButton>
-        <RadioButton value="b">Shanghai</RadioButton>
-        <RadioButton value="c">Beijing</RadioButton>
-        <RadioButton value="d">Chengdu</RadioButton>
-      </RadioGroup>
+      <Radio.Group defaultValue="a" size="small">
+        <Radio.Button value="a">Hangzhou</Radio.Button>
+        <Radio.Button value="b">Shanghai</Radio.Button>
+        <Radio.Button value="c">Beijing</Radio.Button>
+        <Radio.Button value="d">Chengdu</Radio.Button>
+      </Radio.Group>
     </div>
   </div>,
   mountNode,
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index dc540d7c5c68..2659fb7edc14 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -647,6 +647,91 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = `
+<div
+  class="ant-select ant-select-enabled"
+  style="width:100%"
+>
+  <div
+    aria-autocomplete="list"
+    aria-controls=""
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="ant-select-selection
+            ant-select-selection--multiple"
+    role="combobox"
+  >
+    <div
+      class="ant-select-selection__rendered"
+    >
+      <div
+        class="ant-select-selection__placeholder"
+        style="display:none;user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        select one country
+      </div>
+      <ul>
+        <li
+          class="ant-select-selection__choice"
+          role="presentation"
+          style="user-select:none;-webkit-user-select:none"
+          title="China"
+          unselectable="on"
+        >
+          <div
+            class="ant-select-selection__choice__content"
+          >
+            China
+          </div>
+          <span
+            class="ant-select-selection__choice__remove"
+          >
+            <i
+              aria-label="icon: close"
+              class="anticon anticon-close ant-select-remove-icon"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="close"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+                />
+              </svg>
+            </i>
+          </span>
+        </li>
+        <li
+          class="ant-select-search ant-select-search--inline"
+        >
+          <div
+            class="ant-select-search__field__wrap"
+          >
+            <input
+              autocomplete="off"
+              class="ant-select-search__field"
+              value=""
+            />
+            <span
+              class="ant-select-search__field__mirror"
+            >
+               
+            </span>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/select/demo/search.md correctly 1`] = `
 <div
   class="ant-select ant-select-enabled"
diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md
index 8ecc60e678a3..291a3c0fb352 100644
--- a/components/select/demo/automatic-tokenization.md
+++ b/components/select/demo/automatic-tokenization.md
@@ -16,7 +16,7 @@ Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode.
 ```jsx
 import { Select } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 const children = [];
 for (let i = 10; i < 36; i++) {
diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 1e08eb93bec8..1bab30b9a77d 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -16,7 +16,7 @@ Basic Usage.
 ```jsx
 import { Select } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 function handleChange(value) {
   console.log(`selected ${value}`);
diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md
index 2221604f8bfa..abfdde2783a0 100644
--- a/components/select/demo/coordinate.md
+++ b/components/select/demo/coordinate.md
@@ -20,7 +20,7 @@ Using the [Cascader](/components/cascader) component is strongly recommended ins
 ```jsx
 import { Select } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 const provinceData = ['Zhejiang', 'Jiangsu'];
 const cityData = {
   Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
diff --git a/components/select/demo/custom-dropdown-menu.md b/components/select/demo/custom-dropdown-menu.md
index e6082e2c6c7b..a39b4071c035 100644
--- a/components/select/demo/custom-dropdown-menu.md
+++ b/components/select/demo/custom-dropdown-menu.md
@@ -16,7 +16,7 @@ Customize the dropdown menu via `dropdownRender`.
 ```jsx
 import { Select, Icon, Divider } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 ReactDOM.render(
   <Select
diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md
index 5a0af7e8c10d..aae01e7691a5 100644
--- a/components/select/demo/label-in-value.md
+++ b/components/select/demo/label-in-value.md
@@ -20,7 +20,7 @@ The label of the selected item will be packed as an object for passing to the on
 ```jsx
 import { Select } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 function handleChange(value) {
   console.log(value); // { key: "lucy", label: "Lucy (101)" }
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 5957516e08de..30c9bf3bead3 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -7,16 +7,16 @@ title:
 
 ## zh-CN
 
-多选，从已有条目中选择（scroll the menu）
+多选，从已有条目中选择。
 
 ## en-US
 
-Multiple selection, selecting from existing items (scroll the menu).
+Multiple selection, selecting from existing items.
 
 ```jsx
 import { Select } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 const children = [];
 for (let i = 10; i < 36; i++) {
diff --git a/components/select/demo/option-label-prop.md b/components/select/demo/option-label-prop.md
new file mode 100644
index 000000000000..5d075c4205a6
--- /dev/null
+++ b/components/select/demo/option-label-prop.md
@@ -0,0 +1,61 @@
+---
+order: 4
+title:
+  zh-CN: 定制回填内容
+  en-US: Custom selection render
+---
+
+## zh-CN
+
+使用 `optionLabelProp` 指定回填到选择框的 `Option` 属性。
+
+## en-US
+
+Spacified the prop name of Option which will be rendered in select box.
+
+```jsx
+import { Select } from 'antd';
+
+const { Option } = Select;
+
+function handleChange(value) {
+  console.log(`selected ${value}`);
+}
+
+ReactDOM.render(
+  <Select
+    mode="multiple"
+    style={{ width: '100%' }}
+    placeholder="select one country"
+    defaultValue={['china']}
+    onChange={handleChange}
+    optionLabelProp="label"
+  >
+    <Option value="china" label="China">
+      <span role="img" aria-label="China">
+        🇨🇳{' '}
+      </span>
+      China (中国)
+    </Option>
+    <Option value="usa" label="USA">
+      <span role="img" aria-label="USA">
+        🇺🇸{' '}
+      </span>
+      USA (美国)
+    </Option>
+    <Option value="japan" label="Japan">
+      <span role="img" aria-label="USA">
+        🇯🇵{' '}
+      </span>
+      Japan (日本)
+    </Option>
+    <Option value="koean" label="Koean">
+      <span role="img" aria-label="USA">
+        🇰🇷{' '}
+      </span>
+      Koean (韩国)
+    </Option>
+  </Select>,
+  mountNode,
+);
+```
diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md
index 2917677d5ad1..6750a0affabb 100644
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@@ -18,7 +18,7 @@ import { Select } from 'antd';
 import jsonp from 'fetch-jsonp';
 import querystring from 'querystring';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 let timeout;
 let currentValue;
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index acffedfd074f..a5f7a32f3abd 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -16,7 +16,7 @@ Search the options while expanded.
 ```jsx
 import { Select } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 function onChange(value) {
   console.log(`selected ${value}`);
diff --git a/components/select/demo/select-users.md b/components/select/demo/select-users.md
index d87264ba88fe..df9a9f080e4c 100644
--- a/components/select/demo/select-users.md
+++ b/components/select/demo/select-users.md
@@ -17,7 +17,7 @@ A complete multiple select sample with remote search, debounce fetch, ajax callb
 import { Select, Spin } from 'antd';
 import debounce from 'lodash/debounce';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 class UserRemoteSelect extends React.Component {
   constructor(props) {
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index 49bd8af63c98..93bb5a4338c2 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -16,7 +16,7 @@ The height of the input field for the select defaults to 32px. If size is set to
 ```jsx
 import { Select, Radio } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 const children = [];
 for (let i = 10; i < 36; i++) {
diff --git a/components/select/demo/suffix.md b/components/select/demo/suffix.md
index b7d4f5a3bae9..5671f238ed02 100644
--- a/components/select/demo/suffix.md
+++ b/components/select/demo/suffix.md
@@ -19,7 +19,7 @@ import { Select, Icon } from 'antd';
 
 const smileIcon = <Icon type="smile" />;
 const mehIcon = <Icon type="meh" />;
-const Option = Select.Option;
+const { Option } = Select;
 
 function handleChange(value) {
   console.log(`selected ${value}`);
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index 16d416ca4bcb..904db9e53bce 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -16,7 +16,7 @@ Select with tags, transform input to tag (scroll the menu)
 ```jsx
 import { Select } from 'antd';
 
-const Option = Select.Option;
+const { Option } = Select;
 
 const children = [];
 for (let i = 10; i < 36; i++) {
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 553d7cfe0d6e..735e937bb70e 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -14,9 +14,9 @@ Select component to select value from options.
 ## API
 
 ```html
-<select>
-  <option value="lucy">lucy</option>
-</select>
+<Select>
+  <Option value="lucy">lucy</Option>
+</Select>
 ```
 
 ### Select props
@@ -43,7 +43,7 @@ Select component to select value from options.
 | mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' |
 | notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
-| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes |
+| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes |
 | placeholder | Placeholder of select | string\|ReactNode | - |
 | showArrow | Whether to show the drop-down arrow | boolean | true |
 | showSearch | Whether show search input in single mode. | boolean | false |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 582329fe108d..5f64b40926b9 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -48,7 +48,6 @@ export interface LabeledValue {
 }
 
 export type SelectValue = string | string[] | number | number[] | LabeledValue | LabeledValue[];
-export type SelectedValue = string | number | LabeledValue;
 
 export interface SelectProps<T = SelectValue> extends AbstractSelectProps {
   value?: T;
@@ -57,8 +56,8 @@ export interface SelectProps<T = SelectValue> extends AbstractSelectProps {
   optionLabelProp?: string;
   firstActiveValue?: string | string[];
   onChange?: (value: T, option: React.ReactElement<any> | React.ReactElement<any>[]) => void;
-  onSelect?: (value: SelectedValue, option: React.ReactElement<any>) => any;
-  onDeselect?: (value: SelectedValue) => any;
+  onSelect?: (value: T extends (infer I)[] ? I : T, option: React.ReactElement<any>) => any;
+  onDeselect?: (value: T extends (infer I)[] ? I : T) => any;
   onBlur?: (value: T) => void;
   onFocus?: () => void;
   onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 12c248df518b..bff282ac01ff 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -15,9 +15,9 @@ title: Select
 ## API
 
 ```html
-<select>
-  <option value="lucy">lucy</option>
-</select>
+<Select>
+  <Option value="lucy">lucy</Option>
+</Select>
 ```
 
 ### Select props
@@ -43,7 +43,7 @@ title: Select
 | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - |
 | mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - |
 | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
-| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
+| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
 | placeholder | 选择框默认文字 | string | - |
 | showArrow | 是否显示下拉小箭头 | boolean | true |
@@ -69,7 +69,7 @@ title: Select
 | onDropdownVisibleChange | 展开下拉菜单的回调 (3.9.0 后支持) | function(open) | - |
 | loading | 加载中状态 | Boolean | false |
 
-> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
+> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
 
 ### Select Methods
 
diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
index c837d9b89699..c4ddea457afc 100644
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@@ -12,24 +12,26 @@ To input a value in a range.
 
 ## API
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| autoFocus | get focus when component mounted | boolean | false |
-| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |
-| disabled | If true, the slider will not be interactable. | boolean | false |
-| dots | Whether the thumb can drag over tick only. | boolean | false |
-| included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true |
-| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
-| max | The maximum value the slider can slide to | number | 100 |
-| min | The minimum value the slider can slide to. | number | 0 |
-| range | dual thumb mode | boolean | false |
-| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 |
-| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoFocus | get focus when component mounted | boolean | false |  |
+| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |  |
+| disabled | If true, the slider will not be interactable. | boolean | false |  |
+| dots | Whether the thumb can drag over tick only. | boolean | false |  |
+| included | Make effect when `marks` not null, `true` means containment and `false` means coordinative | boolean | true |  |
+| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |  |
+| max | The maximum value the slider can slide to | number | 100 |  |
+| min | The minimum value the slider can slide to. | number | 0 |  |
+| range | dual thumb mode | boolean | false |  |
+| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 |  |
+| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |  |
 | value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] |  |
-| vertical | If true, the slider will be vertical. | Boolean | false |
-| onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP |
-| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP |
-| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean |  |
+| vertical | If true, the slider will be vertical. | Boolean | false |  |
+| onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP |  |
+| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP |  |
+| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string |  | 3.19.0 |
+| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean |  |  |
+| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 3.19.0 |
 
 ## Methods
 
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 835b4046afb3..32f314e1358a 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import RcSlider from 'rc-slider/lib/Slider';
 import RcRange from 'rc-slider/lib/Range';
 import RcHandle from 'rc-slider/lib/Handle';
-import Tooltip from '../tooltip';
+import Tooltip, { TooltipPlacement } from '../tooltip';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface SliderMarks {
@@ -48,6 +48,8 @@ export interface SliderProps {
   id?: string;
   style?: React.CSSProperties;
   tooltipVisible?: boolean;
+  tooltipPlacement?: TooltipPlacement;
+  getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }
 
 export interface SliderState {
@@ -61,7 +63,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
     },
   };
 
-  private rcSlider: any;
+  rcSlider: any;
 
   constructor(props: SliderProps) {
     super(props);
@@ -82,7 +84,7 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
     tooltipPrefixCls: string,
     { value, dragging, index, ...restProps },
   ) => {
-    const { tipFormatter, tooltipVisible } = this.props;
+    const { tipFormatter, tooltipVisible, tooltipPlacement, getTooltipPopupContainer } = this.props;
     const { visibles } = this.state;
     const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
     const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
@@ -91,9 +93,12 @@ export default class Slider extends React.Component<SliderProps, SliderState> {
         prefixCls={tooltipPrefixCls}
         title={tipFormatter ? tipFormatter(value) : ''}
         visible={visible}
-        placement="top"
+        placement={tooltipPlacement || 'top'}
         transitionName="zoom-down"
         key={index}
+        getPopupContainer={
+          getTooltipPopupContainer ? getTooltipPopupContainer : () => document.body
+        }
       >
         <RcHandle
           {...restProps}
diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
index 87186a45d62b..4fcc0f224f6d 100644
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -13,24 +13,26 @@ title: Slider
 
 ## API
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| allowClear | 支持清除, 单选模式有效 | boolean | false |
-| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | 0 or \[0, 0] |
-| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false |
-| dots | 是否只能拖拽到刻度上 | boolean | false |
-| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |
-| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
-| max | 最大值 | number | 100 |
-| min | 最小值 | number | 0 |
-| range | 双滑块模式 | boolean | false |
-| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 |
-| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |
-| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] |  |
-| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |
-| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP |
-| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP |
-| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean |  |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| allowClear | 支持清除, 单选模式有效 | boolean | false |  |
+| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | 0 or \[0, 0] |  |
+| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false |  |
+| dots | 是否只能拖拽到刻度上 | boolean | false |  |
+| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |  |
+| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |  |
+| max | 最大值 | number | 100 |  |
+| min | 最小值 | number | 0 |  |
+| range | 双滑块模式 | boolean | false |  |
+| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 |  |
+| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |  |
+| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] |  |  |
+| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |  |
+| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP |  |
+| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP |  |
+| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string |  |  | 3.19.0 |
+| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean |  |  |
+| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 3.19.0 |
 
 ## 方法
 
diff --git a/components/statistic/style/index.less b/components/statistic/style/index.less
index 2487038699d6..4d9e19c5fa1b 100644
--- a/components/statistic/style/index.less
+++ b/components/statistic/style/index.less
@@ -8,10 +8,12 @@
 
   &-title {
     margin-bottom: 4px;
+    color: @text-color-secondary;
     font-size: @statistic-title-font-size;
   }
 
   &-content {
+    color: @heading-color;
     font-size: @statistic-content-font-size;
     font-family: @statistic-font-family;
 
diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
index 8efdb8e81caa..36328fc6a7ae 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -1,5 +1,213 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/steps/demo/clickable.md correctly 1`] = `
+<div>
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-process"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          1
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Step 1
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          2
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Step 2
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          3
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Step 3
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-divider ant-divider-horizontal"
+  />
+  <div
+    class="ant-steps ant-steps-vertical"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-process"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          1
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Step 1
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          2
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Step 2
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-steps-item-tail"
+      />
+      <div
+        class="ant-steps-item-icon"
+      >
+        <span
+          class="ant-steps-icon"
+        >
+          3
+        </span>
+      </div>
+      <div
+        class="ant-steps-item-content"
+      >
+        <div
+          class="ant-steps-item-title"
+        >
+          Step 3
+        </div>
+        <div
+          class="ant-steps-item-description"
+        >
+          This is a description.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/steps/demo/customized-progress-dot.md correctly 1`] = `
 <div
   class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
diff --git a/components/steps/demo/clickable.md b/components/steps/demo/clickable.md
new file mode 100644
index 000000000000..97289aacb1fa
--- /dev/null
+++ b/components/steps/demo/clickable.md
@@ -0,0 +1,55 @@
+---
+order: 10
+title:
+  zh-CN: 可点击
+  en-US: Clickable
+---
+
+## zh-CN
+
+设置 `onChange` 后，Steps 变为可点击状态。
+
+## en-US
+
+Setting `onChange` makes Steps clickable.
+
+```jsx
+import { Steps, Divider } from 'antd';
+
+const { Step } = Steps;
+
+class Demo extends React.Component {
+  state = {
+    current: 0,
+  };
+
+  onChange = current => {
+    console.log('onChange:', current);
+    this.setState({ current });
+  };
+
+  render() {
+    const { current } = this.state;
+
+    return (
+      <div>
+        <Steps current={current} onChange={this.onChange}>
+          <Step title="Step 1" description="This is a description." />
+          <Step title="Step 2" description="This is a description." />
+          <Step title="Step 3" description="This is a description." />
+        </Steps>
+
+        <Divider />
+
+        <Steps current={current} onChange={this.onChange} direction="vertical">
+          <Step title="Step 1" description="This is a description." />
+          <Step title="Step 2" description="This is a description." />
+          <Step title="Step 3" description="This is a description." />
+        </Steps>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
+```
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
index 95df52b2a9c3..be65cb5c8d4d 100644
--- a/components/steps/demo/customized-progress-dot.md
+++ b/components/steps/demo/customized-progress-dot.md
@@ -16,7 +16,7 @@ You can customize the display for Steps with progress dot style.
 ```jsx
 import { Steps, Popover } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 const customDot = (dot, { status, index }) => (
   <Popover
diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
index 9c3cf676db5d..a1b3ff2c8b90 100644
--- a/components/steps/demo/error.md
+++ b/components/steps/demo/error.md
@@ -16,7 +16,7 @@ By using `status` of `Steps`, you can specify the state for current step.
 ```jsx
 import { Steps } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 ReactDOM.render(
   <Steps current={1} status="error">
diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md
index 3e36b1233b53..19202b756baf 100644
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@@ -16,7 +16,7 @@ You can use your own custom icons by setting the property `icon` for `Steps.Step
 ```jsx
 import { Steps, Icon } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 ReactDOM.render(
   <Steps>
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
index df6d27e401c1..939ae7b8d4b9 100644
--- a/components/steps/demo/progress-dot.md
+++ b/components/steps/demo/progress-dot.md
@@ -16,7 +16,7 @@ Steps with progress dot style.
 ```jsx
 import { Steps } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 ReactDOM.render(
   <Steps progressDot current={1}>
diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md
index 3c9bcbc63679..6bae2e731ca9 100644
--- a/components/steps/demo/simple.md
+++ b/components/steps/demo/simple.md
@@ -16,7 +16,7 @@ The most basic step bar.
 ```jsx
 import { Steps } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 ReactDOM.render(
   <Steps current={1}>
diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md
index 4f72f64b6750..d1b4d0379a75 100644
--- a/components/steps/demo/small-size.md
+++ b/components/steps/demo/small-size.md
@@ -16,7 +16,7 @@ By setting like this: `<Steps size="small">`, you can get a mini version.
 ```jsx
 import { Steps } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 ReactDOM.render(
   <Steps size="small" current={1}>
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index 513c5712dda7..6eb6f1eb85ee 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -16,7 +16,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
 ```jsx
 import { Steps, Button, message } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 const steps = [
   {
diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
index 616ab77d5db8..6c64a0acb6db 100644
--- a/components/steps/demo/vertical-small.md
+++ b/components/steps/demo/vertical-small.md
@@ -16,7 +16,7 @@ A simple mini version step bar in the vertical direction.
 ```jsx
 import { Steps } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 ReactDOM.render(
   <Steps direction="vertical" size="small" current={1}>
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
index 6860081c442c..d803844ab24b 100644
--- a/components/steps/demo/vertical.md
+++ b/components/steps/demo/vertical.md
@@ -16,7 +16,7 @@ A simple step bar in the vertical direction.
 ```jsx
 import { Steps } from 'antd';
 
-const Step = Steps.Step;
+const { Step } = Steps;
 
 ReactDOM.render(
   <Steps direction="vertical" current={1}>
diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
index ece7672a778a..ffbb3590356d 100644
--- a/components/steps/index.en-US.md
+++ b/components/steps/index.en-US.md
@@ -25,16 +25,17 @@ When the task is complicated or has a certain sequence in the series of subtasks
 
 The whole of the step bar.
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| className | additional class to Steps | string | - |
-| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
-| direction | to specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` |
-| labelPlacement | place title and description with `horizontal` or `vertical` direction | string | `horizontal` |
-| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
-| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
-| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
-| initial | set the initial step, counting from 0 | number | 0 |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| className | additional class to Steps | string | - |  |
+| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |  |
+| direction | to specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` |  |
+| labelPlacement | place title and description with `horizontal` or `vertical` direction | string | `horizontal` |  |
+| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |  |
+| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |  |
+| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
+| initial | set the initial step, counting from 0 | number | 0 |  |
+| onChange | Trigger when Step click to change | (current) => void | - | 3.19.0 |
 
 ### Steps.Step
 
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index ae00c20c31de..3258cce13958 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -16,6 +16,7 @@ export interface StepsProps {
   size?: 'default' | 'small';
   status?: 'wait' | 'process' | 'finish' | 'error';
   style?: React.CSSProperties;
+  onChange?: (current: number) => void;
 }
 
 export interface StepProps {
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index 7df5b45ef004..74475446c1ba 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -26,16 +26,17 @@ title: Steps
 
 整体步骤条。
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| className | 步骤条类名 | string | - |
-| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
-| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
-| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` |
-| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
-| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
-| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
-| initial | 起始序号，从 0 开始记数 | number | 0 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 步骤条类名 | string | - |  |
+| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |  |
+| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |  |
+| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` |  |
+| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |  |
+| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |  |
+| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |  |
+| initial | 起始序号，从 0 开始记数 | number | 0 |  |
+| onChange | 点击切换步骤时触发 | (current) => void | - | 3.19.0 |
 
 ### Steps.Step
 
diff --git a/components/steps/style/index.less b/components/steps/style/index.less
index bd0f01eb91bd..ff4bb3c6038e 100644
--- a/components/steps/style/index.less
+++ b/components/steps/style/index.less
@@ -131,6 +131,40 @@
   &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
     background: @error-icon-color;
   }
+
+  // ===================== Clickable =====================
+  &[role='button'] {
+    outline: none;
+
+    &:not(.@{steps-prefix-cls}-item-process) {
+      cursor: pointer;
+
+      .@{steps-prefix-cls}-item {
+        &-title,
+        &-description,
+        &-icon .@{steps-prefix-cls}-icon {
+          transition: color 0.3s;
+        }
+      }
+
+      &:hover {
+        .@{steps-prefix-cls}-item {
+          &-title,
+          &-description {
+            color: @primary-color;
+          }
+
+          &-icon {
+            border-color: @primary-color;
+
+            .@{steps-prefix-cls}-icon {
+              color: @primary-color;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less
index 069991137cf1..818cf57de681 100644
--- a/components/style/color/colorPalette.less
+++ b/components/style/color/colorPalette.less
@@ -34,7 +34,7 @@
     var saturation;
     if (isLight) {
       saturation = Math.round(hsv.s * 100) - saturationStep * i;
-    } else if (i == darkColorCount) {
+    } else if (i === darkColorCount) {
       saturation = Math.round(hsv.s * 100) + saturationStep;
     } else {
       saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index a31717d1c293..22663a0f7ade 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -47,8 +47,6 @@
 @code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 @text-color: fade(@black, 65%);
 @text-color-secondary: fade(@black, 45%);
-@text-color-warning: @gold-7;
-@text-color-danger: @red-7;
 @text-color-inverse: @white;
 @icon-color: inherit;
 @icon-color-hover: fade(@black, 75%);
@@ -155,7 +153,7 @@
 @btn-primary-bg: @primary-color;
 
 @btn-default-color: @text-color;
-@btn-default-bg: #fff;
+@btn-default-bg: @component-background;
 @btn-default-border: @border-color-base;
 
 @btn-danger-color: @error-color;
@@ -188,6 +186,10 @@
 @checkbox-check-color: #fff;
 @checkbox-border-width: @border-width-base;
 
+// Dropdown
+
+@dropdown-selected-color: @primary-color;
+
 // Empty
 @empty-font-size: @font-size-base;
 
@@ -303,7 +305,7 @@
 @input-placeholder-color: hsv(0, 0, 75%);
 @input-color: @text-color;
 @input-border-color: @border-color-base;
-@input-bg: #fff;
+@input-bg: @component-background;
 @input-number-handler-active-bg: #f4f4f4;
 @input-addon-bg: @background-color-light;
 @input-hover-border-color: @primary-color;
@@ -333,7 +335,7 @@
 // Popover
 // ---
 // Popover body background color
-@popover-bg: #fff;
+@popover-bg: @component-background;
 // Popover text color
 @popover-color: @text-color;
 // Popover maximum width
@@ -373,6 +375,7 @@
 @menu-item-active-bg: @item-active-bg;
 @menu-item-active-border-width: 3px;
 @menu-item-group-title-color: @text-color-secondary;
+
 // dark theme
 @menu-dark-color: @text-color-secondary-dark;
 @menu-dark-bg: @layout-header-background;
@@ -449,6 +452,8 @@
 // ---
 @comment-padding-base: 16px 0;
 @comment-nest-indent: 44px;
+@comment-font-size-base: @font-size-base;
+@comment-font-size-sm: @font-size-sm;
 @comment-author-name-color: @text-color-secondary;
 @comment-author-time-color: #ccc;
 @comment-action-color: @text-color-secondary;
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index c6273fb3746c..ed5eab88286e 100755
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -156,7 +156,8 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     const key = this.getRecordKey(item, index);
     // Cache checkboxProps
     if (!this.CheckboxPropsCache[key]) {
-      const checkboxProps = (this.CheckboxPropsCache[key] = rowSelection.getCheckboxProps(item));
+      this.CheckboxPropsCache[key] = rowSelection.getCheckboxProps(item) || {};
+      const checkboxProps = this.CheckboxPropsCache[key];
       warning(
         !('checked' in checkboxProps) && !('defaultChecked' in checkboxProps),
         'Table',
@@ -413,6 +414,9 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     if (!column.sorter) {
       return;
     }
+
+    const pagination = { ...this.state.pagination };
+
     const sortDirections = column.sortDirections || (this.props.sortDirections as SortOrder[]);
     const { sortOrder, sortColumn } = this.state;
     // 只同时允许一列进行排序，否则会导致排序顺序的逻辑问题
@@ -427,7 +431,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
       newSortOrder = sortDirections[0];
     }
 
+    if (this.props.pagination) {
+      // Reset current prop
+      pagination.current = 1;
+      pagination.onChange!(pagination.current);
+    }
+
     const newState = {
+      pagination,
       sortOrder: newSortOrder,
       sortColumn: newSortOrder ? column : null,
     };
diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js
index 220081084144..7d3abdfc79ff 100644
--- a/components/table/__tests__/Table.sorter.test.js
+++ b/components/table/__tests__/Table.sorter.test.js
@@ -587,4 +587,23 @@ describe('Table.sorter', () => {
     wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
   });
+
+  it('pagination back', () => {
+    const onPageChange = jest.fn();
+    const onChange = jest.fn();
+
+    const wrapper = mount(
+      createTable({
+        pagination: {
+          pageSize: 2,
+          onChange: onPageChange,
+        },
+        onChange,
+      }),
+    );
+
+    wrapper.find('.ant-table-column-sorters').simulate('click');
+    expect(onChange.mock.calls[0][0].current).toBe(1);
+    expect(onPageChange.mock.calls[0][0]).toBe(1);
+  });
 });
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 749e4ad7330a..e1b2d745c40a 100755
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -8877,7 +8877,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                   <col
                     style="width:100px;min-width:100px"
                   />
-                  <col />
+                  <col
+                    style="width:200px;min-width:200px"
+                  />
                   <col />
                   <col
                     style="width:80px;min-width:80px"
@@ -9214,7 +9216,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
                   <col
                     style="width:100px;min-width:100px"
                   />
-                  <col />
+                  <col
+                    style="width:200px;min-width:200px"
+                  />
                   <col />
                   <col
                     style="width:80px;min-width:80px"
diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md
index 8f3fd9ae6ce2..248cc4f939d0 100644
--- a/components/table/demo/grouping-columns.md
+++ b/components/table/demo/grouping-columns.md
@@ -82,6 +82,7 @@ const columns = [
         title: 'Company Address',
         dataIndex: 'companyAddress',
         key: 'companyAddress',
+        width: 200,
       },
       {
         title: 'Company Name',
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index 83271215ca32..c262aae39949 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -78,7 +78,7 @@ const columns = [
 | rowClassName | Row's className | Function(record, index):string | - |
 | rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
 | rowSelection | Row selection [config](#rowSelection) | object | null |
-| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, `ture` and ['max-content'](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | { x: number \| true, y: number } | - |
+| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, `true` and ['max-content'](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | { x: number \| true, y: number } | - |
 | showHeader | Whether to show table header | boolean | `true` |
 | size | Size of table | `default` \| `middle` \| `small` | `default` |
 | title | Table title renderer | Function(currentPageData) |  |
diff --git a/components/table/style/index.less b/components/table/style/index.less
index c4379ec91f90..5ec17645325e 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -32,174 +32,169 @@
     border-collapse: collapse;
   }
 
-  &-thead > tr {
-    // For Chrome extra space:
-    // - https://github.com/ant-design/ant-design/issues/14926
-    // - https://github.com/ant-design/ant-design/issues/16131
+  &-thead > tr > th {
+    color: @table-header-color;
+    font-weight: 500;
+    text-align: left;
     background: @table-header-bg;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+    transition: background 0.3s ease;
 
-    > th {
-      color: @table-header-color;
-      font-weight: 500;
-      text-align: left;
-      background: transparent;
-      border-bottom: @border-width-base @border-style-base @border-color-split;
-      transition: background 0.3s ease;
+    &[colspan] {
+      text-align: center;
+    }
 
-      &[colspan] {
-        text-align: center;
-      }
+    .@{iconfont-css-prefix}-filter,
+    .@{table-prefix-cls}-filter-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 28px;
+      height: 100%;
+      color: @table-header-icon-color;
+      font-size: @font-size-sm;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.3s;
 
-      .@{iconfont-css-prefix}-filter,
-      .@{table-prefix-cls}-filter-icon {
+      > svg {
         position: absolute;
-        top: 0;
-        right: 0;
-        width: 28px;
-        height: 100%;
+        top: 50%;
+        left: 50%;
+        margin-top: -@font-size-sm / 2 + 1px;
+        margin-left: -@font-size-sm / 2;
+      }
+    }
+
+    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
+      color: @primary-color;
+    }
+
+    .@{table-prefix-cls}-column-sorter {
+      display: table-cell;
+      vertical-align: middle;
+
+      .@{table-prefix-cls}-column-sorter-inner {
+        height: 1em;
+        margin-top: 0.35em;
+        margin-left: 0.57142857em;
         color: @table-header-icon-color;
-        font-size: @font-size-sm;
+        line-height: 1em;
         text-align: center;
-        cursor: pointer;
         transition: all 0.3s;
 
-        > svg {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          margin-top: -@font-size-sm / 2 + 1px;
-          margin-left: -@font-size-sm / 2;
-        }
-      }
-
-      .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
-        color: @primary-color;
-      }
+        .@{table-prefix-cls}-column-sorter-up,
+        .@{table-prefix-cls}-column-sorter-down {
+          .iconfont-size-under-12px(11px);
 
-      .@{table-prefix-cls}-column-sorter {
-        display: table-cell;
-        vertical-align: middle;
-
-        .@{table-prefix-cls}-column-sorter-inner {
+          display: block;
           height: 1em;
-          margin-top: 0.35em;
-          margin-left: 0.57142857em;
-          color: @table-header-icon-color;
           line-height: 1em;
-          text-align: center;
           transition: all 0.3s;
+          &.on {
+            color: @primary-color;
+          }
+        }
+
+        &-full {
+          margin-top: -0.15em;
 
           .@{table-prefix-cls}-column-sorter-up,
           .@{table-prefix-cls}-column-sorter-down {
-            .iconfont-size-under-12px(11px);
-
-            display: block;
-            height: 1em;
-            line-height: 1em;
-            transition: all 0.3s;
-            &.on {
-              color: @primary-color;
-            }
+            height: 0.5em;
+            line-height: 0.5em;
           }
 
-          &-full {
-            margin-top: -0.15em;
-
-            .@{table-prefix-cls}-column-sorter-up,
-            .@{table-prefix-cls}-column-sorter-down {
-              height: 0.5em;
-              line-height: 0.5em;
-            }
-
-            .@{table-prefix-cls}-column-sorter-down {
-              margin-top: 0.125em;
-            }
+          .@{table-prefix-cls}-column-sorter-down {
+            margin-top: 0.125em;
           }
         }
       }
+    }
 
-      &.@{table-prefix-cls}-column-has-actions {
-        position: relative;
-        background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
+    &.@{table-prefix-cls}-column-has-actions {
+      position: relative;
+      background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
+      /* stylelint-disable-next-line */
+      -webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926
 
-        &.@{table-prefix-cls}-column-has-filters {
-          // https://github.com/ant-design/ant-design/issues/12650
-          padding-right: 30px !important;
+      &.@{table-prefix-cls}-column-has-filters {
+        // https://github.com/ant-design/ant-design/issues/12650
+        padding-right: 30px !important;
 
+        .@{iconfont-css-prefix}-filter,
+        .@{table-prefix-cls}-filter-icon {
+          &.@{table-prefix-cls}-filter-open {
+            color: @text-color-secondary;
+            background: @table-header-filter-active-bg;
+          }
+        }
+        // Very complicated styles logic but necessary
+        &:hover {
           .@{iconfont-css-prefix}-filter,
           .@{table-prefix-cls}-filter-icon {
-            &.@{table-prefix-cls}-filter-open {
+            &:hover {
               color: @text-color-secondary;
               background: @table-header-filter-active-bg;
             }
-          }
-          // Very complicated styles logic but necessary
-          &:hover {
-            .@{iconfont-css-prefix}-filter,
-            .@{table-prefix-cls}-filter-icon {
-              &:hover {
-                color: @text-color-secondary;
-                background: @table-header-filter-active-bg;
-              }
-              &:active {
-                color: @text-color;
-              }
+            &:active {
+              color: @text-color;
             }
           }
         }
+      }
 
-        &.@{table-prefix-cls}-column-has-sorters {
-          cursor: pointer;
-          &:hover {
+      &.@{table-prefix-cls}-column-has-sorters {
+        cursor: pointer;
+        &:hover {
+          background: @table-header-sort-active-bg;
+          .@{iconfont-css-prefix}-filter,
+          .@{table-prefix-cls}-filter-icon {
             background: @table-header-sort-active-bg;
-            .@{iconfont-css-prefix}-filter,
-            .@{table-prefix-cls}-filter-icon {
-              background: @table-header-sort-active-bg;
-            }
           }
-          &:active {
-            .@{table-prefix-cls}-column-sorter-up:not(.on),
-            .@{table-prefix-cls}-column-sorter-down:not(.on) {
-              color: @text-color-secondary;
-            }
+        }
+        &:active {
+          .@{table-prefix-cls}-column-sorter-up:not(.on),
+          .@{table-prefix-cls}-column-sorter-down:not(.on) {
+            color: @text-color-secondary;
           }
         }
       }
+    }
 
-      .@{table-prefix-cls}-header-column {
-        display: inline-block;
-        vertical-align: top;
+    .@{table-prefix-cls}-header-column {
+      display: inline-block;
+      vertical-align: top;
 
-        .@{table-prefix-cls}-column-sorters {
-          display: table;
+      .@{table-prefix-cls}-column-sorters {
+        display: table;
 
-          > .@{table-prefix-cls}-column-title {
-            display: table-cell;
-            vertical-align: middle;
-          }
+        > .@{table-prefix-cls}-column-title {
+          display: table-cell;
+          vertical-align: middle;
+        }
 
-          > *:not(.@{table-prefix-cls}-column-sorter) {
-            position: relative;
-          }
-          &::before {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            background: transparent;
-            transition: all 0.3s;
-            content: '';
-          }
-          &:hover::before {
-            background: rgba(0, 0, 0, 0.04);
-          }
+        > *:not(.@{table-prefix-cls}-column-sorter) {
+          position: relative;
+        }
+        &::before {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          background: transparent;
+          transition: all 0.3s;
+          content: '';
+        }
+        &:hover::before {
+          background: rgba(0, 0, 0, 0.04);
         }
       }
+    }
 
-      &.@{table-prefix-cls}-column-has-sorters {
-        user-select: none;
-      }
+    &.@{table-prefix-cls}-column-has-sorters {
+      user-select: none;
     }
   }
 
@@ -235,6 +230,10 @@
     }
   }
 
+  &-thead > tr:hover {
+    background: none;
+  }
+
   &-footer {
     position: relative;
     padding: @table-padding-vertical @table-padding-horizontal;
@@ -271,8 +270,8 @@
 
   &-title + &-content {
     position: relative;
-    overflow: hidden;
     border-radius: @table-border-radius-base @table-border-radius-base 0 0;
+
     .@{table-prefix-cls}-bordered & {
       &,
       table,
@@ -598,6 +597,32 @@
     // Workaround for additional scroll bar on the table header
     // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
     opacity: 0.9999;
+
+    &::-webkit-scrollbar {
+      border: 1px solid @border-color-split;
+      border-width: 0 0 1px 0;
+    }
+  }
+
+  &-hide-scrollbar {
+    // https://github.com/ant-design/ant-design/issues/4637
+    // https://stackoverflow.com/a/54101063
+    // https://github.com/react-component/table/pull/333
+    scrollbar-color: transparent transparent;
+    &::-webkit-scrollbar {
+      background-color: transparent;
+    }
+  }
+
+  // optimize header style of borderd table after hide extra scrollbar
+  &-bordered&-fixed-header &-scroll &-header {
+    &::-webkit-scrollbar {
+      border: 1px solid @border-color-split;
+      border-width: 1px 1px 1px 0;
+    }
+    &.@{table-prefix-cls}-hide-scrollbar .@{table-prefix-cls}-thead > tr > th:last-child {
+      border-right-color: transparent;
+    }
   }
 
   &-fixed-left,
@@ -695,4 +720,15 @@
   }
 }
 
+/**
+* Another fix of Firefox:
+* - https://github.com/ant-design/ant-design/issues/12628
+* - https://github.com/ant-design/ant-design/issues/12628
+*/
+@supports (-moz-appearance: meterbar) {
+  .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-has-actions {
+    background-clip: padding-box;
+  }
+}
+
 @import './size';
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index edc9ef5a1676..ffc31bb3f458 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -2994,13 +2994,21 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
               class="ant-tabs-nav ant-tabs-nav-animated"
             >
               <div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-0
+                </div>
                 <div
                   aria-disabled="false"
                   aria-selected="true"
                   class="ant-tabs-tab-active ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 1
+                  Tab-1
                 </div>
                 <div
                   aria-disabled="false"
@@ -3008,7 +3016,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 2
+                  Tab-2
                 </div>
                 <div
                   aria-disabled="false"
@@ -3016,7 +3024,135 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 3
+                  Tab-3
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-4
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-5
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-6
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-7
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-8
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-9
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-10
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-11
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-12
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-13
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-14
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-15
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-16
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-17
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-18
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-19
                 </div>
                 <div
                   aria-disabled="false"
@@ -3024,7 +3160,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 4
+                  Tab-20
                 </div>
                 <div
                   aria-disabled="false"
@@ -3032,7 +3168,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 5
+                  Tab-21
                 </div>
                 <div
                   aria-disabled="false"
@@ -3040,7 +3176,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 6
+                  Tab-22
                 </div>
                 <div
                   aria-disabled="false"
@@ -3048,7 +3184,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 7
+                  Tab-23
                 </div>
                 <div
                   aria-disabled="false"
@@ -3056,7 +3192,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 8
+                  Tab-24
                 </div>
                 <div
                   aria-disabled="false"
@@ -3064,7 +3200,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 9
+                  Tab-25
                 </div>
                 <div
                   aria-disabled="false"
@@ -3072,7 +3208,7 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 10
+                  Tab-26
                 </div>
                 <div
                   aria-disabled="false"
@@ -3080,7 +3216,23 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
                   class=" ant-tabs-tab"
                   role="tab"
                 >
-                  Tab 11
+                  Tab-27
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-28
+                </div>
+                <div
+                  aria-disabled="false"
+                  aria-selected="false"
+                  class=" ant-tabs-tab"
+                  role="tab"
+                >
+                  Tab-29
                 </div>
               </div>
               <div
@@ -3098,8 +3250,13 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
     />
     <div
       class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content"
-      style="margin-left:0%"
+      style="margin-left:-100%"
     >
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
       <div
         aria-hidden="false"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
@@ -3167,6 +3324,96 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
         class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
         role="tabpanel"
       />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
+        role="tabpanel"
+      />
     </div>
     <div
       role="presentation"
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index 8a269341be0a..939d03abeb5f 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -16,7 +16,7 @@ Default activate first tab.
 ```jsx
 import { Tabs } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 function callback(key) {
   console.log(key);
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index a002fb2444c0..26733e05afa3 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -16,7 +16,7 @@ Should be used at the top of container, needs to override styles.
 ```jsx
 import { Tabs } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 ReactDOM.render(
   <div className="card-container">
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
index e51bd00fac9e..236acd3824dc 100644
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@@ -16,7 +16,7 @@ Another type Tabs, which doesn't support vertical mode.
 ```jsx
 import { Tabs } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 function callback(key) {
   console.log(key);
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
index a8fd0452fdbd..7ded4a5ebe15 100644
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@@ -16,7 +16,7 @@ Hide default plus icon, and bind event for customized trigger.
 ```jsx
 import { Tabs, Button } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 class Demo extends React.Component {
   constructor(props) {
diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
index 0546ec8891ea..0afca5bb6d2f 100644
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@@ -18,7 +18,7 @@ import { Tabs } from 'antd';
 import { DragDropContextProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 // Drag & Drop node
 class TabNode extends React.Component {
diff --git a/components/tabs/demo/custom-tab-bar.md b/components/tabs/demo/custom-tab-bar.md
index 94010bef2386..9bbb056c6423 100644
--- a/components/tabs/demo/custom-tab-bar.md
+++ b/components/tabs/demo/custom-tab-bar.md
@@ -17,7 +17,7 @@ use react-sticky.
 import { Tabs } from 'antd';
 import { StickyContainer, Sticky } from 'react-sticky';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 const renderTabBar = (props, DefaultTabBar) => (
   <Sticky bottomOffset={80}>
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md
index f0f8062ea658..2b018435f397 100644
--- a/components/tabs/demo/disabled.md
+++ b/components/tabs/demo/disabled.md
@@ -16,7 +16,7 @@ Disabled a tab.
 ```jsx
 import { Tabs } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 ReactDOM.render(
   <Tabs defaultActiveKey="1">
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index d760cf16da27..a12a3f3b936f 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -16,7 +16,7 @@ Only card type Tabs support adding & closable. +Use `closable={false}` to disabl
 ```jsx
 import { Tabs } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 class Demo extends React.Component {
   constructor(props) {
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index 1a492b73f893..c31b54027487 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -16,7 +16,7 @@ You can add extra actions to the right of Tabs.
 ```jsx
 import { Tabs, Button } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 const operations = <Button>Extra Action</Button>;
 
diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
index 5a1e8e73f12c..c395652bbea1 100644
--- a/components/tabs/demo/icon.md
+++ b/components/tabs/demo/icon.md
@@ -16,7 +16,7 @@ The Tab with Icon.
 ```jsx
 import { Tabs, Icon } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 ReactDOM.render(
   <Tabs defaultActiveKey="2">
diff --git a/components/tabs/demo/nest.md b/components/tabs/demo/nest.md
index 8b9b17ac657b..c4f9a9762917 100644
--- a/components/tabs/demo/nest.md
+++ b/components/tabs/demo/nest.md
@@ -2,7 +2,7 @@
 order: 99
 debug: true
 title:
-  zh-CN: 基本
+  zh-CN: 嵌套
   en-US: Nest
 ---
 
@@ -17,8 +17,8 @@ Default activate first tab.
 ```jsx
 import { Tabs, Select } from 'antd';
 
-const TabPane = Tabs.TabPane;
-const Option = Select.Option;
+const { TabPane } = Tabs;
+const { Option } = Select;
 
 const positionList = ['left', 'right', 'top', 'bottom'];
 
diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
index a091c5d3e80d..ac0d74a7b06c 100644
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@@ -16,8 +16,8 @@ Tab's position: left, right, top or bottom.
 ```jsx
 import { Tabs, Select } from 'antd';
 
-const TabPane = Tabs.TabPane;
-const Option = Select.Option;
+const { TabPane } = Tabs;
+const { Option } = Select;
 
 class Demo extends React.Component {
   state = {
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index fe71fc22cc51..4cfda29993cb 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -16,7 +16,7 @@ In order to fit in more tabs, they can slide left and right (or up and down).
 ```jsx
 import { Tabs, Radio } from 'antd';
 
-const TabPane = Tabs.TabPane;
+const { TabPane } = Tabs;
 
 class SlidingTabsDemo extends React.Component {
   constructor(props) {
@@ -40,39 +40,11 @@ class SlidingTabsDemo extends React.Component {
           <Radio.Button value="left">Vertical</Radio.Button>
         </Radio.Group>
         <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
-          <TabPane tab="Tab 1" key="1">
-            Content of tab 1
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of tab 2
-          </TabPane>
-          <TabPane tab="Tab 3" key="3">
-            Content of tab 3
-          </TabPane>
-          <TabPane tab="Tab 4" key="4">
-            Content of tab 4
-          </TabPane>
-          <TabPane tab="Tab 5" key="5">
-            Content of tab 5
-          </TabPane>
-          <TabPane tab="Tab 6" key="6">
-            Content of tab 6
-          </TabPane>
-          <TabPane tab="Tab 7" key="7">
-            Content of tab 7
-          </TabPane>
-          <TabPane tab="Tab 8" key="8">
-            Content of tab 8
-          </TabPane>
-          <TabPane tab="Tab 9" key="9">
-            Content of tab 9
-          </TabPane>
-          <TabPane tab="Tab 10" key="10">
-            Content of tab 10
-          </TabPane>
-          <TabPane tab="Tab 11" key="11">
-            Content of tab 11
-          </TabPane>
+          {[...Array(30).keys()].map((i) => (
+            <TabPane tab={`Tab-${i}`} key={i}>
+              Content of tab {i}
+            </TabPane>
+          ))}
         </Tabs>
       </div>
     );
diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less
index 728a64cc0d11..3cea4d72a7f6 100644
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@@ -97,7 +97,7 @@
   &-vertical&-card &-card-bar&-left-bar,
   &-vertical&-card &-card-bar&-right-bar {
     .@{tab-prefix-cls}-nav-container {
-      height: auto;
+      height: 100%;
     }
     .@{tab-prefix-cls}-tab {
       margin-bottom: 8px;
diff --git a/components/time-picker/__tests__/__snapshots__/index.test.js.snap b/components/time-picker/__tests__/__snapshots__/index.test.js.snap
index 0662234eef6b..773d6e63ab25 100644
--- a/components/time-picker/__tests__/__snapshots__/index.test.js.snap
+++ b/components/time-picker/__tests__/__snapshots__/index.test.js.snap
@@ -41,28 +41,53 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
 `;
 
 exports[`TimePicker prop locale should works 1`] = `
-<span
-  class="ant-time-picker"
-  style=""
->
-  <input
-    class="ant-time-picker-input"
-    id=""
-    placeholder="Избери дата"
-    type="text"
-    value=""
-  />
+Array [
   <span
-    class="ant-time-picker-icon"
+    class="ant-time-picker"
+    style=""
   >
+    <input
+      class="ant-time-picker-input"
+      id=""
+      placeholder="Избери дата"
+      type="text"
+      value="00:00:00"
+    />
+    <span
+      class="ant-time-picker-icon"
+    >
+      <i
+        aria-label="icon: clock-circle"
+        class="anticon anticon-clock-circle ant-time-picker-clock-icon"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="clock-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+          <path
+            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+          />
+        </svg>
+      </i>
+    </span>
     <i
-      aria-label="icon: clock-circle"
-      class="anticon anticon-clock-circle ant-time-picker-clock-icon"
+      aria-label="icon: close-circle"
+      class="anticon anticon-close-circle ant-time-picker-clear"
+      tabindex="-1"
     >
       <svg
         aria-hidden="true"
         class=""
-        data-icon="clock-circle"
+        data-icon="close-circle"
         fill="currentColor"
         focusable="false"
         height="1em"
@@ -70,15 +95,918 @@ exports[`TimePicker prop locale should works 1`] = `
         width="1em"
       >
         <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-        />
-        <path
-          d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
         />
       </svg>
     </i>
-  </span>
-</span>
+  </span>,
+  <div>
+    <div
+      class="ant-time-picker-panel ant-time-picker-panel-column-3 ant-time-picker-panel-placement-bottomLeft slide-up-appear"
+      style="left: -999px; top: -1001px;"
+    >
+      <div
+        class="ant-time-picker-panel-inner"
+      >
+        <div
+          class="ant-time-picker-panel-input-wrap"
+        >
+          <input
+            class="ant-time-picker-panel-input"
+            placeholder="Избери дата"
+            value="00:00:00"
+          />
+        </div>
+        <div
+          class="ant-time-picker-panel-combobox"
+        >
+          <div
+            class="ant-time-picker-panel-select"
+          >
+            <ul>
+              <li
+                class="ant-time-picker-panel-select-option-selected"
+                role="button"
+              >
+                00
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                01
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                02
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                03
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                04
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                05
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                06
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                07
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                08
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                09
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                10
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                11
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                12
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                13
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                14
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                15
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                16
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                17
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                18
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                19
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                20
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                21
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                22
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                23
+              </li>
+            </ul>
+          </div>
+          <div
+            class="ant-time-picker-panel-select"
+          >
+            <ul>
+              <li
+                class="ant-time-picker-panel-select-option-selected"
+                role="button"
+              >
+                00
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                01
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                02
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                03
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                04
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                05
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                06
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                07
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                08
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                09
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                10
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                11
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                12
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                13
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                14
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                15
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                16
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                17
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                18
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                19
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                20
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                21
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                22
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                23
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                24
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                25
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                26
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                27
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                28
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                29
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                30
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                31
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                32
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                33
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                34
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                35
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                36
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                37
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                38
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                39
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                40
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                41
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                42
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                43
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                44
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                45
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                46
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                47
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                48
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                49
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                50
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                51
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                52
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                53
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                54
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                55
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                56
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                57
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                58
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                59
+              </li>
+            </ul>
+          </div>
+          <div
+            class="ant-time-picker-panel-select"
+          >
+            <ul>
+              <li
+                class="ant-time-picker-panel-select-option-selected"
+                role="button"
+              >
+                00
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                01
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                02
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                03
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                04
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                05
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                06
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                07
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                08
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                09
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                10
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                11
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                12
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                13
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                14
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                15
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                16
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                17
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                18
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                19
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                20
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                21
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                22
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                23
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                24
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                25
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                26
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                27
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                28
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                29
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                30
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                31
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                32
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                33
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                34
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                35
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                36
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                37
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                38
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                39
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                40
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                41
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                42
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                43
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                44
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                45
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                46
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                47
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                48
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                49
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                50
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                51
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                52
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                53
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                54
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                55
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                56
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                57
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                58
+              </li>
+              <li
+                class=""
+                role="button"
+              >
+                59
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
 `;
 
 exports[`TimePicker renders addon correctly 1`] = `
diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js
index 1ec96fc081cf..c9074382ee6a 100644
--- a/components/time-picker/__tests__/index.test.js
+++ b/components/time-picker/__tests__/index.test.js
@@ -73,7 +73,7 @@ describe('TimePicker', () => {
     const locale = {
       placeholder: 'Избери дата',
     };
-    const wrapper = mount(<TimePicker open locale={locale} />);
+    const wrapper = mount(<TimePicker defaultValue={moment('2000-01-01 00:00:00')} open locale={locale} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
 });
diff --git a/components/time-picker/locale/lv_LV.tsx b/components/time-picker/locale/lv_LV.tsx
new file mode 100644
index 000000000000..5e3890e7b86c
--- /dev/null
+++ b/components/time-picker/locale/lv_LV.tsx
@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Izvēlieties laiku',
+};
+
+export default locale;
diff --git a/components/time-picker/style/index.less b/components/time-picker/style/index.less
index 372d2e91d73e..0785200e0c68 100644
--- a/components/time-picker/style/index.less
+++ b/components/time-picker/style/index.less
@@ -225,3 +225,14 @@
     right: @control-padding-horizontal-sm - 1px;
   }
 }
+
+// Fix cursor height in safari
+// https://stackoverflow.com/q/3843408/3040605
+// https://browserstrangeness.github.io/css_hacks.html#safari
+@media not all and (min-resolution: 0.001dpcm) {
+  @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+    .@{ant-prefix}-input {
+      line-height: @line-height-base;
+    }
+  }
+}
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index 80f68ab2e116..ebbe21edc232 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -159,26 +159,25 @@ export default class TransferList extends React.Component<TransferListProps, Tra
       </div>
     ) : null;
 
-    const searchNotFound = !filteredItems.length && (
-      <div className={`${prefixCls}-body-not-found`}>{notFoundContent}</div>
-    );
-
     let listBody: React.ReactNode = bodyDom;
     if (!listBody) {
-      let bodyNode: React.ReactNode = searchNotFound;
-      if (!bodyNode) {
-        const { bodyContent, customize } = renderListNode(renderList, {
-          ...omit(this.props, OmitProps),
-          filteredItems,
-          filteredRenderItems,
-          selectedKeys: checkedKeys,
-        });
-
-        // We should wrap customize list body in a classNamed div to use flex layout.
-        bodyNode = customize ? (
-          <div className={`${prefixCls}-body-customize-wrapper`}>{bodyContent}</div>
-        ) : (
+      let bodyNode: React.ReactNode;
+
+      const { bodyContent, customize } = renderListNode(renderList, {
+        ...omit(this.props, OmitProps),
+        filteredItems,
+        filteredRenderItems,
+        selectedKeys: checkedKeys,
+      });
+
+      // We should wrap customize list body in a classNamed div to use flex layout.
+      if (customize) {
+        bodyNode = <div className={`${prefixCls}-body-customize-wrapper`}>{bodyContent}</div>;
+      } else {
+        bodyNode = filteredItems.length ? (
           bodyContent
+        ) : (
+          <div className={`${prefixCls}-body-not-found`}>{notFoundContent}</div>
         );
       }
 
diff --git a/components/transfer/renderListBody.tsx b/components/transfer/renderListBody.tsx
index 33983ef446b0..cfed6948c419 100644
--- a/components/transfer/renderListBody.tsx
+++ b/components/transfer/renderListBody.tsx
@@ -36,7 +36,7 @@ class ListBody extends React.Component<TransferListBodyProps> {
     });
   }
 
-  componentWillMount() {
+  componentWillUnmount() {
     raf.cancel(this.mountId);
   }
 
diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
index 372ed33647dd..d3e58c4ea18e 100644
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@@ -25,6 +25,7 @@ export interface AntdTreeNodeAttribute {
   disabled: boolean;
   disableCheckbox: boolean;
 }
+
 export interface AntTreeNodeProps {
   className?: string;
   checkable?: boolean;
@@ -72,6 +73,10 @@ export interface AntTreeNodeMouseEvent {
   event: React.MouseEvent<any>;
 }
 
+export interface AntTreeNodeDragEnterEvent extends AntTreeNodeMouseEvent {
+  expandedKeys: string[];
+}
+
 export interface AntTreeNodeDropEvent {
   node: AntTreeNode;
   dragNode: AntTreeNode;
@@ -135,7 +140,7 @@ export interface TreeProps {
   /** 设置节点可拖拽（IE>8）*/
   draggable?: boolean;
   onDragStart?: (options: AntTreeNodeMouseEvent) => void;
-  onDragEnter?: (options: AntTreeNodeMouseEvent) => void;
+  onDragEnter?: (options: AntTreeNodeDragEnterEvent) => void;
   onDragOver?: (options: AntTreeNodeMouseEvent) => void;
   onDragLeave?: (options: AntTreeNodeMouseEvent) => void;
   onDragEnd?: (options: AntTreeNodeMouseEvent) => void;
diff --git a/components/tree/demo/directory.md b/components/tree/demo/directory.md
index e045dcaca6f5..0bfd4e35d9f1 100644
--- a/components/tree/demo/directory.md
+++ b/components/tree/demo/directory.md
@@ -16,8 +16,7 @@ Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` sel
 ```jsx
 import { Tree } from 'antd';
 
-const DirectoryTree = Tree.DirectoryTree;
-const { TreeNode } = Tree;
+const { TreeNode, DirectoryTree } = Tree;
 
 class Demo extends React.Component {
   onSelect = (keys, event) => {
diff --git a/components/tree/style/index.less b/components/tree/style/index.less
index ca9053870a6d..da347b39f70d 100644
--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@@ -244,7 +244,8 @@
       left: 12px;
       width: 1px;
       height: 100%;
-      margin: 22px 0;
+      height: calc(100% - 22px); // Remove additional height if support
+      margin: 22px 0 0;
       border-left: 1px solid @border-color-base;
       content: ' ';
     }
diff --git a/components/typography/Text.tsx b/components/typography/Text.tsx
index 5af5355d3b51..25c816521abf 100644
--- a/components/typography/Text.tsx
+++ b/components/typography/Text.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import warning from '../_util/warning';
 import Base, { BlockProps } from './Base';
 
-interface TextProps extends BlockProps {
+export interface TextProps extends BlockProps {
   ellipsis?: boolean;
 }
 
@@ -10,7 +10,7 @@ const Text: React.SFC<TextProps> = ({ ellipsis, ...restProps }) => {
   warning(
     typeof ellipsis !== 'object',
     'Typography.Text',
-    '`ellipsis` is only support boolean value.',
+    '`ellipsis` only supports boolean value.',
   );
   return <Base {...restProps} ellipsis={!!ellipsis} component="span" />;
 };
diff --git a/components/typography/index.tsx b/components/typography/index.tsx
index 73bbd766d2b3..e490b21fd5be 100644
--- a/components/typography/index.tsx
+++ b/components/typography/index.tsx
@@ -3,7 +3,7 @@ import Text from './Text';
 import Title from './Title';
 import Paragraph from './Paragraph';
 
-type TypographyProps = typeof OriginTypography & {
+export type TypographyProps = typeof OriginTypography & {
   Text: typeof Text;
   Title: typeof Title;
   Paragraph: typeof Paragraph;
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 30c75b887944..47c691b9b912 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -39,11 +39,11 @@
   }
 
   &&-warning {
-    color: @text-color-warning;
+    color: @warning-color;
   }
 
   &&-danger {
-    color: @text-color-danger;
+    color: @error-color;
   }
 
   &&-disabled {
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 0751b2e6ffbc..1564fb6cbce4 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -238,7 +238,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
   };
 
   renderUploadList = (locale: UploadLocale) => {
-    const { showUploadList, listType, onPreview, previewFile } = this.props;
+    const { showUploadList, listType, onPreview, previewFile, disabled } = this.props;
     const { showRemoveIcon, showPreviewIcon } = showUploadList as any;
     return (
       <UploadList
@@ -247,7 +247,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
         previewFile={previewFile}
         onPreview={onPreview}
         onRemove={this.handleManualRemove}
-        showRemoveIcon={showRemoveIcon}
+        showRemoveIcon={!disabled && showRemoveIcon}
         showPreviewIcon={showPreviewIcon}
         locale={{ ...locale, ...this.props.locale }}
       />
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index 6b9e5a926317..bafbb9811659 100644
--- a/components/upload/demo/picture-card.md
+++ b/components/upload/demo/picture-card.md
@@ -16,6 +16,15 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
 ```jsx
 import { Upload, Icon, Modal } from 'antd';
 
+function getBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = error => reject(error);
+  });
+}
+
 class PicturesWall extends React.Component {
   state = {
     previewVisible: false,
@@ -32,9 +41,13 @@ class PicturesWall extends React.Component {
 
   handleCancel = () => this.setState({ previewVisible: false });
 
-  handlePreview = file => {
+  handlePreview = async file => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj);
+    }
+
     this.setState({
-      previewImage: file.url || file.thumbUrl,
+      previewImage: file.url || file.preview,
       previewVisible: true,
     });
   };
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index d744e1b5ae09..0efe181cb042 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -8,7 +8,8 @@ export interface HttpRequestHeader {
 
 export interface RcFile extends File {
   uid: string;
-  lastModifiedDate: Date;
+  readonly lastModifiedDate: Date;
+  readonly webkitRelativePath: string;
 }
 
 export interface UploadFile {
@@ -58,7 +59,7 @@ export interface UploadProps {
   name?: string;
   defaultFileList?: Array<UploadFile>;
   fileList?: Array<UploadFile>;
-  action?: string | ((file: UploadFile) => PromiseLike<any>);
+  action?: string | ((file: RcFile) => string) | ((file: RcFile) => PromiseLike<string>);
   directory?: boolean;
   data?: Object | ((file: UploadFile) => any);
   headers?: HttpRequestHeader;
@@ -70,7 +71,7 @@ export interface UploadProps {
   listType?: UploadListType;
   className?: string;
   onPreview?: (file: UploadFile) => void;
-  onRemove?: (file: UploadFile) => void | boolean;
+  onRemove?: (file: UploadFile) => void | boolean | Promise<void | boolean>;
   supportServerRender?: boolean;
   style?: React.CSSProperties;
   disabled?: boolean;
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index 26f6dd58d5d9..216b71a6f367 100644
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@@ -29,6 +29,10 @@
     display: inline-block;
   }
 
+  &&-disabled {
+    cursor: not-allowed;
+  }
+
   &&-select-picture-card {
     display: table;
     width: @upload-picture-card-size;
diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index 50ce459c0cd1..04cb08f06d9d 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -3,7 +3,7 @@ order: 5
 title: Customize Theme
 ---
 
-Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
+Ant Design allows you to customize our design tokens in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
 
 ![customized themes](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
 
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index 5b002acecaa5..b7c06ab24f13 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -3,7 +3,7 @@ order: 5
 title: 定制主题
 ---
 
-Ant Design 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于全局样式（主色、圆角、边框）和指定组件的视觉定制。
 
 ![一些配置好的主题](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png)
 
diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md
index dbee697cb6fe..01953e1edae0 100644
--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@@ -106,6 +106,19 @@ If you need some features which should not be included in antd, try to extend an
 
 You can config `nonce` by [ConfigProvider](/components/config-provider/#Content-Security-Policy).
 
+### When set `mode` to DatePicker/RangePicker, cannot select year or month anymore?
+
+In real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now!
+
+- Reproduce link: https://codesandbox.io/s/dank-brook-v1csy
+- Same issues：[#15572](https://github.com/ant-design/ant-design/issues/15572), [#16436](https://github.com/ant-design/ant-design/issues/16436), [#11938](https://github.com/ant-design/ant-design/issues/11938), [#11735](https://github.com/ant-design/ant-design/issues/11735), [#11586](https://github.com/ant-design/ant-design/issues/11586), [#10425](https://github.com/ant-design/ant-design/issues/10425), [#11053](https://github.com/ant-design/ant-design/issues/11053)
+
+Like [the explaination](https://github.com/ant-design/ant-design/issues/11586#issuecomment-429189877) here, that is because `<DatePicker mode="year" />` do not equal to `YearPicker`, `<RangePicker mode="month" />` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190) in antd 3.0, which simply control the displayed panel and won't change the original date picking behavior of `DatePicker/RangePicker` (for instance you still need to click date cell to finish selection in a DatePicker, whatever the `mode` is).
+
+##### Workaround
+
+You can refer to [this article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [this article](https://www.cnblogs.com/zyl-Tara/p/10197177.html), using  `mode` and `onPanelChange` to encapsulate a `YearPicker` or `MonthRangePicker` for your needs. Or you can wait for our [antd@4.0](https://github.com/ant-design/ant-design/issues/16911), in which we are planing to [add more XxxPickers](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884) for those requirments.
+
 ### How to spell Ant Design correctly?
 
 - ✅ **Ant Design**: Capitalized with space, for the design language.
@@ -124,11 +137,7 @@ Here are some typical wrong examples:
 
 ### Do you guys have any channel for donation, like PayPal or Alipay?
 
-Not yet.
-
-### Why not?
-
-Alibaba pays us.
+[https://opencollective.com/ant-design](https://opencollective.com/ant-design)
 
 ---
 
diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md
index 7709baa53260..086a6be067ee 100644
--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@@ -110,6 +110,19 @@ import { Menu, Breadcrumb, Icon } from 'antd';
 
 你可以通过 [ConfigProvider](/components/config-provider/#Content-Security-Policy) 来配置 `nonce` 属性。
 
+### 当我指定了 DatePicker/RangePicker 的 `mode` 属性后，点击后无法选择年份/月份？
+
+在业务开发中，你可能有年份选择，月份范围选择，周范围选择等需求，此时你给现有组件增加了 `mode` 属性，却发现无法进行点击选择行为，面板也不会关闭。
+
+- 重现链接：https://codesandbox.io/s/dank-brook-v1csy
+- 相同 issue：[#15572](https://github.com/ant-design/ant-design/issues/15572)、[#16436](https://github.com/ant-design/ant-design/issues/16436)、[#11938](https://github.com/ant-design/ant-design/issues/11938)、[#11735](https://github.com/ant-design/ant-design/issues/11735)、[#11586](https://github.com/ant-design/ant-design/issues/11586)、[#10425](https://github.com/ant-design/ant-design/issues/10425)、[#11053](https://github.com/ant-design/ant-design/issues/11053)
+
+就像[这个回复](https://github.com/ant-design/ant-design/issues/15572#issuecomment-475476135)里解释的一样，这是因为 `<DatePicker mode="year" />` 不等于 `YearPicker`，`<RangePicker mode="month" />` 不等于 `MonthRangePicker`。 `mode` 属性是在 antd 3.0 时，为了控制面板展现状态而添加的属性，以支持[展示时间面板](https://github.com/ant-design/ant-design/issues/5190)等需求而添加的。`mode` 只会简单的改变当前显示的面板，不会修改默认的交互行为（比如 DatePicker 依然是点击日才会完成选择并关闭面板）。
+
+##### 解决办法
+
+你可以参照 [这篇文章](https://juejin.im/post/5cf65c366fb9a07eca6968f9) 或者 [这篇文章](https://www.cnblogs.com/zyl-Tara/p/10197177.html) 里的做法，利用 `mode` 和 `onPanelChange` 等方法去封装一个 `YearPicker` 等组件。我们计划在 [antd@4.0](https://github.com/ant-design/ant-design/issues/16911) 中直接[添加更多相关日期组件](https://github.com/ant-design/ant-design/issues/4524#issuecomment-480576884)来支持这些需求。
+
 ### 如何正确的拼写 Ant Design？
 
 - ✅ **Ant Design**：用空格分隔的首字母大写单词，指代设计语言。
@@ -128,11 +141,7 @@ import { Menu, Breadcrumb, Icon } from 'antd';
 
 ### 你们有接受捐助的渠道吗，比如支付宝或者微信支付？
 
-还没有。
-
-### 为什么？
-
-马爸爸会付给我们钱。
+[https://opencollective.com/ant-design](https://opencollective.com/ant-design)
 
 ---
 
diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md
index d34a23c2069b..e8081254cb12 100644
--- a/docs/spec/colors.en-US.md
+++ b/docs/spec/colors.en-US.md
@@ -52,6 +52,37 @@ import ColorPaletteTool from '../../site/theme/template/Color/ColorPaletteTool';
 ReactDOM.render(<ColorPaletteTool />, mountNode);
 ```
 
+### Programmatic Usage
+
+We provide Less and JavaScript usage for developers.
+
+- **Less**
+
+  ```less
+  @import '~antd/lib/style/themes/default.less', .selector {
+    color: @blue-5;
+    background-color: @gold-2;
+  }
+  ```
+
+  Color less variables: [color.less](https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less).
+
+  <br />
+
+- **JavaScript**
+
+  ```
+  npm install @ant-design/colors
+  ```
+
+  ```js
+  import { blue } from '@ant-design/colors';
+  console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
+  console.log(blue.primary); // '#1890FF'
+  ```
+
+  More APIs: [@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
+
 ---
 
 ## Product-level Color System
diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md
index 973450682e34..cea69b1a666e 100644
--- a/docs/spec/colors.zh-CN.md
+++ b/docs/spec/colors.zh-CN.md
@@ -38,7 +38,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序
 
 ### 中性色板
 
-中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理的选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。
+中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 10 个颜色。
 
 ```__react
 import Palette from '../../site/theme/template/Color/Palette';
@@ -60,6 +60,37 @@ import ColorPaletteTool from '../../site/theme/template/Color/ColorPaletteTool';
 ReactDOM.render(<ColorPaletteTool />, mountNode);
 ```
 
+### 在代码中使用色板
+
+我们为程序员提供了色板的 Less 和 JavaScript 的使用方式。
+
+- **Less**
+
+  ```less
+  @import '~antd/lib/style/themes/default.less', .selector {
+    color: @blue-5;
+    background-color: @gold-2;
+  }
+  ```
+
+  所有色板变量列表：[color.less](https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less)。
+
+  <br />
+
+- **JavaScript**
+
+  ```
+  npm install @ant-design/colors
+  ```
+
+  ```js
+  import { blue } from '@ant-design/colors';
+  console.log(blue); // ['#E6F7FF', '#BAE7FF', '#91D5FF', ''#69C0FF', '#40A9FF', '#1890FF', '#096DD9', '#0050B3', '#003A8C', '#002766']
+  console.log(blue.primary); // '#1890FF'
+  ```
+
+  更多使用方式：[@ant-design/colors](https://www.npmjs.com/package/@ant-design/colors)
+
 ---
 
 ## 产品级色彩体系
@@ -68,7 +99,7 @@ ReactDOM.render(<ColorPaletteTool />, mountNode);
 
 <img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/msiCkgfDaDgrTUuumxlq.png">
 
-品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅自深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 1890FF，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
+品牌色是体现产品特性和传播理念最直观的视觉元素之一。在色彩选取时，需要先明确品牌色在界面中的使用场景及范围。在基础色板中选择主色，我们建议选择色板从浅至深的第六个颜色作为主色。 Ant Design 的品牌色取自基础色板的蓝色，Hex 值为 `#1890FF`，应用场景包括：关键行动点，操作状态、重要信息高亮，图形化等场景。
 
 ### 功能色
 
diff --git a/docs/spec/feedback.en-US.md b/docs/spec/feedback.en-US.md
index ed5319d5aa5c..8ed456fb8bf2 100644
--- a/docs/spec/feedback.en-US.md
+++ b/docs/spec/feedback.en-US.md
@@ -71,7 +71,7 @@ When the operation takes a while (usually more than 2 seconds) to complete, the
 
 <br />
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="Used when the operation takes a long time to complete, showing the current progress and status of the operation.">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/j6XiEx6UUV/676a18a1-bf60-4d93-8f94-55f1882dd13e.png" description="Used when the operation takes a long time to complete, showing the current progress and status of the operation.">
 
 > Note: If the loading time is long, a cancel operation should be provided.
 
diff --git a/docs/spec/feedback.zh-CN.md b/docs/spec/feedback.zh-CN.md
index 8c5f9e484e01..8b53862661a3 100644
--- a/docs/spec/feedback.zh-CN.md
+++ b/docs/spec/feedback.zh-CN.md
@@ -71,7 +71,7 @@ title: 反馈
 
 <br />
 
-<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/rmsportal/cHaaqZTvzgCZiYUnfNom.png" description="在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。">
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/zos/antfincdn/j6XiEx6UUV/676a18a1-bf60-4d93-8f94-55f1882dd13e.png" description="在操作需要较长时间才能完成时使用，显示该操作的当前进度和状态。">
 
 > 注：若加载时间较长，应提供取消操作。
 
diff --git a/docs/spec/values.en-US.md b/docs/spec/values.en-US.md
index f33b7db64dd1..899076b51367 100644
--- a/docs/spec/values.en-US.md
+++ b/docs/spec/values.en-US.md
@@ -31,6 +31,6 @@ As a part of nature, it will have deep influence on user behavior, and designers
 
 The designers needs to make better design decisions and create a high-definition and low-entropy atmosphere for developer team. Meanwhile, different designers could produce the same design output which fit business needs based on the same understanding of business requirements and design system.
 
-- **Keep restraint:** Don't make decision until we have to. Designers should focus on the valuable product features using minimal design elements to express. As Antoine de St.Exupery said: "Perfection is not to be added, but rather that there is no excuse to be removed, and nothing is done".
+- **Keep restraint:** Don't make decision until we have to. Designers should focus on the valuable product features using minimal design elements to express. As Antoine de St.Exupery said: [“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”](https://www.goodreads.com/quotes/19905-perfection-is-achieved-not-when-there-is-nothing-more-to)
 - **Object-oriented:** Explore design rules and abstract them as "objects" to enhance the flexibility and maintainability of user interface design while reducing designer's subjective judgement and uncertainty of real world system. For example: color value conversion, spacing typesetting.
 - **Modular:** Encapsulate the complex or reusable parts could provide limited interfaces to interact with other modules, ultimately reducing overall system complexity, resulting in better reliability and maintainability. Designers can use existed resources or abstract their own reusable resources, save unnecessary and low additional design to keep their focus on where creativity most needed.
diff --git a/package.json b/package.json
index dc54b539c9de..afda6b30c467 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "3.18.1",
+  "version": "3.19.3",
   "title": "Ant Design",
   "description": "An enterprise-class UI design language and React components implementation",
   "homepage": "http://ant.design/",
@@ -42,157 +42,159 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
+    "@ant-design/create-react-context": "^0.2.4",
     "@ant-design/icons": "~2.0.0",
-    "@ant-design/icons-react": "~2.0.0",
-    "@types/react-slick": "^0.23.3",
+    "@ant-design/icons-react": "~2.0.1",
+    "@types/react-slick": "^0.23.4",
     "array-tree-filter": "^2.1.0",
     "babel-runtime": "6.x",
     "classnames": "~2.2.6",
-    "copy-to-clipboard": "^3.0.8",
-    "@ant-design/create-react-context": "^0.2.4",
+    "copy-to-clipboard": "^3.2.0",
     "css-animation": "^1.5.0",
     "dom-closest": "^0.2.0",
     "enquire.js": "^2.1.6",
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
-    "omit.js": "^1.0.0",
-    "prop-types": "^15.6.2",
-    "raf": "^3.4.0",
-    "rc-animate": "^2.5.4",
-    "rc-calendar": "~9.13.3",
-    "rc-cascader": "~0.17.0",
-    "rc-checkbox": "~2.1.5",
-    "rc-collapse": "~1.11.1",
+    "omit.js": "^1.0.2",
+    "prop-types": "^15.7.2",
+    "raf": "^3.4.1",
+    "rc-animate": "^2.8.3",
+    "rc-calendar": "~9.15.0",
+    "rc-cascader": "~0.17.4",
+    "rc-checkbox": "~2.1.6",
+    "rc-collapse": "~1.11.3",
     "rc-dialog": "~7.4.0",
-    "rc-drawer": "~1.8.0",
+    "rc-drawer": "~1.9.8",
     "rc-dropdown": "~2.4.1",
-    "rc-editor-mention": "^1.1.7",
-    "rc-form": "^2.4.0",
-    "rc-input-number": "~4.4.0",
-    "rc-menu": "~7.4.12",
-    "rc-notification": "~3.3.0",
-    "rc-pagination": "~1.18.0",
+    "rc-editor-mention": "^1.1.13",
+    "rc-form": "^2.4.5",
+    "rc-input-number": "~4.4.5",
+    "rc-mentions": "~0.3.1",
+    "rc-menu": "~7.4.23",
+    "rc-notification": "~3.3.1",
+    "rc-pagination": "~1.20.1",
     "rc-progress": "~2.3.0",
     "rc-rate": "~2.5.0",
-    "rc-select": "~9.1.0",
-    "rc-slider": "~8.6.5",
-    "rc-steps": "~3.3.0",
+    "rc-select": "~9.1.4",
+    "rc-slider": "~8.6.11",
+    "rc-steps": "~3.4.1",
     "rc-switch": "~1.9.0",
-    "rc-table": "~6.5.0",
-    "rc-tabs": "~9.6.0",
-    "rc-time-picker": "~3.6.1",
+    "rc-table": "~6.6.0",
+    "rc-tabs": "~9.6.4",
+    "rc-time-picker": "~3.6.6",
     "rc-tooltip": "~3.7.3",
     "rc-tree": "~2.1.0",
     "rc-tree-select": "~2.9.1",
     "rc-trigger": "^2.6.2",
-    "rc-upload": "~2.6.0",
-    "rc-util": "^4.5.1",
+    "rc-upload": "~2.6.7",
+    "rc-util": "^4.6.0",
     "react-lazy-load": "^3.0.13",
     "react-lifecycles-compat": "^3.0.4",
     "react-slick": "~0.24.0",
-    "resize-observer-polyfill": "^1.5.0",
+    "resize-observer-polyfill": "^1.5.1",
     "shallowequal": "^1.1.0",
-    "warning": "~4.0.2"
+    "warning": "~4.0.3"
   },
   "devDependencies": {
-    "@ant-design/colors": "^3.0.0",
-    "@sentry/browser": "^5.0.3",
-    "@types/classnames": "^2.2.6",
-    "@types/prop-types": "^15.5.6",
-    "@types/react": "~16.8.1",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-intl": "^2.3.14",
+    "@ant-design/colors": "^3.1.0",
+    "@packtracker/webpack-plugin": "^2.0.1",
+    "@sentry/browser": "^5.4.0",
+    "@types/classnames": "^2.2.8",
+    "@types/prop-types": "^15.7.1",
+    "@types/react": "~16.8.19",
+    "@types/react-dom": "^16.8.4",
+    "@types/react-intl": "^2.3.17",
     "@types/warning": "^3.0.0",
     "@yesmeck/offline-plugin": "^5.0.5",
-    "ansi-styles": "^3.2.1",
-    "antd-theme-generator": "^1.1.4",
+    "ansi-styles": "^4.0.0",
+    "antd-theme-generator": "^1.1.6",
     "antd-tools": "^7.3.5",
     "babel-eslint": "^10.0.1",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "bisheng": "^1.2.4",
-    "bisheng-plugin-antd": "^1.0.1",
+    "bisheng-plugin-antd": "^1.0.2",
     "bisheng-plugin-description": "^0.1.4",
     "bisheng-plugin-react": "^1.0.0",
     "bisheng-plugin-toc": "^0.4.4",
     "chalk": "^2.4.2",
-    "commander": "^2.18.0",
+    "commander": "^2.20.0",
     "cross-env": "^5.2.0",
     "css-split-webpack-plugin": "^0.2.6",
     "dekko": "^0.2.1",
-    "docsearch.js": "^2.5.2",
+    "docsearch.js": "^2.6.3",
     "enquire-js": "^0.2.1",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.6.0",
-    "enzyme-to-json": "^3.3.4",
-    "eslint": "^5.6.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
+    "enzyme-to-json": "^3.3.5",
+    "eslint": "^5.16.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.0.0",
-    "eslint-plugin-babel": "^5.2.1",
-    "eslint-plugin-import": "^2.17.1",
-    "eslint-plugin-jest": "^22.4.1",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-markdown": "~1.0.0-beta.6",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jest": "^22.6.4",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-markdown": "~1.0.0",
+    "eslint-plugin-react": "^7.13.0",
     "eslint-tinker": "^0.5.0",
     "fetch-jsonp": "^1.1.3",
-    "glob": "^7.1.3",
+    "glob": "^7.1.4",
     "immutability-helper": "^3.0.0",
     "intersection-observer": "^0.7.0",
-    "jest": "^24.0.0",
-    "jsdom": "^15.0.0",
+    "jest": "^24.8.0",
+    "jsdom": "^15.1.1",
     "jsonml.js": "^0.1.0",
-    "lint-staged": "^8.0.2",
-    "logrocket": "^0.6.19",
+    "lint-staged": "^8.1.7",
+    "logrocket": "^1.0.0",
     "logrocket-react": "^3.0.0",
     "lz-string": "^1.4.4",
-    "majo": "^0.7.1",
+    "majo": "^0.8.0",
     "mockdate": "^2.0.2",
-    "node-fetch": "^2.3.0",
+    "node-fetch": "^2.6.0",
     "pre-commit": "^1.2.2",
-    "preact": "^8.3.1",
-    "preact-compat": "^3.18.4",
-    "prettier": "^1.17.0",
+    "preact": "^8.4.2",
+    "preact-compat": "^3.18.5",
+    "prettier": "^1.17.1",
     "querystring": "^0.2.0",
-    "rc-queue-anim": "^1.6.6",
-    "rc-scroll-anim": "^2.5.7",
-    "rc-tween-one": "^2.4.0",
+    "rc-queue-anim": "^1.6.12",
+    "rc-scroll-anim": "^2.5.8",
+    "rc-tween-one": "^2.4.1",
     "react": "^16.5.2",
-    "react-color": "^2.14.1",
+    "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^7.0.2",
-    "react-dnd-html5-backend": "^7.0.2",
+    "react-dnd": "^7.4.5",
+    "react-dnd-html5-backend": "^7.4.4",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.5.2",
     "react-github-button": "^0.1.11",
     "react-highlight-words": "^0.16.0",
-    "react-infinite-scroller": "^1.2.1",
-    "react-intl": "^2.7.0",
+    "react-infinite-scroller": "^1.2.4",
+    "react-intl": "^2.9.0",
     "react-resizable": "^1.8.0",
-    "react-router-dom": "^5.0.0",
+    "react-router-dom": "^5.0.1",
     "react-sticky": "^6.0.3",
-    "react-test-renderer": "^16.6.3",
-    "react-virtualized": "~9.21.0",
+    "react-test-renderer": "^16.8.6",
+    "react-virtualized": "~9.21.1",
     "remark-cli": "^6.0.1",
-    "remark-frontmatter": "^1.3.0",
+    "remark-frontmatter": "^1.3.1",
     "remark-lint": "^6.0.4",
-    "remark-parse": "^6.0.0",
+    "remark-parse": "^6.0.3",
     "remark-preset-lint-recommended": "^3.0.2",
-    "remark-stringify": "^6.0.0",
-    "remark-yaml-config": "^4.0.2",
+    "remark-stringify": "^6.0.4",
+    "remark-yaml-config": "^4.0.3",
     "reqwest": "^2.0.5",
-    "rimraf": "^2.6.2",
+    "rimraf": "^2.6.3",
     "scrollama": "^2.0.0",
-    "simple-git": "^1.110.0",
-    "stylelint": "^10.0.0",
-    "stylelint-config-prettier": "^5.0.0",
-    "stylelint-config-rational-order": "^0.1.0",
-    "stylelint-config-standard": "^18.2.0",
-    "stylelint-declaration-block-no-ignored-properties": "^2.0.0",
+    "simple-git": "^1.113.0",
+    "stylelint": "^10.0.1",
+    "stylelint-config-prettier": "^5.2.0",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^18.3.0",
+    "stylelint-declaration-block-no-ignored-properties": "^2.1.0",
     "stylelint-order": "^3.0.0",
-    "typescript": "~3.4.1",
-    "unified": "^7.0.0",
+    "typescript": "~3.5.1",
+    "unified": "^7.1.0",
     "xhr-mock": "^2.4.1",
-    "xhr2": "^0.1.4"
+    "xhr2": "^0.2.0"
   },
   "scripts": {
     "test": "jest --config .jest.js --no-cache",
@@ -245,5 +247,11 @@
     "es/**/style/*",
     "lib/**/style/*",
     "*.less"
+  ],
+  "browserslist": [
+    "last 2 version",
+    "Firefox ESR",
+    "> 1%",
+    "ie >= 9"
   ]
 }
diff --git a/renovate.json b/renovate.json
new file mode 100644
index 000000000000..5fcce1121342
--- /dev/null
+++ b/renovate.json
@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "config:base",
+    ":preserveSemverRanges"
+  ]
+}
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
index 7f4768094361..b05e034aad13 100644
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@@ -54,6 +54,7 @@ module.exports = {
       'Data Display': 4,
       Feedback: 5,
       Other: 6,
+      Deprecated: 7,
       通用: 0,
       布局: 1,
       导航: 2,
@@ -61,6 +62,7 @@ module.exports = {
       数据展示: 4,
       反馈: 5,
       其他: 6,
+      废弃: 7,
     },
     docVersions: {
       '0.9.x': 'http://09x.ant.design',
diff --git a/site/theme/en-US.js b/site/theme/en-US.js
index e6290419971b..201841bac6a8 100644
--- a/site/theme/en-US.js
+++ b/site/theme/en-US.js
@@ -12,7 +12,7 @@ module.exports = {
     'app.header.menu.spec': 'Guidelines',
     'app.header.menu.resource': 'Resources',
     'app.header.menu.mobile': 'Mobile',
-    'app.header.menu.pro': 'Ant Design Pro',
+    'app.header.menu.pro.v4': 'Ant Design Pro v4',
     'app.header.menu.ecosystem': 'Ecosystem',
     'app.header.lang': '中文',
     'app.content.edit-page': 'Edit this page on GitHub!',
diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less
index 5092d277a5e2..ed49ef636e99 100644
--- a/site/theme/static/toc.less
+++ b/site/theme/static/toc.less
@@ -51,7 +51,8 @@ ul.toc > li {
   .ant-affix {
     z-index: 9;
     max-height: ~'calc(100vh - 16px)';
-    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
     background: #fff;
   }
 }
diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
index 099fca2e3a3b..80a9a2677548 100644
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@@ -29,11 +29,17 @@ export default class ComponentDoc extends React.Component {
     });
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps, nextState) {
     const { location } = this.props;
     const { location: nextLocation } = nextProps;
+    const { expandAll, showRiddleButton } = this.state;
+    const { expandAll: nextExpandAll, showRiddleButton: nextShowRiddleButton } = nextState;
 
-    if (nextLocation.pathname === location.pathname) {
+    if (
+      nextLocation.pathname === location.pathname &&
+      expandAll === nextExpandAll &&
+      showRiddleButton === nextShowRiddleButton
+    ) {
       return false;
     }
     return true;
diff --git a/site/theme/template/IconDisplay/fields.ts b/site/theme/template/IconDisplay/fields.ts
index f0c18fafd4cd..9a2391efdd25 100644
--- a/site/theme/template/IconDisplay/fields.ts
+++ b/site/theme/template/IconDisplay/fields.ts
@@ -5,6 +5,9 @@ Object.keys(manifest).forEach(theme => {
   allIcons = [...allIcons, ...(manifest as any)[theme]];
 });
 
+// Hide typo-name icons
+allIcons = allIcons.filter((name: string) => !['interation', 'canlendar'].includes(name));
+
 export const categories = {
   all: [...new Set(allIcons)],
   direction: [
diff --git a/site/theme/template/IconDisplay/index.tsx b/site/theme/template/IconDisplay/index.tsx
index 746ed1674b0b..66673c796bb1 100644
--- a/site/theme/template/IconDisplay/index.tsx
+++ b/site/theme/template/IconDisplay/index.tsx
@@ -99,7 +99,7 @@ class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
     return (
       <>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Radio.Group value={this.state.theme} onChange={this.handleChangeTheme} size="large">
+          <Radio.Group value={this.state.theme} onChange={this.handleChangeTheme} size="large" buttonStyle="solid">
             <Radio.Button value="outlined">
               <Icon component={OutlinedIcon} /> {messages['app.docs.components.icon.outlined']}
             </Radio.Button>
diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx
index 55eeea37be11..957e19725767 100644
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'bisheng/router';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { Select, Menu, Row, Col, Icon, Popover, Input, Button } from 'antd';
+import { Select, Menu, Row, Col, Icon, Popover, Input, Button, Badge } from 'antd';
 import Santa from './Santa';
 import * as utils from '../utils';
 import { version as antdVersion } from '../../../../package.json';
@@ -179,7 +179,11 @@ export default class Header extends React.Component {
         <Menu.SubMenu
           key="ecosystem"
           className="hide-in-home-page"
-          title={<FormattedMessage id="app.header.menu.ecosystem" />}
+          title={
+            <Badge dot>
+              <FormattedMessage id="app.header.menu.ecosystem" />
+            </Badge>
+          }
         >
           <Menu.Item key="pro">
             <a
@@ -188,7 +192,9 @@ export default class Header extends React.Component {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <FormattedMessage id="app.header.menu.pro" />
+              <Badge dot>
+                <FormattedMessage id="app.header.menu.pro.v4" />
+              </Badge>
             </a>
           </Menu.Item>
           <Menu.Item key="ng">
diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
index 40ff1bba6469..8d4e84fcb69b 100644
--- a/site/theme/zh-CN.js
+++ b/site/theme/zh-CN.js
@@ -12,7 +12,7 @@ module.exports = {
     'app.header.menu.spec': '设计语言',
     'app.header.menu.resource': '资源',
     'app.header.menu.mobile': '移动版',
-    'app.header.menu.pro': 'Ant Design Pro',
+    'app.header.menu.pro.v4': 'Ant Design Pro v4',
     'app.header.menu.ecosystem': '生态',
     'app.header.lang': 'English',
     'app.content.edit-page': '在 GitHub 上编辑此页！',
diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap
index f77ab7f9e8bd..f3ea00c0294a 100644
--- a/tests/__snapshots__/index.test.js.snap
+++ b/tests/__snapshots__/index.test.js.snap
@@ -21,6 +21,7 @@ Array [
   "Comment",
   "ConfigProvider",
   "DatePicker",
+  "Descriptions",
   "Divider",
   "Dropdown",
   "Drawer",
@@ -34,6 +35,7 @@ Array [
   "LocaleProvider",
   "message",
   "Menu",
+  "Mentions",
   "Modal",
   "Statistic",
   "notification",
diff --git a/webpack.config.js b/webpack.config.js
index 08d3c36c2d57..9bd7822a4f9c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
 /* eslint no-param-reassign: 0 */
 // This config is for building dist files
 const getWebpackConfig = require('antd-tools/lib/getWebpackConfig');
+const PacktrackerPlugin = require('@packtracker/webpack-plugin');
 
 const { webpack } = getWebpackConfig;
 
@@ -35,6 +36,15 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
     ignoreMomentLocale(config);
     externalMoment(config);
     addLocales(config);
+    // https://docs.packtracker.io/uploading-your-webpack-stats/webpack-plugin
+    config.plugins.push(
+      new PacktrackerPlugin({
+        project_token: '8adbb892-ee4a-4d6f-93bb-a03219fb6778',
+        upload: process.env.CI === 'true',
+        fail_build: true,
+        exclude_assets: name => !['antd.min.js', 'antd.min.css'].includes(name),
+      }),
+    );
   });
 }