meger feature to master (#16421)

* use ul in list * update snapshot * update comment * feat: TreeSelect support `showSearch` in multiple mode (#15933) * update rc-tree-select * typo * update desc & snapshot * update desc & snapshot * check default showSearch * feat: table customizing variable (#15971) * feat: added table selected row color variable * fix: @table-selected-row-color default is inherit * feat: Upload support customize previewFile (#15984) * support preview file * use promise * dealy load * use canvas of render * use domHook of test * update demo * add snapshot * update types * update testcase * feat: form customizing variables (#15954) * fix: added styling form input background-color * feat: added '@form-warning-input-bg' variable * feat: added '@form-error-input-bg' variable * use li wrap with comment * feat: Support append theme less file with less-variable (#16118) * add override * add override support * update doc * feat: dropdown support set right icon * docs: update doc of dropdown component * style: format dropdown-button.md * test: update updateSnapshot * style: format dropdown-button.md * test: update updateSnapshot * test: update updateSnapshot * style: change style of dropdown-button demo * fix: fix document table order * feat: Support SkeletonAvatarProps.size accept number (#16078) (#16128) * chore:update style of demo * feat: Notification functions accept top, bottom and getContainer as arguments * drawer: add afterVisibleChange * rm onVisibleChange * update * feat: 🇭🇷 hr_HR locale (#16258) * Added Croatian locale * fixed lint error * ✅ Add test cases for hr_HR * 📝 update i18n documentation * feat: add `htmlFor` in Form.Item (#16278) * add htmlFor in Form.Item * update doc * feat: Button support `link` type (#16289) close #15892 * feat: Add Timeline.Item.position (#16148) (#16193) * fix: Timeline.pendingDot interface documentation there is a small problem (#16177) * feat: Add Timeline.Item.position (#16148) * doc: add version infomation for Timeline.Item.position * refactor: Update Tree & TreeSelect deps (#16330) * use CSSMotion * update snapshot * feat: Collapse support `expandIconPosition` (#16365) * update doc * support expandIconPosition * update snapshot * feat: Breadcrumb support DropDown (#16315) * breadcrumbs support drop down menu * update doc * add require less * fix test * fix md doc * less code * fix style warning * update snap * add children render test * feat: TreeNode support checkable * feat: add optional to support top and left slick dots (#16186) (#16225) * add optional to support top and left slick dots * update carousel snapshot * Update doc, add placement demo * update carousel placement demo snapshots * rename dots placement to position * update vertical as deprecated * rename dotsPosition to dotPosition * refine code * add warning testcase for vertical * remove unused warning * update expression * Additional test case for dotPosition * refactor: Upgrade `rc-tree-select` to support pure React motion (#16402) * upgrade `rc-tree-select` * update snapshot * 3.17.0 changelog * fix warning * fix review warning
2024-11-24 02:59:58 +08:00 · 2019-05-06 12:04:39 +08:00 · 2019-05-06 12:04:39 +08:00 · 785c132262
commit 785c132262
parent 20ddb40278
181 changed files with 8857 additions and 2292 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -9,12 +9,37 @@ 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.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`
@ -58,7 +83,7 @@ timeline: true
 - 🐞 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 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)
@ -186,10 +211,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)
@ -584,7 +609,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
@ -833,7 +858,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`
@ -899,8 +923,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.
@ -974,7 +997,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`
@ -1079,8 +1101,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)
@ -1103,7 +1124,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)
@ -1124,7 +1145,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`
@ -1197,15 +1217,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

@ -1274,13 +1294,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)
@ -1316,7 +1336,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

@ -1374,7 +1394,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

@ -1392,12 +1412,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`
@ -1406,17 +1427,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)
@ -1506,7 +1527,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`
@ -1522,7 +1542,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

@ -1635,25 +1655,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

@ -1770,7 +1790,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 = {
@ -1787,8 +1809,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.
@ -1799,14 +1822,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.
@ -1835,7 +1861,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,12 +9,37 @@ timeline: true

 #### 发布周期

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

 ---

+## 3.17.0
+
+`2019-05-05`
+
+- 🎉 Breadcrumb.Item 支持 `overlay` props 来定义下拉菜单。[#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` props 以自定义预览逻辑。[#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` props 来自定义图标。[#15996](https://github.com/ant-design/ant-design/pull/15996) [@DiamondYuan](https://github.com/DiamondYuan)
+- 🌟 SkeletonAvatarProps 的 `size` props 支持传入数字。[#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` props，在抽屉动画完成后触发。[#16228](https://github.com/ant-design/ant-design/pull/16228)
+- 🌟 Form.Item 支持了 `htmlFor` props. [#16278](https://github.com/ant-design/ant-design/pull/16278)
+- 🌟 Collapse 支持 `expandIconPosition` props。[#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`
@ -179,7 +204,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)
@ -401,6 +426,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)
@ -580,7 +606,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
@ -661,7 +687,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)
@ -685,7 +711,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)
@ -827,7 +853,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)
@ -857,10 +883,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

@ -888,7 +914,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)

@ -898,8 +924,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)。
  - 💄 提供了三套图标风格线性、实色和双色图标，默认为线性风格。
  - 🌟 新增了 **编辑类** 和 **数据类** 两个新类别。
@ -960,12 +985,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)
@ -989,7 +1015,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

@ -1075,8 +1101,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)
@ -1093,7 +1118,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)
@ -1194,15 +1219,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

@ -1236,7 +1261,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)
@ -1272,12 +1297,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)
@ -1358,7 +1383,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)
@ -1405,17 +1430,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)
@ -1442,7 +1467,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)
@ -1499,7 +1524,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`
@ -1521,7 +1545,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

@ -1584,7 +1608,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)
@ -1634,25 +1658,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

@ -1720,8 +1744,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'),
  );
  ```

@ -1780,7 +1806,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 = {
@ -1797,8 +1825,9 @@ timeline: true
      },
    };

-    <Table components={components} columns={columns} data={data} />
+    <Table components={components} columns={columns} data={data} />;
    ```
+
  - 🌟 新增 `onRow` 属性，用于设置表格列的属性。
  - 🌟 新增 `onHeaderRow`，用户设置表格头部列的属性。
  - 🌟 新增 `column[onCell]`，用户设置单元格的属性。
@ -1809,17 +1838,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/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/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/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/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';
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@anchor-border-width: 2px;
--- 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';

--- a/components/avatar/style/index.less
+++ b/components/avatar/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@avatar-prefix-cls: ~'@{ant-prefix}-avatar';
--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@backtop-prefix-cls: ~'@{ant-prefix}-back-top';
--- 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';
--- 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
@ -80,6 +80,7 @@ exports[`react router react router 3 1`] = `
  >
    <BreadcrumbItem
      key="Home"
+      overlay={null}
      separator="/"
    >
      <span>
@ -101,6 +102,7 @@ exports[`react router react router 3 1`] = `
    </BreadcrumbItem>
    <BreadcrumbItem
      key="Application List"
+      overlay={null}
      separator="/"
    >
      <span>
@ -122,6 +124,7 @@ exports[`react router react router 3 1`] = `
    </BreadcrumbItem>
    <BreadcrumbItem
      key="Application:id"
+      overlay={null}
      separator="/"
    >
      <span>
@ -143,6 +146,7 @@ exports[`react router react router 3 1`] = `
    </BreadcrumbItem>
    <BreadcrumbItem
      key="Detail"
+      overlay={null}
      separator="/"
    >
      <span>
--- 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.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/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:MouseEventHandler)=>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,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
@ -39,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>
 `;

@ -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/components/button/button.tsx
+++ b/components/button/button.tsx
@ -40,7 +40,7 @@ function insertSpace(child: React.ReactChild, needInserted: boolean) {
  return child;
 }

-const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger');
+const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'danger', 'link');
 export type ButtonType = (typeof ButtonTypes)[number];
 const ButtonShapes = tuple('circle', 'circle-outline', 'round');
 export type ButtonShape = (typeof ButtonShapes)[number];
