Merge branch 'master' of github.com:ant-design/ant-design

Fix stylelint errors
prettier md files
2026-02-16 14:22:28 +08:00 · 2019-05-20 12:44:47 +08:00 · 2019-05-20 12:21:47 +08:00 · 2019-05-20 11:46:00 +08:00 · 2019-05-20 11:43:17 +08:00 · 2019-05-20 11:25:13 +08:00
891 changed files with 24610 additions and 13281 deletions
--- a/.antd-tools.config.js
+++ b/.antd-tools.config.js
@@ -34,7 +34,7 @@ function finalizeCompile() {
    let componentsLessContent = '';
    // Build components in one file: lib/style/components.less
    fs.readdir(componentsPath, (err, files) => {
-      files.forEach((file) => {
+      files.forEach(file => {
        if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
          componentsLessContent += `@import "../${path.join(file, 'style', 'index.less')}";\n`;
        }
--- a/.depslintrc.js
+++ b/.depslintrc.js
@@ -11,8 +11,8 @@ module.exports = {
  ],
  modulePattern: [
    {
-      pattern: /ConfigConsumer.*renderEmpty/sm,
+      pattern: /ConfigConsumer.*renderEmpty/ms,
      module: '../empty',
    },
  ],
-};
+};
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,9 +1,5 @@
 const eslintrc = {
-  extends: [
-    'airbnb',
-    'prettier',
-    'plugin:jest/recommended',
-  ],
+  extends: ['airbnb', 'prettier', 'plugin:jest/recommended'],
  env: {
    browser: true,
    node: true,
@@ -12,12 +8,7 @@ const eslintrc = {
    es6: true,
  },
  parser: 'babel-eslint',
-  plugins: [
-    'markdown',
-    'react',
-    'babel',
-    'jest',
-  ],
+  plugins: ['markdown', 'react', 'babel', 'jest'],
  rules: {
    'react/jsx-one-expression-per-line': 0,
    'react/prop-types': 0,
--- a/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md
+++ b/.github/ISSUE_TEMPLATE/----please-use-new-issue-ant-design---.md
@@ -1,9 +1,7 @@
 ---
-name: "⚠️  Please use new-issue.ant.design ⚠️"
-about: The issue which is not created via http://new-issue.ant.design will be closed
-  immediately.
-labels: 
-
+name: '⚠️  Please use new-issue.ant.design ⚠️'
+about: The issue which is not created via http://new-issue.ant.design will be closed immediately.
+labels:
 ---

 The issue which is not created via http://new-issue.ant.design will be closed immediately.
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -7,6 +7,7 @@ Please makes sure that these form are filled before submitting your pull request

 [[中文版模板 / Chinese template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE/pr_cn.md)]
 -->
+
 ### 🤔 This is a ...

 - [ ] New feature
@@ -16,6 +17,7 @@ Please makes sure that these form are filled before submitting your pull request
 - [ ] TypeScript definition update
 - [ ] Refactoring
 - [ ] Code style optimization
+- [ ] Test Case
 - [ ] Branch merge
 - [ ] Other (about what?)

@@ -41,8 +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.
 --->

- English Changelog:
- Chinese Changelog (optional):
+| Language   | Changelog |
+| ---------- | --------- |
+| 🇺🇸 English |           |
+| 🇨🇳 Chinese |           |

 ### ☑️ Self Check before Merge

--- a/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
+++ b/.github/PULL_REQUEST_TEMPLATE/pr_cn.md
@@ -7,6 +7,7 @@

 [[English Template / 英文模板](?expand=1)]
 -->
+
 ### 🤔 这个变动的性质是？

 - [ ] 新特性提交
@@ -16,6 +17,7 @@
 - [ ] TypeScript 定义更新
 - [ ] 重构
 - [ ] 代码风格优化
+- [ ] 测试用例
 - [ ] 分支合并
 - [ ] 其他改动（是关于什么的改动？）

@@ -41,7 +43,10 @@
 > 从用户角度描述具体变化，以及可能的 breaking change 和其他风险？
 -->

- 英文：
+| 语言    | 更新描述 |
+| ------- | -------- |
+| 🇺🇸 英文 |          |
+| 🇨🇳 中文 |          |

 - 中文（可选）:

--- a/.prettierignore
+++ b/.prettierignore
@@ -1,7 +1,27 @@
-**/*.md
 **/*.svg
-**/*.ejs
-**/*.html
 package.json
 .umi
-.umi-production
+.umi-production
+AUTHORS.txt
+lib/
+es/
+dist/
+_site/
+coverage/
+CNAME
+LICENSE
+yarn.lock
+netlify.toml
+yarn-error.log
+*.sh
+*.snap
+components/*/*.js
+components/*/*.jsx
+.gitignore
+.npmignore
+.prettierignore
+.DS_Store
+.editorconfig
+.eslintignore
+**/*.yml
+components/style/color/*.less
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,6 +2,7 @@
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
+  "proseWrap": "never",
  "overrides": [
    {
      "files": ".prettierrc",
--- a/.remarkrc.js
+++ b/.remarkrc.js
@@ -1,8 +1,5 @@
 const config = {
-  plugins: [
-    'remark-preset-lint-recommended',
-    ['remark-lint-list-item-indent', 'space'],
-  ],
+  plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', 'space']],
 };

 module.exports = config;
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -7,11 +7,10 @@
  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
  "rules": {
    "comment-empty-line-before": null,
-    "declaration-empty-line-before": null,
    "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],
    "no-invalid-double-slash-comments": null,
    "no-descending-specificity": null,
-    "plugin/declaration-block-no-ignored-properties": true
+    "declaration-empty-line-before": null
  },
  "ignoreFiles": ["components/style/color/{bezierEasing,colorPalette,tinyColor}.less"]
 }
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -9,18 +9,133 @@ timeline: true

 #### Release Schedule

-* Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
-* Monthly release: minor version at the end of every month for new features.
-* Major version release is not included in this schedule for breaking change and new features.
+- Weekly release: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
+- Monthly release: minor version at the end of every month for new features.
+- Major version release is not included in this schedule for breaking change and new features.

 ---

+## 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`
+
+- 🐞 Remove useless `module.export` of package. [#antd-tools](https://github.com/ant-design/antd-tools/commit/b9e230c91551af5b4555f672130b14304ff58357)
+
+## 3.18.0
+
+`2019-05-12`
+
+- 🌟 Transfer support `children` prop to customize render list. [#16026](https://github.com/ant-design/ant-design/pull/16026)
+- 🌟 Pagination support `disabled` prop. [#16493](https://github.com/ant-design/ant-design/pull/16493)
+- 🌟 Upgrade `@ant-design/icons` and `@ant-design/icons-react` to 2.0 for fix lots of missing icons. [#15874](https://github.com/ant-design/ant-design/pull/15874)
+- 🐞 Fix Form `hasFeedback` overlap issue with Input.Password. [#16445](https://github.com/ant-design/ant-design/pull/16445)
+- 🐞 Fix Select selected and disabled item wrong hover color. [#16477](https://github.com/ant-design/ant-design/pull/16477)
+- 🐞 Fix disabled Upload being triggered by label. [#16483](https://github.com/ant-design/ant-design/pull/16483)
+- 🐞 Fix `hoist-non-react-statics` compilation error. [#16397](https://github.com/ant-design/ant-design/pull/16397) [@ztplz](https://github.com/ztplz)
+- 🐞 Fix customize icon style in Notification size not correct. [#16507](https://github.com/ant-design/ant-design/pull/16507)
+- 🐞 Fix PageHeader should not render blank dom when `title` is undefined. [#16510](https://github.com/ant-design/ant-design/pull/16510) [@yociduo](https://github.com/yociduo)
+- ⚡️ Print reject error when Modal's `onOk` callback return an promise rejects. [#16437](https://github.com/ant-design/ant-design/pull/16437) [@jas0ncn](https://github.com/jas0ncn)
+- TypeScript
+  - ⚡️ Improve Table column.filterDropdown type. [#16446](https://github.com/ant-design/ant-design/pull/16446)
+  - ⚡️ Add Select missing type definition `maxTagTextLength`. [#16504](https://github.com/ant-design/ant-design/pull/16504) [@SylvanasGone](https://github.com/SylvanasGone)
+  - ⚡️ Improve return type of `getFieldError` in Form. [#16524](https://github.com/ant-design/ant-design/pull/16524) [@vicrep](https://github.com/vicrep)
+  - 🐞 Fix List missing style prop definition. [#16485](https://github.com/ant-design/ant-design/pull/16485)
+
+## 3.17.0
+
+`2019-05-05`
+
+- 🎉 Breadcrumb.Item supports `overlay` props to define drop-down menus. [#16315](https://github.com/ant-design/ant-design/pull/16315)
+- 🎉 Button added a new type `link`. [#16289](https://github.com/ant-design/ant-design/pull/16289)
+- ⌨️ Wrap List.Item under `ul` to enhance accessibility.[#15890](https://github.com/ant-design/ant-design/pull/15890)
+- 🌟 TreeSelect support `showSearch` in multiple mode. [#15933](https://github.com/ant-design/ant-design/pull/15933)
+- 🌟 Provides `previewFile` to customize preview logic. [#15984](https://github.com/ant-design/ant-design/pull/15984)
+- 🌟 Added the `@table-selected-row-color` variable to customize the color selected by the table. [#15971](https://github.com/ant-design/ant-design/pull/15971) [@hextion](https://github.com/hextion)
+- 🌟 Added `@form-warning-input-bg` and `@form-error-input-bg` variables to customize the background color when the form is in error state. [#15954](https://github.com/ant-design/ant-design/pull/15954) [@hextion](https://github.com/hextion)
+- 🌟 Dropdown.Button supports `icon` props to customize icons. [#15996](https://github.com/ant-design/ant-design/pull/15996) [@DiamondYuan](https://github.com/DiamondYuan)
+- 🌟 Support SkeletonAvatarProps `size` accept number. [#16128](https://github.com/ant-design/ant-design/pull/16128) [@MrHeer](https://github.com/MrHeer)
+- 🌟 Notification.config now supports `getContainer` for custom dom rendering locations. [#16123](https://github.com/ant-design/ant-design/pull/16123) [@Nouzbe](https://github.com/Nouzbe)
+- 🌟 Drawer supports `afterVisibleChange` props, which fires when the drawer animation is complete. [#16228](https://github.com/ant-design/ant-design/pull/16228)
+- 🌟 Form.Item supports `htmlFor` props. [#16278](https://github.com/ant-design/ant-design/pull/16278)
+- 🌟 Collapse supports `expandIconPosition` props. [#16365](https://github.com/ant-design/ant-design/pull/16365)
+- 🌟 Carousel supports the location of custom panel indicator points. [#16225](https://github.com/ant-design/ant-design/pull/16225) [@yociduo](https://github.com/yociduo)
+- 🌟 TreeNode supports the properties of `checkable`. [#16369](https://github.com/ant-design/ant-design/pull/16369)
+- 🌟 🇭🇷 Added Croatian language pack. [#15641](https://github.com/ant-design/ant-design/pull/15641) [@fpintaric](https://github.com/fpintaric)
+- 🐞 Fix Drawer wrong animation direction. [#16358](https://github.com/ant-design/ant-design/pull/16358)
+- 🐞 Fix Slider mark text style will break line. [#15128](https://github.com/ant-design/ant-design/pull/15128)
+- 🐞 Fix Checkbox.Group `onChange` pass removed value. [#16392](https://github.com/ant-design/ant-design/pull/16392)
+- 🐞 Fixed multiple Typescript type errors. [#16043](https://github.com/ant-design/ant-design/pull/16043) [#16341](https://github.com/ant-design/ant-design/pull/16341) [#16343](https://github.com/ant-design/ant-design/pull/16343) [#16360](https://github.com/ant-design/ant-design/pull/16360) [#16344](https://github.com/ant-design/ant-design/pull/16344)
+
+## 3.16.6
+
+`2019-04-26`
+
+- ⌨️ Improve PageHeader `backIcon` keyboard accessibility. [#16038](https://github.com/ant-design/ant-design/issues/16038)
+- 🇮🇹 Optimize Italian localization. [#16093](https://github.com/ant-design/ant-design/pull/16093) [@yp](https://github.com/yp) [#16172](https://github.com/ant-design/ant-design/pull/16172) [@afelicioni](https://github.com/afelicioni)
+- 🐞 Fix Select with `showSearch` not trigger `onSearch` when blur it. [#16235](https://github.com/ant-design/ant-design/pull/16235)
+- 🐞 Fix Select active item's hover background color. [#16238](https://github.com/ant-design/ant-design/pull/16238) [@yociduo](https://github.com/yociduo)
+- 🐞 Fix unexpected pressed style of disabled Switch. [#16251](https://github.com/ant-design/ant-design/pull/16251) [@atomoo](https://github.com/atomoo)
+- 🐞 Fix small size Table header background. [#16266](https://github.com/ant-design/ant-design/pull/16266)
+- 🐞 Fix Tabs missing border when `tabPosition="bottom"`. [#16130](https://github.com/ant-design/ant-design/pull/16130) [@rinick](https://github.com/rinick)
+- 🐞 Fix Typography.Title not support `type`. [#16275](https://github.com/ant-design/ant-design/pull/16275)
+- 🐞 Fix Typography editable mode not support `className`. [#16307](https://github.com/ant-design/ant-design/pull/16307)
+- 🐞 Fix List `actions` misplaced. [#16239](https://github.com/ant-design/ant-design/pull/16239)
+- 🐞 Fix long word Modal title display problem. [#16267](https://github.com/ant-design/ant-design/pull/16267) [@yoyo837](https://github.com/yoyo837)
+- 🐞 Fix Pagination active item background color. [#16306](https://github.com/ant-design/ant-design/pull/16306)
+- 🐞 Fix a `core-js@<2.6.5 is no longer maintained` install warning. [#16325](https://github.com/ant-design/ant-design/issues/16325)
+- Typescript
+  - 🐞 Fix `Form.create()` don't work. [#16242](https://github.com/ant-design/ant-design/pull/16242)
+  - 🐞 Fix Tooltip `className` definition. [#16195](https://github.com/ant-design/ant-design/pull/16195) [@swillis12](https://github.com/swillis12)
+
+## 3.16.5
+
+`2019-04-22`
+
+- 🐞 Fix Table in Firefox miss bottom line when sorter enabled. [#16174](https://github.com/ant-design/ant-design/pull/16174)
+- 🐞 Fix List crash when `pagination` is `null`. [#16231](https://github.com/ant-design/ant-design/pull/16231)
+- TypeScript
+  - 🐞 Fix typescript `hoist-non-react-statics` has no default export warning with `allowSyntheticDefaultImports: false`. [#16224](https://github.com/ant-design/ant-design/pull/16224)
+
+## 3.16.4
+
+`2019-04-21`
+
+- 🐞 Fix circle button responding mouse event when loading. [#16063](https://github.com/ant-design/ant-design/pull/16063) [@gxvv](https://github.com/gxvv)
+- 🐞 Fix issue that Form.Item's `labelAlign` does not work. [#16067](https://github.com/ant-design/ant-design/issues/16067)
+- 🐞 Fix issue that tailing debounce call raising error when Spin unmount. [#16081](https://github.com/ant-design/ant-design/pull/16081) [@raybooysen](https://github.com/raybooysen)
+- 🐞 Fix issue that List's `defaultPageSize` does not work. [#16100](https://github.com/ant-design/ant-design/issues/16100)
+- 🐞 Fix error moment call in DatePicker. [#16109](https://github.com/ant-design/ant-design/issues/16109)
+- 🐞 Fix Radio does not in center on Firefox. [#16039](https://github.com/ant-design/ant-design/issues/16039)
+- 🐞 Fix issue that Affix's `target` does not work after it's value changing. [#16146](https://github.com/ant-design/ant-design/pull/16146)
+- 🐞 Fix the Modal's animation issue Modal on first rendering. [#15795](https://github.com/ant-design/ant-design/issues/15795)
+- 🐞 Fix issue that Table's `rowSelection.columnWidth` does not work. [#16163](https://github.com/ant-design/ant-design/issues/16163)
+- 🐞 Fix type definition of Form.create. [#16095](https://github.com/ant-design/ant-design/issues/16095)
+- 🐞 Fix type definition of Icon's `aria-hidden`. [#16202](https://github.com/ant-design/ant-design/pull/16202)
+- 🐞 Fix type definition of PageHeader's `tags`. [#16092](https://github.com/ant-design/ant-design/issues/16092)
+- 🌟 Add new less variable `@text-selection-bg;`. [#16155](https://github.com/ant-design/ant-design/pull/16155)
+
 ## 3.16.3

 `2019-04-12`

-
- 🐞 **Fix Button typescripts definition with latest `@types/react`.** [#15938](https://github.com/ant-design/ant-design/pull/15938)
+- 🐞 **Fix Button TypeScript definition.** [#15938](https://github.com/ant-design/ant-design/pull/15938)
 - ⚠️ Add DatePicker warning when time invalidate. [#15920](https://github.com/ant-design/ant-design/pull/15920)
 - 🐞 Fix Menu arrow not display in old version of IE. [#15932](https://github.com/ant-design/ant-design/pull/15932)
 - 🐞 Fix Progress success UI when `status` is `undefined`. [#15951](https://github.com/ant-design/ant-design/pull/15951)
@@ -32,7 +147,7 @@ timeline: true
 - 🐞 Fix nest Tabs ink bar style issue. [#16013](https://github.com/ant-design/ant-design/pull/16013)
 - 🐞 Fix Empty in IE not fully render. [#16016](https://github.com/ant-design/ant-design/pull/16016)
 - 🐞 Fix Switcher loading icon and checkbox should be vertical align when `@tree-title-height` is modified. [#15962](https://github.com/ant-design/ant-design/pull/15962)
- 💄 Default selection column width can be overrided in css. [#15990](https://github.com/ant-design/ant-design/pull/15990)
+- 💄 Default selection column width can be overridden in css. [#15990](https://github.com/ant-design/ant-design/pull/15990)
 - TypeScript
  - 🐞 Fix Pagination `showLessItems` TS definition. [#15952](https://github.com/ant-design/ant-design/pull/15952)

@@ -139,10 +254,10 @@ timeline: true
 - 🐞 Correct suffix icon in Input.Password. [#15381](https://github.com/ant-design/ant-design/pull/15381) [@melchior-voidwolf](https://github.com/melchior-voidwolf)
 - 🐞 Fix Layout has classname `ant-layout-has-sider` even if `hasFixer` is set to `false`. [#15396](https://github.com/ant-design/ant-design/pull/15396) [@SoraYama](https://github.com/SoraYama)
 - 🐞 Fix Divider alignment issue in PageHeader. [#15400](https://github.com/ant-design/ant-design/pull/15400)
- 🐞 Fix a style issue of Skeleton. [#15421](https://github.com/ant-design/ant-design/pull/15421)  [@Maktel](https://github.com/Maktel)
+- 🐞 Fix a style issue of Skeleton. [#15421](https://github.com/ant-design/ant-design/pull/15421) [@Maktel](https://github.com/Maktel)
 - 🌟 Adjust multiple TypeScript types
  - 🌟 FormComponentProps added a generic type of form values. [#15355](https://github.com/ant-design/ant-design/pull/15355)
-  - 🌟 Export ConfigProviderProps interface. [#15446](https://github.com/ant-design/ant-design/pull/15446)  [@DiamondYuan](https://github.com/DiamondYuan)
+  - 🌟 Export ConfigProviderProps interface. [#15446](https://github.com/ant-design/ant-design/pull/15446) [@DiamondYuan](https://github.com/DiamondYuan)
  - 🐞 Add `onClick` prop for Breadcrumb.Item. [#15331](https://github.com/ant-design/ant-design/pull/15331) [@tgxpuisb](https://github.com/tgxpuisb)
  - 🐞 Add `style` prop for Steps.Step component. [#15393](https://github.com/ant-design/ant-design/pull/15393) [@pavolgolias](https://github.com/pavolgolias)
  - 🐞 Fix `itemRender` definition of Pagination. [#15428](https://github.com/ant-design/ant-design/pull/15428) [@DiamondYuan](https://github.com/DiamondYuan)
@@ -537,7 +652,7 @@ timeline: true
 - 🐞 Fixed Table `Cannot read property 'children' of undefined` error when customize `column.title` as ReactNode. [#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806)
 - 🐞 Fixed another border problem of Button when customized less variable `@border-width-base`. [#13534](https://github.com/ant-design/ant-design/issues/13534) [@morenyang](https://github.com/morenyang)
 - 🐞 Fixed Upload don't support resolve `Blob` object when `beforeUpload` returns a Promise. [#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz)
-   https://github.com/ant-design/ant-design/pull/13536
+- https://github.com/ant-design/ant-design/pull/13536
 - 🐞 Fixed two props of Dropdown TypeScript definitions. [#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang)

 ## 3.11.1
@@ -786,7 +901,6 @@ Component Fixes / Enhancements:
 - 🐞 Fix the issue with mouse hover when using non-Input components in Input.Group. [#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx)
 - 🐞 Fix some TypeScript type definitions. [#12374](https://github.com/ant-design/ant-design/pull/12374) [#12370](https://github.com/ant-design/ant-design/pull/12370) [#12354](https://github.com/ant-design/ant-design/pull/12354/files) [#12473](https://github.com/ant-design/ant-design/pull/12473)

-
 ## 3.9.3

 `2018-09-22`
@@ -852,8 +966,7 @@ Component Fixes / Enhancements:

 In September we brought an update for `3.9.0`. There are many new features in `3.9.0`, Ant Design is getting stronger and solider.

- 🔥🔥🔥 In the `3.9.0` version, we redraw all the icons, adding two new categories, more than 90 new icons. And the bit adds a variety of styles to each icon. To this end, we have rewritten the Icon component, replaced the `fontface` icon with `SVG`, adding a number of features that allow us to quickly use new icons and styles.
-  ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
+- 🔥🔥🔥 In the `3.9.0` version, we redraw all the icons, adding two new categories, more than 90 new icons. And the bit adds a variety of styles to each icon. To this end, we have rewritten the Icon component, replaced the `fontface` icon with `SVG`, adding a number of features that allow us to quickly use new icons and styles. ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
  - 💄 Replace the `css` font icon with the `SVG` icon, [see more discussion about it](https://github.com/ant-design/ant-design/issues/10353).
  - 💄 You can now render a two-color icon.
  - 💄 We provide three theme of icons: outlined, filled, twoTone, default theme is outlined.
@@ -927,7 +1040,6 @@ In addition, our **Ant Design Pro 2.0.0** version has also been released simulta
  - 🐞 Fixed `selectable` prop is missing in TreeNode props. [#11604](https://github.com/ant-design/ant-design/issues/11604) [@apieceofbart](https://github.com/apieceofbart)
  - 🐞 Fixed `autosize` prop is missing in Input props. [#11697](https://github.com/ant-design/ant-design/issues/11697)

-
 ## 3.8.1

 `2018-08-12`
@@ -1032,8 +1144,7 @@ Thanks to 24 contributors who send pull request to 3.8.0!

 ## 3.7.0

-3.7.0 is a heavy update that brings a lot of exciting changes and new features.
-Here are some highlights ✨:
+3.7.0 is a heavy update that brings a lot of exciting changes and new features. Here are some highlights ✨:

 - 🌟 Add drawer component : [Drawer](https://ant.design/components/drawer-cn/). [#10791](https://github.com/ant-design/ant-design/pull/10791)
 - 🌟 Add `Tree.DirectoryTree` component as the built-in directory tree. [#7749](https://github.com/ant-design/ant-design/issues/7749)
@@ -1056,7 +1167,7 @@ Component Fixes / Enhancements:
 - Upgrade `rc-table` to `6.2.2` for Table. [f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0)
  - 🌟 Add `expanded` as the fourth param of `expandedRowRender` prop to get the expanded state of current row. [#10379](https://github.com/ant-design/ant-design/issues/10379)
  - 🌟 Add the ability to override the filter menu without the fully controlled component. [59cc3a8](https://github.com/ant-design/ant-design/commit/59cc3a8b6c643f7206feedf2dc2c7154296ba3e3) [@chrvadala](https://github.com/chrvadala)
-  - 🌟 `filterIcon` prop  supports to be a render function which returns ReactNode. [1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a)
+  - 🌟 `filterIcon` prop supports to be a render function which returns ReactNode. [1af4392](https://github.com/ant-design/ant-design/commit/1af4392ae9fbdaa6fcfbf2f0de5413100ef4a84a)
  - 🐞 Fix the row dislocation problem when the column is fixed. [#10392](https://github.com/ant-design/ant-design/issues/10392)
 - 🌟 Allow to pass `data-*`, `aria-*` and `role-*` props to the inner for Alert. [f0b684d](https://github.com/ant-design/ant-design/commit/f0b684de6a7c422f0de56e1ef72aeb35ab25a858)
 - 🌟 Add `alt` prop for Avatar to set the text when the image is unable to display. [#10798](https://github.com/ant-design/ant-design/pull/10798)
@@ -1077,7 +1188,6 @@ Component Fixes / Enhancements:
 - 🐞 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

 `2018-07-07`
@@ -1150,15 +1260,15 @@ Component Fixes / Enhancements:

 `2018-06-02`

-* 🌟 `Form`'s error message now can be customized with ReactNode. [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
-* 🌟 `List` support customized configuration for position of pagination. [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
-* 🌟 `Layout.Sider` now can be configured with `light` or `dark` theme. [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
-* 🌟 Ant Design official site now supports offline mode. [#10625](https://github.com/ant-design/ant-design/issues/10625)
-* 🌟 `Transfer` adding `style` and `operationStyle` props for further customization. [@eduludi](https://github.com/eduludi)
-* 🌟 `Message` adds a promisfied interface to handle callback. [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
-* 🐞 Fix compilation issue with typescript@v2.9.1 . [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
-* 🐞 Fix a bug in `Menu` where outer menu item not highlighting while inner item is selected. [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
-* 🐞 Affix `offsetBottom` not working. [#10674](https://github.com/ant-design/ant-design/issues/10674)
+- 🌟 `Form`'s error message now can be customized with ReactNode. [#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
+- 🌟 `List` support customized configuration for position of pagination. [#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
+- 🌟 `Layout.Sider` now can be configured with `light` or `dark` theme. [#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
+- 🌟 Ant Design official site now supports offline mode. [#10625](https://github.com/ant-design/ant-design/issues/10625)
+- 🌟 `Transfer` adding `style` and `operationStyle` props for further customization. [@eduludi](https://github.com/eduludi)
+- 🌟 `Message` adds a promised interface to handle callback. [#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
+- 🐞 Fix compilation issue with typescript@v2.9.1 . [#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
+- 🐞 Fix a bug in `Menu` where outer menu item not highlighting while inner item is selected. [#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
+- 🐞 Affix `offsetBottom` not working. [#10674](https://github.com/ant-design/ant-design/issues/10674)

 ## 3.5.4

@@ -1227,13 +1337,13 @@ Component Fixes / Enhancements:
  - 🐞 Fix merged header cell border. [#10359](https://github.com/ant-design/ant-design/issues/10359)
  - 🐞 Fix lost of user selection on data updates. [#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala)
 - Menu upgrade `rc-menu` to `7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305)
-  - 🌟 Better aria-* attributes support. [react-component/menu#137](https://github.com/react-component/menu/pull/137)
+  - 🌟 Better aria-\* attributes support. [react-component/menu#137](https://github.com/react-component/menu/pull/137)
  - 🌟 Improve Menu performance by avoiding unnecessary updates. [react-component/menu#133](https://github.com/react-component/menu/pull/133)
  - 🌟 Support passing props through to MenuItem list item. [react-component/menu#135](https://github.com/react-component/menu/pull/135)
  - 🐞 Minor key shortcut bug fixes. [react-component/menu#132](https://github.com/react-component/menu/pull/132)
 - Collapse
  - 🌟 Support custom `Collapse` styles with less. [#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten)
-  - 🌟 Update `rc-collapse` to 1.9.0 to add `Collapse` keyboard support. [react-component/collapse#84](https://github.com/react-component/collapse/pull/84/)  [@kossel](https://github.com/kossel)
+  - 🌟 Update `rc-collapse` to 1.9.0 to add `Collapse` keyboard support. [react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
 - Select
  - 🐞 Fix type for `placeholder`. [#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
  - 🐞 Fix extra space taken up when arrow disabled. [#10296](https://github.com/ant-design/ant-design/pull/10296)
@@ -1269,7 +1379,7 @@ Component Fixes / Enhancements:
 `2018-04-23`

 - 🐞 Fix style lose bug when use tree shaking in webpack@4. [#10197](https://github.com/ant-design/ant-design/pull/10197) [@Aladdin-ADD](https://github.com/Aladdin-ADD)
- 🐞 Fix `Menu` item's clickable region in dark theme. [#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi ](https://github.com/dgeibi )
+- 🐞 Fix `Menu` item's clickable region in dark theme. [#10187](https://github.com/ant-design/ant-design/pull/10187) [@dgeibi ](https://github.com/dgeibi)

 ## 3.4.2

@@ -1327,7 +1437,7 @@ Component Fixes / Enhancements:

 `2018-03-25`

- Revert Upload `file` type change in previous version  which causes breaking change.
+- Revert Upload `file` type change in previous version which causes breaking change.

 ## 3.3.2

@@ -1345,12 +1455,13 @@ Component Fixes / Enhancements:
 `2018-03-18`

 - 💄 Tweak danger button focus style.
- 🐞 Fix a show error when the value of enterButton is a button element.  [#9639](https://github.com/ant-design/ant-design/issues/9639)
+- 🐞 Fix a show error when the value of enterButton is a button element. [#9639](https://github.com/ant-design/ant-design/issues/9639)
 - 🐞 Fix missing key of `column.title` in Table .[#9658](https://github.com/ant-design/ant-design/issues/9658) [@terence55](https://github.com/terence55)
 - 🐞 Fix `scroll: { x: true }` not working if `.ant-table-scroll table` width is `auto`. [#9704](https://github.com/ant-design/ant-design/pull/9704)
- 🐞 Fix when the helper message disappears, the input box will shake.  [#8831](https://github.com/ant-design/ant-design/issues/8831)
+- 🐞 Fix when the helper message disappears, the input box will shake. [#8831](https://github.com/ant-design/ant-design/issues/8831)
 - 🐞 Fix isMoment call in `TimePicker` will report error in parcel. [85c78e4](https://github.com/ant-design/ant-design/commit/85c78e49a91737c2841dc42621db21ca248b62b4)
 - 🐞 Tweak `Table` border radius. [#9674](https://github.com/ant-design/ant-design/pull/9674)
+
 ## 3.3.0

 `2018-03-12`
@@ -1359,17 +1470,17 @@ Component Fixes / Enhancements:
 - 🌟 Add `validRange` prop for `Calendar` to set the date range. [71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker)
 - 🌟 Add `defaultActiveTabKey` prop for `Card` to initial TabPane's active key. [30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u)
 - `DatePicker`
-    - 🌟 Add `dropdownClassName` prop to set the className of popup calendar. [#7211](https://github.com/ant-design/ant-design/issues/7211)
-    - 🐞 Fix the error of resolving `moment` object. [#9539](https://github.com/ant-design/ant-design/pull/9539)
-    - 🐞 Fix incorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373)
+  - 🌟 Add `dropdownClassName` prop to set the className of popup calendar. [#7211](https://github.com/ant-design/ant-design/issues/7211)
+  - 🐞 Fix the error of resolving `moment` object. [#9539](https://github.com/ant-design/ant-design/pull/9539)
+  - 🐞 Fix incorrect import of `turkish(tr_TR)` locale file. [#9373](https://github.com/ant-design/ant-design/issues/9373)
 - 🌟 Add `orientation` prop for `Divider` to set the alignment of text in divider. [#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch)
 - 🌟 Add `keyboard` prop for `Modal` to set whether Modal could be closed by `Esc` key. [#8818](https://github.com/ant-design/ant-design/issues/8818)
 - 🌟 Improve the TypeScript definition of `event` param in `onChange` prop for `Radio` and `Checkbox`. [#9574](https://github.com/ant-design/ant-design/issues/9574)
 - `Table`
-    - 🌟 Add `position` prop in `pagination` prop to set the position of pagination. [#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
-    - 🌟 Add event param of `onSelect` prop in `rowSelection` prop. [#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
-    - 🌟 Add `columnWidth` prop in `rowSelection` prop to set the column width of selection. [#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
-    - 🐞 Fix border radius issue in `Chrome` for `Table`. [af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
+  - 🌟 Add `position` prop in `pagination` prop to set the position of pagination. [#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
+  - 🌟 Add event param of `onSelect` prop in `rowSelection` prop. [#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
+  - 🌟 Add `columnWidth` prop in `rowSelection` prop to set the column width of selection. [#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
+  - 🐞 Fix border radius issue in `Chrome` for `Table`. [af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
 - 🌟 Add `pendingDot` prop for `Timeline` to set icon of ghost node. [#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend)
 - 🌟 Add `inputReadOnly` prop for `TimePicker` to set if it's read only. [4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe)
 - 🌟 Add `dropdownClassName` prop for `TreeSelect`. [69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b)
@@ -1459,7 +1570,6 @@ Component Fixes / Enhancements:

 - 🐞 Revert [#9141](https://github.com/ant-design/ant-design/pull/9141) since it causes year and month can not be selected in DatePicker.

-
 ## 3.1.5

 `2018-01-27`
@@ -1475,7 +1585,7 @@ Component Fixes / Enhancements:
  - Add `duration` for Notification. [pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun)
  - Add `style` for Steps. [pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan)
 - 🌟 Optimize Avatar default background color. [commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851)
- 🌟 Add the less variable for Slider and Menu. [pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115)  [@mrgeorgegray](https://github.com/mrgeorgegray)
+- 🌟 Add the less variable for Slider and Menu. [pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)

 ## 3.1.4

@@ -1588,25 +1698,25 @@ Happy 2018 !~ 2018 2018 2018 coming!~~~

 `2017-12-11`

-* Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x.
-* Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
-* Fix that Affix will be overlap when it is higher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
-* Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
-* Fix the alignment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
-* Menu
-  * Fix the popup will disappear unexpectedly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
-  * Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
-* Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437)
-* Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
-* Table
-  * Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465)
-  * Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525)
-* TypeScript
-  * Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
-  * Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
-  * Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444)
-  * Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
-  * Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
+- Remove useless DOM wrapper of Card, so that Card's DOM structure will be the same as Card of 2.x.
+- Fix that missing `antd/lib/style/v2-compatible-reset.css`. [28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
+- Fix that Affix will be overlap when it is higher than viewport. [31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
+- Fix the open animation of Collapse. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
+- Fix the alignment of large size Input and Button in Form. [#8459](https://github.com/ant-design/ant-design/issues/8459)
+- Menu
+  - Fix the popup will disappear unexpectedly in Safari. [#8453](https://github.com/ant-design/ant-design/issues/8453)
+  - Fix the open animation. [edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
+- Fix compile error of style of Notification. [#8437](https://github.com/ant-design/ant-design/issues/8437)
+- Fix the background color of mini Pagination. [e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
+- Table
+  - Fix broken style in mobile. [#8465](https://github.com/ant-design/ant-design/issues/8465)
+  - Fix broken style when use size and nested Table together. [#8525](https://github.com/ant-design/ant-design/issues/8525)
+- TypeScript
+  - Fix TypeScript definition of AutoComplete. [#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
+  - Fix TypeScript definition of Divider. [#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
+  - Fix TypeScript definition of Dropdown. [#8444](https://github.com/ant-design/ant-design/issues/8444)
+  - Fix TypeScript definition of List. [e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
+  - Fix TypeScript definition of Table. [#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)

 ## 3.0.0

@@ -1723,7 +1833,9 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
  - 🌟 Added new `hourStep`, `minuteStep`, `secondStep` props to allow customizing time steps. [Demo](https://ant.design/components/time-picker/#components-time-picker-demo-interval-options)
  - 🌟 Added new `focusOnOpen` prop to focus input after panel is open.
 - Table
+
  - 🌟 Added new `components` prop to allow overriding default table elements.
+
    ```javascript
    // You can override following elements
    const components = {
@@ -1740,8 +1852,9 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
      },
    };

-    <Table components={components} columns={columns} data={data} />
+    <Table components={components} columns={columns} data={data} />;
    ```
+
  - 🌟 Added new `onRow` prop to allow passing custom props to table body row.
  - 🌟 Added new `onHeaderRow` props to allow passing custom props to table header row.
  - 🌟 Added `column[onCell]` to allow passing custom props to table body cell.
@@ -1752,14 +1865,17 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe
  - 🙅 Deprecated `getBodyWrapper`, please use `components` instead.
  - 🙅 Deprecated `onRowClick`, `onRowDoubleClick`, `onRowContextMenu`, `onRowMouseEnter`, `onRowMouseLeave`, please use `onRow` instead.
    ```javascript
-    <Table onRow={(record) => ({
-      onClick: () => {},
-      onDoubleClick: () => {},
-      onContextMenu: () => {},
-      onMouseEnter: () => {},
-      onMouseLeave: () => {},
-    })} />
+    <Table
+      onRow={record => ({
+        onClick: () => {},
+        onDoubleClick: () => {},
+        onContextMenu: () => {},
+        onMouseEnter: () => {},
+        onMouseLeave: () => {},
+      })}
+    />
    ```
+
 - Select
  - 🌟 Option's value can be a number in single or multiple mode.
  - 🌟 Added new `maxTagCount` and `maxTagPlaceholder` props.
@@ -1788,7 +1904,6 @@ We provide a [migration tool](https://github.com/ant-design/antd-migration-helpe

 Visit [GitHub](https://github.com/ant-design/ant-design/blob/2.x-stable/CHANGELOG.en-US.md) to read `2.x` change logs.

-
 ## 1.11.4

 Visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md) to read change logs from `0.x` to `1.x`.
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -9,18 +9,134 @@ timeline: true

 #### 发布周期

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

 ---

+## 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`
+
+- 🐞 移除打包后多余的 `module.export`。[#antd-tools](https://github.com/ant-design/antd-tools/commit/b9e230c91551af5b4555f672130b14304ff58357)
+
+## 3.18.0
+
+`2019-05-12`
+
+- 🌟 Transfer 支持 `children` 来自定义渲染列表。[#16026](https://github.com/ant-design/ant-design/pull/16026)
+- 🌟 Pagination 支持 `disabled` 属性。[#16493](https://github.com/ant-design/ant-design/pull/16493)
+- 🌟 升级 `@ant-design/icons` 和 `@ant-design/icons-react` 到 2.0 修复一些图标缺失的问题。[#15874](https://github.com/ant-design/ant-design/pull/15874)
+- 🐞 修复 Form `hasFeedback` 和 Input.Password 一起使用时互相重叠的问题。[#16445](https://github.com/ant-design/ant-design/pull/16445)
+- 🐞 修复 Select 当前选中的失效项的样式问题。[#16477](https://github.com/ant-design/ant-design/pull/16477)
+- 🐞 修复 Upload disabled 状态下会被 label 激活的问题。[#16483](https://github.com/ant-design/ant-design/pull/16483)
+- 🐞 修复 `hoist-non-react-statics` 导致的编译错误问题。[#16397](https://github.com/ant-design/ant-design/pull/16397) [@ztplz](https://github.com/ztplz)
+- 🐞 修复自定义图标在 Notification 组件中的大小不对的问题。[#16507](https://github.com/ant-design/ant-design/pull/16507)
+- 🐞 修复 PageHeader 组件当 `title` 为空时不应该渲染空白元素的问题。[#16510](https://github.com/ant-design/ant-design/pull/16510) [@yociduo](https://github.com/yociduo)
+- ⚡️ 当 Modal 组件 `onOk` 回调返回的 Promise 被 Reject 的时候，打印错误。[#16437](https://github.com/ant-design/ant-design/pull/16437) [@jas0ncn](https://github.com/jas0ncn)
+- TypeScript
+  - ⚡️ 完善 Table 中 `column.filterDropdown` 的定义。[#16446](https://github.com/ant-design/ant-design/pull/16446)
+  - ⚡️ 添加 Select 中 `maxTagTextLength` 的定义。[#16504](https://github.com/ant-design/ant-design/pull/16504) [@SylvanasGone](https://github.com/SylvanasGone)
+  - ⚡️ 完善 Form 中 `getFieldError` 的返回值的定义。[#16524](https://github.com/ant-design/ant-design/pull/16524) [@vicrep](https://github.com/vicrep)
+  - 🐞 修复 List 组件缺少 `style` 定义的问题。[#16485](https://github.com/ant-design/ant-design/pull/16485)
+
+## 3.17.0
+
+`2019-05-05`
+
+- 🎉 Breadcrumb.Item 支持 `overlay` 属性来定义下拉菜单。[#16315](https://github.com/ant-design/ant-design/pull/16315)
+- 🎉 Button 的增加了新的类型 `link`。[#16289](https://github.com/ant-design/ant-design/pull/16289)
+- ⌨️ 用`ul`包裹 List.Item，以增加可访问性。[#15890](https://github.com/ant-design/ant-design/pull/15890)
+- 🌟 TreeSelect 的 `showSearch` 支持多选模式。[#15933](https://github.com/ant-design/ant-design/pull/15933)
+- 🌟 Upload 提供 `previewFile` 属性以自定义预览逻辑。[#15984](https://github.com/ant-design/ant-design/pull/15984)
+- 🌟 添加了 `@table-selected-row-color` 变量来自定义表格选中的颜色。[#15971](https://github.com/ant-design/ant-design/pull/15971) [@hextion](https://github.com/hextion)
+- 🌟 添加了 `@form-warning-input-bg` 和 `@form-error-input-bg` 变量来自定义表单错误状态时的背景颜色。[#15954](https://github.com/ant-design/ant-design/pull/15954) [@hextion](https://github.com/hextion)
+- 🌟 Dropdown.Button 支持 `icon` 属性来自定义图标。[#15996](https://github.com/ant-design/ant-design/pull/15996) [@DiamondYuan](https://github.com/DiamondYuan)
+- 🌟 SkeletonAvatarProps 的 `size` 属性支持传入数字。[#16128](https://github.com/ant-design/ant-design/pull/16128) [@MrHeer](https://github.com/MrHeer)
+- 🌟 notification.config 现在支持 `getContainer` 来进行自定义 dom 渲染位置。[#16123](https://github.com/ant-design/ant-design/pull/16123) [@Nouzbe](https://github.com/Nouzbe)
+- 🌟 Drawer 支持 `afterVisibleChange` 属性，在抽屉动画完成后触发。[#16228](https://github.com/ant-design/ant-design/pull/16228)
+- 🌟 Form.Item 支持了 `htmlFor` 属性. [#16278](https://github.com/ant-design/ant-design/pull/16278)
+- 🌟 Collapse 支持 `expandIconPosition` 属性。[#16365](https://github.com/ant-design/ant-design/pull/16365)
+- 🌟 Carousel 支持自定义面板指示点的位置。[#16225](https://github.com/ant-design/ant-design/pull/16225) [@yociduo](https://github.com/yociduo)
+- 🌟 TreeNode 支持 `checkable` 属性。[#16369](https://github.com/ant-design/ant-design/pull/16369)
+- 🌟 🇭🇷 新增克罗地亚语言包。[#15641](https://github.com/ant-design/ant-design/pull/15641) [@fpintaric](https://github.com/fpintaric)
+- 🐞 修复 Drawer 组件的弹出动画闪烁的问题。[#16358](https://github.com/ant-design/ant-design/pull/16358)
+- 🐞 修复 Slider 的文字会换行的问题。[#15128](https://github.com/ant-design/ant-design/pull/15128)
+- 🐞 修复 Checkbox.Group `onChange` 会包含已移除的值的问题。[#16392](https://github.com/ant-design/ant-design/pull/16392)
+- 🐞 修正了多处 Typescript 的类型错误。[#16043](https://github.com/ant-design/ant-design/pull/16043) [#16341](https://github.com/ant-design/ant-design/pull/16341) [#16343](https://github.com/ant-design/ant-design/pull/16343) [#16360](https://github.com/ant-design/ant-design/pull/16360) [#16344](https://github.com/ant-design/ant-design/pull/16344)
+
+## 3.16.6
+
+`2019-04-26`
+
+- ⌨️ 优化 PageHeader `backIcon` 的键盘可访问性。[#16038](https://github.com/ant-design/ant-design/issues/16038)
+- 🇮🇹 调整意大利语文案。[#16093](https://github.com/ant-design/ant-design/pull/16093) [@yp](https://github.com/yp) [#16172](https://github.com/ant-design/ant-design/pull/16172) [@afelicioni](https://github.com/afelicioni)
+- 🐞 修复 Select `showSearch` 模式下取消选择时没有触发 `onSearch` 的问题。[#16235](https://github.com/ant-design/ant-design/pull/16235)
+- 🐞 修复 Select 当前选项的 hover 样式。[#16238](https://github.com/ant-design/ant-design/pull/16238) [@yociduo](https://github.com/yociduo)
+- 🐞 修复 Switch 失效状态下依然有按下样式的问题。[#16251](https://github.com/ant-design/ant-design/pull/16251) [@atomoo](https://github.com/atomoo)
+- 🐞 修复小号 Table 表头背景样式。[#16266](https://github.com/ant-design/ant-design/pull/16266)
+- 🐞 修复 Tabs 在底部时的边框样式问题。[#16130](https://github.com/ant-design/ant-design/pull/16130) [@rinick](https://github.com/rinick)
+- 🐞 修复 Typography.Title 不支持 `type` 的问题。[#16275](https://github.com/ant-design/ant-design/pull/16275)
+- 🐞 修复 Typography.Paragraph 编辑模式 `className` 失效的问题。[#16307](https://github.com/ant-design/ant-design/pull/16307)
+- 🐞 修复一个 List `actions` 错位问题。[#16239](https://github.com/ant-design/ant-design/pull/16239)
+- 🐞 修复一个超长 Modal 标题的展现问题。[#16267](https://github.com/ant-design/ant-design/pull/16267) [@yoyo837](https://github.com/yoyo837)
+- 🐞 修正 Pagination 当前项的背景色。[#16306](https://github.com/ant-design/ant-design/pull/16306)
+- 🐞 修复 `core-js@<2.6.5 is no longer maintained` 的安装警告。[#16325](https://github.com/ant-design/ant-design/issues/16325)
+- Typescript
+  - 🐞 修复 `Form.create()` 报错。[#16242](https://github.com/ant-design/ant-design/pull/16242)
+  - 🐞 修复 Tooltip `className` 的定义。[#16195](https://github.com/ant-design/ant-design/pull/16195) [@swillis12](https://github.com/swillis12)
+
+## 3.16.5
+
+`2019-04-22`
+
+- 🐞 修复 Firefox 中 Table 使用 sorter 丢失线框的样式问题。[#16174](https://github.com/ant-design/ant-design/pull/16174)
+- 🐞 修复 List 中设置 `pagination` 为 `null` 时报错的问题。[#16231](https://github.com/ant-design/ant-design/pull/16231)
+- TypeScript
+  - 🐞 修复 `allowSyntheticDefaultImports: false` 下 `hoist-non-react-statics` 报错的问题。[#16224](https://github.com/ant-design/ant-design/pull/16224)
+
+## 3.16.4
+
+`2019-04-21`
+
+- 🐞 修复圆形 Button 在 `loading` 时还会响应鼠标事件的问题。[#16063](https://github.com/ant-design/ant-design/pull/16063) [@gxvv](https://github.com/gxvv)
+- 🐞 修复 Form.Item 的 `labelAlign` 不生效的问题。[#16067](https://github.com/ant-design/ant-design/issues/16067)
+- 🐞 修复 Spin 在 unmount 时遗留的 debounce 调用导致的报错问题。[#16081](https://github.com/ant-design/ant-design/pull/16081) [@raybooysen](https://github.com/raybooysen)
+- 🐞 修复 List 的 `defaultPageSize` 不生效的问题。[#16100](https://github.com/ant-design/ant-design/issues/16100)
+- 🐞 修复 PageHeader 的 `tags` 类型错误。[#16092](https://github.com/ant-design/ant-design/issues/16092)
+- 🐞 修复 DatePicker 中 moment 报错的问题。[#16109](https://github.com/ant-design/ant-design/issues/16109)
+- 🐞 修复 Radio 在 Firefox 上没有垂直居中的问题。[#16039](https://github.com/ant-design/ant-design/issues/16039)
+- 🐞 修复 Affix 的 `target` 变化后不能工作的问题。[#16146](https://github.com/ant-design/ant-design/pull/16146)
+- 🐞 修复 Modal 在首次渲染时的动画问题。[#15795](https://github.com/ant-design/ant-design/issues/15795)
+- 🐞 修复 Table 的 `rowSelection.columnWidth` 不工作的问题。[#16163](https://github.com/ant-design/ant-design/issues/16163)
+- 🐞 修复 Form.create 的类型定义。[#16095](https://github.com/ant-design/ant-design/issues/16095)
+- 🐞 修复 Icon `aria-hidden` 的类型定义。[#16202](https://github.com/ant-design/ant-design/pull/16202)
+- 🌟 新增 less 变量 `@text-selection-bg;`。[#16155](https://github.com/ant-design/ant-design/pull/16155)
+
 ## 3.16.3

 `2019-04-12`

- 🐞 **修复 Button 类型定义在在最新的 `@types/react` 中** [#15938](https://github.com/ant-design/ant-design/pull/15938)
- ⚠️ 新增当 time 不合法时 DatePicker 的提示。[#15920](https://github.com/ant-design/ant-design/pull/15920) 
+- 🐞 **修复 Button TS 类型定义。**[#15938](https://github.com/ant-design/ant-design/pull/15938)
+- ⚠️ DatePicker 新增当日期不合法的提示。[#15920](https://github.com/ant-design/ant-design/pull/15920)
 - 🐞 修复 Menu 箭头在老 IE 版本上不显示的问题。[#15932](https://github.com/ant-design/ant-design/pull/15932)
 - 🐞 修复 Progress 当 `status` 为 `undefined` 时的展示。[#15951](https://github.com/ant-design/ant-design/pull/15951)
 - 🐞 修复 Menu 折叠时 Tooltip 的问题。[#15948](https://github.com/ant-design/ant-design/pull/15948)
@@ -131,7 +247,7 @@ timeline: true
  - 🐞 保持 List 组件内容颜色与之前的版本一致。[#15301](https://github.com/ant-design/ant-design/pull/15301)
 - 🐞 修复 Calendar 无法切换类型的问题。[#15338](https://github.com/ant-design/ant-design/pull/15338) [@zy410419243](https://github.com/zy410419243)
 - Badge
-  - 🐞 修复 Badge 组件不支持自定义颜色的问题。[#15356](https://github.com/ant-design/ant-design/pull/15356)  [@DiamondYuan](https://github.com/DiamondYuan)
+  - 🐞 修复 Badge 组件不支持自定义颜色的问题。[#15356](https://github.com/ant-design/ant-design/pull/15356) [@DiamondYuan](https://github.com/DiamondYuan)
  - 🐞 修复 Badge 组件内带小圆点时的高度问题。[#15395](https://github.com/ant-design/ant-design/pull/15395)
 - 🐞 微调 Tabs 标签模式在浏览器放大时丢失边框的问题。[#15299](https://github.com/ant-design/ant-design/pull/15299) [@rinick](https://github.com/rinick)
 - 🐞 修复 Avatar 组件设置了 `display: none` 的时候无法计算偏移量的问题。[#15351](https://github.com/ant-design/ant-design/pull/15351) [@ppbl](https://github.com/ppbl)
@@ -353,6 +469,7 @@ timeline: true
 ## 3.12.4

 `2019-01-19`
+
 - 🌟 更新《在 create-react-app 中使用》文档以兼容升级后的 create-react-app 和 react-scripts-rewired。[#14385](https://github.com/ant-design/ant-design/pull/14385)
 - 🐞 修复在 postcss（webpack）中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#14312](https://github.com/ant-design/ant-design/pull/14312)
 - 🐞 修复 InputNumber 在 MenuItem 中样式不正确的问题。[#14373](https://github.com/ant-design/ant-design/pull/14373)
@@ -532,7 +649,7 @@ timeline: true
 - 🐞 修复 Table 使用自定义列头时报 `Cannot read property 'children' of undefined` 的问题。[#13542](https://github.com/ant-design/ant-design/issues/13542) [@geraldchen890806](https://github.com/geraldchen890806)
 - 🐞 修复另一个 Input 在自定义了 less 变量 `@border-width-base` 时的边框问题。[#13534](https://github.com/ant-design/ant-design/pull/13534) [@morenyang](https://github.com/morenyang)
 - 🐞 修复 Upload 的 `beforeUpload` 方法返回 Promise 时不支持 resolve `Blob` 对象的问题。[#13528](https://github.com/ant-design/ant-design/pull/13528/) [@huanz](https://github.com/huanz)
-   https://github.com/ant-design/ant-design/pull/13536
+- https://github.com/ant-design/ant-design/pull/13536
 - 🐞 修复 Dropdown 两个属性的 TypeScript 定义。[#13536](https://github.com/ant-design/ant-design/pull/13536) [@wangxingkang](https://github.com/wangxingkang)

 ## 3.11.1
@@ -613,7 +730,7 @@ timeline: true
 `2018-11-17`

 - 🐞 修复弹出菜单背景透明的问题。[#13104](https://github.com/ant-design/ant-design/issues/13104)
- 🐞 修复了 disabled  Button  在 Popconfirm 中的不占用整个宽度的问题。[#13119](https://github.com/ant-design/ant-design/issues/13119)
+- 🐞 修复了 disabled Button 在 Popconfirm 中的不占用整个宽度的问题。[#13119](https://github.com/ant-design/ant-design/issues/13119)
 - 🐞 修复了 Radio.Group 中的 Radio.Button 覆盖了 Badge 的问题。[#13132](https://github.com/ant-design/ant-design/issues/13132)
 - 🐞 修复 RangePicker 在 `small` 模式不对齐的问题。[#13105](https://github.com/ant-design/ant-design/issues/13105)
 - 🐞 修复 Dropdown 字体大小影响到头像的问题。[#13091](https://github.com/ant-design/ant-design/issues/13091)
@@ -637,7 +754,7 @@ timeline: true
 `2018-11-09`

 - 🎉 发布 [首页模板集](https://landing.ant.design)！
- 📖 发布  Ant Design [新版 Sketch 模版文件](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch)。
+- 📖 发布 Ant Design [新版 Sketch 模版文件](https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch)。
 - Button
  - 🐞 修复在小尺寸的 `Button.Group` 中没有垂直对齐的问题。[#12972](https://github.com/ant-design/ant-design/issues/12972)
  - 🐞 修复设置了 `href` 属性没有垂直对齐的问题。[#12978](https://github.com/ant-design/ant-design/issues/12978)
@@ -779,7 +896,7 @@ timeline: true
 - 🐞 修复 Icon.createFromIconfontCN 方法会自动给 `scriptUrl` 加 `https` 的问题。[#12316](https://github.com/ant-design/ant-design/issues/12316)
 - 🐞 修复 Row 的 `gutter` 属性，在使用嵌套的 Col 时不生效的问题。[#12320](https://github.com/ant-design/ant-design/pull/12320)
 - 🐞 修复 Tree.DirectoryTree 组件在设置的 `expandedKeys` 有初始值时不能正确展开节点的问题。[#12396](https://github.com/ant-design/ant-design/issues/12396)
- 🐞 修复 Transfer 组件使用 `render` 属性返回  ReactNode 时，列表项的 `title` 属性显示错误的问题。[#12399](https://github.com/ant-design/ant-design/issues/12399)
+- 🐞 修复 Transfer 组件使用 `render` 属性返回 ReactNode 时，列表项的 `title` 属性显示错误的问题。[#12399](https://github.com/ant-design/ant-design/issues/12399)
 - 🐞 修复 Tooltip 在 CheckboxGroup 上不工作的问题。[#12427](https://github.com/ant-design/ant-design/issues/12427)
 - 🐞 修复 Button 组件 loading 状态下在 IE9 里依然可以被点击的问题。[#12466](https://github.com/ant-design/ant-design/pull/12466) [@snail](https://github.com/120216220)
 - 🐞 修复 Input.Group 中使用非 Input 组件时，鼠标 hover 时会产生抖动的问题。[#12407](https://github.com/ant-design/ant-design/pull/12407) [@hengkx](https://github.com/hengkx)
@@ -809,10 +926,10 @@ timeline: true
  - 🐞 修复当 `Icon` 组件包含子组件时，`React.Children.only` 报错。[c21ff](https://github.com/ant-design/ant-design/commit/c21ff5251d1ff0f00d7f283dd377a7b13eec21ee)
  - 🐞 修复 `Notification` 组件没有描述时图标对齐问题。[e6579](https://github.com/ant-design/ant-design/commit/e657985cc35359fb813a2bd68be8c3afbe75c95a)
  - 🐞 修复 `Table` 组件的排序图标对齐问题。[c935d](https://github.com/ant-design/ant-design/commit/c935d53b713afb3ec314133d749ca4e29e0c1ee5)
-  TypeScript
-  - 🐞 修复 `Message` 组件中 `MessageApi` 类型定义。[e82d7](https://github.com/ant-design/ant-design/commit/e82d7a9c095317d62b054fcf7c2d6666ba54660d)[#12137](https://github.com/ant-design/ant-design/issues/12137)
-  - 🐞 修复 `Tree` onDrop 类型定义。[e5827](https://github.com/ant-design/ant-design/commit/e58273dccf59d58862e8bab0da36c7065e1c1044)[#12269](https://github.com/ant-design/ant-design/issues/12269)
-  - 🐞 `TreeSelect` 组件中 `onChange` 方法中添加 `extra` 类型定义。[#12243](https://github.com/ant-design/ant-design/pull/12243)[@jardicc](https://github.com/jardicc)
+- TypeScript
+- 🐞 修复 `Message` 组件中 `MessageApi` 类型定义。[e82d7](https://github.com/ant-design/ant-design/commit/e82d7a9c095317d62b054fcf7c2d6666ba54660d)[#12137](https://github.com/ant-design/ant-design/issues/12137)
+- 🐞 修复 `Tree` onDrop 类型定义。[e5827](https://github.com/ant-design/ant-design/commit/e58273dccf59d58862e8bab0da36c7065e1c1044)[#12269](https://github.com/ant-design/ant-design/issues/12269)
+- 🐞 `TreeSelect` 组件中 `onChange` 方法中添加 `extra` 类型定义。[#12243](https://github.com/ant-design/ant-design/pull/12243)[@jardicc](https://github.com/jardicc)

 ## 3.9.2

@@ -840,7 +957,7 @@ timeline: true
 - 🐞 修复 `Popconfirm` 组件中的图标显示位置不正确的问题。[#12026](https://github.com/ant-design/ant-design/issues/12026)
 - 🐞 修复 `Card` 组件中的 `Actions` 图标显示位置不正确的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
 - 🐞 修复 `Form`、`Alert`、`TimePicker` 等组件图标主题风格不正确的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
- 🐞 修复 `Collapse` 组件中的 `header` 中的图标会顺时针旋转90度的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
+- 🐞 修复 `Collapse` 组件中的 `header` 中的图标会顺时针旋转 90 度的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016)
 - 🐞 修复在特定部署环境中，新旧图标会同时出现的问题。[#12016](https://github.com/ant-design/ant-design/pull/12016) [8b82f14](https://github.com/ant-design/ant-design/pull/12016/commits/8b82f143b6bd612e8ec7f1202dfd5f41127b025e)
 - 🐞 修复使用 `Icon.createFromIconFontCN({...})` 方法失效并报错的问题。[#12013](https://github.com/ant-design/ant-design/pull/12013)

@@ -850,8 +967,7 @@ timeline: true

 在开学之际我们带来了久违的 `3.9.0` 的更新。多个重量级的新特性和大量修复，使 Ant Design 的能力显著提升。

- 🔥🔥🔥 在 `3.9.0` 版本中，我们重绘了所有的图标，新增了两大类，超过 90 个新图标，并且为每个图标增加了多种风格。为此我们重写了 Icon 组件，使用 `SVG` 替换了 `fontface` 图标，增加了多个特性，可以快速的使用新的图标和风格。
-  ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
+- 🔥🔥🔥 在 `3.9.0` 版本中，我们重绘了所有的图标，新增了两大类，超过 90 个新图标，并且为每个图标增加了多种风格。为此我们重写了 Icon 组件，使用 `SVG` 替换了 `fontface` 图标，增加了多个特性，可以快速的使用新的图标和风格。 ![](https://gw.alipayobjects.com/zos/rmsportal/CVDHuodLwcDeyQBDoUIZ.png)
  - 💄 使用 `SVG` 图标替换了 `css` 字体图标，[可以看这里的讨论了解 svg 的优势](https://github.com/ant-design/ant-design/issues/10353)。
  - 💄 提供了三套图标风格线性、实色和双色图标，默认为线性风格。
  - 🌟 新增了 **编辑类** 和 **数据类** 两个新类别。
@@ -912,12 +1028,13 @@ timeline: true
 ## 3.8.2

 `2018-8-18`
+
 - 🐞 修复 Tag 组件 `visible` 属性初始值为 false 时仍然可见的问题。[#11757](https://github.com/ant-design/ant-design/issues/11757)
 - 🐞 修复 Modal 文本在双击打开的时候会被选中的问题。[#11777](https://github.com/ant-design/ant-design/issues/11777)
 - 🐞 修复 Rate 组件点击时的样式问题。[#11736](https://github.com/ant-design/ant-design/issues/11736)
 - 🐞 修复 Badge 组件在子元素为 `display:block` 时的样式问题。[#84119d8](https://github.com/ant-design/ant-design/commit/84119d8959d55edf535a9cac5ff532e61b6ee698)
 - Drawer
-  - 🐞 修复 Drawer 组件不兼容 IE10 和 IE9  的问题。[#11583](https://github.com/ant-design/ant-design/issues/11583)
+  - 🐞 修复 Drawer 组件不兼容 IE10 和 IE9 的问题。[#11583](https://github.com/ant-design/ant-design/issues/11583)
  - 🐞 修复 Drawer 组件在移动设备上无法垂直滚动的问题。[#11443](https://github.com/ant-design/ant-design/issues/11443)
 - TypeScript
  - 🐞 修复 TreeNode 组件缺少的 `selectable` 属性定义。[#11604](https://github.com/ant-design/ant-design/issues/11604) [@apieceofbart](https://github.com/apieceofbart)
@@ -941,7 +1058,7 @@ timeline: true
  - 🐞 修复 Collapse 组件缺少的 `destroyInactivePanel` 定义。[#11646](https://github.com/ant-design/ant-design/pull/11646) [@zheeeng](https://github.com/zheeeng)
  - 💄 修复 AutoComplete 没有 `getPopupContainer` 属性定义的问题。[#11690](https://github.com/ant-design/ant-design/pull/11690) [@Huanghuiying0624](https://github.com/Huanghuiying0624)
  - 🐞 修复 Upload 组件的 `lastModifiedDate` 定义。[#11709](https://github.com/ant-design/ant-design/pull/11709) [@andycall](https://github.com/andycall)
-  💄 使用新的 React 生命周期函数，包括组件 Upload，CheckboxGroup，Layout.Sider，Tooltip，Popconfirm。[#11666](https://github.com/ant-design/ant-design/pull/11666) [@dancerphil](https://github.com/dancerphil) [#11682](https://github.com/ant-design/ant-design/pull/11682) [@dancerphil](https://github.com/dancerphil)
+- 💄 使用新的 React 生命周期函数，包括组件 Upload，CheckboxGroup，Layout.Sider，Tooltip，Popconfirm。[#11666](https://github.com/ant-design/ant-design/pull/11666) [@dancerphil](https://github.com/dancerphil) [#11682](https://github.com/ant-design/ant-design/pull/11682) [@dancerphil](https://github.com/dancerphil)

 ## 3.8.0

@@ -1027,8 +1144,7 @@ timeline: true

 ## 3.7.0

-3.7.0 是一个重磅更新，带来了很多激动人心的变化和新特性。
-以下是一些亮点✨：
+3.7.0 是一个重磅更新，带来了很多激动人心的变化和新特性。以下是一些亮点 ✨：

 - 🔥 增加抽屉组件 : [`Drawer`](https://ant.design/components/drawer-cn/) [#10791](https://github.com/ant-design/ant-design/pull/10791)
 - 🔥 新增 `Tree.DirectoryTree` 组件，作为内置的目录树。[#7749](https://github.com/ant-design/ant-design/issues/7749)
@@ -1045,7 +1161,7 @@ timeline: true
 - Upload 组件升级 `rc-upload` 到 `2.5.0`
  - 🌟 新增 `directory` 属性，支持上传一个文件夹。[#7315](https://github.com/ant-design/ant-design/issues/7315)
  - 🌟 `action` 属性支持作为一个返回 `Promise` 对象的函数，使用更加灵活。[fd96967](https://github.com/ant-design/ant-design/commit/fd96967c872600b79bb608e9ddf9f8c38814a704)
- Dropdown 增加新特性，可以做为右键菜单来使用。
+- Dropdown 增加新特性， 可以做为右键菜单来使用。
  - 🌟 给菜单项的 icon 提供默认的外间距样式。[8e60a59](https://github.com/ant-design/ant-design/commit/8e60a591fd24f644de4f67d69c2210e9270be9cc)
  - 🌟 触发方式为 `contextMenu` 时自动调整菜单的位置。[16e4260](https://github.com/ant-design/ant-design/commit/16e42601d6772fc0830ee237a1e751a38a118676)
 - Table 组件升级 `rc-table` 到 `6.2.2`。[f2fddff](https://github.com/ant-design/ant-design/commit/f2fddff3fd0d6b36e8e6d8ee06bfcbcc85ead4f0)
@@ -1146,15 +1262,15 @@ timeline: true

 `2018-06-02`

-* 🌟 `Form` 表单错误信息展示支持传入 ReactNode。[#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
-* 🌟 `List` 组件支持指定分页器的位置。[#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
-* 🌟 `Layout.Sider` 支持 dark/light 主题定制。[#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
-* 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625)
-* 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi)
-* 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
-* 🐞 修复编译时 TypeScript v2.9.1兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
-* 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
-* 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674)
+- 🌟 `Form` 表单错误信息展示支持传入 ReactNode。[#10136](https://github.com/ant-design/ant-design/issues/10136) [@lovekonakona](https://github.com/lovekonakona)
+- 🌟 `List` 组件支持指定分页器的位置。[#10581](https://github.com/ant-design/ant-design/pull/10581) [@zheeeng](https://github.com/zheeeng)
+- 🌟 `Layout.Sider` 支持 dark/light 主题定制。[#10142](https://github.com/ant-design/ant-design/issues/10142) [@pd4d10](https://github.com/pd4d10)
+- 🌟 支持 Ant Design 站点的离线模式。[#10625](https://github.com/ant-design/ant-design/issues/10625)
+- 🌟 `Transfer` 新增 `style` 以及 `operationStyle` 属性配置样式。[@eduludi](https://github.com/eduludi)
+- 🌟 `Message` 增加 promise 化的回调接口。[#10421](https://github.com/ant-design/ant-design/issues/10421) [@zhujinxuan](https://github.com/zhujinxuan)
+- 🐞 修复编译时 TypeScript v2.9.1 兼容性问题。[#10729](https://github.com/ant-design/ant-design/issues/10729) [@karol-majewski](https://github.com/karol-majewski)
+- 🐞 修复 `Menu` 嵌套超过两层时选中最里层后对应最外层没有亮起问题。[#8666](https://github.com/ant-design/ant-design/issues/8666) [@stonehank](https://github.com/stonehank)
+- 🐞 修复 `Affix` 组件 offsetBottom 无效问题。[#10674](https://github.com/ant-design/ant-design/issues/10674)

 ## 3.5.4

@@ -1188,7 +1304,7 @@ timeline: true
 `2018-05-13`

 - 🐞 修复 `Table` 过滤器和 `Transfer` 复选框无法点击的问题。[#10452](https://github.com/ant-design/ant-design/issues/10452)
- 🐞 修复 `Cascader` 的 `displayRender` 里的链接无法点击的问题。[#10433](https://github.com/ant-design/ant-design/issues/10433)
+- 🐞 修复 `Cascader` 的  `displayRender` 里的链接无法点击的问题。[#10433](https://github.com/ant-design/ant-design/issues/10433)
 - 🐞 修复 `Button` ref 不兼容问题。[#10405](https://github.com/ant-design/ant-design/issues/10405)
 - 🐞 修复 `Form` 表单项校验位置高度时出现抖动问题。[#10445](https://github.com/ant-design/ant-design/issues/10445)
 - 🌟 设置 `Layout` 宽度时，允许使用任何的 CSS 单位。[#10479](https://github.com/ant-design/ant-design/pull/10479)
@@ -1224,12 +1340,12 @@ timeline: true
  - 🐞 修复头部单元格的边框样式问题。[#10359](https://github.com/ant-design/ant-design/issues/10359)
  - 🐞 修复当数据变化时用户选择项丢失的问题。[#10332](https://github.com/ant-design/ant-design/pull/10332) [@chrvadala](https://github.com/chrvadala)
 - `Menu` 升级 `rc-menu` 到 `7.x` [#10305](https://github.com/ant-design/ant-design/pull/10305)
-  - 🌟 更好的 aria-* 属性支持。[react-component/menu#137](https://github.com/react-component/menu/pull/137)
+  - 🌟 更好的 aria-\* 属性支持。[react-component/menu#137](https://github.com/react-component/menu/pull/137)
  - 🌟 一些内部优化提升组件性能。[react-component/menu#133](https://github.com/react-component/menu/pull/133)
  - 🌟 支持将属性传递到菜单项中。[react-component/menu#135](https://github.com/react-component/menu/pull/135)
  - 🐞 修复一些快捷键的问题。[react-component/menu#132](https://github.com/react-component/menu/pull/132)
 - Collapse
-  - 🌟 更新 `rc-collapse` 到 1.9.0 优化键盘支持。[react-component/collapse#84](https://github.com/react-component/collapse/pull/84/)  [@kossel](https://github.com/kossel)
+  - 🌟 更新 `rc-collapse` 到 1.9.0 优化键盘支持。[react-component/collapse#84](https://github.com/react-component/collapse/pull/84/) [@kossel](https://github.com/kossel)
  - 🌟 支持通过 less 定义组件 `Collapse` 的样式。[#9943](https://github.com/ant-design/ant-design/pull/9943) [@davidhatten](https://github.com/davidhatten)
 - Select
  - 🐞 修复 `placeholder` 的 ts 类型问题。[#10282](https://github.com/ant-design/ant-design/pull/10282) [@thomasthiebaud](https://github.com/thomasthiebaud)
@@ -1310,7 +1426,7 @@ timeline: true
  - 🌟 新增 `defaultExpandParent` 用于在第一次渲染时自动展开父节点。
  - 🌟 新增 `disabled` 用于禁用整棵树。
  - 🌟 TreeNode 新增 `icon` 用于设置自定义图标。
-  - 🌟 优化了 TreeNode 设置 `disabled` 时的勾选逻辑。
+  - 🌟 优化了 TreeNode 设置 `disabled` 时的  勾选逻辑。
 - 🌟 Anchor 新增 `getContainer` 用于指定内容滚动的容器。
 - 🌟 Table 新增 less 变量 `@table-expanded-row-bg`。[#9789](https://github.com/ant-design/ant-design/pull/9789)
 - 🐞 修复一处 less 语法错误。[#9832](https://github.com/ant-design/ant-design/pull/9832) [@jojoLockLock](https://github.com/jojoLockLock)
@@ -1357,17 +1473,17 @@ timeline: true
 - 🌟 `Calendar` 组件新增 `validRange` 属性，用于设置显示的时间范围。[71f65a0](https://github.com/ant-design/ant-design/commit/71f65a0be8e72a67f334c57e79ae3ff5fb640630) [@Rohanhacker](https://github.com/Rohanhacker)
 - 🌟 `Card` 组件新增 `defaultActiveTabKey` 属性，用于初始化选中面板的 key。[30fe88d](https://github.com/ant-design/ant-design/commit/30fe88d4bdcec765bf92ca32a755d9646b36978e) [@u3u](https://github.com/u3u)
 - `DatePicker`
-    - 🌟 新增 `dropdownClassName` 属性，用于设置弹出日历的 className。[#7211](https://github.com/ant-design/ant-design/issues/7211)
-    - 🐞 修复解析 `moment` 对象出错的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539)
-    - 🐞 修复引入土耳其语 `tr_TR` 文件的问题。[#9373](https://github.com/ant-design/ant-design/issues/9373)
+  - 🌟 新增 `dropdownClassName` 属性，用于设置弹出日历的 className。[#7211](https://github.com/ant-design/ant-design/issues/7211)
+  - 🐞 修复解析 `moment` 对象出错的问题。[#9539](https://github.com/ant-design/ant-design/pull/9539)
+  - 🐞 修复引入土耳其语 `tr_TR` 文件的问题。[#9373](https://github.com/ant-design/ant-design/issues/9373)
 - 🌟 `Divider` 组件新增 `orientation` 属性，用于设置分割线内文本的对齐方式。[#9275](https://github.com/ant-design/ant-design/pull/9275) [@jrvboesch](https://github.com/jrvboesch)
 - 🌟 `Modal` 组件新增 `keyboard` 属性，用于设置按下 `Esc` 键是否可以关闭 `Modal`。[#8818](https://github.com/ant-design/ant-design/issues/8818)
 - 🌟 优化 `Radio` 和 `Checkbox` 组件 `onChange` 属性中的事件参数的 `TypeScript` 类型定义的问题。[#9574](https://github.com/ant-design/ant-design/issues/9574)
 - `Table`
-    - 🌟 新增 `pagination` 属性的配置项 `position`，用于设置分页的显示位置。[#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
-    - 🌟 新增 `rowSelection` 属性的配置项 `onSelect` 回调函数的事件参数。[#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
-    - 🌟 新增 `rowSelection` 属性的配置项 `columnWidth`，用于设置选择框的列宽。[#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
-    - 🐞 修复 `Table` 组件在 `Chrome` 下圆角边框样式的问题。[af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
+  - 🌟 新增 `pagination` 属性的配置项 `position`，用于设置分页的显示位置。[#9357](https://github.com/ant-design/ant-design/pull/9357) [@kanweiwei](https://github.com/kanweiwei)
+  - 🌟 新增 `rowSelection` 属性的配置项 `onSelect` 回调函数的事件参数。[#9376](https://github.com/ant-design/ant-design/pull/9376) [@kanweiwei](https://github.com/kanweiwei)
+  - 🌟 新增 `rowSelection` 属性的配置项 `columnWidth`，用于设置选择框的列宽。[#9474](https://github.com/ant-design/ant-design/pull/9474) [@SimpleFrontend](https://github.com/SimpleFrontend)
+  - 🐞 修复 `Table` 组件在 `Chrome` 下圆角边框样式的问题。[af8e54f](https://github.com/ant-design/ant-design/commit/af8e54f1d6ac2891892e39b153cbe3e998370f61)
 - 🌟 `Timeline` 组件新增 `pendingDot` 属性，用于设置幽灵节点的图标。[#9546](https://github.com/ant-design/ant-design/pull/9546) [@SimpleFrontend](https://github.com/SimpleFrontend)
 - 🌟 `TimePicker` 组件新增 `inputReadOnly` 属性，用于设置组件是否只读。[4a69446](https://github.com/ant-design/ant-design/commit/4a69446be155c1c176b18cb2c31459f999aa5d5e) [@JesperWe](https://github.com/JesperWe)
 - 🌟 `TreeSelect` 组件新增 `dropdownClassName` 属性。[69b154f](https://github.com/ant-design/ant-design/commit/69b154f9a9cfa5f2d89a82b6ed730d4d8793de73) [56e4ce0](https://github.com/ant-design/ant-design/commit/56e4ce099d950601538d72243563021e8083776b)
@@ -1394,7 +1510,7 @@ timeline: true

 - 🌟 添加 `Pagination` 字体变量。[#9351](https://github.com/ant-design/ant-design/issues/9351)
 - 🌟 添加 `Badge` 字重变量。[#9352](https://github.com/ant-design/ant-design/issues/9352)
- 🐞 修复 `Table` 当自定义 `loading.indicator` 时，不显示emptyText。[#9355](https://github.com/ant-design/ant-design/issues/9355)
+- 🐞 修复 `Table` 当自定义 `loading.indicator` 时，不显示 emptyText。[#9355](https://github.com/ant-design/ant-design/issues/9355)
 - 🐞 修复 `Form.create` 。[#9331](https://github.com/ant-design/ant-design/issues/9331)
 - 🐞 回滚 `Table` 中 `column.dataIndex` 的 TypeScript 定义。[#9393](https://github.com/ant-design/ant-design/issues/9393)
 - 🐞 修复 `Layout` 中 sider 高度不足时，最后一个菜单无法显示。[#9398](https://github.com/ant-design/ant-design/issues/9398) [@MJ111](https://github.com/MJ111)
@@ -1451,7 +1567,6 @@ timeline: true
 - 🐞 修复 Tabs 在 card 模式且 tabPosition 是 `bottom` 时的样式问题。[#9165](https://github.com/ant-design/ant-design/pull/9165) [@ryanhoho](https://github.com/ryanhoho)
 - 🌟 新增库尔德语。

-
 ## 3.1.6

 `2018-01-28`
@@ -1473,7 +1588,7 @@ timeline: true
  - 补充 Notification 缺失的 `duration` 定义。[pull/9120](https://github.com/ant-design/ant-design/pull/9120) [@duhongjun](https://github.com/duhongjun)
  - 补充 Steps 缺失的 `style` 定义。[pull/9126](https://github.com/ant-design/ant-design/pull/9126) [@wanliyunyan](https://github.com/wanliyunyan)
 - 🌟 优化了 Avatar 的默认背景色。[commit/275946](https://github.com/ant-design/ant-design/commit/275946090823ab8da90f1871976c671b2c7ac851)
- 🌟 新增了 Slider 以及 Menu 的 less 变量，更加方便的修改主题。[pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115)  [@mrgeorgegray](https://github.com/mrgeorgegray)
+- 🌟 新增了 Slider 以及 Menu 的 less 变量，更加方便的修改主题。[pull/9065](https://github.com/ant-design/ant-design/pull/9065) [pull/9115](https://github.com/ant-design/ant-design/pull/9115) [@mrgeorgegray](https://github.com/mrgeorgegray)

 ## 3.1.4

@@ -1536,7 +1651,7 @@ timeline: true

 `2017-12-29`

-新年快乐！~ 2018年了，00后都成年了！少年赶紧提个 PR 给我们吧！~
+新年快乐！~ 2018 年了，00 后都成年了！少年赶紧提个 PR 给我们吧！~

 - 🐞 修复组件 Spin 可能出现跳动的问题。[#8602](https://github.com/ant-design/ant-design/issues/8602) [@jhsu](https://github.com/jhsu)
 - 🐞 修复 Table 在设置 `size=small` 的情况下出现多余 padding 的问题。[#8724](https://github.com/ant-design/ant-design/issues/8724)
@@ -1586,25 +1701,25 @@ timeline: true

 `2017-12-11`

-* 移除 Card 无用 DOM wrapper，以和 2.x 保持一致。
-* 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
-* 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
-* 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
-* 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459)
-* Menu
-  * 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453)
-  * 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
-* 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437)
-* 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
-* Table
-  * 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465)
-  * 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525)
-* TypeScript
-  * 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
-  * 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
-  * 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444)
-  * 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
-  * 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)
+- 移除 Card 无用 DOM wrapper，以和 2.x 保持一致。
+- 修复 `antd/lib/style/v2-compatible-reset.css` 缺失问题。[28d13e2](https://github.com/ant-design/ant-design/commit/28d13e2539817f87b8a2029ea22d9c30b377167f)
+- 修复 Affix 比浏览器可见区域还高时被截断的问题。[31a0654](https://github.com/ant-design/ant-design/commit/31a0654ef990eb7bae2b18095fa0d5230b9be1da)
+- 修复 Collapse 展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
+- 修复 Form 内大尺寸 Input、Button 的对齐问题。[#8459](https://github.com/ant-design/ant-design/issues/8459)
+- Menu
+  - 修复弹层在 Safari 下消失的问题。[#8453](https://github.com/ant-design/ant-design/issues/8453)
+  - 修复展开动画。[edd592c](https://github.com/ant-design/ant-design/commit/edd592cb9dd79d534853e7a0c1b648382e3f1a12)
+- 修复 Notification 样式编译错误。[#8437](https://github.com/ant-design/ant-design/issues/8437)
+- 修复迷你 Pagination 的背景色问题。[e13c6d8](https://github.com/ant-design/ant-design/commit/e13c6d87fa6bf7d5cf4b2d5154a85b4793997de5)
+- Table
+  - 修复在移动端样式错乱的问题。[#8465](https://github.com/ant-design/ant-design/issues/8465)
+  - 修复嵌套表格与 size 属性共用时的样式问题。[#8525](https://github.com/ant-design/ant-design/issues/8525)
+- TypeScript
+  - 修复 AutoComplete 的 TypeScript 定义。[#8383](https://github.com/ant-design/ant-design/pull/8383) [@nidhi-ag](https://github.com/nidhi-ag)
+  - 修复 Divider 的 TypeScript 定义。[#8504](https://github.com/ant-design/ant-design/pull/8504) [@cyyyu](https://github.com/cyyyu)
+  - 修复 Dropdown 的 TypeScript 定义。[#8444](https://github.com/ant-design/ant-design/issues/8444)
+  - 修复 List 的 TypeScript 定义。[e27061e](https://github.com/ant-design/ant-design/commit/e27061ea5b2f2d3273b45862d9b87285448f0998) [1b2a955](https://github.com/ant-design/ant-design/commit/1b2a9550d9595dd2f31f79d1bdd52695ec792692)
+  - 修复 Table 的 TypeScript 定义。[#8507](https://github.com/ant-design/ant-design/issues/8507) [#8515](https://github.com/ant-design/ant-design/pull/8515) [@danedavid](https://github.com/danedavid)

 ## 3.0.0

@@ -1672,8 +1787,10 @@ timeline: true
  import zhCN from 'antd/lib/locale-provider/zh_CN';

  ReactDOM.render(
-    <LocaleProvider locale={zhCN}><YourApp /></LocaleProvider>,
-    document.getElementById('root')
+    <LocaleProvider locale={zhCN}>
+      <YourApp />
+    </LocaleProvider>,
+    document.getElementById('root'),
  );
  ```

@@ -1732,7 +1849,9 @@ timeline: true
  - 🌟 新增 `hourStep`、`minuteStep`、`secondStep`，用于设置时间步长。[例子](https://ant.design/components/time-picker-cn/#components-time-picker-demo-interval-options)
  - 🌟 新增 `focusOnOpen`，用于设置在打开面板的时候是否聚焦输入框。
 - Table
+
  - 🌟 新增 `components` 属性，用于覆盖表格元素的默认标签。
+
    ```javascript
    // 支持覆盖的元素
    const components = {
@@ -1749,8 +1868,9 @@ timeline: true
      },
    };

-    <Table components={components} columns={columns} data={data} />
+    <Table components={components} columns={columns} data={data} />;
    ```
+
  - 🌟 新增 `onRow` 属性，用于设置表格列的属性。
  - 🌟 新增 `onHeaderRow`，用户设置表格头部列的属性。
  - 🌟 新增 `column[onCell]`，用户设置单元格的属性。
@@ -1761,17 +1881,20 @@ timeline: true
  - 🙅 废弃 `getBodyWrapper`，请使用 `components` 属性代替。
  - 🙅 废弃以下属性 `onRowClick`，`onRowDoubleClick`、`onRowContextMenu`、`onRowMouseEnter`、`onRowMouseLeave`，请使用 `onRow` 代替。
    ```javascript
-    <Table onRow={(record) => ({
-      onClick: () => {},
-      onDoubleClick: () => {},
-      onContextMenu: () => {},
-      onMouseEnter: () => {},
-      onMouseLeave: () => {},
-    })} />
+    <Table
+      onRow={record => ({
+        onClick: () => {},
+        onDoubleClick: () => {},
+        onContextMenu: () => {},
+        onMouseEnter: () => {},
+        onMouseLeave: () => {},
+      })}
+    />
    ```
+
 - Select
  - 🌟 默认和多选模式下 Option 的值允许使用 number。
-  - 🌟 新增 `maxTagCount 和 `maxTagPlaceholder`，用于设置最多可显示的选中项。
+  - 🌟 新增 `maxTagCount` 和 `maxTagPlaceholder`，用于设置最多可显示的选中项。
  - 🌟 新增 `showAction`，用于设置出发下拉框打开的事件。
  - 🌟 新增 `onMouseEnter` 和 `onMouseLeave` 事件回调。
 - LocaleProvider
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo

 Examples of behavior that contributes to creating a positive environment include:

-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members

 Examples of unacceptable behavior by participants include:

-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting

 ## Our Responsibilities

--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -10,21 +10,11 @@

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

-[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master)
-[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
-[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
-[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
+[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)

-[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
-[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev)
-[![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield)
-[![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)

-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI)
-[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 </div>

@@ -41,13 +31,13 @@

 ## 🖥 支持环境

-* 现代浏览器和 IE9 及以上。
-* 支持服务端渲染。
-* [Electron](http://electron.atom.io/)
+- 现代浏览器和 IE9 及以上。
+- 支持服务端渲染。
+- [Electron](http://electron.atom.io/)

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --------- | --------- | --------- | --------- | --------- | --------- |
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| --- | --- | --- | --- | --- | --- |
+| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

 ## 📦 安装

@@ -69,7 +59,7 @@ ReactDOM.render(<DatePicker />, mountNode);
 引入样式：

 ```jsx
-import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 ```

 你也可以 [按需加载组件](https://ant.design/docs/react/getting-started-cn#按需加载)。
--- a/README.md
+++ b/README.md
@@ -10,21 +10,11 @@

 An enterprise-class UI design language and React implementation.

-[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master)
-[![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design)
-[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master)
-[![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd)
-[![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)
+[![Build Status](https://dev.azure.com/ant-design/ant-design/_apis/build/status/ant-design.ant-design?branchName=master)](https://dev.azure.com/ant-design/ant-design/_build/latest?definitionId=2?branchName=master) [![CircleCI branch](https://img.shields.io/circleci/project/github/ant-design/ant-design/master.svg?style=flat-square)](https://circleci.com/gh/ant-design/ant-design) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design/branch/master) [![npm package](https://img.shields.io/npm/v/antd.svg?style=flat-square)](https://www.npmjs.org/package/antd) [![NPM downloads](http://img.shields.io/npm/dm/antd.svg?style=flat-square)](http://npmjs.com/antd)

-[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design)
-[![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev)
-[![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/)
-[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield)
-[![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+[![Dependencies](https://img.shields.io/david/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design) [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design?type=dev) [![Total alerts](https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design)](https://lgtm.com/projects/g/ant-design/ant-design/alerts/) [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield) [![Issues need help](https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open)](https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)

-[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI)
-[![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![](https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social)](https://twitter.com/AntDesignUI) [![Gitter](https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D)](https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=20&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

 </div>

@@ -41,13 +31,13 @@ English | [简体中文](./README-zh_CN.md)

 ## 🖥 Environment Support

-* Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
-* Server-side Rendering
-* [Electron](http://electron.atom.io/)
+- Modern browsers and Internet Explorer 9+ (with [polyfills](https://ant.design/docs/react/getting-started#Compatibility))
+- Server-side Rendering
+- [Electron](http://electron.atom.io/)

 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
-| --------- | --------- | --------- | --------- | --------- | --------- |
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| --- | --- | --- | --- | --- | --- |
+| IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

 ## 📦 Install

@@ -69,7 +59,7 @@ ReactDOM.render(<DatePicker />, mountNode);
 And import style manually:

 ```jsx
-import 'antd/dist/antd.css';  // or 'antd/dist/antd.less'
+import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 ```

 Or [import components on demand](https://ant.design/docs/react/getting-started#Import-on-Demand).
--- a/components/tests/util/domHook.js
+++ b/components/tests/util/domHook.js
@@ -0,0 +1,54 @@
+export function spyElementPrototypes(Element, properties) {
+  const propNames = Object.keys(properties);
+  const originDescriptors = {};
+
+  propNames.forEach(propName => {
+    const originDescriptor = Object.getOwnPropertyDescriptor(Element.prototype, propName);
+    originDescriptors[propName] = originDescriptor;
+
+    const spyProp = properties[propName];
+
+    if (typeof spyProp === 'function') {
+      // If is a function
+      Element.prototype[propName] = function spyFunc(...args) {
+        return spyProp.call(this, originDescriptor, ...args);
+      };
+    } else {
+      // Otherwise tread as a property
+      Object.defineProperty(Element.prototype, propName, {
+        ...spyProp,
+        set(value) {
+          if (spyProp.set) {
+            return spyProp.set.call(this, originDescriptor, value);
+          }
+          return originDescriptor.set(value);
+        },
+        get() {
+          if (spyProp.get) {
+            return spyProp.get.call(this, originDescriptor);
+          }
+          return originDescriptor.get();
+        },
+      });
+    }
+  });
+
+  return {
+    mockRestore() {
+      propNames.forEach(propName => {
+        const originDescriptor = originDescriptors[propName];
+        if (typeof originDescriptor === 'function') {
+          Element.prototype[propName] = originDescriptor;
+        } else {
+          Object.defineProperty(Element.prototype, propName, originDescriptor);
+        }
+      });
+    },
+  };
+}
+
+export function spyElementPrototype(Element, propName, property) {
+  return spyElementPrototypes(Element, {
+    [propName]: property,
+  });
+}
--- a/components/_util/tests/util.test.js
+++ b/components/_util/tests/util.test.js
@@ -99,6 +99,10 @@ describe('Test utils function', () => {
      bamboo = true;
    }, 3);

+    // Do nothing, but insert in the frame
+    // https://github.com/ant-design/ant-design/issues/16290
+    delayRaf(() => {}, 3);
+
    // Variable bamboo should be false in frame 2 but true in frame 4
    raf(() => {
      expect(bamboo).toBe(false);
--- a/components/_util/colors.ts
+++ b/components/_util/colors.ts
@@ -1,18 +1,19 @@
 import { tuple } from './type';

 export const PresetColorTypes = tuple(
-	'pink',
-	'red',
-	'yellow',
-	'orange',
-	'cyan',
-	'green',
-	'blue',
-	'purple',
-	'geekblue',
-	'magenta',
-	'volcano',
-	'gold',
-	'lime'
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime',
 );
+
 export type PresetColorType = (typeof PresetColorTypes)[number];
--- a/components/_util/motion.tsx
+++ b/components/_util/motion.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+type MotionFunc = (element: HTMLElement) => React.CSSProperties;
+
+interface Motion {
+  visible?: boolean;
+  motionName?: string; // It also support object, but we only use string here.
+  motionAppear?: boolean;
+  motionEnter?: boolean;
+  motionLeave?: boolean;
+  motionLeaveImmediately?: boolean; // Trigger leave motion immediately
+  removeOnLeave?: boolean;
+  leavedClassName?: string;
+  onAppearStart?: MotionFunc;
+  onAppearActive?: MotionFunc;
+  onAppearEnd?: MotionFunc;
+  onEnterStart?: MotionFunc;
+  onEnterActive?: MotionFunc;
+  onEnterEnd?: MotionFunc;
+  onLeaveStart?: MotionFunc;
+  onLeaveActive?: MotionFunc;
+  onLeaveEnd?: MotionFunc;
+}
+
+// ================== Collapse Motion ==================
+const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 });
+const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight });
+
+export const collapseMotion: Motion = {
+  motionName: 'ant-motion-collapse',
+  onAppearStart: getCollapsedHeight,
+  onEnterStart: getCollapsedHeight,
+  onAppearActive: getRealHeight,
+  onEnterActive: getRealHeight,
+  onLeaveStart: getCurrentHeight,
+  onLeaveActive: getCollapsedHeight,
+};
--- a/components/_util/openAnimation.tsx
+++ b/components/_util/openAnimation.tsx
@@ -1,10 +1,14 @@
+/**
+ * Deprecated. We should replace the animation with pure react motion instead of modify style directly.
+ * If you are creating new component with animation, please use `./motion`.
+ */
 import cssAnimation from 'css-animation';
 import raf from 'raf';

 function animate(node: HTMLElement, show: boolean, done: () => void) {
  let height: number;
  let requestAnimationFrameId: number;
-  return cssAnimation(node, 'ant-motion-collapse', {
+  return cssAnimation(node, 'ant-motion-collapse-legacy', {
    start() {
      if (!show) {
        node.style.height = `${node.offsetHeight}px`;
--- a/components/_util/raf.ts
+++ b/components/_util/raf.ts
@@ -17,13 +17,13 @@ export default function wrapperRaf(callback: () => void, delayFrames: number = 1

    if (restFrames <= 0) {
      callback();
-      delete ids[id];
+      delete ids[myId];
    } else {
-      ids[id] = raf(internalCallback);
+      ids[myId] = raf(internalCallback);
    }
  }

-  ids[id] = raf(internalCallback);
+  ids[myId] = raf(internalCallback);

  return myId;
 }
@@ -35,4 +35,4 @@ wrapperRaf.cancel = function(pid?: number) {
  delete ids[pid];
 };

-wrapperRaf.ids = ids; // export this for test usage
+wrapperRaf.ids = ids; // export this for test usage
--- a/components/_util/reactNode.ts
+++ b/components/_util/reactNode.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export function cloneElement(element: React.ReactNode, ...restArgs: any[]) {
+  if (!React.isValidElement(element)) return element;
+
+  return React.cloneElement(element, ...restArgs);
+}
--- a/components/_util/transButton.tsx
+++ b/components/_util/transButton.tsx
@@ -5,8 +5,8 @@
 import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';

-interface TransButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  onClick?: () => void;
+interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }

 const inlineStyle: React.CSSProperties = {
@@ -14,20 +14,21 @@ const inlineStyle: React.CSSProperties = {
  background: 'transparent',
  padding: 0,
  lineHeight: 'inherit',
+  display: 'inline-block',
 };

 class TransButton extends React.Component<TransButtonProps> {
-  button?: HTMLButtonElement;
+  div?: HTMLDivElement;
  lastKeyCode?: number;

-  onKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = event => {
+  onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
    const { keyCode } = event;
    if (keyCode === KeyCode.ENTER) {
      event.preventDefault();
    }
  };

-  onKeyUp: React.KeyboardEventHandler<HTMLButtonElement> = event => {
+  onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
    const { keyCode } = event;
    const { onClick } = this.props;
    if (keyCode === KeyCode.ENTER && onClick) {
@@ -35,26 +36,28 @@ class TransButton extends React.Component<TransButtonProps> {
    }
  };

-  setRef = (btn: HTMLButtonElement) => {
-    this.button = btn;
+  setRef = (btn: HTMLDivElement) => {
+    this.div = btn;
  };

  focus() {
-    if (this.button) {
-      this.button.focus();
+    if (this.div) {
+      this.div.focus();
    }
  }

  blur() {
-    if (this.button) {
-      this.button.blur();
+    if (this.div) {
+      this.div.blur();
    }
  }

  render() {
    const { style } = this.props;
    return (
-      <button
+      <div
+        role="button"
+        tabIndex={0}
        ref={this.setRef}
        {...this.props}
        onKeyDown={this.onKeyDown}
--- a/components/affix/tests/Affix.test.js
+++ b/components/affix/tests/Affix.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Affix from '..';
+import { getObserverEntities } from '../utils';
 import Button from '../../button';

 const events = {};
@@ -128,14 +129,37 @@ describe('Affix Render', () => {
    expect(wrapper.instance().affix.state.affixStyle.top).toBe(10);
  });

-  it('updatePosition when target changed', () => {
-    const container = '<div id="mounter" />';
-    const getTarget = () => container;
-    wrapper = mount(<Affix target={getTarget} />);
-    wrapper.setProps({ target: null });
-    expect(wrapper.instance().state.status).toBe(0);
-    expect(wrapper.instance().state.affixStyle).toBe(undefined);
-    expect(wrapper.instance().state.placeholderStyle).toBe(undefined);
+  describe('updatePosition when target changed', () => {
+    it('function change', () => {
+      document.body.innerHTML = '<div id="mounter" />';
+      const container = document.querySelector('#id');
+      const getTarget = () => container;
+      wrapper = mount(<Affix target={getTarget} />);
+      wrapper.setProps({ target: null });
+      expect(wrapper.instance().state.status).toBe(0);
+      expect(wrapper.instance().state.affixStyle).toBe(undefined);
+      expect(wrapper.instance().state.placeholderStyle).toBe(undefined);
+    });
+
+    it('instance change', () => {
+      const getObserverLength = () => Object.keys(getObserverEntities()).length;
+
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      let target = container;
+
+      const originLength = getObserverLength();
+      const getTarget = () => target;
+      wrapper = mount(<Affix target={getTarget} />);
+      jest.runAllTimers();
+
+      expect(getObserverLength()).toBe(originLength + 1);
+      target = null;
+      wrapper.setProps({});
+      wrapper.update();
+      jest.runAllTimers();
+      expect(getObserverLength()).toBe(originLength);
+    });
  });

  it('updatePosition when size changed', () => {
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -13,14 +13,14 @@ title:

 The simplest usage.

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

 class Demo extends React.Component {
  state = {
    top: 10,
    bottom: 10,
-  }
+  };

  render() {
    return (
@@ -56,4 +56,4 @@ class Demo extends React.Component {
 }

 ReactDOM.render(<Demo />, mountNode);
-````
+```
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -13,13 +13,13 @@ title:

 Callback with affixed state.

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

 ReactDOM.render(
  <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
    <Button>120px to affix top</Button>
  </Affix>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -13,18 +13,21 @@ title:

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

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

 class Demo extends React.Component {
  render() {
    return (
-      <div className="scrollable-container" ref={(node) => { this.container = node; }}>
+      <div
+        className="scrollable-container"
+        ref={node => {
+          this.container = node;
+        }}
+      >
        <div className="background">
          <Affix target={() => this.container}>
-            <Button type="primary">
-              Fixed at the top of container
-            </Button>
+            <Button type="primary">Fixed at the top of container</Button>
          </Affix>
        </div>
      </div>
@@ -33,7 +36,7 @@ class Demo extends React.Component {
 }

 ReactDOM.render(<Demo />, mountNode);
-````
+```

 <style>
 #components-affix-demo-target .scrollable-container {
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -15,7 +15,7 @@ Please note that Affix should not cover other content on the page, especially wh
 ## API

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
 | target | specifies the scrollable area dom node | () => HTMLElement | () => window |
@@ -24,7 +24,13 @@ Please note that Affix should not cover other content on the page, especially wh
 **Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:

 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>
-  ...
-</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
 ```
+
+## FAQ
+
+### Affix bind container with `target`, sometime move out of container.
+
+We don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>
+
+Related issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -7,7 +7,13 @@ import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationF
 import ResizeObserver from '../_util/resizeObserver';

 import warning from '../_util/warning';
-import { addObserveTarget, removeObserveTarget, getTargetRect } from './utils';
+import {
+  addObserveTarget,
+  removeObserveTarget,
+  getTargetRect,
+  getFixedTop,
+  getFixedBottom,
+} from './utils';

 function getDefaultTarget() {
  return typeof window !== 'undefined' ? window : null;
@@ -41,6 +47,8 @@ export interface AffixState {
  placeholderStyle?: React.CSSProperties;
  status: AffixStatus;
  lastAffix: boolean;
+
+  prevTarget: Window | HTMLElement | null;
 }

 class Affix extends React.Component<AffixProps, AffixState> {
@@ -51,6 +59,7 @@ class Affix extends React.Component<AffixProps, AffixState> {
  state: AffixState = {
    status: AffixStatus.None,
    lastAffix: false,
+    prevTarget: null,
  };

  placeholderNode: HTMLDivElement;
@@ -72,14 +81,22 @@ class Affix extends React.Component<AffixProps, AffixState> {
  }

  componentDidUpdate(prevProps: AffixProps) {
+    const { prevTarget } = this.state;
    const { target } = this.props;
-    if (prevProps.target !== target) {
+    let newTarget = null;
+    if (target) {
+      newTarget = target() || null;
+    }
+
+    if (prevTarget !== newTarget) {
      removeObserveTarget(this);
-      if (target) {
-        addObserveTarget(target(), this);
+      if (newTarget) {
+        addObserveTarget(newTarget, this);
        // Mock Event object.
        this.updatePosition({} as Event);
      }
+
+      this.setState({ prevTarget: newTarget });
    }

    if (
@@ -98,6 +115,27 @@ class Affix extends React.Component<AffixProps, AffixState> {
    (this.updatePosition as any).cancel();
  }

+  getOffsetTop = () => {
+    const { offset, offsetBottom } = this.props;
+    let { offsetTop } = this.props;
+    if (typeof offsetTop === 'undefined') {
+      offsetTop = offset;
+      warning(
+        typeof offset === 'undefined',
+        'Affix',
+        '`offset` is deprecated. Please use `offsetTop` instead.',
+      );
+    }
+
+    if (offsetBottom === undefined && offsetTop === undefined) {
+      offsetTop = 0;
+    }
+    return offsetTop;
+  };
+  getOffsetBottom = () => {
+    return this.props.offsetBottom;
+  };
+
  savePlaceholderNode = (node: HTMLDivElement) => {
    this.placeholderNode = node;
  };
@@ -109,8 +147,42 @@ class Affix extends React.Component<AffixProps, AffixState> {
  // =================== Measure ===================
  // Handle realign logic
  @throttleByAnimationFrameDecorator()
+  updatePosition(event?: Event | null) {
+    this.prepareMeasure(event);
+  }
+
+  @throttleByAnimationFrameDecorator()
+  lazyUpdatePosition(event: Event) {
+    const { target } = this.props;
+    const { affixStyle } = this.state;
+
+    // Check position change before measure to make Safari smooth
+    if (target && affixStyle) {
+      const offsetTop = this.getOffsetTop();
+      const offsetBottom = this.getOffsetBottom();
+
+      const targetNode = target();
+      if (targetNode) {
+        const targetRect = getTargetRect(targetNode);
+        const placeholderReact = getTargetRect(this.placeholderNode);
+        const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
+        const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
+
+        if (
+          (fixedTop !== undefined && affixStyle.top === fixedTop) ||
+          (fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
+        ) {
+          return;
+        }
+      }
+    }
+
+    // Directly call prepare measure since it's already throttled.
+    this.prepareMeasure(event);
+  }
+
  // @ts-ignore TS6133
-  updatePosition(e?: Event) {
+  prepareMeasure = (event?: Event | null) => {
    // event param is used before. Keep compatible ts define here.
    this.setState({
      status: AffixStatus.Prepare,
@@ -125,28 +197,17 @@ class Affix extends React.Component<AffixProps, AffixState> {
        onTestUpdatePosition();
      }
    }
-  }
+  };

  measure = () => {
    const { status, lastAffix } = this.state;
-    const { target, offset, offsetBottom, onChange } = this.props;
+    const { target, onChange } = this.props;
    if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !target) {
      return;
    }

-    let { offsetTop } = this.props;
-    if (typeof offsetTop === 'undefined') {
-      offsetTop = offset;
-      warning(
-        typeof offset === 'undefined',
-        'Affix',
-        '`offset` is deprecated. Please use `offsetTop` instead.',
-      );
-    }
-
-    if (offsetBottom === undefined && offsetTop === undefined) {
-      offsetTop = 0;
-    }
+    const offsetTop = this.getOffsetTop();
+    const offsetBottom = this.getOffsetBottom();

    const targetNode = target();
    if (!targetNode) {
@@ -158,11 +219,13 @@ class Affix extends React.Component<AffixProps, AffixState> {
    };
    const targetRect = getTargetRect(targetNode);
    const placeholderReact = getTargetRect(this.placeholderNode);
+    const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
+    const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);

-    if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
+    if (fixedTop !== undefined) {
      newState.affixStyle = {
        position: 'fixed',
-        top: offsetTop + targetRect.top,
+        top: fixedTop,
        width: placeholderReact.width,
        height: placeholderReact.height,
      };
@@ -170,14 +233,10 @@ class Affix extends React.Component<AffixProps, AffixState> {
        width: placeholderReact.width,
        height: placeholderReact.height,
      };
-    } else if (
-      offsetBottom !== undefined &&
-      targetRect.bottom < placeholderReact.bottom + offsetBottom
-    ) {
-      const targetBottomOffset = targetNode === window ? 0 : window.innerHeight - targetRect.bottom;
+    } else if (fixedBottom !== undefined) {
      newState.affixStyle = {
        position: 'fixed',
-        bottom: offsetBottom + targetBottomOffset,
+        bottom: fixedBottom,
        width: placeholderReact.width,
        height: placeholderReact.height,
      };
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -25,7 +25,13 @@ title: Affix
 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

 ```jsx
-<Affix style={{ position: 'absolute', top: y, left: x }}>
-  ...
-</Affix>
+<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>
 ```
+
+## FAQ
+
+### Affix 使用 `target` 绑定容器时，元素会跑到容器外。
+
+从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听：<https://codesandbox.io/s/2xyj5zr85p>
+
+相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
--- a/components/affix/style/index.less
+++ b/components/affix/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';

 .@{ant-prefix}-affix {
  position: fixed;
--- a/components/affix/utils.ts
+++ b/components/affix/utils.ts
@@ -1,6 +1,38 @@
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Affix from './';

+export type BindElement = HTMLElement | Window | null | undefined;
+export type Rect = ClientRect | DOMRect;
+
+export function getTargetRect(target: BindElement): ClientRect {
+  return target !== window
+    ? (target as HTMLElement).getBoundingClientRect()
+    : ({ top: 0, bottom: window.innerHeight } as ClientRect);
+}
+
+export function getFixedTop(
+  placeholderReact: Rect,
+  targetRect: Rect,
+  offsetTop: number | undefined,
+) {
+  if (offsetTop !== undefined && targetRect.top > placeholderReact.top - offsetTop) {
+    return offsetTop + targetRect.top;
+  }
+  return undefined;
+}
+
+export function getFixedBottom(
+  placeholderReact: Rect,
+  targetRect: Rect,
+  offsetBottom: number | undefined,
+) {
+  if (offsetBottom !== undefined && targetRect.bottom < placeholderReact.bottom + offsetBottom) {
+    const targetBottomOffset = window.innerHeight - targetRect.bottom;
+    return offsetBottom + targetBottomOffset;
+  }
+  return undefined;
+}
+
 // ======================== Observer ========================
 const TRIGGER_EVENTS = [
  'resize',
@@ -20,6 +52,11 @@ interface ObserverEntity {

 let observerEntities: ObserverEntity[] = [];

+export function getObserverEntities() {
+  // Only used in test env. Can be removed if refactor.
+  return observerEntities;
+}
+
 export function addObserveTarget(target: HTMLElement | Window | null, affix: Affix): void {
  if (!target) return;

@@ -39,7 +76,7 @@ export function addObserveTarget(target: HTMLElement | Window | null, affix: Aff
    TRIGGER_EVENTS.forEach(eventName => {
      entity!.eventHandlers[eventName] = addEventListener(target, eventName, (event: Event) => {
        entity!.affixList.forEach(affix => {
-          affix.updatePosition(event);
+          affix.lazyUpdatePosition(event);
        });
      });
    });
@@ -67,9 +104,3 @@ export function removeObserveTarget(affix: Affix): void {
    });
  }
 }
-
-export function getTargetRect(target: HTMLElement | Window | null): ClientRect {
-  return target !== window
-    ? (target as HTMLElement).getBoundingClientRect()
-    : ({ top: 0, bottom: window.innerHeight } as ClientRect);
-}
--- a/components/alert/tests/snapshots/demo.test.js.snap
+++ b/components/alert/tests/snapshots/demo.test.js.snap
@@ -767,7 +767,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    >
-      Detailed description and advices about successful copywriting.
+      Detailed description and advice about successful copywriting.
    </span>
  </div>
  <div
@@ -804,7 +804,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    >
-      Additional description and informations about copywriting.
+      Additional description and information about copywriting.
    </span>
  </div>
  <div
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -14,19 +14,23 @@ title:

 Display Alert as a banner at top of page.

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

 ReactDOM.render(
  <div>
    <Alert message="Warning text" banner />
    <br />
-    <Alert message="Very long warning text warning text text text text text text text" banner closable />
+    <Alert
+      message="Very long warning text warning text text text text text text text"
+      banner
+      closable
+    />
    <br />
    <Alert showIcon={false} message="Warning text without icon" banner />
    <br />
    <Alert type="error" message="Error text" banner />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -13,14 +13,11 @@ title:

 The simplest usage for short messages.

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

-ReactDOM.render(
-  <Alert message="Success Text" type="success" />,
-  mountNode
-);
-````
+ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
+```

 <style>
 .ant-alert {
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -13,10 +13,10 @@ title:

 To show close button.

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

-const onClose = (e) => {
+const onClose = e => {
  console.log(e, 'I was closed.');
 };

@@ -36,6 +36,6 @@ ReactDOM.render(
      onClose={onClose}
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@@ -13,11 +13,8 @@ title:

 Replace the default icon with customized text.

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

-ReactDOM.render(
-  <Alert message="Info Text" type="info" closeText="Close Now" />,
-  mountNode
-);
-````
+ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
+```
--- a/components/alert/demo/custom-icon.md
+++ b/components/alert/demo/custom-icon.md
@@ -12,9 +12,9 @@ title:

 ## en-US

-Decent icon make information more clear and more friendly.
+A relevant icon makes information clearer and more friendly.

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

 const icon = <Icon type="smile" />;
@@ -55,6 +55,6 @@ ReactDOM.render(
      showIcon
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -13,7 +13,7 @@ title:

 Additional description for alert message.

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

 ReactDOM.render(
@@ -39,6 +39,6 @@ ReactDOM.render(
      type="error"
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -11,9 +11,9 @@ title:

 ## en-US

-Decent icon make information more clear and more friendly.
+A relevant icon will make information clearer and more friendly.

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

 ReactDOM.render(
@@ -24,13 +24,13 @@ ReactDOM.render(
    <Alert message="Error" type="error" showIcon />
    <Alert
      message="Success Tips"
-      description="Detailed description and advices about successful copywriting."
+      description="Detailed description and advice about successful copywriting."
      type="success"
      showIcon
    />
    <Alert
      message="Informational Notes"
-      description="Additional description and informations about copywriting."
+      description="Additional description and information about copywriting."
      type="info"
      showIcon
    />
@@ -47,6 +47,6 @@ ReactDOM.render(
      showIcon
    />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/demo/smooth-closed.md
+++ b/components/alert/demo/smooth-closed.md
@@ -11,41 +11,36 @@ title:

 ## en-US

-Smoothly and unaffectedly unmount Alert.
+Smoothly unmount Alert upon close.

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

 class App extends React.Component {
  state = {
    visible: true,
-  }
+  };

  handleClose = () => {
    this.setState({ visible: false });
-  }
+  };

  render() {
    return (
      <div>
-        {
-          this.state.visible ? (
-            <Alert
-              message="Alert Message Text"
-              type="success"
-              closable
-              afterClose={this.handleClose}
-            />
-          ) : null
-        }
+        {this.state.visible ? (
+          <Alert
+            message="Alert Message Text"
+            type="success"
+            closable
+            afterClose={this.handleClose}
+          />
+        ) : null}
        <p>placeholder text here</p>
      </div>
    );
  }
 }

-ReactDOM.render(
-  <App />,
-  mountNode
-);
-````
+ReactDOM.render(<App />, mountNode);
+```
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -13,7 +13,7 @@ title:

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

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

 ReactDOM.render(
@@ -23,6 +23,6 @@ ReactDOM.render(
    <Alert message="Warning Text" type="warning" />
    <Alert message="Error Text" type="error" />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -14,7 +14,7 @@ Alert component for feedback.
 ## API

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | afterClose | Called when close animation is finished | () => void | - |
 | banner | Whether to show as banner | boolean | false |
 | closable | Whether Alert can be closed | boolean | - |
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@alert-prefix-cls: ~'@{ant-prefix}-alert';
@@ -10,6 +10,7 @@

 .@{alert-prefix-cls} {
  .reset-component;
+
  position: relative;
  padding: 8px 15px 8px 37px;
  border-radius: @border-radius-base;
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -27,7 +27,7 @@ ReactDOM.render(
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>,
-  mountNode
+  mountNode,
 );
 ```

--- a/components/anchor/demo/onClick.md
+++ b/components/anchor/demo/onClick.md
@@ -32,6 +32,6 @@ ReactDOM.render(
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>,
-  mountNode
+  mountNode,
 );
 ```
--- a/components/anchor/demo/static.md
+++ b/components/anchor/demo/static.md
@@ -27,6 +27,6 @@ ReactDOM.render(
      <Link href="#Link-Props" title="Link Props" />
    </Link>
  </Anchor>,
-  mountNode
+  mountNode,
 );
 ```
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -16,7 +16,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 ### Anchor Props

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | affix | Fixed mode of Anchor | boolean | true |
 | bounds | Bounding distance of anchor area | number | 5(px) |
 | getContainer | Scrolling container | () => HTMLElement | () => window |
@@ -27,7 +27,7 @@ For displaying anchor hyperlinks on page and jumping between them.

 ### Link Props

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| href | target of hyperlink | string |  |
-| title | content of  hyperlink | string\|ReactNode |  |
+| Property | Description          | Type              | Default |
+| -------- | -------------------- | ----------------- | ------- |
+| href     | target of hyperlink  | string            |         |
+| title    | content of hyperlink | string\|ReactNode |         |
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -28,7 +28,7 @@ title: Anchor

 ### Link Props

-| 成员 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| href | 锚点链接 | string |  |
-| title | 文字内容 | string\|ReactNode |  |
+| 成员  | 说明     | 类型              | 默认值 |
+| ----- | -------- | ----------------- | ------ |
+| href  | 锚点链接 | string            |        |
+| title | 文字内容 | string\|ReactNode |        |
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@@ -1,10 +1,11 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@anchor-border-width: 2px;

 .@{ant-prefix}-anchor {
  .reset-component;
+
  position: relative;
  padding-left: @anchor-border-width;

--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@@ -13,7 +13,7 @@ title:

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

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

 function onSelect(value) {
@@ -23,17 +23,13 @@ function onSelect(value) {
 class Complete extends React.Component {
  state = {
    dataSource: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    this.setState({
-      dataSource: !value ? [] : [
-        value,
-        value + value,
-        value + value + value,
-      ],
+      dataSource: !value ? [] : [value, value + value, value + value + value],
    });
-  }
+  };

  render() {
    const { dataSource } = this.state;
@@ -50,4 +46,4 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -11,40 +11,51 @@ title:

 ## en-US

-Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
-Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.

-````jsx
+```jsx
 import { Icon, Input, AutoComplete } from 'antd';

 const Option = AutoComplete.Option;
 const OptGroup = AutoComplete.OptGroup;

-const dataSource = [{
-  title: '话题',
-  children: [{
-    title: 'AntDesign',
-    count: 10000,
-  }, {
-    title: 'AntDesign UI',
-    count: 10600,
-  }],
-}, {
-  title: '问题',
-  children: [{
-    title: 'AntDesign UI 有多好',
-    count: 60100,
-  }, {
-    title: 'AntDesign 是啥',
-    count: 30010,
-  }],
-}, {
-  title: '文章',
-  children: [{
-    title: 'AntDesign 是一个设计语言',
-    count: 100000,
-  }],
-}];
+const dataSource = [
+  {
+    title: '话题',
+    children: [
+      {
+        title: 'AntDesign',
+        count: 10000,
+      },
+      {
+        title: 'AntDesign UI',
+        count: 10600,
+      },
+    ],
+  },
+  {
+    title: '问题',
+    children: [
+      {
+        title: 'AntDesign UI 有多好',
+        count: 60100,
+      },
+      {
+        title: 'AntDesign 是啥',
+        count: 30010,
+      },
+    ],
+  },
+  {
+    title: '文章',
+    children: [
+      {
+        title: 'AntDesign 是一个设计语言',
+        count: 100000,
+      },
+    ],
+  },
+];

 function renderTitle(title) {
  return (
@@ -55,35 +66,31 @@ function renderTitle(title) {
        href="https://www.google.com/search?q=antd"
        target="_blank"
        rel="noopener noreferrer"
-      >更多
+      >
+        更多
      </a>
    </span>
  );
 }

-const options = dataSource.map(group => (
-  <OptGroup
-    key={group.title}
-    label={renderTitle(group.title)}
-  >
-    {group.children.map(opt => (
-      <Option key={opt.title} value={opt.title}>
-        {opt.title}
-        <span className="certain-search-item-count">{opt.count} 人 关注</span>
-      </Option>
-    ))}
-  </OptGroup>
-)).concat([
-  <Option disabled key="all" className="show-all">
-    <a
-      href="https://www.google.com/search?q=antd"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      查看所有结果
-    </a>
-  </Option>,
-]);
+const options = dataSource
+  .map(group => (
+    <OptGroup key={group.title} label={renderTitle(group.title)}>
+      {group.children.map(opt => (
+        <Option key={opt.title} value={opt.title}>
+          {opt.title}
+          <span className="certain-search-item-count">{opt.count} 人 关注</span>
+        </Option>
+      ))}
+    </OptGroup>
+  ))
+  .concat([
+    <Option disabled key="all" className="show-all">
+      <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
+        查看所有结果
+      </a>
+    </Option>,
+  ]);

 function Complete() {
  return (
@@ -106,9 +113,9 @@ function Complete() {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```

-````css
+```css
 .certain-category-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
  right: 12px;
 }
@@ -119,7 +126,7 @@ ReactDOM.render(<Complete />, mountNode);
 }

 .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
-  border-bottom: 1px solid #F6F6F6;
+  border-bottom: 1px solid #f6f6f6;
 }

 .certain-category-search-dropdown .ant-select-dropdown-menu-item {
@@ -136,9 +143,9 @@ ReactDOM.render(<Complete />, mountNode);
 }

 .certain-search-item-count {
- position: absolute;
- color: #999;
- right: 16px;
+  position: absolute;
+  color: #999;
+  right: 16px;
 }

 .certain-category-search.ant-select-focused .certain-category-icon {
@@ -146,8 +153,8 @@ ReactDOM.render(<Complete />, mountNode);
 }

 .certain-category-icon {
-  color: #6E6E6E;
+  color: #6e6e6e;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  font-size: 16px;
 }
-````
+```
--- a/components/auto-complete/demo/custom.md
+++ b/components/auto-complete/demo/custom.md
@@ -13,7 +13,7 @@ title:

 Customize Input Component

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

 const { TextArea } = Input;
@@ -25,21 +25,17 @@ function onSelect(value) {
 class Complete extends React.Component {
  state = {
    dataSource: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    this.setState({
-      dataSource: !value ? [] : [
-        value,
-        value + value,
-        value + value + value,
-      ],
+      dataSource: !value ? [] : [value, value + value, value + value + value],
    });
-  }
+  };

-  handleKeyPress = (ev) => {
+  handleKeyPress = ev => {
    console.log('handleKeyPress', ev);
-  }
+  };

  render() {
    const { dataSource } = this.state;
@@ -62,4 +58,4 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@@ -13,7 +13,7 @@ title:

 A non-case-sensitive AutoComplete

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

 const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
@@ -24,10 +24,12 @@ function Complete() {
      style={{ width: 200 }}
      dataSource={dataSource}
      placeholder="try to type `b`"
-      filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
+      filterOption={(inputValue, option) =>
+        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+      }
    />
  );
 }

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

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

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

 const Option = AutoComplete.Option;
@@ -21,9 +21,9 @@ const Option = AutoComplete.Option;
 class Complete extends React.Component {
  state = {
    result: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    let result;
    if (!value || value.indexOf('@') >= 0) {
      result = [];
@@ -31,17 +31,13 @@ class Complete extends React.Component {
      result = ['gmail.com', '163.com', 'qq.com'].map(domain => `${value}@${domain}`);
    }
    this.setState({ result });
-  }
+  };

  render() {
    const { result } = this.state;
    const children = result.map(email => <Option key={email}>{email}</Option>);
    return (
-      <AutoComplete
-        style={{ width: 200 }}
-        onSearch={this.handleSearch}
-        placeholder="input here"
-      >
+      <AutoComplete style={{ width: 200 }} onSearch={this.handleSearch} placeholder="input here">
        {children}
      </AutoComplete>
    );
@@ -49,4 +45,4 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -11,13 +11,10 @@ title:

 ## en-US

-Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
-Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.

-````jsx
-import {
-  Icon, Button, Input, AutoComplete,
-} from 'antd';
+```jsx
+import { Icon, Button, Input, AutoComplete } from 'antd';

 const Option = AutoComplete.Option;

@@ -30,7 +27,9 @@ function getRandomInt(max, min = 0) {
 }

 function searchResult(query) {
-  return (new Array(getRandomInt(5))).join('.').split('.')
+  return new Array(getRandomInt(5))
+    .join('.')
+    .split('.')
    .map((item, idx) => ({
      query,
      category: `${query}${idx}`,
@@ -41,16 +40,20 @@ function searchResult(query) {
 function renderOption(item) {
  return (
    <Option key={item.category} text={item.category}>
-      {item.query} 在
-      <a
-        href={`https://s.taobao.com/search?q=${item.query}`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {item.category}
-      </a>
-      区块中
-      <span className="global-search-item-count">约 {item.count} 个结果</span>
+      <div className="global-search-item">
+        <span className="global-search-item-desc">
+          {item.query} 在
+          <a
+            href={`https://s.taobao.com/search?q=${item.query}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {item.category}
+          </a>
+          区块中
+        </span>
+        <span className="global-search-item-count">约 {item.count} 个结果</span>
+      </div>
    </Option>
  );
 }
@@ -58,13 +61,13 @@ function renderOption(item) {
 class Complete extends React.Component {
  state = {
    dataSource: [],
-  }
+  };

-  handleSearch = (value) => {
+  handleSearch = value => {
    this.setState({
      dataSource: value ? searchResult(value) : [],
    });
-  }
+  };

  render() {
    const { dataSource } = this.state;
@@ -81,11 +84,11 @@ class Complete extends React.Component {
          optionLabelProp="text"
        >
          <Input
-            suffix={(
+            suffix={
              <Button className="search-btn" size="large" type="primary">
                <Icon type="search" />
              </Button>
-            )}
+            }
          />
        </AutoComplete>
      </div>
@@ -94,9 +97,9 @@ class Complete extends React.Component {
 }

 ReactDOM.render(<Complete />, mountNode);
-````
+```

-````css
+```css
 .global-search-wrapper {
  padding-right: 50px;
 }
@@ -122,8 +125,17 @@ ReactDOM.render(<Complete />, mountNode);
  border-bottom-left-radius: 0;
 }

-.global-search-item-count {
-  position: absolute;
-  right: 16px;
+.global-search-item {
+  display: flex;
 }
-````
+
+.global-search-item-desc {
+  flex: auto;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.global-search-item-count {
+  flex: none;
+}
+```
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -15,16 +15,16 @@ When there is a need for autocomplete functionality.

 ```jsx
 const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />
+<AutoComplete dataSource={dataSource} />;
 ```

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |
 | autoFocus | get focus when component mounted | boolean | false |
 | backfill | backfill selected item the input when using keyboard | boolean | false |
 | children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
-| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> /  Array&lt;React.ReactElement<OptionProps>> | - |
+| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - |
 | dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |
 | defaultValue | Initial selected option. | string\|string\[]\| - |
@@ -44,7 +44,7 @@ const dataSource = ['12345', '23456', '34567'];

 ## Methods

-| Name | Description |
-| ---- | ----------- |
-| blur() | remove focus |
-| focus() | get focus |
+| Name    | Description  |
+| ------- | ------------ |
+| blur()  | remove focus |
+| focus() | get focus    |
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -16,7 +16,7 @@ title: AutoComplete

 ```jsx
 const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />
+<AutoComplete dataSource={dataSource} />;
 ```

 | 参数 | 说明 | 类型 | 默认值 |
@@ -45,7 +45,7 @@ const dataSource = ['12345', '23456', '34567'];

 ## 方法

-| 名称 | 描述 |
-| --- | --- |
-| blur() | 移除焦点 |
+| 名称    | 描述     |
+| ------- | -------- |
+| blur()  | 移除焦点 |
 | focus() | 获取焦点 |
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

@@ -54,6 +54,7 @@
      }
      &[disabled] {
        .disabled;
+
        background-color: transparent;
      }
    }
@@ -81,3 +82,11 @@
    }
  }
 }
+
+// https://github.com/ant-design/ant-design/issues/14156
+.@{input-prefix-cls}-group > .@{autocomplete-prefix-cls} {
+  .@{select-prefix-cls}-search__field.@{input-prefix-cls}-affix-wrapper {
+    display: inline;
+    float: none;
+  }
+}
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@@ -11,20 +11,24 @@ title:

 ## en-US

-Usually used for messages remind.
+Usually used for reminders and notifications.

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

 ReactDOM.render(
  <div>
    <span style={{ marginRight: 24 }}>
-      <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
+      <Badge count={1}>
+        <Avatar shape="square" icon="user" />
+      </Badge>
    </span>
    <span>
-      <Badge dot><Avatar shape="square" icon="user" /></Badge>
+      <Badge dot>
+        <Avatar shape="square" icon="user" />
+      </Badge>
    </span>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@@ -13,7 +13,7 @@ title:

 Three sizes and two shapes are available.

-````jsx
+```jsx
 import { Avatar } from 'antd';

 ReactDOM.render(
@@ -31,9 +31,9 @@ ReactDOM.render(
      <Avatar shape="square" size="small" icon="user" />
    </div>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 #components-avatar-demo-basic .ant-avatar {
--- a/components/avatar/demo/dynamic.md
+++ b/components/avatar/demo/dynamic.md
@@ -13,7 +13,7 @@ title:

 For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar.

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

 const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
@@ -34,7 +34,7 @@ class Autoset extends React.Component {
      user: index < UserList.length - 1 ? UserList[index + 1] : UserList[0],
      color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
    });
-  }
+  };

  render() {
    return (
@@ -42,7 +42,11 @@ class Autoset extends React.Component {
        <Avatar style={{ backgroundColor: this.state.color, verticalAlign: 'middle' }} size="large">
          {this.state.user}
        </Avatar>
-        <Button size="small" style={{ marginLeft: 16, verticalAlign: 'middle' }} onClick={this.changeUser}>
+        <Button
+          size="small"
+          style={{ marginLeft: 16, verticalAlign: 'middle' }}
+          onClick={this.changeUser}
+        >
          Change
        </Button>
      </div>
@@ -51,4 +55,4 @@ class Autoset extends React.Component {
 }

 ReactDOM.render(<Autoset />, mountNode);
-````
+```
--- a/components/avatar/demo/toggle-debug.md
+++ b/components/avatar/demo/toggle-debug.md
@@ -14,7 +14,7 @@ debug: true

 Text inside Avatar should be set a proper font size when toggle it's visibility.

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

 class App extends React.Component {
@@ -28,7 +28,7 @@ class App extends React.Component {
    this.setState({
      hide: !this.state.hide,
    });
-  }
+  };

  toggleSize = () => {
    const sizes = ['small', 'default', 'large'];
@@ -39,13 +39,13 @@ class App extends React.Component {
    this.setState({
      size: sizes[current],
    });
-  }
+  };

  changeScale = () => {
    this.setState({
      scale: this.state.scale === 1 ? 2 : 1,
    });
-  }
+  };

  render() {
    const { hide, size, scale } = this.state;
@@ -60,7 +60,11 @@ class App extends React.Component {
          <Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>
            Avatar
          </Avatar>
-          <Avatar size={size} src="invalid" style={{ background: '#00a2ae', display: hide ? 'none' : '' }}>
+          <Avatar
+            size={size}
+            src="invalid"
+            style={{ background: '#00a2ae', display: hide ? 'none' : '' }}
+          >
            Invalid
          </Avatar>
          <div style={{ display: hide ? 'none' : '' }}>
@@ -78,3 +82,4 @@ class App extends React.Component {
 }

 ReactDOM.render(<App />, mountNode);
+```
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@@ -11,9 +11,9 @@ title:

 ## en-US

-Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
+Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

-````jsx
+```jsx
 import { Avatar } from 'antd';

 ReactDOM.render(
@@ -25,9 +25,9 @@ ReactDOM.render(
    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
    <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 #components-avatar-demo-type .ant-avatar {
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -9,7 +9,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 ## API

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
 | shape | the shape of avatar | `circle` \| `square` | `circle` |
 | size | the size of the avatar | number \| string: `large` `small` `default` | `default` |
--- a/components/avatar/style/index.less
+++ b/components/avatar/style/index.less
@@ -1,10 +1,11 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@avatar-prefix-cls: ~'@{ant-prefix}-avatar';

 .@{avatar-prefix-cls} {
  .reset-component;
+
  position: relative;
  display: inline-block;
  overflow: hidden;
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@@ -13,7 +13,7 @@ title:

 The most basic usage.

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

 ReactDOM.render(
@@ -23,6 +23,6 @@ ReactDOM.render(
    <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
    button.
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/back-top/demo/custom.md
+++ b/components/back-top/demo/custom.md
@@ -13,8 +13,7 @@ title:

 You can customize the style of the button, just note the size limit: no more than `40px * 40px`.

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

 ReactDOM.render(
@@ -26,11 +25,11 @@ ReactDOM.render(
    <strong style={{ color: '#1088e9' }}> blue </strong>
    button.
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 #components-back-top-demo-custom .ant-back-top {
  bottom: 100px;
 }
@@ -44,4 +43,4 @@ ReactDOM.render(
  text-align: center;
  font-size: 20px;
 }
-````
+```
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -18,7 +18,7 @@ title: BackTop
 > If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.

 | Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| --- | --- | --- | --- |
 | target | specifies the scrollable area dom node | () => HTMLElement | () => window |
 | visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400 |
 | onClick | a callback function, which can be executed when you click the button | Function | - |
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@@ -1,10 +1,11 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@backtop-prefix-cls: ~'@{ant-prefix}-back-top';

 .@{backtop-prefix-cls} {
  .reset-component;
+
  position: fixed;
  right: 100px;
  bottom: 50px;
--- a/components/badge/tests/snapshots/index.test.js.snap
+++ b/components/badge/tests/snapshots/index.test.js.snap
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -13,7 +13,7 @@ title:

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

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

 ReactDOM.render(
@@ -28,9 +28,9 @@ ReactDOM.render(
      <a href="#" className="head-example" />
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 .ant-badge:not(.ant-badge-not-a-wrapper) {
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -13,10 +13,8 @@ title:

 The count will be animated as it changes.

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

 const ButtonGroup = Button.Group;

@@ -24,12 +22,12 @@ class Demo extends React.Component {
  state = {
    count: 5,
    show: true,
-  }
+  };

  increase = () => {
    const count = this.state.count + 1;
    this.setState({ count });
-  }
+  };

  decline = () => {
    let count = this.state.count - 1;
@@ -37,11 +35,11 @@ class Demo extends React.Component {
      count = 0;
    }
    this.setState({ count });
-  }
+  };

-  onChange = (show) => {
+  onChange = show => {
    this.setState({ show });
-  }
+  };

  render() {
    return (
@@ -71,4 +69,4 @@ class Demo extends React.Component {
 }

 ReactDOM.render(<Demo />, mountNode);
-````
+```
--- a/components/badge/demo/colorful.md
+++ b/components/badge/demo/colorful.md
@@ -11,19 +11,32 @@ title:

 ## en-US

-New feature after 3.16.0. We preset a series of colorful Badge style for different situation usage.
-And you can always set it to a hex color string for custom color.
+New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.

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

-const colors = ['pink', 'red', 'yellow', 'orange',	'cyan',	'green',	'blue',	'purple',	'geekblue',	'magenta', 'volcano', 'gold', 'lime'];
+const colors = [
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime',
+];

 ReactDOM.render(
  <div>
    <h4 style={{ marginBottom: 16 }}>Presets:</h4>
    <div>
-      {colors.map((color) => (
+      {colors.map(color => (
        <div key={color}>
          <Badge color={color} text={color} />
        </div>
@@ -40,12 +53,12 @@ ReactDOM.render(
      <Badge color="#108ee9" text="#108ee9" />
    </div>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 .ant-tag {
  margin-bottom: 8px;
 }
-````
+```
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -11,10 +11,9 @@ title:

 ## en-US

-This will simply display a red badge, without a specific count.
-If count equals 0, it won't display the dot.
+This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.

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

 ReactDOM.render(
@@ -29,9 +28,9 @@ ReactDOM.render(
      <a href="#">Link something</a>
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

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

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

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

 ReactDOM.render(
@@ -22,6 +22,6 @@ ReactDOM.render(
      <span className="head-example" />
    </Badge>
  </a>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -15,18 +15,21 @@ title:

 Used in standalone when children is empty.

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

 ReactDOM.render(
  <div>
    <Badge count={25} />
-    <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
+    <Badge
+      count={4}
+      style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
+    />
    <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 .ant-badge-not-a-wrapper:not(.ant-badge-status) {
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -13,7 +13,7 @@ title:

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

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

 ReactDOM.render(
@@ -31,6 +31,6 @@ ReactDOM.render(
      <a href="#" className="head-example" />
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -13,7 +13,7 @@ title:

 Standalone badge with status.

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

 ReactDOM.render(
@@ -34,6 +34,6 @@ ReactDOM.render(
    <br />
    <Badge status="warning" text="Warning" />
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/badge/demo/title.md
+++ b/components/badge/demo/title.md
@@ -14,7 +14,7 @@ debug: true

 The badge will display `title` when hovered over, instead of `count`.

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

 ReactDOM.render(
@@ -23,9 +23,9 @@ ReactDOM.render(
      <a href="#" className="head-example" />
    </Badge>
  </div>,
-  mountNode
+  mountNode,
 );
-````
+```

 <style>
 .ant-badge:not(.ant-badge-not-a-wrapper) {
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -23,13 +23,13 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 ```

 | Property | Description | Type | Default | Version |
-| -------- | ----------- | ---- | ------- | ------- |
+| --- | --- | --- | --- | --- |
 | color | Customize Badge dot color | string | - | 3.16.0 |
-| count | Number to show in badge | ReactNode |  | |
-| dot | Whether to display a red dot instead of `count` | boolean | `false` | |
-| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - | |
-| overflowCount | Max count to show | number | 99 | |
-| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
-| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
-| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
-| title | Text to show when hovering over the badge | string | `count` | |
+| count | Number to show in badge | ReactNode |  |  |
+| dot | Whether to display a red dot instead of `count` | boolean | `false` |  |
+| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |  |
+| overflowCount | Max count to show | number | 99 |  |
+| showZero | Whether to show badge when `count` is zero | boolean | `false` |  |
+| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |  |
+| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |  |
+| title | Text to show when hovering over the badge | string | `count` |  |
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -26,11 +26,11 @@ title: Badge
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | color | 自定义小圆点的颜色 | string | - | 3.16.0 |
-| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  | |
-| dot | 不展示数字，只有一个小红点 | boolean | false | |
-| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - | |
-| overflowCount | 展示封顶的数字值 | number | 99 | |
-| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
-| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
-| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | |
-| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
+| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  |  |
+| dot | 不展示数字，只有一个小红点 | boolean | false |  |
+| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - |  |
+| overflowCount | 展示封顶的数字值 | number | 99 |  |
+| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
+| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |  |
+| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |  |
+| title | 设置鼠标放在状态点上时显示的文字 | string | `count` |  |
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@badge-prefix-cls: ~'@{ant-prefix}-badge';
@@ -6,6 +6,7 @@

 .@{badge-prefix-cls} {
  .reset-component;
+
  position: relative;
  display: inline-block;
  color: unset;
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -3,12 +3,15 @@ import * as PropTypes from 'prop-types';
 import { cloneElement } from 'react';
 import classNames from 'classnames';
 import BreadcrumbItem from './BreadcrumbItem';
+import Menu from '../menu';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
+import { Omit } from '../_util/type';

 export interface Route {
  path: string;
  breadcrumbName: string;
+  children?: Omit<Route, 'children'>[];
 }

 export interface BreadcrumbProps {
@@ -69,7 +72,44 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
        'see: https://u.ant.design/item-render.',
    );
  }
+  genForRoutes = ({
+    routes = [],
+    params = {},
+    separator,
+    itemRender = defaultItemRender,
+  }: 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]);
+      });

+      if (path) {
+        paths.push(path);
+      }
+      // generated overlay by route.children
+      let overlay = null;
+      if (route.children && route.children.length) {
+        overlay = (
+          <Menu>
+            {route.children.map(child => (
+              <Menu.Item key={child.breadcrumbName || child.path}>
+                {itemRender(child, params, routes, paths)}
+              </Menu.Item>
+            ))}
+          </Menu>
+        );
+      }
+
+      return (
+        <BreadcrumbItem overlay={overlay} separator={separator} key={route.breadcrumbName || path}>
+          {itemRender(route, params, routes, paths)}
+        </BreadcrumbItem>
+      );
+    });
+  };
  renderBreadcrumb = ({ getPrefixCls }: ConfigConsumerProps) => {
    let crumbs;
    const {
@@ -78,28 +118,12 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
      style,
      className,
      routes,
-      params = {},
      children,
-      itemRender = defaultItemRender,
    } = this.props;
    const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
    if (routes && routes.length > 0) {
-      const paths: string[] = [];
-      crumbs = routes.map(route => {
-        route.path = route.path || '';
-        let path: string = route.path.replace(/^\//, '');
-        Object.keys(params).forEach(key => {
-          path = path.replace(`:${key}`, params[key]);
-        });
-        if (path) {
-          paths.push(path);
-        }
-        return (
-          <BreadcrumbItem separator={separator} key={route.breadcrumbName || path}>
-            {itemRender(route, params, routes, paths)}
-          </BreadcrumbItem>
-        );
-      });
+      // generated by route
+      crumbs = this.genForRoutes(this.props);
    } else if (children) {
      crumbs = React.Children.map(children, (element: any, index) => {
        if (!element) {
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import DropDown, { DropDownProps } from '../dropdown/dropdown';
+import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';

 export interface BreadcrumbItemProps {
  prefixCls?: string;
  separator?: React.ReactNode;
  href?: string;
+  overlay?: DropDownProps['overlay'];
  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
 }

@@ -23,7 +26,13 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
  };

  renderBreadcrumbItem = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, separator, children, ...restProps } = this.props;
+    const {
+      prefixCls: customizePrefixCls,
+      separator,
+      children,
+      overlay,
+      ...restProps
+    } = this.props;
    const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
    let link;
    if ('href' in this.props) {
@@ -39,6 +48,9 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
        </span>
      );
    }
+
+    // wrap to dropDown
+    link = this.renderBreadcrumbNode(link, prefixCls);
    if (children) {
      return (
        <span>
@@ -50,6 +62,24 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
    return null;
  };

+  /**
+   * if overlay is have
+   * Wrap a DropDown
+   */
+  renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
+    const { overlay } = this.props;
+    if (overlay) {
+      return (
+        <DropDown overlay={overlay} placement="bottomCenter">
+          <a className={`${prefixCls}-overlay-link`}>
+            {breadcrumbItem}
+            <Icon type="down" />
+          </a>
+        </DropDown>
+      );
+    }
+    return breadcrumbItem;
+  };
  render() {
    return <ConfigConsumer>{this.renderBreadcrumbItem}</ConfigConsumer>;
  }
--- a/components/breadcrumb/tests/Breadcrumb.test.js
+++ b/components/breadcrumb/tests/Breadcrumb.test.js
@@ -51,4 +51,37 @@ describe('Breadcrumb', () => {
    );
    expect(wrapper).toMatchSnapshot();
  });
+
+  it('should render a menu', () => {
+    const routes = [
+      {
+        path: 'index',
+        breadcrumbName: 'home',
+      },
+      {
+        path: 'first',
+        breadcrumbName: 'first',
+        children: [
+          {
+            path: '/general',
+            breadcrumbName: 'General',
+          },
+          {
+            path: '/layout',
+            breadcrumbName: 'Layout',
+          },
+          {
+            path: '/navigation',
+            breadcrumbName: 'Navigation',
+          },
+        ],
+      },
+      {
+        path: 'second',
+        breadcrumbName: 'second',
+      },
+    ];
+    const wrapper = render(<Breadcrumb routes={routes} />);
+    expect(wrapper).toMatchSnapshot();
+  });
 });
--- a/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
@@ -49,3 +49,78 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
  </span>
 </div>
 `;
+
+exports[`Breadcrumb should render a menu 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      <a
+        href="#/index"
+      >
+        home
+      </a>
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <a
+      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"
+    >
+      <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
+      class="ant-breadcrumb-link"
+    >
+      <span>
+        second
+      </span>
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;
--- a/components/breadcrumb/tests/snapshots/demo.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/demo.test.js.snap
@@ -63,6 +63,93 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
 </div>
 `;

+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>
+    </span>
+    <span>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        <a
+          href=""
+        >
+          Component
+        </a>
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+    <span>
+      <a
+        class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+      >
+        <span
+          class="ant-breadcrumb-link"
+        />
+      </a>
+      <a
+        href=""
+      >
+        General
+      </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
+        class="ant-breadcrumb-link"
+      >
+        Button
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/breadcrumb/demo/router.md correctly 1`] = `
 <div
  class="demo"
--- a/components/breadcrumb/tests/snapshots/router.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/router.test.js.snap
@@ -75,101 +75,95 @@ exports[`react router react router 3 1`] = `
  }
  separator="/"
 >
-  <Consumer>
-    <div
-      className="ant-breadcrumb"
+  <div
+    className="ant-breadcrumb"
+  >
+    <BreadcrumbItem
+      key="Home"
+      overlay={null}
+      separator="/"
    >
-      <BreadcrumbItem
-        key="Home"
-        separator="/"
-      >
-        <Consumer>
+      <span>
+        <span
+          className="ant-breadcrumb-link"
+        >
+          <a
+            href="#/"
+          >
+            Home
+          </a>
+        </span>
+        <span
+          className="ant-breadcrumb-separator"
+        >
+          /
+        </span>
+      </span>
+    </BreadcrumbItem>
+    <BreadcrumbItem
+      key="Application List"
+      overlay={null}
+      separator="/"
+    >
+      <span>
+        <span
+          className="ant-breadcrumb-link"
+        >
+          <a
+            href="#/apps"
+          >
+            Application List
+          </a>
+        </span>
+        <span
+          className="ant-breadcrumb-separator"
+        >
+          /
+        </span>
+      </span>
+    </BreadcrumbItem>
+    <BreadcrumbItem
+      key="Application:id"
+      overlay={null}
+      separator="/"
+    >
+      <span>
+        <span
+          className="ant-breadcrumb-link"
+        >
+          <a
+            href="#/apps/1"
+          >
+            Application1
+          </a>
+        </span>
+        <span
+          className="ant-breadcrumb-separator"
+        >
+          /
+        </span>
+      </span>
+    </BreadcrumbItem>
+    <BreadcrumbItem
+      key="Detail"
+      overlay={null}
+      separator="/"
+    >
+      <span>
+        <span
+          className="ant-breadcrumb-link"
+        >
          <span>
-            <span
-              className="ant-breadcrumb-link"
-            >
-              <a
-                href="#/"
-              >
-                Home
-              </a>
-            </span>
-            <span
-              className="ant-breadcrumb-separator"
-            >
-              /
-            </span>
+            Detail
          </span>
-        </Consumer>
-      </BreadcrumbItem>
-      <BreadcrumbItem
-        key="Application List"
-        separator="/"
-      >
-        <Consumer>
-          <span>
-            <span
-              className="ant-breadcrumb-link"
-            >
-              <a
-                href="#/apps"
-              >
-                Application List
-              </a>
-            </span>
-            <span
-              className="ant-breadcrumb-separator"
-            >
-              /
-            </span>
-          </span>
-        </Consumer>
-      </BreadcrumbItem>
-      <BreadcrumbItem
-        key="Application:id"
-        separator="/"
-      >
-        <Consumer>
-          <span>
-            <span
-              className="ant-breadcrumb-link"
-            >
-              <a
-                href="#/apps/1"
-              >
-                Application1
-              </a>
-            </span>
-            <span
-              className="ant-breadcrumb-separator"
-            >
-              /
-            </span>
-          </span>
-        </Consumer>
-      </BreadcrumbItem>
-      <BreadcrumbItem
-        key="Detail"
-        separator="/"
-      >
-        <Consumer>
-          <span>
-            <span
-              className="ant-breadcrumb-link"
-            >
-              <span>
-                Detail
-              </span>
-            </span>
-            <span
-              className="ant-breadcrumb-separator"
-            >
-              /
-            </span>
-          </span>
-        </Consumer>
-      </BreadcrumbItem>
-    </div>
-  </Consumer>
+        </span>
+        <span
+          className="ant-breadcrumb-separator"
+        >
+          /
+        </span>
+      </span>
+    </BreadcrumbItem>
+  </div>
 </Breadcrumb>
 `;
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -13,16 +13,20 @@ title:

 The simplest use

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

 ReactDOM.render(
  <Breadcrumb>
    <Breadcrumb.Item>Home</Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
-    <Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Application Center</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Application List</a>
+    </Breadcrumb.Item>
    <Breadcrumb.Item>An Application</Breadcrumb.Item>
  </Breadcrumb>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/breadcrumb/demo/overlay.md
+++ b/components/breadcrumb/demo/overlay.md
@@ -0,0 +1,54 @@
+---
+order: 5
+title:
+  zh-CN: 带下拉菜单的面包屑
+  en-US: Bread crumbs with drop down menu
+---
+
+## zh-CN
+
+面包屑支持下拉菜单。
+
+## en-US
+
+Breadcrumbs support drop down menu.
+
+```jsx
+import { Breadcrumb, Menu } from 'antd';
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
+        General
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
+        Layout
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
+        Navigation
+      </a>
+    </Menu.Item>
+  </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>,
+  mountNode,
+);
+```
--- a/components/breadcrumb/demo/router-4.md
+++ b/components/breadcrumb/demo/router-4.md
@@ -15,10 +15,8 @@ title:

 Used together with `react-router@4` or other router.

-````jsx
-import {
-  HashRouter as Router, Route, Switch, Link, withRouter,
-} from 'react-router-dom';
+```jsx
+import { HashRouter as Router, Route, Switch, Link, withRouter } from 'react-router-dom';
 import { Breadcrumb, Alert } from 'antd';

 const Apps = () => (
@@ -39,24 +37,22 @@ const breadcrumbNameMap = {
  '/apps/1/detail': 'Detail',
  '/apps/2/detail': 'Detail',
 };
-const Home = withRouter((props) => {
+const Home = withRouter(props => {
  const { location } = props;
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
-        <Link to={url}>
-          {breadcrumbNameMap[url]}
-        </Link>
+        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
-  const breadcrumbItems = [(
+  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">Home</Link>
-    </Breadcrumb.Item>
-  )].concat(extraBreadcrumbItems);
+    </Breadcrumb.Item>,
+  ].concat(extraBreadcrumbItems);
  return (
    <div className="demo">
      <div className="demo-nav">
@@ -68,9 +64,7 @@ const Home = withRouter((props) => {
        <Route render={() => <span>Home Page</span>} />
      </Switch>
      <Alert style={{ margin: '16px 0' }} message="Click the navigation above to switch:" />
-      <Breadcrumb>
-        {breadcrumbItems}
-      </Breadcrumb>
+      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
    </div>
  );
 });
@@ -79,11 +73,11 @@ ReactDOM.render(
  <Router>
    <Home />
  </Router>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 .demo {
  margin: 16px;
 }
@@ -100,4 +94,4 @@ ReactDOM.render(
 .app-list {
  margin-top: 16px;
 }
-````
+```
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -15,10 +15,8 @@ title:

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

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

 const Apps = () => (
@@ -54,11 +52,11 @@ ReactDOM.render(
      </Route>
    </Route>
  </Router>,
-  mountNode
+  mountNode,
 );
-````
+```

-````css
+```css
 .demo {
  margin: 16px;
 }
@@ -75,4 +73,4 @@ ReactDOM.render(
 .app-list {
  margin-top: 16px;
 }
-````
+```
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -1,6 +1,6 @@
 ---
 order: 4
-title: 
+title:
  zh-CN: 分隔符
  en-US: Configuring the Separator
 ---
@@ -13,7 +13,7 @@ title:

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

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

 ReactDOM.render(
@@ -23,6 +23,6 @@ ReactDOM.render(
    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
    <Breadcrumb.Item>An Application</Breadcrumb.Item>
  </Breadcrumb>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@@ -13,7 +13,7 @@ title:

 The icon should be placed in front of the text.

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

 ReactDOM.render(
@@ -25,10 +25,8 @@ ReactDOM.render(
      <Icon type="user" />
      <span>Application List</span>
    </Breadcrumb.Item>
-    <Breadcrumb.Item>
-      Application
-    </Breadcrumb.Item>
+    <Breadcrumb.Item>Application</Breadcrumb.Item>
  </Breadcrumb>,
-  mountNode
+  mountNode,
 );
-````
+```
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -16,10 +16,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 ## API

 | Property | Description | Type | Optional | Default |
-| -------- | ----------- | ---- | -------- | ------- |
+| --- | --- | --- | --- | --- |
 | itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode |  | - |
 | params | Routing parameters | object |  | - |
-| routes | The routing stack information of router | object\[] |  | - |
+| routes | The routing stack information of router | [routes\[\]](#routes) |  | - |
 | separator | Custom separator | string\|ReactNode |  | `/` |

 ### Use with browserHistory
@@ -29,19 +29,41 @@ The link of Breadcrumb item targets `#` by default, you can use `itemRender` to
 ```jsx
 import { Link } from 'react-router';

-const routes = [{
-  path: 'index',
-  breadcrumbName: 'home'
-}, {
-  path: 'first',
-  breadcrumbName: 'first'
-}, {
-  path: 'second',
-  breadcrumbName: 'second'
-}];
+const routes = [
+  {
+    path: 'index',
+    breadcrumbName: 'home',
+  },
+  {
+    path: 'first',
+    breadcrumbName: 'first',
+    children: [
+      {
+        path: '/general',
+        breadcrumbName: 'General',
+      },
+      {
+        path: '/layout',
+        breadcrumbName: 'Layout',
+      },
+      {
+        path: '/navigation',
+        breadcrumbName: 'Navigation',
+      },
+    ],
+  },
+  {
+    path: 'second',
+    breadcrumbName: 'second',
+  },
+];
 function itemRender(route, params, routes, paths) {
  const last = routes.indexOf(route) === routes.length - 1;
-  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+  return last ? (
+    <span>{route.breadcrumbName}</span>
+  ) : (
+    <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
+  );
 }

 return <Breadcrumb itemRender={itemRender} routes={routes} />;
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -15,12 +15,36 @@ title: Breadcrumb

 ## API

-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- |
-| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode |  | - |
-| params | 路由的参数 | object |  | - |
-| routes | router 的路由栈信息 | object\[] |  | - |
-| separator | 分隔符自定义 | string\|ReactNode |  | '/' |
+### Breadcrumb
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - |
+| params | 路由的参数 | object | - |
+| routes | router 的路由栈信息 | [routes\[\]](#routes) | - |
+| separator | 分隔符自定义 | string\|ReactNode | '/' |
+
+### Breadcrumb.Item
+
+| 参数      | 参数           | 类型                                   | 默认值 |
+| --------- | -------------- | -------------------------------------- | ------ |
+| href      | 链接的目的地   | string                                 | -      |
+| separator | 自定义的分隔符 | string\|ReactNode                      | '/'    |
+| overlay   | 下来菜单的内容 | [Menu](/components/menu) \| () => Menu | -      |
+| onClick   | 单击事件       | (e:MouseEvent)=>void                   | -      |
+
+### routes
+
+```ts
+interface Route {
+  path: string;
+  breadcrumbName: string;
+  children: Array<{
+    path: string;
+    breadcrumbName: string;
+  }>;
+}
+```

 ### 和 browserHistory 配合

@@ -29,20 +53,43 @@ title: Breadcrumb
 ```jsx
 import { Link } from 'react-router';

-const routes = [{
-  path: 'index',
-  breadcrumbName: '首页'
-}, {
-  path: 'first',
-  breadcrumbName: '一级面包屑'
-}, {
-  path: 'second',
-  breadcrumbName: '当前页面'
-}];
+const routes = [
+  {
+    path: 'index',
+    breadcrumbName: 'home',
+  },
+  {
+    path: 'first',
+    breadcrumbName: 'first',
+    children: [
+      {
+        path: '/general',
+        breadcrumbName: 'General',
+      },
+      {
+        path: '/layout',
+        breadcrumbName: 'Layout',
+      },
+      {
+        path: '/navigation',
+        breadcrumbName: 'Navigation',
+      },
+    ],
+  },
+  {
+    path: 'second',
+    breadcrumbName: 'second',
+  },
+];
+
 function itemRender(route, params, routes, paths) {
  const last = routes.indexOf(route) === routes.length - 1;
-  return last ? <span>{route.breadcrumbName}</span> : <Link to={paths.join('/')}>{route.breadcrumbName}</Link>;
+  return last ? (
+    <span>{route.breadcrumbName}</span>
+  ) : (
+    <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
+  );
 }

-return <Breadcrumb itemRender={itemRender} routes={routes}/>;
+return <Breadcrumb itemRender={itemRender} routes={routes} />;
 ```
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@@ -1,10 +1,11 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';

 .@{breadcrumb-prefix-cls} {
  .reset-component;
+
  color: @breadcrumb-base-color;
  font-size: @breadcrumb-font-size;

@@ -38,4 +39,10 @@
      margin-left: 4px;
    }
  }
+
+  &-overlay-link {
+    > .@{iconfont-css-prefix} {
+      margin-left: 4px;
+    }
+  }
 }
--- a/components/breadcrumb/style/index.tsx
+++ b/components/breadcrumb/style/index.tsx
@@ -1,2 +1,5 @@
 import '../../style/index.less';
 import './index.less';
+
+import '../../menu/style';
+import '../../dropdown/style';
--- a/components/button/tests/snapshots/demo.test.js.snap
+++ b/components/button/tests/snapshots/demo.test.js.snap
@@ -34,6 +34,14 @@ exports[`renders ./components/button/demo/basic.md correctly 1`] = `
      Danger
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-link"
+    type="button"
+  >
+    <span>
+      Link
+    </span>
+  </button>
 </div>
 `;

@@ -68,7 +76,15 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
    type="button"
  >
    <span>
-      danger
+      Danger
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-block"
+    type="button"
+  >
+    <span>
+      Link
    </span>
  </button>
 </div>
@@ -332,6 +348,24 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
      Dashed(disabled)
    </span>
  </button>
+  <br />
+  <button
+    class="ant-btn ant-btn-link"
+    type="button"
+  >
+    <span>
+      Link
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-link"
+    disabled=""
+    type="button"
+  >
+    <span>
+      Link(disabled)
+    </span>
+  </button>
  <div
    style="padding:8px 8px 0 8px;background:rgb(190, 200, 200)"
  >
@@ -392,6 +426,14 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
      danger
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-background-ghost"
+    type="button"
+  >
+    <span>
+      link
+    </span>
+  </button>
 </div>
 `;

@@ -606,7 +648,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
 `;

 exports[`renders ./components/button/demo/loading.md correctly 1`] = `
-<span>
+<div>
  <button
    class="ant-btn ant-btn-primary ant-btn-loading"
    type="button"
@@ -746,7 +788,7 @@ exports[`renders ./components/button/demo/loading.md correctly 1`] = `
      </svg>
    </i>
  </button>
-</span>
+</div>
 `;

 exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
@@ -895,6 +937,14 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
      Danger
    </span>
  </button>
+  <button
+    class="ant-btn ant-btn-link ant-btn-lg"
+    type="button"
+  >
+    <span>
+      Link
+    </span>
+  </button>
  <br />
  <button
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
--- a/Show More
+++ b/Show More