@ -266,20 +266,24 @@ class Button extends React.Component<ButtonProps, ButtonState> {
    // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
    const { htmlType, ...otherProps } = rest as NativeButtonProps;

-    return (
-      <Wave>
-        <button
-          {...otherProps as NativeButtonProps}
-          type={htmlType}
-          className={classes}
-          onClick={this.handleClick}
-          ref={this.saveButtonRef}
-        >
-          {iconNode}
-          {kids}
-        </button>
-      </Wave>
+    const buttonNode = (
+      <button
+        {...otherProps as NativeButtonProps}
+        type={htmlType}
+        className={classes}
+        onClick={this.handleClick}
+        ref={this.saveButtonRef}
+      >
+        {iconNode}
+        {kids}
+      </button>
    );
+
+    if (type === 'link') {
+      return buttonNode;
+    }
+
+    return <Wave>{buttonNode}</Wave>;
  };

  render() {
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@ -22,6 +22,7 @@ ReactDOM.render(
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="danger">Danger</Button>
+    <Button type="link">Link</Button>
  </div>,
  mountNode
 );
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@ -21,7 +21,8 @@ ReactDOM.render(
    <Button type="primary" block>Primary</Button>
    <Button block>Default</Button>
    <Button type="dashed" block>Dashed</Button>
-    <Button type="danger" block>danger</Button>
+    <Button type="danger" block>Danger</Button>
+    <Button type="link" block>Link</Button>
  </div>,
  mountNode
 );
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@ -26,6 +26,9 @@ ReactDOM.render(
    <br />
    <Button type="dashed">Dashed</Button>
    <Button type="dashed" disabled>Dashed(disabled)</Button>
+    <br />
+    <Button type="link">Link</Button>
+    <Button type="link" disabled>Link(disabled)</Button>
    <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
      <Button ghost>Ghost</Button>
      <Button ghost disabled>Ghost(disabled)</Button>
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@ -22,6 +22,7 @@ ReactDOM.render(
    <Button ghost>Default</Button>
    <Button type="dashed" ghost>Dashed</Button>
    <Button type="danger" ghost>danger</Button>
+    <Button type="link" ghost>link</Button>
  </div>,
  mountNode
 );
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@ -43,6 +43,7 @@ class ButtonSize extends React.Component {
        <Button size={size}>Normal</Button>
        <Button type="dashed" size={size}>Dashed</Button>
        <Button type="danger" size={size}>Danger</Button>
+        <Button type="link" size={size}>Link</Button>
        <br />
        <Button type="primary" shape="circle" icon="download" size={size} />
        <Button type="primary" shape="round" icon="download" size={size}>Download</Button>
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -25,7 +25,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | shape | can be set to `circle`, `round` or omitted | string | - |
 | size | can be set to `small` `large` or omitted | string | `default` |
 | target | same as target attribute of a, works when href is specified | string | - |
-| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
+| type | can be set to `primary` `ghost` `dashed` `danger` `link`(added in 3.17) or omitted (meaning `default`) | string | `default` |
 | onClick | set the handler to handle `click` event | (event) => void | - |
 | block | option to fit button width to its parent width | boolean | `false` |

--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -18,7 +18,7 @@ subtitle: 按钮
 按钮的属性说明如下：

 | 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | disabled | 按钮失效状态 | boolean | `false` |
 | ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |
@ -28,7 +28,7 @@ subtitle: 按钮
 | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
 | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - |
+| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link`(3.17 中增加) 或者不设 | string | - |
 | onClick | 点击按钮时的回调 | (event) => void | - |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |

--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

@ -69,6 +69,10 @@
    .btn-danger;
  }

+  &-link {
+    .btn-link;
+  }
+
  &-round {
    .btn-round(@btn-prefix-cls);
  }
@ -165,6 +169,12 @@
    .button-variant-ghost(@btn-danger-color);
  }

+  &-background-ghost&-link {
+    .button-variant-ghost(@link-color; transparent);
+
+    color: @component-background;
+  }
+
  &-two-chinese-chars::first-letter {
    letter-spacing: 0.34em;
  }
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@ -7,7 +7,7 @@
  border-radius: @border-radius;
 }

-.button-disabled() {
+.button-disabled(@color: @btn-disable-color; @background: @btn-disable-bg; @border: @btn-disable-border) {
  &-disabled,
  &.disabled,
  &[disabled] {
@ -16,7 +16,7 @@
    &:focus,
    &:active,
    &.active {
-      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+      .button-color(@color; @background; @border);

      text-shadow: none;
      box-shadow: none;
@ -86,17 +86,27 @@
  }
  .button-disabled();
 }
-.button-variant-ghost(@color) {
-  .button-color(@color; transparent; @color);
+.button-variant-ghost(@color; @border: @color) {
+  .button-color(@color; transparent; @border);

  text-shadow: none;
  &:hover,
  &:focus {
-    .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
+    }
  }
  &:active,
  &.active {
-    .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+    & when (@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; transparent);
+    }
+    & when not(@border = transparent) {
+      .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
+    }
  }
  .button-disabled();
 }
@ -226,6 +236,18 @@
 .btn-danger() {
  .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
 }
+// link button style
+.btn-link() {
+  .button-variant-other(@link-color, transparent, transparent);
+
+  box-shadow: none;
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+  .button-disabled(@disabled-color; transparent; transparent);
+}
 // round button
 .btn-round(@btnClassName: btn) {
  .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size);
--- a/components/calendar/locale/hr_HR.tsx
+++ b/components/calendar/locale/hr_HR.tsx
@ -0,0 +1,2 @@
+import hr_HR from '../../date-picker/locale/hr_HR';
+export default hr_HR;
--- a/components/calendar/style/index.less
+++ b/components/calendar/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@card-prefix-cls: ~'@{ant-prefix}-card';
--- a/components/carousel/tests/snapshots/demo.test.js.snap
+++ b/components/carousel/tests/snapshots/demo.test.js.snap
@ -180,7 +180,7 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
      </div>
    </div>
    <ul
-      class="slick-dots"
+      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
@ -396,7 +396,7 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
      </div>
    </div>
    <ul
-      class="slick-dots"
+      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
@ -522,7 +522,7 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
      </div>
    </div>
    <ul
-      class="slick-dots"
+      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
@ -558,218 +558,302 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
 </div>
 `;

-exports[`renders ./components/carousel/demo/vertical.md correctly 1`] = `
-<div
-  class="ant-carousel ant-carousel-vertical"
->
+exports[`renders ./components/carousel/demo/position.md correctly 1`] = `
+<div>
  <div
-    class="slick-slider slick-vertical slick-initialized"
-    dir="ltr"
+    class="ant-radio-group ant-radio-group-outline"
+    style="margin-bottom:8px"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="top"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Top
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottom"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Bottom
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="left"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Left
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="right"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Right
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-carousel"
  >
    <div
-      class="slick-list"
+      class="slick-slider slick-initialized"
+      dir="ltr"
    >
      <div
-        class="slick-track"
-        style="width:900%;left:-100%"
+        class="slick-list"
      >
        <div
-          aria-hidden="true"
-          class="slick-slide slick-cloned"
-          data-index="-1"
-          style="width:11.11111111111111%"
-          tabindex="-1"
+          class="slick-track"
+          style="width:900%;left:-100%"
        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                4
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide slick-cloned"
+            data-index="-1"
+            style="width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  4
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="false"
-          class="slick-slide slick-active slick-current"
-          data-index="0"
-          style="outline:none;width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                1
-              </h3>
+          <div
+            aria-hidden="false"
+            class="slick-slide slick-active slick-current"
+            data-index="0"
+            style="outline:none;width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  1
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="slick-slide"
-          data-index="1"
-          style="outline:none;width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                2
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="1"
+            style="outline:none;width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  2
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="slick-slide"
-          data-index="2"
-          style="outline:none;width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                3
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="2"
+            style="outline:none;width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  3
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="slick-slide"
-          data-index="3"
-          style="outline:none;width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                4
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide"
+            data-index="3"
+            style="outline:none;width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  4
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="slick-slide slick-cloned"
-          data-index="4"
-          style="width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                1
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide slick-cloned"
+            data-index="4"
+            style="width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  1
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="slick-slide slick-cloned"
-          data-index="5"
-          style="width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                2
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide slick-cloned"
+            data-index="5"
+            style="width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  2
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="slick-slide slick-cloned"
-          data-index="6"
-          style="width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                3
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide slick-cloned"
+            data-index="6"
+            style="width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  3
+                </h3>
+              </div>
            </div>
          </div>
-        </div>
-        <div
-          aria-hidden="true"
-          class="slick-slide slick-cloned"
-          data-index="7"
-          style="width:11.11111111111111%"
-          tabindex="-1"
-        >
-          <div>
-            <div
-              style="width:100%;display:inline-block"
-              tabindex="-1"
-            >
-              <h3>
-                4
-              </h3>
+          <div
+            aria-hidden="true"
+            class="slick-slide slick-cloned"
+            data-index="7"
+            style="width:11.11111111111111%"
+            tabindex="-1"
+          >
+            <div>
+              <div
+                style="width:100%;display:inline-block"
+                tabindex="-1"
+              >
+                <h3>
+                  4
+                </h3>
+              </div>
            </div>
          </div>
        </div>
      </div>
+      <ul
+        class="slick-dots slick-dots-top"
+        style="display:block"
+      >
+        <li
+          class="slick-active"
+        >
+          <button>
+            1
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            2
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            3
+          </button>
+        </li>
+        <li
+          class=""
+        >
+          <button>
+            4
+          </button>
+        </li>
+      </ul>
    </div>
-    <ul
-      class="slick-dots"
-      style="display:block"
-    >
-      <li
-        class="slick-active"
-      >
-        <button>
-          1
-        </button>
-      </li>
-      <li
-        class=""
-      >
-        <button>
-          2
-        </button>
-      </li>
-      <li
-        class=""
-      >
-        <button>
-          3
-        </button>
-      </li>
-      <li
-        class=""
-      >
-        <button>
-          4
-        </button>
-      </li>
-    </ul>
  </div>
 </div>
 `;
--- a/components/carousel/tests/snapshots/index.test.js.snap
+++ b/components/carousel/tests/snapshots/index.test.js.snap
@ -0,0 +1,137 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Carousel should works for dotPosition bottom 1`] = `
+<div
+  class="ant-carousel"
+>
+  <div
+    class="slick-slider slick-initialized"
+  >
+    <div
+      class="slick-list"
+    >
+      <div
+        class="slick-track"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+      >
+        <div
+          aria-hidden="false"
+          class="slick-slide slick-active slick-current"
+          data-index="0"
+          style="outline: none; width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Carousel should works for dotPosition left 1`] = `
+<div
+  class="ant-carousel ant-carousel-vertical"
+>
+  <div
+    class="slick-slider slick-vertical slick-initialized"
+  >
+    <div
+      class="slick-list"
+    >
+      <div
+        class="slick-track"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+      >
+        <div
+          aria-hidden="false"
+          class="slick-slide slick-active slick-current"
+          data-index="0"
+          style="outline: none; width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Carousel should works for dotPosition right 1`] = `
+<div
+  class="ant-carousel ant-carousel-vertical"
+>
+  <div
+    class="slick-slider slick-vertical slick-initialized"
+  >
+    <div
+      class="slick-list"
+    >
+      <div
+        class="slick-track"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+      >
+        <div
+          aria-hidden="false"
+          class="slick-slide slick-active slick-current"
+          data-index="0"
+          style="outline: none; width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Carousel should works for dotPosition top 1`] = `
+<div
+  class="ant-carousel"
+>
+  <div
+    class="slick-slider slick-initialized"
+  >
+    <div
+      class="slick-list"
+    >
+      <div
+        class="slick-track"
+        style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
+      >
+        <div
+          aria-hidden="false"
+          class="slick-slide slick-active slick-current"
+          data-index="0"
+          style="outline: none; width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
--- a/components/carousel/tests/index.test.js
+++ b/components/carousel/tests/index.test.js
@ -78,4 +78,31 @@ describe('Carousel', () => {
    expect(spy).toHaveBeenCalled();
    expect(spy2).toHaveBeenCalledWith('resize', onWindowResized);
  });
+
+  describe('should works for dotPosition', () => {
+    ['left', 'right', 'top', 'bottom'].forEach(dotPosition => {
+      it(dotPosition, () => {
+        const wrapper = mount(
+          <Carousel dotPosition={dotPosition}>
+            <div />
+          </Carousel>,
+        );
+        jest.runAllTimers();
+        expect(wrapper.render()).toMatchSnapshot();
+      });
+    });
+  });
+
+  it('warning', () => {
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(
+      <Carousel vertical>
+        <div />
+      </Carousel>,
+    );
+    expect(warnSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Carousel] `vertical` is deprecated, please use `dotPosition` instead.',
+    );
+    warnSpy.mockRestore();
+  });
 });
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
  zh-CN: 渐显
  en-US: Fade in
--- a/components/carousel/demo/position.md
+++ b/components/carousel/demo/position.md
@ -0,0 +1,63 @@
+---
+order: 2
+title:
+  zh-CN: 位置
+  en-US: Position
+---
+
+## zh-CN
+
+位置有 4 个方向。
+
+## en-US
+
+There are 4 position options available.
+
+````jsx
+import { Carousel, Radio } from 'antd';
+
+class PositionCarouselDemo extends React.Component {
+  state = {
+    dotPosition: 'top',
+  };
+
+  handlePositionChange = ({ target: { value: dotPosition } }) => this.setState({ dotPosition });
+
+  render() {
+    const { dotPosition } = this.state;
+    return (
+      <div>
+        <Radio.Group onChange={this.handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
+          <Radio.Button value="top">Top</Radio.Button>
+          <Radio.Button value="bottom">Bottom</Radio.Button>
+          <Radio.Button value="left">Left</Radio.Button>
+          <Radio.Button value="right">Right</Radio.Button>
+        </Radio.Group>
+        <Carousel dotPosition={dotPosition}>
+          <div><h3>1</h3></div>
+          <div><h3>2</h3></div>
+          <div><h3>3</h3></div>
+          <div><h3>4</h3></div>
+        </Carousel>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<PositionCarouselDemo />, mountNode);
+````
+
+````css
+/* For demo */
+.ant-carousel .slick-slide {
+  text-align: center;
+  height: 160px;
+  line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+.ant-carousel .slick-slide h3 {
+  color: #fff;
+}
+````
--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@ -1,43 +0,0 @@
---
-order: 1
-title:
-  zh-CN: 垂直
-  en-US: Vertical
---
-
-## zh-CN
-
-垂直显示。
-
-## en-US
-
-Vertical pagination.
-
-````jsx
-import { Carousel } from 'antd';
-
-ReactDOM.render(
-  <Carousel vertical>
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
-  </Carousel>,
-  mountNode
-);
-````
-
-````css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-````
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@ -14,15 +14,15 @@ A carousel component. Scales with its container.

 ## API

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| afterChange | Callback function called after the current index changes | function(current) | - |
-| autoplay | Whether to scroll automatically | boolean | `false` |
-| beforeChange | Callback function called before the current index changes | function(from, to) | - |
-| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
-| easing | Transition interpolation function name | string | `linear` |
-| effect | Transition effect | `scrollx` \| `fade` | `scrollx` |
-| vertical | Whether to use a vertical display | boolean | `false` |
+| Property | Description | Type | Default | Version |
+| -------- | ----------- | ---- | ------- | ------- |
+| afterChange | Callback function called after the current index changes | function(current) | - | |
+| autoplay | Whether to scroll automatically | boolean | `false` | |
+| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
+| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | 3.17.0 |
+| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
+| easing | Transition interpolation function name | string | `linear` | |
+| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |

 ## Methods

--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@ -2,6 +2,7 @@ import * as React from 'react';
 import debounce from 'lodash/debounce';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import { Settings } from 'react-slick';
+import warning from '../_util/warning';

 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
@ -23,12 +24,15 @@ if (typeof window !== 'undefined') {
 const SlickCarousel = require('react-slick').default;

 export type CarouselEffect = 'scrollx' | 'fade';
+export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
+
 // Carousel
 export interface CarouselProps extends Settings {
  effect?: CarouselEffect;
  style?: React.CSSProperties;
  prefixCls?: string;
  slickGoTo?: number;
+  dotPosition?: DotPosition;
 }

 export default class Carousel extends React.Component<CarouselProps, {}> {
@ -47,6 +51,14 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
    this.onWindowResized = debounce(this.onWindowResized, 500, {
      leading: false,
    });
+
+    if ('vertical' in this.props) {
+      warning(
+        !this.props.vertical,
+        'Carousel',
+        '`vertical` is deprecated, please use `dotPosition` instead.',
+      );
+    }
  }

  componentDidMount() {
@ -90,6 +102,15 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
    this.slick.slickGoTo(slide, dontAnimate);
  }

+  getDotPosition(): DotPosition {
+    if (this.props.dotPosition) {
+      return this.props.dotPosition;
+    } else if ('vertical' in this.props) {
+      return this.props.vertical ? 'right' : 'bottom';
+    }
+    return 'bottom';
+  }
+
  renderCarousel = ({ getPrefixCls }: ConfigConsumerProps) => {
    const props = {
      ...this.props,
@ -100,6 +121,10 @@ export default class Carousel extends React.Component<CarouselProps, {}> {
    }

    let className = getPrefixCls('carousel', props.prefixCls);
+    const dotsClass = 'slick-dots';
+    const dotPosition = this.getDotPosition();
+    props.vertical = dotPosition === 'left' || dotPosition === 'right';
+    props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'}`;
    if (props.vertical) {
      className = `${className} ${className}-vertical`;
    }
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@ -15,15 +15,15 @@ subtitle: 走马灯

 ## API

-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| afterChange | 切换面板的回调 | function(current) | 无 |
-| autoplay | 是否自动切换 | boolean | false |
-| beforeChange | 切换面板的回调 | function(from, to) | 无 |
-| dots | 是否显示面板指示点 | boolean | true |
-| easing | 动画效果 | string | linear |
-| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
-| vertical | 垂直显示 | boolean | false |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| afterChange | 切换面板的回调 | function(current) | 无 | |
+| autoplay | 是否自动切换 | boolean | false | |
+| beforeChange | 切换面板的回调 | function(from, to) | 无 | |
+| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 3.17.0 |
+| dots | 是否显示面板指示点 | boolean | true | |
+| easing | 动画效果 | string | linear | |
+| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | |

 ## 方法

--- a/components/carousel/style/index.less
+++ b/components/carousel/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

 .@{ant-prefix}-carousel {
@ -146,7 +146,6 @@
  // Dots
  .slick-dots {
    position: absolute;
-    bottom: 12px;
    display: block;
    width: 100%;
    height: @carousel-dot-height;
@ -154,6 +153,12 @@
    padding: 0;
    text-align: center;
    list-style: none;
+    &-bottom {
+      bottom: 12px;
+    }
+    &-top {
+      top: 12px;
+    }
    li {
      position: relative;
      display: inline-block;
@ -196,11 +201,16 @@
 .@{ant-prefix}-carousel-vertical {
  .slick-dots {
    top: 50%;
-    right: 12px;
    bottom: auto;
    width: @carousel-dot-height;
    height: auto;
    transform: translateY(-50%);
+    &-left {
+      left: 12px;
+    }
+    &-right {
+      right: 12px;
+    }
    li {
      margin: 0 2px;
      vertical-align: baseline;
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

--- a/components/checkbox/style/index.less
+++ b/components/checkbox/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import './mixin';

 .antCheckboxFn();
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@ -6,6 +6,8 @@ import Icon from '../icon';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import animation from '../_util/openAnimation';

+export type ExpandIconPosition = 'left' | 'right';
+
 export interface CollapseProps {
  activeKey?: Array<string> | string;
  defaultActiveKey?: Array<string>;
@ -18,6 +20,7 @@ export interface CollapseProps {
  bordered?: boolean;
  prefixCls?: string;
  expandIcon?: (panelProps: any) => React.ReactNode;
+  expandIconPosition?: ExpandIconPosition;
 }

 interface PanelProps {
@ -37,6 +40,7 @@ export default class Collapse extends React.Component<CollapseProps, any> {
  static defaultProps = {
    bordered: true,
    openAnimation: { ...animation, appear() {} },
+    expandIconPosition: 'left',
  };

  renderExpandIcon = (panelProps: PanelProps = {}, prefixCls: string) => {
@ -54,11 +58,17 @@ export default class Collapse extends React.Component<CollapseProps, any> {
  };

  renderCollapse = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className = '', bordered } = this.props;
+    const {
+      prefixCls: customizePrefixCls,
+      className = '',
+      bordered,
+      expandIconPosition,
+    } = this.props;
    const prefixCls = getPrefixCls('collapse', customizePrefixCls);
    const collapseClassName = classNames(
      {
        [`${prefixCls}-borderless`]: !bordered,
+        [`${prefixCls}-icon-position-${expandIconPosition}`]: true,
      },
      className,
    );
--- a/components/collapse/tests/snapshots/demo.test.js.snap
+++ b/components/collapse/tests/snapshots/demo.test.js.snap
@ -2,7 +2,7 @@

 exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
 <div
-  class="ant-collapse"
+  class="ant-collapse ant-collapse-icon-position-left"
  role="tablist"
 >
  <div
@ -103,7 +103,7 @@ exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
 <div
-  class="ant-collapse"
+  class="ant-collapse ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -219,7 +219,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-borderless"
+  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -333,7 +333,7 @@ exports[`renders ./components/collapse/demo/borderless.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 <div
-  class="ant-collapse ant-collapse-borderless"
+  class="ant-collapse ant-collapse-borderless ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
@ -451,121 +451,231 @@ exports[`renders ./components/collapse/demo/custom.md correctly 1`] = `
 `;

 exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
-<div
-  class="ant-collapse"
->
+<div>
  <div
-    class="ant-collapse-item ant-collapse-item-active"
+    class="ant-collapse ant-collapse-icon-position-left"
  >
    <div
-      aria-expanded="true"
-      class="ant-collapse-header"
-      role="button"
-      tabindex="0"
+      class="ant-collapse-item ant-collapse-item-active"
    >
-      <i
-        aria-label="icon: right"
-        class="anticon anticon-right ant-collapse-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
-          />
-        </svg>
-      </i>
-      This is panel header 1
      <div
-        class="ant-collapse-extra"
+        aria-expanded="true"
+        class="ant-collapse-header"
+        role="button"
+        tabindex="0"
      >
        <i
-          aria-label="icon: setting"
-          class="anticon anticon-setting"
-          tabindex="-1"
+          aria-label="icon: right"
+          class="anticon anticon-right ant-collapse-arrow"
        >
          <svg
            aria-hidden="true"
            class=""
-            data-icon="setting"
+            data-icon="right"
            fill="currentColor"
            focusable="false"
            height="1em"
+            style="-ms-transform:rotate(90deg);transform:rotate(90deg)"
            viewBox="64 64 896 896"
            width="1em"
          >
            <path
-              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
            />
          </svg>
        </i>
+        This is panel header 1
+        <div
+          class="ant-collapse-extra"
+        >
+          <i
+            aria-label="icon: setting"
+            class="anticon anticon-setting"
+            tabindex="-1"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="setting"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
+              />
+            </svg>
+          </i>
+        </div>
      </div>
-    </div>
-    <div
-      class="ant-collapse-content ant-collapse-content-active"
-    >
      <div
-        class="ant-collapse-content-box"
+        class="ant-collapse-content ant-collapse-content-active"
      >
-        <div>
-          
+        <div
+          class="ant-collapse-content-box"
+        >
+          <div>
+            
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.

+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-collapse-item"
+    >
+      <div
+        aria-expanded="false"
+        class="ant-collapse-header"
+        role="button"
+        tabindex="0"
+      >
+        <i
+          aria-label="icon: right"
+          class="anticon anticon-right ant-collapse-arrow"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
+            />
+          </svg>
+        </i>
+        This is panel header 2
+        <div
+          class="ant-collapse-extra"
+        >
+          <i
+            aria-label="icon: setting"
+            class="anticon anticon-setting"
+            tabindex="-1"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="setting"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
+              />
+            </svg>
+          </i>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-collapse-item"
+    >
+      <div
+        aria-expanded="false"
+        class="ant-collapse-header"
+        role="button"
+        tabindex="0"
+      >
+        <i
+          aria-label="icon: right"
+          class="anticon anticon-right ant-collapse-arrow"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
+            />
+          </svg>
+        </i>
+        This is panel header 3
+        <div
+          class="ant-collapse-extra"
+        >
+          <i
+            aria-label="icon: setting"
+            class="anticon anticon-setting"
+            tabindex="-1"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="setting"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
+              />
+            </svg>
+          </i>
        </div>
      </div>
    </div>
  </div>
+  <br />
+  Expand Icon Position: 
  <div
-    class="ant-collapse-item"
+    class="ant-select ant-select-enabled"
  >
    <div
+      aria-autocomplete="list"
+      aria-controls=""
      aria-expanded="false"
-      class="ant-collapse-header"
-      role="button"
+      aria-haspopup="true"
+      class="ant-select-selection
+            ant-select-selection--single"
+      role="combobox"
      tabindex="0"
    >
-      <i
-        aria-label="icon: right"
-        class="anticon anticon-right ant-collapse-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
-          />
-        </svg>
-      </i>
-      This is panel header 2
      <div
-        class="ant-collapse-extra"
+        class="ant-select-selection__rendered"
+      >
+        <div
+          class="ant-select-selection-selected-value"
+          style="display:block;opacity:1"
+          title="left"
+        >
+          left
+        </div>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
      >
        <i
-          aria-label="icon: setting"
-          class="anticon anticon-setting"
-          tabindex="-1"
+          aria-label="icon: down"
+          class="anticon anticon-down ant-select-arrow-icon"
        >
          <svg
            aria-hidden="true"
            class=""
-            data-icon="setting"
+            data-icon="down"
            fill="currentColor"
            focusable="false"
            height="1em"
@ -573,66 +683,11 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
            width="1em"
          >
            <path
-              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
+              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>
-      </div>
-    </div>
-  </div>
-  <div
-    class="ant-collapse-item"
-  >
-    <div
-      aria-expanded="false"
-      class="ant-collapse-header"
-      role="button"
-      tabindex="0"
-    >
-      <i
-        aria-label="icon: right"
-        class="anticon anticon-right ant-collapse-arrow"
-      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"
-          />
-        </svg>
-      </i>
-      This is panel header 3
-      <div
-        class="ant-collapse-extra"
-      >
-        <i
-          aria-label="icon: setting"
-          class="anticon anticon-setting"
-          tabindex="-1"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="setting"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"
-            />
-          </svg>
-        </i>
-      </div>
+      </span>
    </div>
  </div>
 </div>
@ -640,7 +695,7 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `
 <div
-  class="ant-collapse"
+  class="ant-collapse ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item"
@ -740,7 +795,7 @@ exports[`renders ./components/collapse/demo/mix.md correctly 1`] = `

 exports[`renders ./components/collapse/demo/noarrow.md correctly 1`] = `
 <div
-  class="ant-collapse"
+  class="ant-collapse ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item ant-collapse-item-active"
--- a/components/collapse/tests/snapshots/index.test.js.snap
+++ b/components/collapse/tests/snapshots/index.test.js.snap
@ -2,7 +2,7 @@

 exports[`Collapse should render extra node of panel 1`] = `
 <div
-  class="ant-collapse"
+  class="ant-collapse ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item"
@ -89,7 +89,7 @@ exports[`Collapse should render extra node of panel 1`] = `

 exports[`Collapse should support remove expandIcon 1`] = `
 <div
-  class="ant-collapse"
+  class="ant-collapse ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item"
--- a/components/collapse/demo/extra.md
+++ b/components/collapse/demo/extra.md
@ -14,9 +14,10 @@ title:
 More than one panel can be expanded at a time, the first panel is initialized to be active in this case.

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

-const Panel = Collapse.Panel;
+const { Panel } = Collapse;
+const { Option } = Select;

 function callback(key) {
  console.log(key);
@ -38,18 +39,42 @@ const genExtra = () => (
  />
 );

-ReactDOM.render(
-  <Collapse defaultActiveKey={['1']} onChange={callback}>
-    <Panel header="This is panel header 1" key="1" extra={genExtra()}>
-      <div>{text}</div>
-    </Panel>
-    <Panel header="This is panel header 2" key="2" extra={genExtra()}>
-      <div>{text}</div>
-    </Panel>
-    <Panel header="This is panel header 3" key="3" extra={genExtra()}>
-      <div>{text}</div>
-    </Panel>
-  </Collapse>,
-  mountNode
-);
+class Demo extends React.Component {
+  state = {
+    expandIconPosition: 'left',
+  };
+
+  onPositionChange = (expandIconPosition) => {
+    this.setState({ expandIconPosition });
+  };
+
+  render() {
+    const { expandIconPosition } = this.state;
+    return (
+      <div>
+        <Collapse defaultActiveKey={['1']} onChange={callback} expandIconPosition={expandIconPosition}>
+          <Panel header="This is panel header 1" key="1" extra={genExtra()}>
+            <div>{text}</div>
+          </Panel>
+          <Panel header="This is panel header 2" key="2" extra={genExtra()}>
+            <div>{text}</div>
+          </Panel>
+          <Panel header="This is panel header 3" key="3" extra={genExtra()}>
+            <div>{text}</div>
+          </Panel>
+        </Collapse>
+
+        <br />
+        Expand Icon Position:
+        {' '}
+        <Select value={expandIconPosition} onChange={this.onPositionChange}>
+          <Option value="left">left</Option>
+          <Option value="right">right</Option>
+        </Select>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Demo />, mountNode);
 ````
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -16,15 +16,16 @@ A content area which can be collapsed and expanded.

 ### Collapse

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
-| defaultActiveKey | Key of the initial active panel | string | - |
-| bordered | Toggles rendering of the border around the collapse block | boolean | `true` |
-| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` |
-| onChange | Callback function executed when active panel is changed | Function | - |
-| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - |
-| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` |
+| Property | Description | Type | Default | Version |
+| -------- | ----------- | ---- | ------- | ------- |
+| activeKey | Key of the active panel | string\[]\|string | No default value. In `accordion` mode, it's the key of the first panel. | |
+| defaultActiveKey | Key of the initial active panel | string | - | |
+| bordered | Toggles rendering of the border around the collapse block | boolean | `true` | |
+| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | |
+| onChange | Callback function executed when active panel is changed | Function | - | |
+| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - | |
+| expandIconPosition | Set expand icon position: `left`, `right` | `left` | - | 3.17.0 |
+| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | |

 ### Collapse.Panel

@ -36,9 +37,3 @@ A content area which can be collapsed and expanded.
 | key | Unique key identifying the panel from among its siblings | string | - |
 | showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
 | extra | extra element in the corner | ReactNode | - |
-
-## FAQ
-
-### How to let the arrow to be on the right?
-
-You can adjust style of the arrow: <https://codesandbox.io/s/v046rx89n0>
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -17,15 +17,16 @@ cols: 1

 ### Collapse

-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
-| defaultActiveKey | 初始化选中面板的 key | string | 无 |
-| bordered | 带边框风格的折叠面板 | boolean | `true` |
-| accordion | 手风琴模式 | boolean | `false` |
-| onChange | 切换面板的回调 | Function | 无 |
-| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |
-| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 | |
+| defaultActiveKey | 初始化选中面板的 key | string | 无 | |
+| bordered | 带边框风格的折叠面板 | boolean | `true` | |
+| accordion | 手风琴模式 | boolean | `false` | |
+| onChange | 切换面板的回调 | Function | 无 | |
+| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
+| expandIconPosition | 设置图标位置： `left`, `right` | `left` | - | 3.17.0 |
+| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |

 ### Collapse.Panel

@ -37,9 +38,3 @@ cols: 1
 | key | 对应 activeKey | string | 无 |
 | showArrow | 是否展示当前面板上的箭头 | boolean | `true` |
 | extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |
-
-## FAQ
-
-### 我希望箭头在右边，怎么做？
-
-通过样式调整，将箭头放到右边就行啦：<https://codesandbox.io/s/v046rx89n0>
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
@ -24,6 +24,7 @@
    > .@{collapse-prefix-cls}-header {
      position: relative;
      padding: @collapse-header-padding;
+      padding-left: @collapse-header-padding-extra;
      color: @heading-color;
      line-height: 22px;
      cursor: pointer;
@ -62,6 +63,21 @@
    }
  }

+  // Expand Icon right
+  &-icon-position-right {
+    & > .@{collapse-prefix-cls}-item {
+      > .@{collapse-prefix-cls}-header {
+        padding: @collapse-header-padding;
+        padding-right: @collapse-header-padding-extra;
+
+        .@{collapse-prefix-cls}-arrow {
+          right: @padding-md;
+          left: initial;
+        }
+      }
+    }
+  }
+
  &-anim-active {
    transition: height 0.2s @ease-out;
  }
--- a/components/comment/tests/snapshots/demo.test.js.snap
+++ b/components/comment/tests/snapshots/demo.test.js.snap
@ -216,108 +216,116 @@ exports[`renders ./components/comment/demo/list.md correctly 1`] = `
    <div
      class="ant-spin-container"
    >
-      <div
-        class="ant-comment"
+      <ul
+        class="ant-list-items"
      >
-        <div
-          class="ant-comment-inner"
-        >
+        <li>
          <div
-            class="ant-comment-avatar"
-          >
-            <img
-              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            />
-          </div>
-          <div
-            class="ant-comment-content"
+            class="ant-comment"
          >
            <div
-              class="ant-comment-content-author"
+              class="ant-comment-inner"
            >
-              <span
-                class="ant-comment-content-author-name"
+              <div
+                class="ant-comment-avatar"
              >
-                Han Solo
-              </span>
-              <span
-                class="ant-comment-content-author-time"
+                <img
+                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                />
+              </div>
+              <div
+                class="ant-comment-content"
              >
-                <span>
-                  a day ago
-                </span>
-              </span>
+                <div
+                  class="ant-comment-content-author"
+                >
+                  <span
+                    class="ant-comment-content-author-name"
+                  >
+                    Han Solo
+                  </span>
+                  <span
+                    class="ant-comment-content-author-time"
+                  >
+                    <span>
+                      a day ago
+                    </span>
+                  </span>
+                </div>
+                <div
+                  class="ant-comment-content-detail"
+                >
+                  <p>
+                    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
+                  </p>
+                </div>
+                <ul
+                  class="ant-comment-actions"
+                >
+                  <li>
+                    <span>
+                      Reply to
+                    </span>
+                  </li>
+                </ul>
+              </div>
            </div>
-            <div
-              class="ant-comment-content-detail"
-            >
-              <p>
-                We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
-              </p>
-            </div>
-            <ul
-              class="ant-comment-actions"
-            >
-              <li>
-                <span>
-                  Reply to
-                </span>
-              </li>
-            </ul>
          </div>
-        </div>
-      </div>
-      <div
-        class="ant-comment"
-      >
-        <div
-          class="ant-comment-inner"
-        >
+        </li>
+        <li>
          <div
-            class="ant-comment-avatar"
-          >
-            <img
-              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-            />
-          </div>
-          <div
-            class="ant-comment-content"
+            class="ant-comment"
          >
            <div
-              class="ant-comment-content-author"
+              class="ant-comment-inner"
            >
-              <span
-                class="ant-comment-content-author-name"
+              <div
+                class="ant-comment-avatar"
              >
-                Han Solo
-              </span>
-              <span
-                class="ant-comment-content-author-time"
+                <img
+                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                />
+              </div>
+              <div
+                class="ant-comment-content"
              >
-                <span>
-                  2 days ago
-                </span>
-              </span>
+                <div
+                  class="ant-comment-content-author"
+                >
+                  <span
+                    class="ant-comment-content-author-name"
+                  >
+                    Han Solo
+                  </span>
+                  <span
+                    class="ant-comment-content-author-time"
+                  >
+                    <span>
+                      2 days ago
+                    </span>
+                  </span>
+                </div>
+                <div
+                  class="ant-comment-content-detail"
+                >
+                  <p>
+                    We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
+                  </p>
+                </div>
+                <ul
+                  class="ant-comment-actions"
+                >
+                  <li>
+                    <span>
+                      Reply to
+                    </span>
+                  </li>
+                </ul>
+              </div>
            </div>
-            <div
-              class="ant-comment-content-detail"
-            >
-              <p>
-                We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
-              </p>
-            </div>
-            <ul
-              class="ant-comment-actions"
-            >
-              <li>
-                <span>
-                  Reply to
-                </span>
-              </li>
-            </ul>
          </div>
-        </div>
-      </div>
+        </li>
+      </ul>
    </div>
  </div>
 </div>
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@ -53,13 +53,15 @@ ReactDOM.render(
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
-      <Comment
-        actions={item.actions}
-        author={item.author}
-        avatar={item.avatar}
-        content={item.content}
-        datetime={item.datetime}
-      />
+      <li>
+        <Comment
+          actions={item.actions}
+          author={item.author}
+          avatar={item.avatar}
+          content={item.content}
+          datetime={item.datetime}
+        />
+      </li>
    )}
  />,
  mountNode,
--- a/components/comment/style/index.less
+++ b/components/comment/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@comment-prefix-cls: ~'@{ant-prefix}-comment';
--- a/components/config-provider/tests/snapshots/components.test.js.snap
+++ b/components/config-provider/tests/snapshots/components.test.js.snap
@ -5517,7 +5517,7 @@ exports[`ConfigProvider components Carousel configProvider 1`] = `
      </div>
    </div>
    <ul
-      class="slick-dots"
+      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
@ -5647,7 +5647,7 @@ exports[`ConfigProvider components Carousel normal 1`] = `
      </div>
    </div>
    <ul
-      class="slick-dots"
+      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
@ -5777,7 +5777,7 @@ exports[`ConfigProvider components Carousel prefixCls 1`] = `
      </div>
    </div>
    <ul
-      class="slick-dots"
+      class="slick-dots slick-dots-bottom"
      style="display:block"
    >
      <li
@ -5990,7 +5990,7 @@ exports[`ConfigProvider components Checkbox prefixCls 1`] = `

 exports[`ConfigProvider components Collapse configProvider 1`] = `
 <div
-  class="config-collapse"
+  class="config-collapse config-collapse-icon-position-left"
 >
  <div
    class="config-collapse-item"
@ -6028,7 +6028,7 @@ exports[`ConfigProvider components Collapse configProvider 1`] = `

 exports[`ConfigProvider components Collapse normal 1`] = `
 <div
-  class="ant-collapse"
+  class="ant-collapse ant-collapse-icon-position-left"
 >
  <div
    class="ant-collapse-item"
@ -6066,7 +6066,7 @@ exports[`ConfigProvider components Collapse normal 1`] = `

 exports[`ConfigProvider components Collapse prefixCls 1`] = `
 <div
-  class="prefix-Collapse"
+  class="prefix-Collapse prefix-Collapse-icon-position-left"
 >
  <div
    class="prefix-Collapse-item"
@ -6955,7 +6955,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
    </span>
  </button>
  <button
-    class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
+    class="config-btn config-dropdown-trigger config-btn-default"
    type="button"
  >
    <i
@ -6994,7 +6994,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+    class="ant-btn ant-dropdown-trigger ant-btn-default"
    type="button"
  >
    <i
@ -7033,7 +7033,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+    class="ant-btn ant-dropdown-trigger ant-btn-default"
    type="button"
  >
    <i
@ -7666,39 +7666,43 @@ exports[`ConfigProvider components List configProvider 1`] = `
    <div
      class="config-spin-container"
    >
-      <div
-        class="config-list-item"
+      <ul
+        class="config-list-items"
      >
-        <div
-          class="config-list-item-meta"
+        <li
+          class="config-list-item"
        >
          <div
-            class="config-list-item-meta-avatar"
+            class="config-list-item-meta"
          >
-            <span
-              class="config-avatar config-avatar-circle config-avatar-image"
-            >
-              <img
-                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-              />
-            </span>
-          </div>
-          <div
-            class="config-list-item-meta-content"
-          >
-            <h4
-              class="config-list-item-meta-title"
-            >
-              Ant Design
-            </h4>
            <div
-              class="config-list-item-meta-description"
+              class="config-list-item-meta-avatar"
            >
-              Ant Design, a design language for background applications, is refined by Ant UED Team
+              <span
+                class="config-avatar config-avatar-circle config-avatar-image"
+              >
+                <img
+                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                />
+              </span>
+            </div>
+            <div
+              class="config-list-item-meta-content"
+            >
+              <h4
+                class="config-list-item-meta-title"
+              >
+                Ant Design
+              </h4>
+              <div
+                class="config-list-item-meta-description"
+              >
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+              </div>
            </div>
          </div>
-        </div>
-      </div>
+        </li>
+      </ul>
    </div>
  </div>
 </div>
@ -7714,39 +7718,43 @@ exports[`ConfigProvider components List normal 1`] = `
    <div
      class="ant-spin-container"
    >
-      <div
-        class="ant-list-item"
+      <ul
+        class="ant-list-items"
      >
-        <div
-          class="ant-list-item-meta"
+        <li
+          class="ant-list-item"
        >
          <div
-            class="ant-list-item-meta-avatar"
+            class="ant-list-item-meta"
          >
-            <span
-              class="ant-avatar ant-avatar-circle ant-avatar-image"
-            >
-              <img
-                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-              />
-            </span>
-          </div>
-          <div
-            class="ant-list-item-meta-content"
-          >
-            <h4
-              class="ant-list-item-meta-title"
-            >
-              Ant Design
-            </h4>
            <div
-              class="ant-list-item-meta-description"
+              class="ant-list-item-meta-avatar"
            >
-              Ant Design, a design language for background applications, is refined by Ant UED Team
+              <span
+                class="ant-avatar ant-avatar-circle ant-avatar-image"
+              >
+                <img
+                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                />
+              </span>
+            </div>
+            <div
+              class="ant-list-item-meta-content"
+            >
+              <h4
+                class="ant-list-item-meta-title"
+              >
+                Ant Design
+              </h4>
+              <div
+                class="ant-list-item-meta-description"
+              >
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+              </div>
            </div>
          </div>
-        </div>
-      </div>
+        </li>
+      </ul>
    </div>
  </div>
 </div>
@ -7762,39 +7770,43 @@ exports[`ConfigProvider components List prefixCls 1`] = `
    <div
      class="ant-spin-container"
    >
-      <div
-        class="prefix-List-item"
+      <ul
+        class="prefix-List-items"
      >
-        <div
-          class="prefix-List-item-meta"
+        <li
+          class="prefix-List-item"
        >
          <div
-            class="prefix-List-item-meta-avatar"
+            class="prefix-List-item-meta"
          >
-            <span
-              class="ant-avatar ant-avatar-circle ant-avatar-image"
-            >
-              <img
-                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-              />
-            </span>
-          </div>
-          <div
-            class="prefix-List-item-meta-content"
-          >
-            <h4
-              class="prefix-List-item-meta-title"
-            >
-              Ant Design
-            </h4>
            <div
-              class="prefix-List-item-meta-description"
+              class="prefix-List-item-meta-avatar"
            >
-              Ant Design, a design language for background applications, is refined by Ant UED Team
+              <span
+                class="ant-avatar ant-avatar-circle ant-avatar-image"
+              >
+                <img
+                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+                />
+              </span>
+            </div>
+            <div
+              class="prefix-List-item-meta-content"
+            >
+              <h4
+                class="prefix-List-item-meta-title"
+              >
+                Ant Design
+              </h4>
+              <div
+                class="prefix-List-item-meta-description"
+              >
+                Ant Design, a design language for background applications, is refined by Ant UED Team
+              </div>
            </div>
          </div>
-        </div>
-      </div>
+        </li>
+      </ul>
    </div>
  </div>
 </div>
--- a/components/config-provider/style/index.less
+++ b/components/config-provider/style/index.less
@ -1,2 +1,2 @@
 // placeholder
-@import '../../style/themes/default';
+@import '../../style/themes/index';
--- a/components/date-picker/locale/hr_HR.tsx
+++ b/components/date-picker/locale/hr_HR.tsx
@ -0,0 +1,19 @@
+import CalendarLocale from 'rc-calendar/lib/locale/hr_HR';
+import TimePickerLocale from '../../time-picker/locale/hr_HR';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Odaberite datum',
+    rangePlaceholder: ['Početni datum', 'Završni datum'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;
--- a/components/date-picker/style/index.less
+++ b/components/date-picker/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@divider-prefix-cls: ~'@{ant-prefix}-divider';
--- a/components/drawer/tests/snapshots/demo.test.js.snap
+++ b/components/drawer/tests/snapshots/demo.test.js.snap
@ -167,98 +167,102 @@ exports[`renders ./components/drawer/demo/user-profile.md correctly 1`] = `
      <div
        class="ant-spin-container"
      >
-        <div
-          class="ant-list-item"
+        <ul
+          class="ant-list-items"
        >
-          <div
-            class="ant-list-item-meta"
+          <li
+            class="ant-list-item"
          >
            <div
-              class="ant-list-item-meta-avatar"
+              class="ant-list-item-meta"
            >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-image"
-              >
-                <img
-                  src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
-                />
-              </span>
-            </div>
-            <div
-              class="ant-list-item-meta-content"
-            >
-              <h4
-                class="ant-list-item-meta-title"
-              >
-                <a
-                  href="https://ant.design/index-cn"
-                >
-                  Lily
-                </a>
-              </h4>
              <div
-                class="ant-list-item-meta-description"
+                class="ant-list-item-meta-avatar"
              >
-                Progresser AFX
+                <span
+                  class="ant-avatar ant-avatar-circle ant-avatar-image"
+                >
+                  <img
+                    src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+                  />
+                </span>
+              </div>
+              <div
+                class="ant-list-item-meta-content"
+              >
+                <h4
+                  class="ant-list-item-meta-title"
+                >
+                  <a
+                    href="https://ant.design/index-cn"
+                  >
+                    Lily
+                  </a>
+                </h4>
+                <div
+                  class="ant-list-item-meta-description"
+                >
+                  Progresser AFX
+                </div>
              </div>
            </div>
-          </div>
-          <ul
-            class="ant-list-item-action"
-          >
-            <li>
-              <a>
-                View Profile
-              </a>
-            </li>
-          </ul>
-        </div>
-        <div
-          class="ant-list-item"
-        >
-          <div
-            class="ant-list-item-meta"
-          >
-            <div
-              class="ant-list-item-meta-avatar"
+            <ul
+              class="ant-list-item-action"
            >
-              <span
-                class="ant-avatar ant-avatar-circle ant-avatar-image"
-              >
-                <img
-                  src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
-                />
-              </span>
-            </div>
-            <div
-              class="ant-list-item-meta-content"
-            >
-              <h4
-                class="ant-list-item-meta-title"
-              >
-                <a
-                  href="https://ant.design/index-cn"
-                >
-                  Lily
+              <li>
+                <a>
+                  View Profile
                </a>
-              </h4>
+              </li>
+            </ul>
+          </li>
+          <li
+            class="ant-list-item"
+          >
+            <div
+              class="ant-list-item-meta"
+            >
              <div
-                class="ant-list-item-meta-description"
+                class="ant-list-item-meta-avatar"
              >
-                Progresser AFX
+                <span
+                  class="ant-avatar ant-avatar-circle ant-avatar-image"
+                >
+                  <img
+                    src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+                  />
+                </span>
+              </div>
+              <div
+                class="ant-list-item-meta-content"
+              >
+                <h4
+                  class="ant-list-item-meta-title"
+                >
+                  <a
+                    href="https://ant.design/index-cn"
+                  >
+                    Lily
+                  </a>
+                </h4>
+                <div
+                  class="ant-list-item-meta-description"
+                >
+                  Progresser AFX
+                </div>
              </div>
            </div>
-          </div>
-          <ul
-            class="ant-list-item-action"
-          >
-            <li>
-              <a>
-                View Profile
-              </a>
-            </li>
-          </ul>
-        </div>
+            <ul
+              class="ant-list-item-action"
+            >
+              <li>
+                <a>
+                  View Profile
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
      </div>
    </div>
  </div>
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -35,6 +35,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | zIndex | The `z-index` of the Drawer. | Number | 1000 |
 | placement | The placement of the Drawer. | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right' |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
+| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |

 <style>
 #_hj_feedback_container {
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -36,6 +36,7 @@ export interface DrawerProps {
  push?: boolean;
  placement?: placementType;
  onClose?: (e: EventType) => void;
+  afterVisibleChange?: (visible: boolean) => void;
  className?: string;
  handler?: React.ReactNode;
 }
@ -65,6 +66,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
    prefixCls: PropTypes.string,
    placement: PropTypes.oneOf(PlacementTypes),
    onClose: PropTypes.func,
+    afterVisibleChange: PropTypes.func,
    className: PropTypes.string,
  };

--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -34,6 +34,7 @@ title: Drawer
 | zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |
 | placement | 抽屉的方向 | 'top'  \| 'right' \| 'bottom' \| 'left' | 'right'
 | onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
+| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | 无 |

 <style>
 #_hj_feedback_container {
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';

 // Preserve the typo for compatibility
 // https://github.com/ant-design/ant-design/issues/14628
--- a/components/drawer/style/index.less
+++ b/components/drawer/style/index.less
@ -1,3 +1,3 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './drawer';
--- a/components/dropdown/tests/snapshots/demo.test.js.snap
+++ b/components/dropdown/tests/snapshots/demo.test.js.snap
@ -38,7 +38,9 @@ exports[`renders ./components/dropdown/demo/context-menu.md correctly 1`] = `
 `;

 exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
-<div>
+<div
+  id="components-dropdown-demo-dropdown-button"
+>
  <div
    class="ant-btn-group ant-dropdown-button"
  >
@ -51,7 +53,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
      </span>
    </button>
    <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+      class="ant-btn ant-dropdown-trigger ant-btn-default"
      type="button"
    >
      <i
@ -77,7 +79,42 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
  </div>
  <div
    class="ant-btn-group ant-dropdown-button"
-    style="margin-left:8px"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Dropdown
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      type="button"
+    >
+      <i
+        aria-label="icon: user"
+        class="anticon anticon-user"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="user"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </i>
+    </button>
+  </div>
+  <div
+    class="ant-btn-group ant-dropdown-button"
  >
    <button
      class="ant-btn ant-btn-default"
@ -89,7 +126,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
      </span>
    </button>
    <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+      class="ant-btn ant-dropdown-trigger ant-btn-default"
      disabled=""
      type="button"
    >
@ -116,7 +153,6 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
  </div>
  <button
    class="ant-btn ant-dropdown-trigger"
-    style="margin-left:8px"
    type="button"
  >
    <span>
--- a/components/dropdown/tests/snapshots/dropdown-button.test.js.snap
+++ b/components/dropdown/tests/snapshots/dropdown-button.test.js.snap
@ -9,7 +9,7 @@ exports[`DropdownButton should support href like Button 1`] = `
    href="https://ant.design"
  />
  <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
+    class="ant-btn ant-dropdown-trigger ant-btn-default"
    type="button"
  >
    <i
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@ -8,10 +8,12 @@ title:
 ## zh-CN

 左边是按钮，右边是额外的相关功能菜单。
+可设置 `icon` 属性来修改右边的图标。

 ## en-US

 A button is on the left, and a related functional menu is on the right.
+You can set the icon property to modify the icon of right.

 ````jsx
 import {
@ -37,24 +39,35 @@ const menu = (
 );

 ReactDOM.render(
-  <div>
+  <div id="components-dropdown-demo-dropdown-button">
    <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
      Dropdown
    </Dropdown.Button>
+    <Dropdown.Button
+      overlay={menu}
+      icon={<Icon type="user" />}
+    >
+      Dropdown
+    </Dropdown.Button>
    <Dropdown.Button
      onClick={handleButtonClick}
      overlay={menu}
      disabled
-      style={{ marginLeft: 8 }}
    >
      Dropdown
    </Dropdown.Button>
    <Dropdown overlay={menu}>
-      <Button style={{ marginLeft: 8 }}>
+      <Button>
        Button <Icon type="down" />
      </Button>
    </Dropdown>
  </div>,
-  mountNode
+  mountNode,
 );
 ````
+
+````css
+#components-dropdown-demo-dropdown-button .ant-dropdown-button{
+  margin: 0 8px 8px 0;
+}
+````
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@ -16,7 +16,7 @@ The menu has multiple levels.
 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';

-const SubMenu = Menu.SubMenu;
+const { SubMenu } = Menu;

 const menu = (
  <Menu>
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@ -1,10 +1,12 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import Button from '../button';
 import { ButtonHTMLType } from '../button/button';
 import { ButtonGroupProps } from '../button/button-group';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import Dropdown, { DropDownProps } from './dropdown';
-import classNames from 'classnames';
+import Icon from '../icon';
+
 const ButtonGroup = Button.Group;

 type DropdownButtonType = 'primary' | 'ghost' | 'dashed';
@ -14,6 +16,10 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropDownProps {
  htmlType?: ButtonHTMLType;
  disabled?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /**
+   * @since 3.17.0
+   */
+  icon?: React.ReactNode;
  href?: string;
  children?: any;
 }
@ -44,6 +50,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
      placement,
      getPopupContainer,
      href,
+      icon = <Icon type="ellipsis" />,
      ...restProps
    } = this.props;

@ -67,7 +74,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
          {children}
        </Button>
        <Dropdown {...dropdownProps}>
-          <Button type={type} icon="ellipsis" />
+          <Button type={type}>{icon}</Button>
        </Dropdown>
      </ButtonGroup>
    );
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@ -34,14 +34,16 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide

 ### Dropdown.Button

-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| disabled | whether the dropdown menu is disabled | boolean | - |
-| overlay | the dropdown menu | [Menu](/components/menu) | - |
-| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
-| size | size of the button, the same as [Button](/components/button) | string | `default` |
-| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` |
-| type | type of the button, the same as [Button](/components/button) | string | `default` |
-| visible | whether the dropdown menu is visible | boolean | - |
-| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - |
-| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - |
+| Property | Description | Type | Default | Version |
+| -------- | ----------- | ---- | ------- |------- |
+| disabled | whether the dropdown menu is disabled | boolean | - ||
+| icon | icon of right | ReactNode | - | 3.17.0 |
+| overlay | the dropdown menu | [Menu](/components/menu) | - ||
+| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` ||
+| size | size of the button, the same as [Button](/components/button) | string | `default` ||
+| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` ||
+| type | type of the button, the same as [Button](/components/button) | string | `default` ||
+| visible | whether the dropdown menu is visible | boolean | - ||
+| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - ||
+| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - ||
+
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@ -35,14 +35,15 @@ title: Dropdown

 ### Dropdown.Button

-| 参数 | 说明 | 类型 | 默认值 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- |
-| disabled | 菜单是否禁用 | boolean | - |
-| overlay | 菜单 | [Menu](/components/menu/) | - |
-| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
-| size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' |
-| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` |
-| type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' |
-| visible | 菜单是否显示 | boolean | - |
-| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - |
+| disabled | 菜单是否禁用 | boolean | - |||
+| icon | 右侧的 icon | ReactNode | - | 3.17.0 |
+| overlay | 菜单 | [Menu](/components/menu/) | - ||
+| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` ||
+| size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' ||
+| trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` ||
+| type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' ||
+| visible | 菜单是否显示 | boolean | - ||
+| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - ||
+| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - ||
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
--- a/components/empty/style/index.less
+++ b/components/empty/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@empty-prefix-cls: ~'@{ant-prefix}-empty';
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@ -20,6 +20,7 @@ export interface FormItemProps {
  prefixCls?: string;
  className?: string;
  id?: string;
+  htmlFor?: string;
  label?: React.ReactNode;
  labelAlign?: FormLabelAlign;
  labelCol?: ColProps;
@ -60,7 +61,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
  helpShow = false;

  componentDidMount() {
-    const { children, help, validateStatus } = this.props;
+    const { children, help, validateStatus, id } = this.props;
    warning(
      this.getControls(children, true).length <= 1 ||
        (help !== undefined || validateStatus !== undefined),
@ -68,6 +69,12 @@ export default class FormItem extends React.Component<FormItemProps, any> {
      'Cannot generate `validateStatus` and `help` automatically, ' +
        'while there are more than one `getFieldDecorator` in it.',
    );
+
+    warning(
+      !id,
+      'Form.Item',
+      '`id` is deprecated for its label `htmlFor`. Please use `htmlFor` directly.',
+    );
  }

  getHelpMessage() {
@ -328,7 +335,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
          labelCol: contextLabelCol,
          colon: contextColon,
        }: FormContextProps) => {
-          const { label, labelCol, labelAlign, colon, id } = this.props;
+          const { label, labelCol, labelAlign, colon, id, htmlFor } = this.props;
          const required = this.isRequired();

          const mergedLabelCol: ColProps =
@ -361,7 +368,7 @@ export default class FormItem extends React.Component<FormItemProps, any> {
          return label ? (
            <Col {...mergedLabelCol} className={labelColClassName}>
              <label
-                htmlFor={id || this.getId()}
+                htmlFor={htmlFor || id || this.getId()}
                className={labelClassName}
                title={typeof label === 'string' ? label : ''}
                onClick={this.onLabelClick}
--- a/components/form/tests/label.test.js
+++ b/components/form/tests/label.test.js
@ -236,4 +236,30 @@ describe('Form', () => {
      ),
    ).toMatchSnapshot();
  });
+
+  describe('should `htmlFor` work', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    afterEach(() => {
+      errorSpy.mockReset();
+    });
+
+    afterAll(() => {
+      errorSpy.mockRestore();
+    });
+
+    it('should warning when use `id`', () => {
+      mount(<Form.Item id="bamboo" label="bamboo" />);
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: [antd: Form.Item] `id` is deprecated for its label `htmlFor`. Please use `htmlFor` directly.',
+      );
+    });
+
+    it('use `htmlFor`', () => {
+      const wrapper = mount(<Form.Item htmlFor="bamboo" label="bamboo" />);
+
+      expect(wrapper.find('label').props().htmlFor).toBe('bamboo');
+    });
+  });
 });
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -193,17 +193,18 @@ More option at [rc-form option](https://github.com/react-component/form#option-o

 Note: if Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.

-| Property | Description | Type | Default Value |
-| -------- | ----------- | ---- | ------------- |
-| colon | Used with `label`, whether to display `:` after label text. | boolean | true |
-| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode |  |
-| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
-| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode |  |
-| label | Label text | string\|ReactNode |  |
-| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) |  |
-| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
-| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string |  |
-| wrapperCol | The layout for input controls, same as `labelCol`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) |  |
+| Property | Description | Type | Default Value | Version |
+| -------- | ----------- | ---- | ------------- | ------- |
+| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
+| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode | | |
+| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | |
+| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | | |
+| htmlFor | Set sub label `htmlFor`. | string | | 3.17.0 |
+| label | Label text | string\|ReactNode | | |
+| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | | |
+| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | |
+| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | |
+| wrapperCol | The layout for input controls, same as `labelCol`. You can set on Form one time after 3.14.0. Will take FormItem's prop when both set with Form. | [object](https://ant.design/components/grid/#Col) | | |

 ### Validation Rules

--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -195,17 +195,18 @@ validateFields(['field1', 'field2'], options, (errors, values) => {

 注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。

-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true |
-| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode |  |
-| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
-| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode |  |
-| label | label 标签的文本 | string\|ReactNode |  |
-| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) |  |
-| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
-| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string |  |
-| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) |  |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true | |
+| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | | |
+| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | |
+| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | | |
+| htmlFor | 设置子元素 label `htmlFor` 属性 | string | | 3.17.0 |
+| label | label 标签的文本 | string\|ReactNode | | |
+| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | |
+| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | |
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol。在 3.14.0 之后，你可以通过 Form 的 labelCol 进行统一设置。当和 Form 同时设置时，以 FormItem 为准。 | [object](https://ant.design/components/grid/#Col) | | |

 ### 校验规则

--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import '../../button/style/mixin';
@ -457,7 +457,7 @@ form {
 }

 .has-warning {
-  .form-control-validation(@warning-color; @warning-color;);
+  .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @warning-color;
@ -506,7 +506,7 @@ form {
 }

 .has-error {
-  .form-control-validation(@error-color; @error-color;);
+  .form-control-validation(@error-color; @error-color; @form-error-input-bg;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @error-color;
--- a/components/form/style/mixin.less
+++ b/components/form/style/mixin.less
@ -30,6 +30,7 @@
    .@{ant-prefix}-input {
      &,
      &:hover {
+        background-color: @background-color;
        border-color: @border-color;
      }

--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

--- a/components/icon/style/index.less
+++ b/components/icon/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@icon-prefix-cls: ~'@{ant-prefix}-icon';
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';

--- a/components/input/style/index.less
+++ b/components/input/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';

--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@input-affix-width: 19px;
--- a/components/input/style/search-input.less
+++ b/components/input/style/search-input.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../button/style/mixin';
@import './mixin';
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@layout-prefix-cls: ~'@{ant-prefix}-layout';
--- a/components/list/Item.tsx
+++ b/components/list/Item.tsx
@ -113,9 +113,10 @@ export default class Item extends React.Component<ListItemProps, any> {
        ))}
      </ul>
    );
+    const Tag = grid ? 'div' : 'li';
    const itemChildren = (
-      <div
-        {...others}
+      <Tag
+        {...others as any} // `li` element `onCopy` prop args is not same as `div`
        className={classNames(`${prefixCls}-item`, className, {
          [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
        })}
@ -131,7 +132,7 @@ export default class Item extends React.Component<ListItemProps, any> {
              </div>,
            ]
          : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
-      </div>
+      </Tag>
    );

    return grid ? (
--- a/components/list/tests/snapshots/Item.test.js.snap
+++ b/components/list/tests/snapshots/Item.test.js.snap
@ -10,44 +10,48 @@ exports[`List Item Layout horizontal itemLayout List should accept extra node 1`
    <div
      class="ant-spin-container"
    >
-      <div
-        class="ant-list-item"
+      <ul
+        class="ant-list-items"
      >
-        <div
-          class="ant-list-item-meta"
+        <li
+          class="ant-list-item"
        >
          <div
-            class="ant-list-item-meta-content"
+            class="ant-list-item-meta"
          >
-            <h4
-              class="ant-list-item-meta-title"
-            >
-              <a
-                href="http://ant.design"
-              >
-                ant design
-              </a>
-            </h4>
            <div
-              class="ant-list-item-meta-description"
+              class="ant-list-item-meta-content"
            >
-              Ant Design, a design language for background applications, is refined by Ant UED Team.
+              <h4
+                class="ant-list-item-meta-title"
+              >
+                <a
+                  href="http://ant.design"
+                >
+                  ant design
+                </a>
+              </h4>
+              <div
+                class="ant-list-item-meta-description"
+              >
+                Ant Design, a design language for background applications, is refined by Ant UED Team.
+              </div>
            </div>
          </div>
-        </div>
-        <ul
-          class="ant-list-item-action"
-        >
-          <li>
-            <a>
-              Action
-            </a>
-          </li>
-        </ul>
-        <span>
-          extra
-        </span>
-      </div>
+          <ul
+            class="ant-list-item-action"
+          >
+            <li>
+              <a>
+                Action
+              </a>
+            </li>
+          </ul>
+          <span>
+            extra
+          </span>
+        </li>
+      </ul>
    </div>
  </div>
 </div>
--- a/components/list/tests/snapshots/demo.test.js.snap
+++ b/components/list/tests/snapshots/demo.test.js.snap
--- a/components/list/tests/snapshots/pagination.test.js.snap
+++ b/components/list/tests/snapshots/pagination.test.js.snap
@ -10,16 +10,20 @@ exports[`List.pagination renders pagination correctly 1`] = `
    <div
      class="ant-spin-container"
    >
-      <div
-        class="ant-list-item ant-list-item-no-flex"
+      <ul
+        class="ant-list-items"
      >
-        Jack
-      </div>
-      <div
-        class="ant-list-item ant-list-item-no-flex"
-      >
-        Lucy
-      </div>
+        <li
+          class="ant-list-item ant-list-item-no-flex"
+        >
+          Jack
+        </li>
+        <li
+          class="ant-list-item ant-list-item-no-flex"
+        >
+          Lucy
+        </li>
+      </ul>
    </div>
  </div>
  <div
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@ -258,7 +258,11 @@ export default class List<T> extends React.Component<ListProps<T>, ListState> {
        );
      });

-      childrenContent = grid ? <Row gutter={grid.gutter}>{childrenList}</Row> : childrenList;
+      childrenContent = grid ? (
+        <Row gutter={grid.gutter}>{childrenList}</Row>
+      ) : (
+        <ul className={`${prefixCls}-items`}>{childrenList}</ul>
+      );
    } else if (!children && !isLoading) {
      childrenContent = this.renderEmpty(prefixCls, renderEmpty);
    }
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@ -1,4 +1,4 @@
-@import '../../style/themes/default';
+@import '../../style/themes/index';
@import '../../style/mixins/index';

@list-prefix-cls: ~'@{ant-prefix}-list';
@ -38,6 +38,12 @@
    text-align: center;
  }

+  &-items {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
  &-item {
    display: flex;
    align-items: center;
@ -144,7 +150,7 @@
    min-height: 32px;
  }

-  &-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child {
+  &-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
    border-bottom: 1px solid @border-color-split;
  }

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