docs: update modal doc (#26492)

* docs: update modal doc

* docs: sort modal props

.eslintignore

@@ -26,4 +26,5 @@ dist
 coverage
 **/*.d.ts
 # Scripts
-scripts/previewEditor/**/*
+scripts/previewEditor/**/*
+jest-stare

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,6 +18,8 @@ Please makes sure that these form are filled before submitting your pull request
 - [ ] TypeScript definition update
 - [ ] Bundle size optimization
 - [ ] Performance optimization
+- [ ] Enhancement feature
+- [ ] Internationalization
 - [ ] Refactoring
 - [ ] Code style optimization
 - [ ] Test Case

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -14,11 +14,13 @@
 - [ ] 日常 bug 修复
 - [ ] 站点、文档改进
 - [ ] 演示代码改进
-- [ ] 组件样式改进
+- [ ] 组件样式/交互改进
 - [ ] TypeScript 定义更新
 - [ ] 包体积优化
 - [ ] 性能优化
 - [ ] 重构
+- [ ] 功能增强
+- [ ] 国际化改进
 - [ ] 代码风格优化
 - [ ] 测试用例
 - [ ] 分支合并

.github/workflows/lighthouse-ci.yml

@@ -5,7 +5,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2-beta
+        with:
+          node-version: '14'
       - run: npm install && npm install -g @lhci/cli@0.4.x
       - run: npm run site
       - run: lhci autorun --upload.target=temporary-public-storage

CHANGELOG.en-US.md

@@ -15,6 +15,141 @@ timeline: true
 
 ---
 
+## 4.6.2
+
+`2020-08-31`
+
+- Upload
+  - 🐞 Fix Upload list status issue when in control mode. [#26481](https://github.com/ant-design/ant-design/pull/26481)
+  - 💄 Fix Upload `picture-card` style unexpected margin in Form.Item. [#26367](https://github.com/ant-design/ant-design/pull/26367)
+- 💄 Fix Select focus shadow style. [#26465](https://github.com/ant-design/ant-design/pull/26465) [@Rainy](https://github.com/Rainy)
+- Table
+  - 🐞 Fix Table Pagination not hide with empty data when show on top position. [#26143](https://github.com/ant-design/ant-design/pull/26143) [@zhangchen915](https://github.com/zhangchen915)
+  - 💄 Fix Table expand icon size issue when `@font-size-base` is `12px`. [#26409](https://github.com/ant-design/ant-design/pull/26409)
+- Space
+  - 🐞 Fix Space not support React.Fragment issue. [#26444](https://github.com/ant-design/ant-design/pull/26444)
+  - 🐞 Fix Space preserve empty dom node when `children` contains empty node. [#26389](https://github.com/ant-design/ant-design/pull/26389)
+- 🐞 Fix Badge not work when `status` or `color` is empty. [#26375](https://github.com/ant-design/ant-design/pull/26375) [@zhangchen915](https://github.com/zhangchen915)
+- 💄 Fix Tree draggable transition style. [#26387](https://github.com/ant-design/ant-design/pull/26387)
+- 🐞 Fix `colorPalette is not defined` when customize theme in some situation. [#26395](https://github.com/ant-design/ant-design/pull/26395)
+- TypeScript
+  - 🐞 Fix TimePicker.RangePicker typescript need `picker` issue. [#26446](https://github.com/ant-design/ant-design/pull/26446)
+  - 🐞 Upload extended `showUploadList` of Upload with `removeIcon` and `downloadIcon` properties. [#26406](https://github.com/ant-design/ant-design/pull/26406) [@bencallaway](https://github.com/bencallaway)
+- RTL
+  - 🐞 Fix the rtl style of Col. [#26479](https://github.com/ant-design/ant-design/pull/26479) [#26482](https://github.com/ant-design/ant-design/pull/26482) [@TrueMoein](https://github.com/TrueMoein)
+
+## 4.6.1
+
+`2020-08-24`
+
+- TypeScript
+  - 🐞 Fix Upload type declaration missing `children`. [#26347](https://github.com/ant-design/ant-design/pull/26347)
+
+## 4.6.0
+
+`2020-08-23`
+
+- 💄 Darker `@text-color` for WCAG 2.0 on contrast ratio. [#25630](https://github.com/ant-design/ant-design/pull/25630)
+- 🔥 New Image component. [#26296](https://github.com/ant-design/ant-design/pull/26296)
+- 🔥 Table support `sticky` prop to sticky header and scroll bar. [#25939](https://github.com/ant-design/ant-design/pull/25939)
+- Form
+  - 🆕 Form support style of required mark with `requiredMark` and deprecate `hideRequiredMark` prop. [#26309](https://github.com/ant-design/ant-design/pull/26309)
+  - 🆕 Form.List support the second `index` param in `add`. [#26081](https://github.com/ant-design/ant-design/pull/26081)
+- 🆕 VirtualList support no blink jump and fix Select blank dropdown issue. [#26306](https://github.com/ant-design/ant-design/pull/26306)
+- Typography
+  - 🆕 Support Typography.Text `success` type. [#26145](https://github.com/ant-design/ant-design/pull/26145) [@llwslc](https://github.com/llwslc)
+  - 🆕 Typography `copyable` support hide tooltip and `editable` support config icon and tooltip. [#25953](https://github.com/ant-design/ant-design/pull/25953) [@llwslc](https://github.com/llwslc)
+  - 🆕 Add Typography.Title level 5. [#25861](https://github.com/ant-design/ant-design/pull/25861)
+  - 🆕 Typography add `maxLength` & `autoSize` with `editable` config [#25373](https://github.com/ant-design/ant-design/pull/25373) [@CornerSkyless](https://github.com/CornerSkyless)
+- 🐞 Fix Transfer `filterOption` not trigger when search spaces. [#26335](https://github.com/ant-design/ant-design/pull/26335)
+- Progress
+  - 🐞 Fix Progress `steps` don't support `trailColor`. [#26323](https://github.com/ant-design/ant-design/pull/26323)
+  - 🐞 Fix Progress `success.percent` not working when `type="circle"`. [#26307](https://github.com/ant-design/ant-design/pull/26307)
+- 🐞 Fix Textarea don't display `defaultValue` when `value` is `undefined`. [#26327](https://github.com/ant-design/ant-design/pull/26327)
+- Cascader
+  - 🐞 Fix Cascader options not open with search after ESC pressing. [#26271](https://github.com/ant-design/ant-design/pull/26271) [@flyerH](https://github.com/flyerH)
+  - 💄 Optimize Cascader clear animation. [#26186](https://github.com/ant-design/ant-design/pull/26186)
+- 🗑 Remove deprecated `Button.Group` and please use Space component instead. [#26260](https://github.com/ant-design/ant-design/pull/26260)
+- Select
+  - 🆕 Select support `onClear` prop. [#25907](https://github.com/ant-design/ant-design/pull/25907)
+  - 🐞 Fix Select `mode="tags"` showing duplicated items when search. [#25907](https://github.com/ant-design/ant-design/pull/25907)
+  - 🐞 Fixed the style exception that was disabled when Select focused. [#26255](https://github.com/ant-design/ant-design/pull/26255)
+  - 🐞 Fix Select icon overlap with selections when `showArrow` enabled. [#26168](https://github.com/ant-design/ant-design/pull/26168) [@zhangchen915](https://github.com/zhangchen915)
+- DatePicker
+  - 🐞 Fix panel not correct when `picker` changed. [#26093](https://github.com/ant-design/ant-design/issues/26093)
+  - 🐞 Fix RangePicker do not close panel when click clear icon. [#26188](https://github.com/ant-design/ant-design/issues/26188)
+- 🐞 Fix Pagination font family style. [#26230](https://github.com/ant-design/ant-design/pull/26230) [@albertms10](https://github.com/albertms10)
+- 🐞 Fix Space children remount in some case. [#26219](https://github.com/ant-design/ant-design/pull/26219)
+- Badge
+  - 💄 Add `@badge-color` less variable. [#26159](https://github.com/ant-design/ant-design/pull/26159)
+  - 🆕 Badge support `size` prop. [#25851](https://github.com/ant-design/ant-design/pull/25851) [@moonrailgun](https://github.com/moonrailgun)
+- 🆕 Tabs `tabBarExtraSlot` support extra position. [#25138](https://github.com/ant-design/ant-design/pull/25138) [@jesse3mh9a](https://github.com/jesse3mh9a)
+- 💄 Optimize the display effect of Descriptions when there is more content. [#25903](https://github.com/ant-design/ant-design/pull/25903)
+- 🆕 message could be detroied by `message.desctroy(key)`. [#26052](https://github.com/ant-design/ant-design/pull/26052) [@lihqi](https://github.com/lihqi)
+- 💄 Adjust InputNumber handler bar to be hidden when `readOnly`. [#25998](https://github.com/ant-design/ant-design/pull/25998)
+- Locale
+  - 🌐 Add Galician locale support. [#26015](https://github.com/ant-design/ant-design/pull/26015) [@barreeeiroo](https://github.com/barreeeiroo)
+  - 🇱🇹 Add Lithuanian locale support. [#26312](https://github.com/ant-design/ant-design/pull/26312) [@mslotvinskij](https://github.com/mslotvinskij)
+  - 🌐 Use `kmr_IQ` to replace `ku_IQ`. [#26030](https://github.com/ant-design/ant-design/pull/26030)
+- RTL
+  - 💄 Optimize the connection line style in Tree RTL mode. [#26205](https://github.com/ant-design/ant-design/pull/26205)
+  - 💄 Optimize Dropdown RTL writing to avoid dark mode style overlays. [#26206](https://github.com/ant-design/ant-design/pull/26206)
+- TypeScript
+  - 🤖 Fix Form.Item `initialValue` missing definition. [#26292](https://github.com/ant-design/ant-design/pull/26292) [@miaoyuxinbaby](https://github.com/miaoyuxinbaby)
+  - 🤖 Form support generic type. [#25937](https://github.com/ant-design/ant-design/pull/25937)
+
+## 4.5.4
+
+`2020-08-12`
+
+- 🐞 Fix Form.Item `hidden` not working in less. [#26152](https://github.com/ant-design/ant-design/pull/26152)
+- 🐞 Fix Dropdown render issue when `overlay` is string. [#26135](https://github.com/ant-design/ant-design/pull/26135)
+- 🐞 Fix Table pagination disappear when last record in last page is deleted. [#26133](https://github.com/ant-design/ant-design/pull/26133) [@QoVoQ](https://github.com/QoVoQ)
+- Tree
+  - 🐞 Fix Tree.DirectoryTree can not use `scrollTo` with ref. [#26129](https://github.com/ant-design/ant-design/pull/26129)
+  - 🐞 Fix Tree lost line between top level nodes when enable `showLine`. [#25991](https://github.com/ant-design/ant-design/pull/25991) [@zhangchen915](https://github.com/zhangchen915)
+- 💄 Add `@badge-color` less variable. [#26159](https://github.com/ant-design/ant-design/pull/26159)
+- RTL
+  - 🐞 Fixed Input.Search border style in RTL mode. [#26156](https://github.com/ant-design/ant-design/pull/26156)
+  - 🐞 Fix the style of Input when `addonBefore` in RTL mode. [#26153](https://github.com/ant-design/ant-design/pull/26153)
+  - 🐞 Fix multiple style issues for DatePicker in RTL mode. [#26149](https://github.com/ant-design/ant-design/pull/26149) [#26157](https://github.com/ant-design/ant-design/pull/26157) [#26158](https://github.com/ant-design/ant-design/pull/26158)
+- TypeScript
+  - 🐞 Fix Slider `handleStyle` and `trackStyle` TypeScript definitions. [#26160](https://github.com/ant-design/ant-design/pull/26160)
+
+## 4.5.3
+
+`2020-08-08`
+
+- Menu
+  - 🐞 Fix horizontal Menu dark `theme` style under dark theme. [#26062](https://github.com/ant-design/ant-design/pull/26062)
+  - 🐞 Fix the position of the horizontal Menu in dark theme and RTL mode. [#26032](https://github.com/ant-design/ant-design/pull/26032)
+- Table
+  - 🐞 Fix Table crash when `dataSource` contains number. [#26042](https://github.com/ant-design/ant-design/pull/26042)
+  - 🐞 Fix Table empty filters throw warning. [#26001](https://github.com/ant-design/ant-design/pull/26001)
+- Form
+  - 🐞 Fix Form.Item `hidden` not work with `noStyle`. [#26020](https://github.com/ant-design/ant-design/pull/26020)
+  - 💄 Fix Form.Item margin is uncorrect in compact mode. [#26069](https://github.com/ant-design/ant-design/pull/26069)
+- Transfer
+  - 🐞 Fix the mouse style of the head dropDown when Transfer is `disabled`. [#26005](https://github.com/ant-design/ant-design/pull/26005)
+  - 🐞 Fix the problem that Pagination is not `disabled` when Transfer is `disabled`. [#26009](https://github.com/ant-design/ant-design/pull/26009)
+- Cascader
+  - 💄 Cascader selector down arrow doesn't rotate. [#26078](https://github.com/ant-design/ant-design/pull/26078) [@07akioni](https://github.com/07akioni)
+  - 🐞 Fix Cascader text overflow bug in Firefox. [#26011](https://github.com/ant-design/ant-design/pull/26011)
+  - 🐞 Fix the problem that the color of mouse hover border is abnormal when Cascader is `disabled`. [#25970](https://github.com/ant-design/ant-design/pull/25970)
+- Select
+  - 💄 Optimize the `disabled` style of Select multiple mode. [#25980](https://github.com/ant-design/ant-design/pull/25980)
+  - 🐞 Fix the mouse style of custom icon when Select is `disabled`. [#26002](https://github.com/ant-design/ant-design/pull/26002)
+- 🐞 Fix Breadcrumb.Item lost separator after wrapping in component. [#25984](https://github.com/ant-design/ant-design/pull/25984) [@flyerH](https://github.com/flyerH)
+- 🐞 Fix InputNumber dark theme handler background color. [#26072](https://github.com/ant-design/ant-design/pull/26072)
+- 🐞 Fix the missing `key` of Avatar.Group. [#26098](https://github.com/ant-design/ant-design/pull/26098)
+- 💄 Adjusts Mentions `readOnly` mouse style to native style. [#25977](https://github.com/ant-design/ant-design/pull/25977)
+- 💄 Add `@btn-line-height`. [#26014](https://github.com/ant-design/ant-design/pull/26014)
+- 💄 Optimize Pagination style when `simple` type and `disabled`. [#26008](https://github.com/ant-design/ant-design/pull/26008)
+- 🐞 Fix Modal `useModal` missing style issue. [#25967](https://github.com/ant-design/ant-design/pull/25967)
+- 🐞 Fix Steps RTL style when use `progress`. [#26075](https://github.com/ant-design/ant-design/pull/26075)
+- 🌐 Improve Arabic locale. [#26094](https://github.com/ant-design/ant-design/pull/26094) [@Mohelm97](https://github.com/Mohelm97)
+- 🌐 Improve fr_FR localization. [#26034](https://github.com/ant-design/ant-design/pull/26034) [@Thanaen](https://github.com/Thanaen)
+
 ## 4.5.2
 
 `2020-08-02`

CHANGELOG.zh-CN.md

@@ -15,6 +15,141 @@ timeline: true
 
 ---
 
+## 4.6.2
+
+`2020-08-31`
+
+- Upload
+  - 🐞 修复 Upload 在受控模式下同步更新导致的状态错误问题。[#26481](https://github.com/ant-design/ant-design/pull/26481)
+  - 💄 修复 Upload 图片样式在 Form.Item 中有异常 margin 的问题。[#26367](https://github.com/ant-design/ant-design/pull/26367)
+- 💄 修复 Select focus 状态样式无阴影。[#26465](https://github.com/ant-design/ant-design/pull/26465) [@Rainy](https://github.com/Rainy)
+- Table
+  - 🐞 修复 Table Pagination 展示于上侧且没有数据时不消失的问题。[#26143](https://github.com/ant-design/ant-design/pull/26143) [@zhangchen915](https://github.com/zhangchen915)
+  - 💄 修复 Table 展开图标在 `@font-size-base` 为 `12px` 时样式错位的问题。[#26409](https://github.com/ant-design/ant-design/pull/26409)
+- Space
+  - 🐞 修复 Space 不支持 React.Fragment 的问题。[#26444](https://github.com/ant-design/ant-design/pull/26444)
+  - 🐞 修复 Space 在 `children` 中包含空节点时会出现空 dom 的问题。[#26389](https://github.com/ant-design/ant-design/pull/26389)
+- 🐞 修复 Badge 在 `status` 或 `color` 为空时不展示。[#26375](https://github.com/ant-design/ant-design/pull/26375) [@zhangchen915](https://github.com/zhangchen915)
+- 💄 修复 Tree `draggable` 切换时样式 transition 变化的问题。[#26387](https://github.com/ant-design/ant-design/pull/26387)
+- 🐞 修复使用主题有时会报 `colorPalette is not defined` 的问题。[#26395](https://github.com/ant-design/ant-design/pull/26395)
+- TypeScript
+  - 🐞 修复 TimePicker.RangePicker 定义需要 `picker` 的问题。[#26446](https://github.com/ant-design/ant-design/pull/26446)
+  - 🐞 Upload 组件 `showUploadList` 类型添加 `removeIcon` 和 `downloadIcon` 属性声明。[#26406](https://github.com/ant-design/ant-design/pull/26406) [@bencallaway](https://github.com/bencallaway)
+- RTL
+  - 🐞 修复 Col RTL 样式。[#26479](https://github.com/ant-design/ant-design/pull/26479) [#26482](https://github.com/ant-design/ant-design/pull/26482) [@TrueMoein](https://github.com/TrueMoein)
+
+## 4.6.1
+
+`2020-08-24`
+
+- TypeScript
+  - 🐞 修复 Upload 类型声明丢失 `children` 的问题。[#26347](https://github.com/ant-design/ant-design/pull/26347)
+
+## 4.6.0
+
+`2020-08-23`
+
+- 💄 加深默认文本 `@text-color` 以满足 WCAG 2.0 对比度的规范。[#25630](https://github.com/ant-design/ant-design/pull/25630)
+- 🔥 新增图片组件 Image。[#26296](https://github.com/ant-design/ant-design/pull/26296)
+- 🔥 Table 新增 `sticky` 属性以支持固定表头和滚动条。[#25939](https://github.com/ant-design/ant-design/pull/25939)
+- Form
+  - 🆕 Form 添加 `requiredMark` 属性以支持设置必选样式，废弃原 `hideRequiredMark`。[#26309](https://github.com/ant-design/ant-design/pull/26309)
+  - 🆕 Form.List 中的 `add` 方法支持第二个 `index` 参数。[#26081](https://github.com/ant-design/ant-design/pull/26081)
+- 🆕 虚拟滚动支持无闪动滚动，修复 Select/TreeSelect 滚动时列表空白的问题。[#26306](https://github.com/ant-design/ant-design/pull/26306)
+- Typography
+  - 🆕 新增 Typography.Text `success` 类型。[#26145](https://github.com/ant-design/ant-design/pull/26145) [@llwslc](https://github.com/llwslc)
+  - 🆕 Typography `copyable` 支持隐藏提示，`editable` 支持设置图标与提示。[#25953](https://github.com/ant-design/ant-design/pull/25953) [@llwslc](https://github.com/llwslc)
+  - 🆕 新增 Typography.Title 5 级标题。[#25861](https://github.com/ant-design/ant-design/pull/25861)
+  - 🆕 Typography 的 `editable` 配置中增加了 `maxLength` 和 `autoSize` 属性。[#25373](https://github.com/ant-design/ant-design/pull/25373) [@CornerSkyless](https://github.com/CornerSkyless)
+- 🐞 修复 Transfer 搜索空格时 `filterOption` 没有触发的问题。[#26335](https://github.com/ant-design/ant-design/pull/26335)
+- Progress
+  - 🐞 修复 Progress `steps` 属性对于 `trailColor` 不生效的问题。[#26323](https://github.com/ant-design/ant-design/pull/26323)
+  - 🐞 修复 Progress 当 `type="circle"` 时 `success.percent` 不生效的问题。[#26307](https://github.com/ant-design/ant-design/pull/26307)
+- 🐞 修复 Textarea 当 `value` 为 `undefined` 时未显示 `defaultValue` 问题。[#26327](https://github.com/ant-design/ant-design/pull/26327)
+- Cascader
+  - 🐞 修复 Cascader 在按下 ESC 键，然后通过输入进行搜索时 `options` 不展开的问题。[#26271](https://github.com/ant-design/ant-design/pull/26271) [@flyerH](https://github.com/flyerH)
+  - 💄 优化 Cascader 清除动画效果。[#26186](https://github.com/ant-design/ant-design/pull/26186)
+- 🗑 移除遗留的 Button.Group 支持，请使用 Space 代替。[#26260](https://github.com/ant-design/ant-design/pull/26260)
+- Select
+  - 🆕 Select 支持 `onClear` 属性。[#25907](https://github.com/ant-design/ant-design/pull/25907)
+  - 🐞 修复 Select `mode="tags"` 搜索显示两条重复条目的问题。[#25907](https://github.com/ant-design/ant-design/pull/25907)
+  - 🐞 修复 Select 聚焦时被禁用的样式异常问题。[#26255](https://github.com/ant-design/ant-design/pull/26255)
+  - 🐞 修复多选模式的 Select 在 `showArrow` 时图标重叠问题。[#26168](https://github.com/ant-design/ant-design/pull/26168) [@zhangchen915](https://github.com/zhangchen915)
+- DatePicker
+  - 🐞 修复 `picker` 属性改变时渲染面板不会改变的问题。[#26093](https://github.com/ant-design/ant-design/issues/26093)
+  - 🐞 修复 RangePicker 点击清除按钮面板不会关闭的问题。[#26188](https://github.com/ant-design/ant-design/issues/26188)
+- 🐞 修复 Pagination 字体相关样式问题。[#26230](https://github.com/ant-design/ant-design/pull/26230) [@albertms10](https://github.com/albertms10)
+- 🐞 修复 Space `children` 有时会重新渲染的问题。[#26219](https://github.com/ant-design/ant-design/pull/26219)
+- Badge
+  - 💄 新增 `@badge-color` less 变量。[#26159](https://github.com/ant-design/ant-design/pull/26159)
+  - 🆕 Badge 新增 `size` 属性用于设置大小。[#25851](https://github.com/ant-design/ant-design/pull/25851) [@moonrailgun](https://github.com/moonrailgun)
+- 🆕 Tabs 可自定义`tabBarExtraContent` 的渲染位置。[#25138](https://github.com/ant-design/ant-design/pull/25138) [@jesse3mh9a](https://github.com/jesse3mh9a)
+- 💄 优化 Descriptions 在内容比较多时的显示效果。[#25903](https://github.com/ant-design/ant-design/pull/25903)
+- 🆕 message 支持通过 `message.desctroy(key)` 销毁。[#26052](https://github.com/ant-design/ant-design/pull/26052) [@lihqi](https://github.com/lihqi)
+- 💄 调整 InputNumber 操作栏在 `readOnly` 时为隐藏。[#25998](https://github.com/ant-design/ant-design/pull/25998)
+- 国际化
+  - 🌐 添加加利西亚语支持。[#26015](https://github.com/ant-design/ant-design/pull/26015) [@barreeeiroo](https://github.com/barreeeiroo)
+  - 🇱🇹 添加立陶宛语支持。[#26312](https://github.com/ant-design/ant-design/pull/26312) [@mslotvinskij](https://github.com/mslotvinskij)
+  - 🌐 新增 `kmr_IQ` 语言包用以代替 ku_IQ。[#26030](https://github.com/ant-design/ant-design/pull/26030)
+- RTL
+  - 💄 优化 Tree RTL 模式下连接线的样式。[#26205](https://github.com/ant-design/ant-design/pull/26205)
+  - 💄 优化 Dropdown RTL 写法避免暗黑模式样式覆盖。[#26206](https://github.com/ant-design/ant-design/pull/26206)
+- TypeScript
+  - 🤖 修复 Form.Item `initialValue` 定义丢失问题。[#26292](https://github.com/ant-design/ant-design/pull/26292) [@miaoyuxinbaby](https://github.com/miaoyuxinbaby)
+  - 🤖 Form 支持泛型。[#25937](https://github.com/ant-design/ant-design/pull/25937)
+
+## 4.5.4
+
+`2020-08-12`
+
+- 🐞 修复 Form.Item 在 `hidden` 时引用 less 样式时失效的问题。[#26152](https://github.com/ant-design/ant-design/pull/26152)
+- 🐞 修复 Dropdown `overlay` 为 string 时渲染错误的问题。[#26135](https://github.com/ant-design/ant-design/pull/26135)
+- 🐞 修复 Table 删除最后一页的最后一条记录时分页消失的问题。[#26133](https://github.com/ant-design/ant-design/pull/26133) [@QoVoQ](https://github.com/QoVoQ)
+- Tree
+  - 🐞 修复 Tree.DirectoryTree 不能通过 `ref` 调用 `scrollTo` 的问题。[#26129](https://github.com/ant-design/ant-design/pull/26129)
+  - 🐞 修复 Tree 开启 `showLine` 时顶级节点间缺少连接线的问题。[#25991](https://github.com/ant-design/ant-design/pull/25991) [@zhangchen915](https://github.com/zhangchen915)
+- 💄 新增 `@badge-color` less 变量。[#26159](https://github.com/ant-design/ant-design/pull/26159)
+- RTL
+  - 🐞 修复 Input.Search 在 RTL 模式下的边框样式。[#26156](https://github.com/ant-design/ant-design/pull/26156)
+  - 🐞 修复 Input 在 RTL 模式下 `addonBefore` 的样式问题。[#26153](https://github.com/ant-design/ant-design/pull/26153)
+  - 🐞 修复 DatePicker 在 RTL 模式下的多个样式问题。[#26149](https://github.com/ant-design/ant-design/pull/26149) [#26157](https://github.com/ant-design/ant-design/pull/26157) [#26158](https://github.com/ant-design/ant-design/pull/26158)
+- TypeScript
+  - 🐞 修复 Slider `handleStyle` 和 `trackStyle` 属性的类型定义。[#26160](https://github.com/ant-design/ant-design/pull/26160)
+
+## 4.5.3
+
+`2020-08-08`
+
+- Menu
+  - 🐞 修复水平 Menu 黑暗 `theme` 在暗黑主题下的样式。[#26062](https://github.com/ant-design/ant-design/pull/26062)
+  - 🐞 修复水平方向 Menu 在暗黑主题 RTL 模式下的位置。[#26032](https://github.com/ant-design/ant-design/pull/26032)
+- Table
+  - 🐞 修复 Table `dataSource` 中含有非法数值时会报错的问题。[#26042](https://github.com/ant-design/ant-design/pull/26042)
+  - 🐞 修复 Table 空筛选项在控制台抛出 warning 的问题。[#26001](https://github.com/ant-design/ant-design/pull/26001)
+- Form
+  - 🐞 修复 Form.Item `hidden` 不能和 `noStyle` 一同使用的问题。[#26020](https://github.com/ant-design/ant-design/pull/26020)
+  - 💄 修复 Form 紧凑模式下表单项 margin 计算错误。[#26069](https://github.com/ant-design/ant-design/pull/26069)
+- Transfer
+  - 🐞 修复 Transfer 禁用时分页未禁用的问题。[#26009](https://github.com/ant-design/ant-design/pull/26009)
+  - 🐞 修复 Transfer 禁用时头部下拉按钮的鼠标样式。[#26005](https://github.com/ant-design/ant-design/pull/26005)
+- Cascader
+  - 🐞 修复 Cascader 在 Firefox 下文本和箭头重叠的问题。[#26011](https://github.com/ant-design/ant-design/pull/26011)
+  - 💄 Cascader 的选择器箭头不再旋转。[#26078](https://github.com/ant-design/ant-design/pull/26078) [@07akioni](https://github.com/07akioni)
+  - 🐞 修复 Cascader 禁用时鼠标悬浮边框颜色异常的问题。[#25970](https://github.com/ant-design/ant-design/pull/25970)
+- Select
+  - 💄 优化 Select 多选模式 `disabled` 样式。[#25980](https://github.com/ant-design/ant-design/pull/25980)
+  - 🐞 修复 Select 禁用时自定义图标的鼠标样式。[#26002](https://github.com/ant-design/ant-design/pull/26002)
+- 🐞 修复 Breadcrumb.Item 封装后丢失分隔符的问题。[#25984](https://github.com/ant-design/ant-design/pull/25984) [@flyerH](https://github.com/flyerH)
+- 🐞 修复 Avatar.Group key 缺失的问题。[#26098](https://github.com/ant-design/ant-design/pull/26098)
+- 💄 调整 Mentions `readOnly` 鼠标样式为原生样式。[#25977](https://github.com/ant-design/ant-design/pull/25977)
+- 💄 新增 `@btn-line-height` 变量。[#26014](https://github.com/ant-design/ant-design/pull/26014)
+- 💄 优化 Pagination 简洁分页禁用样式。[#26008](https://github.com/ant-design/ant-design/pull/26008)
+- 🐞 修复 Modal `useModal` 丢失样式的问题。[#25967](https://github.com/ant-design/ant-design/pull/25967)
+- 🐞 修复 InputNumber 暗黑主题下操作栏背景色。[#26072](https://github.com/ant-design/ant-design/pull/26072)
+- 🐞 修复 Steps 使用 `progress` 时的 RTL 样式问题。[#26075](https://github.com/ant-design/ant-design/pull/26075)
+- 🌐 改进阿拉伯语 Arabic 的国际化。[#26094](https://github.com/ant-design/ant-design/pull/26094) [@Mohelm97](https://github.com/Mohelm97)
+- 🌐 改进法语 fr_FR 国际化。[#26034](https://github.com/ant-design/ant-design/pull/26034) [@Thanaen](https://github.com/Thanaen)
+
 ## 4.5.2
 
 `2020-08-02`
@@ -160,11 +295,10 @@ timeline: true
 - Table
   - 🆕 Table 添加 `rowSelection.dirty` 以支持异步数据下保留 `key`。[#24718](https://github.com/ant-design/ant-design/pull/24718)
   - 🆕 Table `onChange` 添加 `action` 参数用于标示操作类型。[#24697](https://github.com/ant-design/ant-design/pull/24697)
-  - 🐞 Table 支持 `rowSelection.checkStrictly` 来完全受控节点。[#24931](https://github.com/ant-design/ant-design/pull/24931)
+  - 🐞 Table 支持 `rowSelection.checkStrictly`，现在父子节点选择状态可以关联了。[#24931](https://github.com/ant-design/ant-design/pull/24931)
   - 🐞 修复 Table `onSelectAll` 的 `changeRows` 参数不正确的问题。[#24931](https://github.com/ant-design/ant-design/pull/24931)
   - 🐞 修复 Table 树形数据叶节点行的展开按钮仍能被点击的问题。[#24931](https://github.com/ant-design/ant-design/pull/24931)
   - 🐞 修复 Table 展开图标隐藏时仍然有鼠标手型的问题。[#25170](https://github.com/ant-design/ant-design/pull/25170)
-  - 🐞 修复 Table 展开图标隐藏时仍然有鼠标手型的问题。[#25170](https://github.com/ant-design/ant-design/pull/25170)
 - TimePicker
   - 🐞 修复 TimePicker 面板 12 AM 显示为 0 AM 的问题。[#25174](https://github.com/ant-design/ant-design/pull/25174)
   - 🐞 修复 TimePicker 在 use12Hours 时没有用 0 ～ 23 来禁用小时的问题。[#25174](https://github.com/ant-design/ant-design/pull/25174)

azure-pipelines.yml

@@ -23,7 +23,7 @@ stages:
           - task: NodeTool@0
             displayName: 'Install Node.js'
             inputs:
-              versionSpec: '12.13.1'
+              versionSpec: '14.7.0'
           - script: npm install
             displayName: 'Install modules'
           - script: |
@@ -53,7 +53,7 @@ stages:
           - task: NodeTool@0
             displayName: 'Install Node.js'
             inputs:
-              versionSpec: '12.13.1'
+              versionSpec: '14.7.0'
           - script: npm install
             displayName: 'Install modules'
           - script: |
@@ -71,7 +71,7 @@ stages:
           - task: NodeTool@0
             displayName: 'Install Node.js'
             inputs:
-              versionSpec: '12.16.3'
+              versionSpec: '14.7.0'
           - script: npm install
             displayName: 'Install modules'
           - script: |
@@ -98,7 +98,7 @@ stages:
           - task: NodeTool@0
             displayName: 'Install Node.js'
             inputs:
-              versionSpec: '12.13.1'
+              versionSpec: '14.7.0'
           - script: npm install
             displayName: 'Install modules'
           - task: DownloadPipelineArtifact@2

components/__tests__/__snapshots__/index.test.js.snap

@@ -29,6 +29,7 @@ Array [
   "Form",
   "Grid",
   "Input",
+  "Image",
   "InputNumber",
   "Layout",
   "List",

components/_util/hooks/useForceUpdate.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+export default function useForceUpdate() {
+  const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+  return forceUpdate;
+}

components/_util/hooks/useSyncState.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import useForceUpdate from './useForceUpdate';
+
+type UseSyncStateProps<T> = [() => T, (newValue: T) => void];
+
+export default function useSyncState<T>(initialValue: T): UseSyncStateProps<T> {
+  const ref = React.useRef<T>(initialValue);
+  const forceUpdate = useForceUpdate();
+
+  return [
+    () => ref.current,
+    (newValue: T) => {
+      ref.current = newValue;
+      // re-render
+      forceUpdate();
+    },
+  ];
+}

components/_util/motion.tsx

@@ -1,36 +1,14 @@
-import * as React from 'react';
-
-type MotionFunc = (element: HTMLElement) => React.CSSProperties;
-type MotionEndFunc = (element: HTMLElement, event: TransitionEvent) => boolean;
-
-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
-  motionDeadline?: number;
-  removeOnLeave?: boolean;
-  leavedClassName?: string;
-  onAppearStart?: MotionFunc;
-  onAppearActive?: MotionFunc;
-  onAppearEnd?: MotionEndFunc;
-  onEnterStart?: MotionFunc;
-  onEnterActive?: MotionFunc;
-  onEnterEnd?: MotionEndFunc;
-  onLeaveStart?: MotionFunc;
-  onLeaveActive?: MotionFunc;
-  onLeaveEnd?: MotionEndFunc;
-}
+import { CSSMotionProps } from 'rc-motion';
+import { MotionEventHandler, MotionEndEventHandler } from 'rc-motion/lib/CSSMotion';
 
 // ================== 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 });
-const skipOpacityTransition: MotionEndFunc = (_, event) => event.propertyName === 'height';
+const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
+const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
+const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
+  (event as TransitionEvent).propertyName === 'height';
 
-const collapseMotion: Motion = {
+const collapseMotion: CSSMotionProps = {
   motionName: 'ant-motion-collapse',
   onAppearStart: getCollapsedHeight,
   onEnterStart: getCollapsedHeight,

components/affix/__tests__/Affix.test.tsx

@@ -13,6 +13,7 @@ class AffixMounter extends React.Component<{
   offsetBottom?: number;
   offsetTop?: number;
   onTestUpdatePosition?(): void;
+  onChange?: () => void;
 }> {
   private container: HTMLDivElement;
 
@@ -131,13 +132,15 @@ describe('Affix Render', () => {
 
   it('updatePosition when offsetTop changed', async () => {
     document.body.innerHTML = '<div id="mounter" />';
+    const onChange = jest.fn();
 
-    affixMounterWrapper = mount(<AffixMounter offsetTop={0} />, {
+    affixMounterWrapper = mount(<AffixMounter offsetTop={0} onChange={onChange} />, {
       attachTo: document.getElementById('mounter'),
     });
     await sleep(20);
 
     await movePlaceholder(-100);
+    expect(onChange).toHaveBeenLastCalledWith(true);
     expect(affixMounterWrapper.instance().affix.state.affixStyle?.top).toBe(0);
     affixMounterWrapper.setProps({
       offsetTop: 10,

components/affix/demo/debug.md

@@ -2,7 +2,7 @@
 order: 99
 title:
   zh-CN: 调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678
-  en-US:
+  en-US: debug
 debug: true
 ---
 

components/affix/index.en-US.md

@@ -19,8 +19,8 @@ Please note that Affix should not cover other content on the page, especially wh
 | --- | --- | --- | --- |
 | offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
 | offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
+| onChange | Callback for when Affix state is changed | function(affixed) | - |
 | target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |
-| onChange | Callback for when Affix state is changed | Function(affixed) | - |
 
 **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
 

components/affix/index.zh-CN.md

@@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 | --- | --- | --- | --- |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |
+| onChange | 固定状态改变时触发的回调函数 | function(affixed) | - |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
-| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | - |
 
 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
 

components/alert/__tests__/index.test.tsx

@@ -21,20 +21,17 @@ describe('Alert', () => {
 
   it('could be closed', () => {
     const onClose = jest.fn();
-    const afterClose = jest.fn();
     const wrapper = mount(
       <Alert
         message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
         type="warning"
         closable
         onClose={onClose}
-        afterClose={afterClose}
       />,
     );
     wrapper.find('.ant-alert-close-icon').simulate('click');
-    expect(onClose).toHaveBeenCalled();
     jest.runAllTimers();
-    expect(afterClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 
   describe('data and aria props', () => {

components/alert/index.tsx

@@ -8,7 +8,7 @@ import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import Animate from 'rc-animate';
+import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
 
 import { ConfigContext } from '../config-provider';
@@ -75,12 +75,12 @@ const Alert: AlertInterface = ({
   onMouseEnter,
   onMouseLeave,
   onClick,
+  afterClose,
   showIcon,
   closable,
   closeText,
   ...props
 }) => {
-  const [closing, setClosing] = React.useState(false);
   const [closed, setClosed] = React.useState(false);
 
   const ref = React.useRef<HTMLElement>();
@@ -88,14 +88,8 @@ const Alert: AlertInterface = ({
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
   const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setClosing(true);
-    props.onClose?.(e);
-  };
-
-  const animationEnd = () => {
-    setClosing(false);
     setClosed(true);
-    props.afterClose?.();
+    props.onClose?.(e);
   };
 
   const getType = () => {
@@ -149,7 +143,6 @@ const Alert: AlertInterface = ({
     prefixCls,
     `${prefixCls}-${type}`,
     {
-      [`${prefixCls}-closing`]: closing,
       [`${prefixCls}-with-description`]: !!description,
       [`${prefixCls}-no-icon`]: !isShowIcon,
       [`${prefixCls}-banner`]: !!banner,
@@ -161,30 +154,36 @@ const Alert: AlertInterface = ({
 
   const dataOrAriaProps = getDataOrAriaProps(props);
 
-  return closed ? null : (
-    <Animate
-      component=""
-      showProp="data-show"
-      transitionName={`${prefixCls}-slide-up`}
-      onEnd={animationEnd}
+  return (
+    <CSSMotion
+      visible={!closed}
+      motionName={`${prefixCls}-motion`}
+      motionAppear={false}
+      motionEnter={false}
+      onLeaveStart={node => ({
+        maxHeight: node.offsetHeight,
+      })}
+      onLeaveEnd={afterClose}
     >
-      <div
-        ref={ref}
-        data-show={!closing}
-        className={alertCls}
-        style={style}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onClick={onClick}
-        role="alert"
-        {...dataOrAriaProps}
-      >
-        {isShowIcon ? renderIconNode() : null}
-        <span className={`${prefixCls}-message`}>{message}</span>
-        <span className={`${prefixCls}-description`}>{description}</span>
-        {renderCloseIcon()}
-      </div>
-    </Animate>
+      {({ className: motionClassName, style: motionStyle }) => (
+        <div
+          ref={ref}
+          data-show={!closed}
+          className={classNames(alertCls, motionClassName)}
+          style={{ ...style, ...motionStyle }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onClick={onClick}
+          role="alert"
+          {...dataOrAriaProps}
+        >
+          {isShowIcon ? renderIconNode() : null}
+          <span className={`${prefixCls}-message`}>{message}</span>
+          <span className={`${prefixCls}-description`}>{description}</span>
+          {renderCloseIcon()}
+        </div>
+      )}
+    </CSSMotion>
   );
 };
 

components/alert/style/index.less

@@ -7,7 +7,6 @@
   .reset-component;
 
   position: relative;
-  max-height: 1000vh;
   padding: 8px 15px 8px 37px;
   word-wrap: break-word;
   border-radius: @border-radius-base;
@@ -146,18 +145,20 @@
     display: block;
   }
 
-  &&-closing {
-    max-height: 0;
-    margin: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    transform-origin: 50% 0;
-    transition: all 0.3s @ease-in-out-circ;
+  &&-motion-leave {
+    overflow: hidden;
+    opacity: 1;
+    transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ,
+      padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ,
+      margin-bottom 0.3s @ease-in-out-circ;
   }
 
-  &-slide-up-leave {
-    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
-    animation-fill-mode: both;
+  &&-motion-leave-active {
+    max-height: 0;
+    margin-bottom: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
   }
 
   &-banner {
@@ -167,30 +168,4 @@
   }
 }
 
-@keyframes antAlertSlideUpIn {
-  0% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-  100% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes antAlertSlideUpOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-  100% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-}
-
 @import './rtl';

components/auto-complete/__tests__/__snapshots__/index.test.js.snap

@@ -30,7 +30,7 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
   <div>
     <div
       class="ant-select-dropdown"
-      style="opacity:0"
+      style="opacity:0;pointer-events:none"
     >
       <div>
         <div
@@ -48,29 +48,34 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
           </div>
         </div>
         <div
-          class=""
-          style="height:256px"
+          class="rc-virtual-list"
+          style="position:relative"
         >
-          <div>
-            <div
-              class=""
-              style="display:flex;flex-direction:column"
-            >
+          <div
+            class="rc-virtual-list-holder"
+            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+          >
+            <div>
               <div
-                aria-selected="false"
-                class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                class="rc-virtual-list-holder-inner"
+                style="display:flex;flex-direction:column"
               >
                 <div
-                  class="ant-select-item-option-content"
+                  aria-selected="false"
+                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
                 >
-                  ReactNode
+                  <div
+                    class="ant-select-item-option-content"
+                  >
+                    ReactNode
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="ant-select-item-option-state"
+                    style="user-select:none;-webkit-user-select:none"
+                    unselectable="on"
+                  />
                 </div>
-                <span
-                  aria-hidden="true"
-                  class="ant-select-item-option-state"
-                  style="user-select:none;-webkit-user-select:none"
-                  unselectable="on"
-                />
               </div>
             </div>
           </div>

components/auto-complete/index.en-US.md

@@ -24,7 +24,7 @@ When there is a need for autocomplete functionality.
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultValue | Initial selected option | string | - |  |
 | disabled | Whether disabled select | boolean | false |  |
-| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true |  |
+| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true |  |
 | placeholder | The placeholder of input | string | - |  |
 | value | Selected option | string | - |  |
 | onBlur | Called when leaving the component | function() | - |  |

components/auto-complete/index.zh-CN.md

@@ -25,7 +25,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false` | boolean \| function(inputValue, option) | true |  |
+| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
 | placeholder | 输入框提示 | string | - |  |
 | value | 指定当前选中的条目 | string | - |  |

components/avatar/__tests__/Avatar.test.js

@@ -163,10 +163,7 @@ describe('Avatar Render', () => {
     const div = global.document.createElement('div');
     global.document.body.appendChild(div);
     const wrapper = mount(
-      <Avatar
-        shape="circle"
-        src="http://error.url"
-      >
+      <Avatar shape="circle" src="http://error.url">
         A
       </Avatar>,
       { attachTo: div },

components/avatar/demo/fallback.md

@@ -19,16 +19,10 @@ import { Avatar } from 'antd';
 
 ReactDOM.render(
   <>
-    <Avatar
-      shape="circle"
-      src="http://abc.com/not-exist.jpg"
-    >
+    <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       A
     </Avatar>
-    <Avatar
-      shape="circle"
-      src="http://abc.com/not-exist.jpg"
-    >
+    <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       ABC
     </Avatar>
   </>,

components/avatar/group.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
+import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import Avatar from './avatar';
 import Popover from '../popover';
@@ -28,13 +29,19 @@ const Group: React.FC<GroupProps> = props => {
   );
 
   const { children, maxPopoverPlacement = 'top' } = props;
-  const childrenWithProps = toArray(children);
+  const childrenWithProps = toArray(children).map((child, index) => {
+    return cloneElement(child, {
+      key: `avatar-key-${index}`,
+    });
+  });
+
   const numOfChildren = childrenWithProps.length;
   if (maxCount && maxCount < numOfChildren) {
     const childrenShow = childrenWithProps.slice(0, maxCount);
     const childrenHidden = childrenWithProps.slice(maxCount, numOfChildren);
     childrenShow.push(
       <Popover
+        key="avatar-popover-key"
         content={childrenHidden}
         trigger="hover"
         placement={maxPopoverPlacement}

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -2211,6 +2211,349 @@ exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/badge/demo/size.md correctly 1`] = `
+Array [
+  <span
+    class="ant-badge"
+  >
+    <a
+      class="head-example"
+      href="#"
+    />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+      >
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+      </span>
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <a
+      class="head-example"
+      href="#"
+    />
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-count-sm"
+      data-show="true"
+      title="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+      >
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+      </span>
+    </sup>
+  </span>,
+]
+`;
+
 exports[`renders ./components/badge/demo/status.md correctly 1`] = `
 <div>
   <span

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -65,6 +65,343 @@ exports[`Badge badge should support float number 2`] = `
 </Badge>
 `;
 
+exports[`Badge render Badge size when contains children 1`] = `
+Array [
+  <span
+    class="ant-badge"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-count"
+      data-show="true"
+      title="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+      >
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+      </span>
+    </sup>
+  </span>,
+  <span
+    class="ant-badge"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-count ant-badge-count-sm"
+      data-show="true"
+      title="5"
+    >
+      <span
+        class="ant-scroll-number-only"
+        style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+      >
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit current"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          0
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          1
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          2
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          3
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          4
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          5
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          6
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          7
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          8
+        </p>
+        <p
+          class="ant-scroll-number-only-unit"
+        >
+          9
+        </p>
+      </span>
+    </sup>
+  </span>,
+]
+`;
+
 exports[`Badge render Badge status/color when contains children 1`] = `
 Array [
   <span

components/badge/__tests__/index.test.js

@@ -140,6 +140,31 @@ describe('Badge', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('Badge should work when status/color is empty string', () => {
+    const wrapper = mount(
+      <>
+        <Badge color="" text="text" />
+        <Badge status="" text="text" />
+      </>,
+    );
+
+    expect(wrapper.find('.ant-badge')).toHaveLength(2);
+  });
+
+  it('render Badge size when contains children', () => {
+    const wrapper = render(
+      <>
+        <Badge size="default" count={5}>
+          <a />
+        </Badge>
+        <Badge size="small" count={5}>
+          <a />
+        </Badge>
+      </>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });
 
 describe('Ribbon', () => {

components/badge/demo/size.md

@@ -0,0 +1,30 @@
+---
+order: 9
+title:
+  zh-CN: 大小
+  en-US: Size
+---
+
+## zh-CN
+
+可以设置有数字徽标的大小。
+
+## en-US
+
+Set size of numeral Badge.
+
+```jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+  <>
+    <Badge size="default" count={5}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge size="small" count={5}>
+      <a href="#" className="head-example" />
+    </Badge>
+  </>,
+  mountNode,
+);
+```

components/badge/index.en-US.md

@@ -24,6 +24,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | false |  |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
+| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
 | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - |  |
 | title | Text to show when hovering over the badge | string | - |  |
 

components/badge/index.tsx

@@ -30,6 +30,7 @@ export interface BadgeProps {
   status?: PresetStatusColorType;
   color?: LiteralUnion<PresetColorType, string>;
   text?: React.ReactNode;
+  size?: 'default' | 'small';
   offset?: [number | string, number | string];
   title?: string;
 }
@@ -44,6 +45,7 @@ const Badge: CompoundedComponent = ({
   count = null,
   overflowCount = 99,
   dot = false,
+  size = 'default',
   title,
   offset,
   style,
@@ -60,9 +62,7 @@ const Badge: CompoundedComponent = ({
     return displayCount as string | number | null;
   };
 
-  const hasStatus = (): boolean => {
-    return !!status || !!color;
-  };
+  const hasStatus = (): boolean => (status !== null && status !== undefined) || (color !== null && color !== undefined);
 
   const isZero = () => {
     const numberedDisplayCount = getNumberedDisplayCount();
@@ -140,6 +140,7 @@ const Badge: CompoundedComponent = ({
     const scrollNumberCls = classNames({
       [`${prefixCls}-dot`]: bDot,
       [`${prefixCls}-count`]: !bDot,
+      [`${prefixCls}-count-sm`]: size === 'small',
       [`${prefixCls}-multiple-words`]:
         !bDot && count && count.toString && count.toString().length > 1,
       [`${prefixCls}-status-${status}`]: !!status,

components/badge/index.zh-CN.md

@@ -25,6 +25,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
+| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | - |  |
 

components/badge/style/index.less

@@ -23,7 +23,7 @@
     line-height: @badge-height;
     white-space: nowrap;
     text-align: center;
-    background: @highlight-color;
+    background: @badge-color;
     border-radius: @badge-height / 2;
     box-shadow: 0 0 0 1px @shadow-color-inverse;
     a,
@@ -32,6 +32,15 @@
     }
   }
 
+  &-count-sm {
+    min-width: @badge-height-sm;
+    height: @badge-height-sm;
+    padding: 0;
+    font-size: @badge-font-size-sm;
+    line-height: @badge-height-sm;
+    border-radius: @badge-height-sm / 2;
+  }
+
   &-multiple-words {
     padding: 0 8px;
   }

components/breadcrumb/BreadcrumbItem.tsx

@@ -17,7 +17,7 @@ interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
 }
 const BreadcrumbItem: BreadcrumbItemInterface = ({
   prefixCls: customizePrefixCls,
-  separator,
+  separator = '/',
   children,
   overlay,
   dropdownProps,

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -138,4 +138,23 @@ describe('Breadcrumb', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/25975
+  it('should support Breadcrumb.Item default separator', () => {
+    const MockComponent = () => {
+      return (
+        <span>
+          <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
+        </span>
+      );
+    };
+    const wrapper = render(
+      <Breadcrumb>
+        <Breadcrumb.Item>Location</Breadcrumb.Item>
+        <MockComponent />
+        <Breadcrumb.Item>Application Center</Breadcrumb.Item>
+      </Breadcrumb>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

@@ -185,6 +185,51 @@ exports[`Breadcrumb should render a menu 1`] = `
 </div>
 `;
 
+exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Location
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Mock Node
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Application Center
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;
+
 exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
 <div
   class="ant-breadcrumb"

components/breadcrumb/demo/basic.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-The simplest use
+The simplest use.
 
 ```jsx
 import { Breadcrumb } from 'antd';

components/breadcrumb/demo/separator-indepent.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-The separator can be customized by setting the separator property: `Breadcrumb.Separator`
+The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
 
 ```jsx
 import { Breadcrumb } from 'antd';

components/breadcrumb/demo/separator.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-The separator can be customized by setting the separator property: separator=">"
+The separator can be customized by setting the separator property: `separator=">"`.
 
 ```jsx
 import { Breadcrumb } from 'antd';

components/breadcrumb/index.en-US.md

@@ -28,10 +28,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| href | Target of hyperlink | string | - |  |
-| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
-| onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - |  |
 | dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
+| href | Target of hyperlink | string | - |  |
+| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - |  |
+| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
 
 ### Breadcrumb.Separator
 

components/breadcrumb/index.zh-CN.md

@@ -29,10 +29,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| href | 链接的目的地 | string | - |  |
-| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
-| onClick | 单击事件 | (e:MouseEvent)=>void | - |  |
 | dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
+| href | 链接的目的地 | string | - |  |
+| onClick | 单击事件 | (e:MouseEvent) => void | - |  |
+| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
 
 ### Breadcrumb.Separator
 

components/button/LoadingIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import CSSMotion from 'rc-animate/lib/CSSMotion';
+import CSSMotion from 'rc-motion';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 
 export interface LoadingIconProps {

components/button/index.en-US.md

@@ -28,31 +28,31 @@ And 4 other properties additionally.
 
 ## API
 
-To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
+Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| block | Option to fit button width to its parent width | boolean | false |  |
+| danger | Set the danger status of button | boolean | false |  |
 | disabled | Disabled state of button | boolean | false |  |
 | ghost | Make background transparent and invert text and border colors | boolean | false |  |
 | href | Redirect url of link button | string | - |  |
 | htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | Set the icon component of button | ReactNode | - |  |
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
+| onClick | Set the handler to handle `click` event | (event) => void | - |  |
 | shape | Can be set to `circle`, `round` or omitted | string | - |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | - |  |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Can be set to `primary` `ghost` `dashed` `danger` `link` `text` `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 |  |
-| danger | Set the danger status of button | boolean | false |  |
 
 It accepts all props which native buttons support.
 
 ## FAQ
 
-### How to remove space between 2 chinese characters
+### How to remove space between 2 chinese characters?
 
-Following the Ant Design specification, we will add one space between if Button contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
+Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
 

components/button/index.zh-CN.md

@@ -35,19 +35,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
+| danger | 设置危险按钮 | boolean | false |  |
 | disabled | 按钮失效状态 | boolean | false |  |
 | ghost | 幽灵属性，使按钮背景透明 | boolean | false |  |
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  |
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | 设置按钮的图标组件 | ReactNode | - |  |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
+| onClick | 点击按钮时的回调 | (event) => void | - |  |
 | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | - |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `danger` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event) => void | - |  |
-| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
-| danger | 设置危险按钮 | boolean | false |  |
 
 支持原生 button 的其他所有属性。
 
@@ -55,7 +55,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 
 ### 如何移除两个汉字之间的空格？
 
-根据 Ant Design 设计规范要求，我们会在按钮内只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
+根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格"  />
 

components/button/style/index.less

@@ -19,7 +19,7 @@
   // Fixing https://github.com/ant-design/ant-design/issues/13214
   // It is a render problem of chrome, which is only happened in the codesandbox demo
   // 0.001px solution works and I don't why
-  line-height: @line-height-base;
+  line-height: @btn-line-height;
   .btn;
   .btn-default;
 

components/calendar/__tests__/index.test.js

@@ -29,11 +29,13 @@ describe('Calendar', () => {
 
   it('Calendar should be selectable', () => {
     const onSelect = jest.fn();
-    const wrapper = mount(<Calendar onSelect={onSelect} />);
+    const onChange = jest.fn();
+    const wrapper = mount(<Calendar onSelect={onSelect} onChange={onChange} />);
     wrapper.find('.ant-picker-cell').at(0).simulate('click');
     expect(onSelect).toHaveBeenCalledWith(expect.anything());
     const value = onSelect.mock.calls[0][0];
     expect(Moment.isMoment(value)).toBe(true);
+    expect(onChange).toHaveBeenCalled();
   });
 
   it('only Valid range should be selectable', () => {

components/calendar/locale/gl_ES.tsx

@@ -0,0 +1,3 @@
+import glES from '../../date-picker/locale/gl_ES';
+
+export default glES;

components/calendar/locale/kmr_IQ.tsx

@@ -0,0 +1,3 @@
+import kmrIQ from '../../date-picker/locale/kmr_IQ';
+
+export default kmrIQ;

components/calendar/locale/ku_IQ.tsx

@@ -1,3 +0,0 @@
-import kuIQ from '../../date-picker/locale/ku_IQ';
-
-export default kuIQ;

components/calendar/locale/lt_LT.tsx

@@ -0,0 +1,3 @@
+import ltLT from '../../date-picker/locale/lt_LT';
+
+export default ltLT;

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -4,7 +4,7 @@ exports[`Cascader can be selected 1`] = `
 <div>
   <div
     class="ant-cascader-menus"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div>
       <ul
@@ -117,7 +117,7 @@ exports[`Cascader can be selected 2`] = `
 <div>
   <div
     class="ant-cascader-menus"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div>
       <ul
@@ -364,7 +364,7 @@ exports[`Cascader can be selected in RTL direction 1`] = `
 <div>
   <div
     class="ant-cascader-menus ant-cascader-menu-rtl"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div>
       <ul
@@ -477,7 +477,7 @@ exports[`Cascader can be selected in RTL direction 2`] = `
 <div>
   <div
     class="ant-cascader-menus ant-cascader-menu-rtl"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div>
       <ul
@@ -601,7 +601,7 @@ exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
 <div>
   <div
     class="ant-cascader-menus"
-    style="opacity: 0;"
+    style="opacity: 0; pointer-events: none;"
   >
     <div>
       <ul
@@ -679,7 +679,7 @@ exports[`Cascader popup correctly when panel is open 1`] = `
 <div>
   <div
     class="ant-cascader-menus"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div>
       <ul
@@ -757,7 +757,7 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
 <div>
   <div
     class="ant-cascader-menus"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div>
       <ul
@@ -881,7 +881,7 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
 <div>
   <div
     class="ant-cascader-menus ant-cascader-menu-rtl"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div>
       <ul
@@ -1074,6 +1074,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
 >
   <div>
     <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
       motionAppear={false}
       motionEnter={false}
       motionLeave={false}
@@ -1088,6 +1089,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
     >
       <CSSMotion
         internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
         motionAppear={false}
         motionEnter={false}
         motionLeave={false}
@@ -1125,17 +1127,16 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
         >
           <PopupInner
             className="ant-cascader-menus"
-            hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
             prefixCls="ant-cascader-menus"
             style={
               Object {
                 "opacity": 0,
+                "pointerEvents": "none",
                 "zIndex": undefined,
               }
             }
-            visible={true}
           >
             <div
               className="ant-cascader-menus"
@@ -1144,6 +1145,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
               style={
                 Object {
                   "opacity": 0,
+                  "pointerEvents": "none",
                   "zIndex": undefined,
                 }
               }
@@ -1442,7 +1444,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader wi
 <div>
   <div
     class="ant-cascader-menus"
-    style="opacity: 0;"
+    style="opacity: 0; pointer-events: none;"
   >
     <div>
       <ul
@@ -1514,6 +1516,7 @@ exports[`Cascader should render not found content 1`] = `
 >
   <div>
     <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
       motionAppear={false}
       motionEnter={false}
       motionLeave={false}
@@ -1528,6 +1531,7 @@ exports[`Cascader should render not found content 1`] = `
     >
       <CSSMotion
         internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
         motionAppear={false}
         motionEnter={false}
         motionLeave={false}
@@ -1565,17 +1569,16 @@ exports[`Cascader should render not found content 1`] = `
         >
           <PopupInner
             className="ant-cascader-menus ant-cascader-menu-empty"
-            hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
             prefixCls="ant-cascader-menus"
             style={
               Object {
                 "opacity": 0,
+                "pointerEvents": "none",
                 "zIndex": undefined,
               }
             }
-            visible={true}
           >
             <div
               className="ant-cascader-menus ant-cascader-menu-empty"
@@ -1584,6 +1587,7 @@ exports[`Cascader should render not found content 1`] = `
               style={
                 Object {
                   "opacity": 0,
+                  "pointerEvents": "none",
                   "zIndex": undefined,
                 }
               }
@@ -1835,6 +1839,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
 >
   <div>
     <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
       motionAppear={false}
       motionEnter={false}
       motionLeave={false}
@@ -1849,6 +1854,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
     >
       <CSSMotion
         internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
         motionAppear={false}
         motionEnter={false}
         motionLeave={false}
@@ -1886,17 +1892,16 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
         >
           <PopupInner
             className="ant-cascader-menus ant-cascader-menu-empty"
-            hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
             prefixCls="ant-cascader-menus"
             style={
               Object {
                 "opacity": 0,
+                "pointerEvents": "none",
                 "zIndex": undefined,
               }
             }
-            visible={true}
           >
             <div
               className="ant-cascader-menus ant-cascader-menu-empty"
@@ -1905,6 +1910,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
               style={
                 Object {
                   "opacity": 0,
+                  "pointerEvents": "none",
                   "zIndex": undefined,
                 }
               }

components/cascader/__tests__/index.test.js

@@ -6,6 +6,7 @@ import ConfigProvider from '../../config-provider';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import { sleep } from '../../../tests/utils';
 
 const options = [
   {
@@ -186,11 +187,18 @@ describe('Cascader', () => {
     expect(popupWrapper).toMatchSnapshot();
   });
 
-  it('should support to clear selection', () => {
+  it('should support to clear selection', async () => {
     const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
+    const willUnmount = jest.spyOn(wrapper.instance(), 'componentWillUnmount');
+    const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
     expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('Zhejiang / Hangzhou');
     wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
+    await sleep(300);
     expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('');
+    wrapper.unmount();
+    expect(willUnmount).toHaveBeenCalled();
+    expect(clearTimeoutSpy).toHaveBeenCalled();
+    clearTimeoutSpy.mockRestore();
   });
 
   it('should close popup when clear selection', () => {
@@ -508,4 +516,12 @@ describe('Cascader', () => {
       .simulate('click');
     expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
   });
+
+  it('options should open after press esc and then search', () => {
+    const wrapper = mount(<Cascader options={options} showSearch />);
+    wrapper.find('input').simulate('change', { target: { value: 'jin' } });
+    wrapper.find('input').simulate('keydown', { keyCode: KeyCode.ESC });
+    wrapper.find('input').simulate('change', { target: { value: 'jin' } });
+    expect(wrapper.state('popupVisible')).toBe(true);
+  });
 });

components/cascader/index.tsx

@@ -109,7 +109,7 @@ export interface CascaderProps {
   /** use this after antd@3.7.0 */
   fieldNames?: FieldNamesType;
   suffixIcon?: React.ReactNode;
-  dropdownRender?: (menus: React.ReactNode) => React.ReactNode
+  dropdownRender?: (menus: React.ReactNode) => React.ReactNode;
 }
 
 export interface CascaderState {
@@ -255,6 +255,8 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
 
   cachedOptions: CascaderOptionType[] = [];
 
+  clearSelectionTimeout: any;
+
   private input: Input;
 
   constructor(props: CascaderProps) {
@@ -269,6 +271,12 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     };
   }
 
+  componentWillUnmount() {
+    if (this.clearSelectionTimeout) {
+      clearTimeout(this.clearSelectionTimeout);
+    }
+  }
+
   setValue = (value: CascaderValueType, selectedOptions: CascaderOptionType[] = []) => {
     if (!('value' in this.props)) {
       this.setState({ value });
@@ -345,7 +353,11 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
   };
 
   handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { popupVisible } = this.state;
     const inputValue = e.target.value;
+    if (!popupVisible) {
+      this.handlePopupVisibleChange(true);
+    }
     this.setState({ inputValue });
   };
 
@@ -354,8 +366,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
     e.preventDefault();
     e.stopPropagation();
     if (!inputValue) {
-      this.setValue([]);
       this.handlePopupVisibleChange(false);
+      this.clearSelectionTimeout = setTimeout(() => {
+        this.setValue([]);
+      }, 200);
     } else {
       this.setState({ inputValue: '' });
     }

components/cascader/style/index.less

@@ -110,16 +110,14 @@
       color: @disabled-color;
       font-size: 12px;
       line-height: 12px;
-      transition: transform 0.2s;
-      &&-expand {
-        transform: rotate(180deg);
-      }
     }
   }
 
   // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810
   &-picker-label:hover + &-input {
-    .hover;
+    &:not(.@{cascader-prefix-cls}-picker-disabled &) {
+      .hover;
+    }
   }
 
   &-picker-small &-picker-clear,
@@ -190,8 +188,10 @@
   }
   &-menu-item {
     padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
+    overflow: hidden;
     line-height: @cascader-dropdown-line-height;
     white-space: nowrap;
+    text-overflow: ellipsis;
     cursor: pointer;
     transition: all 0.3s;
     &:hover {

components/checkbox/index.en-US.md

@@ -34,7 +34,7 @@ Checkbox component.
 | defaultValue | Default selected value | string\[] | \[] |  |
 | disabled | If disable all checkboxes | boolean | false |  |
 | name | The `name` property of all `input[type="checkbox"]` children | string | - |  |
-| options | Specifies options | string\[] | \[] |  |
+| options | Specifies options | string\[] \| Option\[] | \[] |  |
 | value | Used for setting the currently selected value | string\[] | \[] |  |
 | onChange | The callback function that is triggered when the state changes | function(checkedValue) | - |  |
 

components/config-provider/context.tsx

@@ -11,7 +11,7 @@ export interface ConfigConsumerProps {
   getTargetContainer?: () => HTMLElement;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   rootPrefixCls?: string;
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
   renderEmpty: RenderEmptyHandler;
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
@@ -32,7 +32,7 @@ export interface ConfigConsumerProps {
 
 export const ConfigContext = React.createContext<ConfigConsumerProps>({
   // We provide a default function for Context without provider
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
     if (customizePrefixCls) return customizePrefixCls;
 
     return suffixCls ? `ant-${suffixCls}` : 'ant';

components/config-provider/index.en-US.md

@@ -17,8 +17,8 @@ import { ConfigProvider } from 'antd';
 
 // ...
 
-return (
-  <ConfigProvider {...yourConfig}>
+export default () => (
+  <ConfigProvider direction="rtl">
     <App />
   </ConfigProvider>
 );
@@ -47,7 +47,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
 | locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - |
-| prefixCls | Set prefix class. Note: This will discard default styles from `antd` | string | `ant` |  |
+| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` |  |
 | pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true |  |
 | direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |

components/config-provider/index.zh-CN.md

@@ -18,8 +18,8 @@ import { ConfigProvider } from 'antd';
 
 // ...
 
-return (
-  <ConfigProvider {...yourConfig}>
+export default () => (
+  <ConfigProvider direction="rtl">
     <App />
   </ConfigProvider>
 );
@@ -48,7 +48,7 @@ return (
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body |  |
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
 | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - |  |
-| prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | `ant` |  |
+| prefixCls | 设置统一样式前缀。`注意：需要配合 less 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用` | string | `ant` |  |
 | pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true |  |
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |

components/date-picker/__tests__/DatePicker.test.js

@@ -78,4 +78,106 @@ describe('DatePicker', () => {
     const wrapper = mount(<DatePicker placeholder={undefined} />);
     expect(wrapper.find('input').props().placeholder).toEqual('Select date');
   });
+
+  it('showTime={{ showHour: true, showMinute: true }}', () => {
+    const wrapper = mount(
+      <DatePicker
+        defaultValue={moment()}
+        showTime={{ showHour: true, showMinute: true }}
+        format="YYYY-MM-DD"
+        open
+      />,
+    );
+    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(24);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+  });
+
+  it('showTime={{ showHour: true, showSecond: true }}', () => {
+    const wrapper = mount(
+      <DatePicker
+        defaultValue={moment()}
+        showTime={{ showHour: true, showSecond: true }}
+        format="YYYY-MM-DD"
+        open
+      />,
+    );
+    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(24);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+  });
+
+  it('showTime={{ showMinute: true, showSecond: true }}', () => {
+    const wrapper = mount(
+      <DatePicker
+        defaultValue={moment()}
+        showTime={{ showMinute: true, showSecond: true }}
+        format="YYYY-MM-DD"
+        open
+      />,
+    );
+    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+  });
+
+  it('12 hours', () => {
+    const wrapper = mount(
+      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
+    );
+    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(12);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(3).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(2);
+  });
+
+  it('24 hours', () => {
+    const wrapper = mount(
+      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
+    );
+    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(24);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+    expect(
+      wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
+        .length,
+    ).toBe(60);
+  });
 });

components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -45,7 +45,7 @@ Array [
   <div>
     <div
       class="ant-picker-dropdown"
-      style="opacity: 0;"
+      style="opacity: 0; pointer-events: none;"
     >
       <div
         class="ant-picker-panel-container"
@@ -669,7 +669,7 @@ Array [
   <div>
     <div
       class="ant-picker-dropdown"
-      style="opacity: 0;"
+      style="opacity: 0; pointer-events: none;"
     >
       <div
         class="ant-picker-panel-container"

components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap

@@ -150,7 +150,7 @@ Array [
   <div>
     <div
       class="ant-picker-dropdown ant-picker-dropdown-range"
-      style="opacity:0"
+      style="opacity:0;pointer-events:none"
     >
       <div
         class="ant-picker-range-wrapper ant-picker-date-range-wrapper"

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -6,7 +6,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom:8px"
   >
     <div
       class="ant-picker"
@@ -51,120 +51,180 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
   </div>
   <div
     class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <div
-      class="ant-space ant-space-horizontal ant-space-align-center"
+      class="ant-picker"
     >
       <div
-        class="ant-space-item"
-        style="margin-right:8px"
+        class="ant-picker-input"
       >
-        <div
-          class="ant-select ant-select-single ant-select-show-arrow"
+        <input
+          autocomplete="off"
+          placeholder="Select week"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
         >
-          <div
-            class="ant-select-selector"
-          >
-            <span
-              class="ant-select-selection-search"
-            >
-              <input
-                aria-activedescendant="undefined_list_0"
-                aria-autocomplete="list"
-                aria-controls="undefined_list"
-                aria-haspopup="listbox"
-                aria-owns="undefined_list"
-                autocomplete="off"
-                class="ant-select-selection-search-input"
-                readonly=""
-                role="combobox"
-                style="opacity:0"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="ant-select-selection-item"
-              title="Time"
-            >
-              Time
-            </span>
-          </div>
           <span
-            aria-hidden="true"
-            class="ant-select-arrow"
-            style="user-select:none;-webkit-user-select:none"
-            unselectable="on"
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
           >
-            <span
-              aria-label="down"
-              class="anticon anticon-down ant-select-suffix"
-              role="img"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <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>
-            </span>
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
           </span>
-        </div>
+        </span>
       </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-picker"
+    >
       <div
-        class="ant-space-item"
+        class="ant-picker-input"
       >
-        <div
-          class="ant-picker"
+        <input
+          autocomplete="off"
+          placeholder="Select month"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
         >
-          <div
-            class="ant-picker-input"
+          <span
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
           >
-            <input
-              autocomplete="off"
-              placeholder="Select time"
-              readonly=""
-              size="10"
-              title=""
-              value=""
-            />
-            <span
-              class="ant-picker-suffix"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <span
-                aria-label="clock-circle"
-                class="anticon anticon-clock-circle"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="clock-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                  />
-                  <path
-                    d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select quarter"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select year"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </div>
   </div>
@@ -3684,6 +3744,124 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/switchable.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <div
+      class="ant-select ant-select-single ant-select-show-arrow"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-activedescendant="undefined_list_0"
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-haspopup="listbox"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-item"
+          title="Time"
+        >
+          Time
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <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>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select time"
+          readonly=""
+          size="10"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="clock-circle"
+            class="anticon anticon-clock-circle"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="clock-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

components/date-picker/__tests__/__snapshots__/other.test.js.snap

@@ -4,7 +4,7 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
 <div>
   <div
     class="ant-picker-dropdown"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div
       class="ant-picker-panel-container"
@@ -197,7 +197,7 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
 <div>
   <div
     class="ant-picker-dropdown"
-    style="opacity:0"
+    style="opacity:0;pointer-events:none"
   >
     <div
       class="ant-picker-panel-container"

components/date-picker/demo/basic.md

@@ -14,46 +14,19 @@ title:
 Basic use case. Users can select or input a date in panel.
 
 ```jsx
-import { DatePicker, TimePicker, Select, Space } from 'antd';
+import { DatePicker, Space } from 'antd';
 
-const { Option } = Select;
-
-function TypeSelect({ type, onChange }) {
-  return (
-    <Select value={type} onChange={onChange}>
-      <Option value="time">Time</Option>
-      <Option value="date">Date</Option>
-      <Option value="week">Week</Option>
-      <Option value="month">Month</Option>
-      <Option value="quarter">Quarter</Option>
-      <Option value="year">Year</Option>
-    </Select>
-  );
-}
-
-function PickerWithType({ type, onChange }) {
-  if (type === 'time') return <TimePicker onChange={onChange} />;
-  if (type === 'date') return <DatePicker onChange={onChange} />;
-  return <DatePicker picker={type} onChange={onChange} />;
-}
-
-function SwitchablePicker() {
-  const [type, setType] = React.useState('time');
-  const onChange = value => {
-    console.log(value);
-  };
-  return (
-    <Space>
-      <TypeSelect type={type} onChange={setType} />
-      <PickerWithType type={type} onChange={onChange} />
-    </Space>
-  );
+function onChange(date, dateString) {
+  console.log(date, dateString);
 }
 
 ReactDOM.render(
-  <Space direction="vertical" size={12}>
-    <DatePicker />
-    <SwitchablePicker />
+  <Space direction="vertical">
+    <DatePicker onChange={onChange} />
+    <DatePicker onChange={onChange} picker="week" />
+    <DatePicker onChange={onChange} picker="month" />
+    <DatePicker onChange={onChange} picker="quarter" />
+    <DatePicker onChange={onChange} picker="year" />
   </Space>,
   mountNode,
 );

components/date-picker/demo/switchable.md

@@ -0,0 +1,46 @@
+---
+order: 1.1
+title:
+  zh-CN: 切换不同的选择器
+  en-US: Switchable picker
+---
+
+## zh-CN
+
+提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。
+
+## en-US
+
+Switch in different types of pickers by Select.
+
+```jsx
+import React, { useState } from 'react';
+import { DatePicker, TimePicker, Select, Space } from 'antd';
+
+const { Option } = Select;
+
+function PickerWithType({ type, onChange }) {
+  if (type === 'time') return <TimePicker onChange={onChange} />;
+  if (type === 'date') return <DatePicker onChange={onChange} />;
+  return <DatePicker picker={type} onChange={onChange} />;
+}
+
+function SwitchablePicker() {
+  const [type, setType] = useState('time');
+  return (
+    <Space>
+      <Select value={type} onChange={setType}>
+        <Option value="time">Time</Option>
+        <Option value="date">Date</Option>
+        <Option value="week">Week</Option>
+        <Option value="month">Month</Option>
+        <Option value="quarter">Quarter</Option>
+        <Option value="year">Year</Option>
+      </Select>
+      <PickerWithType type={type} onChange={value => console.log(value)} />
+    </Space>
+  );
+}
+
+ReactDOM.render(<SwitchablePicker />, mountNode);
+```

components/date-picker/index.en-US.md

@@ -156,7 +156,7 @@ Added in `4.1.0`.
 | defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
 | defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - |  |
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
-| disabledTime | To specify the time that cannot be selected | function(dates: \[moment, moment], partial: `start` \| `end`) | - |  |
+| disabledTime | To specify the time that cannot be selected | function(date: moment, partial: `start` \| `end`) | - |  |
 | format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD HH:mm:ss` |  |
 | ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |

components/date-picker/index.zh-CN.md

@@ -157,7 +157,7 @@ import locale from 'antd/es/locale/zh_CN';
 | defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - |  |
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
-| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `start` \| `end`) | - |  |
+| disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \| `end`) | - |  |
 | format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` |  |
 | ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |

components/date-picker/locale/gl_ES.tsx

@@ -0,0 +1,20 @@
+import CalendarLocale from 'rc-picker/lib/locale/gl_ES';
+import TimePickerLocale from '../../time-picker/locale/gl_ES';
+import { PickerLocale } from '../generatePicker';
+
+// Merge into a locale object
+const locale: PickerLocale = {
+  lang: {
+    placeholder: 'Escolla data',
+    rangePlaceholder: ['Data inicial', 'Data final'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

components/date-picker/locale/kmr_IQ.tsx

@@ -1,5 +1,5 @@
-import CalendarLocale from 'rc-picker/lib/locale/ku_IQ';
-import TimePickerLocale from '../../time-picker/locale/ku_IQ';
+import CalendarLocale from 'rc-picker/lib/locale/kmr_IQ';
+import TimePickerLocale from '../../time-picker/locale/kmr_IQ';
 import { PickerLocale } from '../generatePicker';
 
 // Merge into a locale object

components/date-picker/locale/lt_LT.tsx

@@ -0,0 +1,27 @@
+import CalendarLocale from 'rc-picker/lib/locale/lt_LT';
+import TimePickerLocale from '../../time-picker/locale/lt_LT';
+import { PickerLocale } from '../generatePicker';
+
+// Merge into a locale object
+const locale: PickerLocale = {
+  lang: {
+    placeholder: 'Pasirinkite datą',
+    yearPlaceholder: 'Pasirinkite metus',
+    quarterPlaceholder: 'Pasirinkite ketvirtį',
+    monthPlaceholder: 'Pasirinkite mėnesį',
+    weekPlaceholder: 'Pasirinkite savaitę',
+    rangePlaceholder: ['Pradžios data', 'Pabaigos data'],
+    rangeYearPlaceholder: ['Pradžios metai', 'Pabaigos metai'],
+    rangeMonthPlaceholder: ['Pradžios mėnesis', 'Pabaigos mėnesis'],
+    rangeWeekPlaceholder: ['Pradžios savaitė', 'Pabaigos savaitė'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

components/date-picker/locale/ru_RU.tsx

@@ -15,7 +15,7 @@ const locale: PickerLocale = {
     monthPlaceholder: 'Выберите месяц',
     weekPlaceholder: 'Выберите неделю',
     rangePlaceholder: ['Начальная дата', 'Конечная дата'],
-    rangeYearPlaceholder: ['Начальный годr', 'Год окончания'],
+    rangeYearPlaceholder: ['Начальный год', 'Год окончания'],
     rangeMonthPlaceholder: ['Начальный месяц', 'Конечный месяц'],
     rangeWeekPlaceholder: ['Начальная неделя', 'Конечная неделя'],
     ...CalendarLocale,

components/date-picker/style/rtl.less

@@ -102,6 +102,7 @@
     .picker-cell-inner(~'@{picker-cell-inner-cls}');
   }
 
+  // ======================== Body ==========================
   .picker-cell-inner(@cellClassName) {
     .@{cellClassName} {
       position: relative;
@@ -120,12 +121,21 @@
         left: 0;
       }
     }
+
     &-in-view&-range-end::before {
       .@{picker-prefix-cls}-panel-rtl & {
         right: 0;
         left: 50%;
       }
     }
+
+    &-in-view&-range-start&-range-end::before {
+      .@{picker-prefix-cls}-panel-rtl & {
+        right: 50%;
+        left: 50%;
+      }
+    }
+
     .@{picker-prefix-cls}-date-panel
       &-in-view&-in-range&-range-hover-start
       .@{cellClassName}::after {
@@ -134,12 +144,14 @@
         left: -6px - @border-width-base;
       }
     }
+
     .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
       .@{picker-prefix-cls}-panel-rtl & {
         right: -6px - @border-width-base;
         left: 0;
       }
     }
+
     // Hover with range start & end
     &-range-hover&-range-start::after {
       .@{picker-prefix-cls}-panel-rtl & {
@@ -147,6 +159,7 @@
         left: 50%;
       }
     }
+
     &-range-hover&-range-end::after {
       .@{picker-prefix-cls}-panel-rtl & {
         right: 50%;
@@ -154,6 +167,20 @@
       }
     }
 
+    // range start border-radius
+    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
+      .@{picker-prefix-cls}-panel-rtl & {
+        border-radius: 0 @border-radius-base @border-radius-base 0;
+      }
+    }
+
+    // range end border-radius
+    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
+      .@{picker-prefix-cls}-panel-rtl & {
+        border-radius: @border-radius-base 0 0 @border-radius-base;
+      }
+    }
+
     // Edge start
     tr > &-in-view&-range-hover:first-child::after,
     tr > &-in-view&-range-hover-end:first-child::after,
@@ -208,6 +235,17 @@
     }
   }
 
+  // ======================== Footer ========================
+  &-footer {
+    &-extra {
+      .@{picker-prefix-cls}-dropdown-rtl & {
+        direction: rtl;
+        text-align: right;
+      }
+    }
+  }
+
+  // ====================== Time Panel ======================
   &-time-panel {
     .@{picker-prefix-cls}-panel-rtl & {
       direction: ltr;

components/descriptions/Cell.tsx

@@ -54,16 +54,18 @@ const Cell: React.FC<CellProps> = ({
       style={style}
       colSpan={span}
     >
-      {label && (
-        <span
-          className={classNames(`${itemPrefixCls}-item-label`, {
-            [`${itemPrefixCls}-item-no-colon`]: !colon,
-          })}
-        >
-          {label}
-        </span>
-      )}
-      {content && <span className={classNames(`${itemPrefixCls}-item-content`)}>{content}</span>}
+      <div className={`${itemPrefixCls}-item-container`}>
+        {label && (
+          <span
+            className={classNames(`${itemPrefixCls}-item-label`, {
+              [`${itemPrefixCls}-item-no-colon`]: !colon,
+            })}
+          >
+            {label}
+          </span>
+        )}
+        {content && <span className={classNames(`${itemPrefixCls}-item-content`)}>{content}</span>}
+      </div>
     </Component>
   );
 };

components/descriptions/__tests__/__snapshots__/demo.test.js.snap

@@ -25,46 +25,58 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              UserName
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Zhou Maomao
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                UserName
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Zhou Maomao
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Telephone
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              1810000000
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Telephone
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                1810000000
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Live
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Hangzhou, Zhejiang
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Live
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Hangzhou, Zhejiang
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -74,31 +86,39 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Remark
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              empty
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Remark
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                empty
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="2"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Address
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Address
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -668,6 +688,156 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
             <td
               class="ant-descriptions-item"
               colspan="1"
+            >
+              <div
+                class="ant-descriptions-item-container"
+              >
+                <span
+                  class="ant-descriptions-item-label"
+                >
+                  Product
+                </span>
+                <span
+                  class="ant-descriptions-item-content"
+                >
+                  Cloud Database
+                </span>
+              </div>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <div
+                class="ant-descriptions-item-container"
+              >
+                <span
+                  class="ant-descriptions-item-label"
+                >
+                  Billing
+                </span>
+                <span
+                  class="ant-descriptions-item-content"
+                >
+                  Prepaid
+                </span>
+              </div>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <div
+                class="ant-descriptions-item-container"
+              >
+                <span
+                  class="ant-descriptions-item-label"
+                >
+                  time
+                </span>
+                <span
+                  class="ant-descriptions-item-content"
+                >
+                  18:00:00
+                </span>
+              </div>
+            </td>
+          </tr>
+          <tr
+            class="ant-descriptions-row"
+          >
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <div
+                class="ant-descriptions-item-container"
+              >
+                <span
+                  class="ant-descriptions-item-label"
+                >
+                  Amount
+                </span>
+                <span
+                  class="ant-descriptions-item-content"
+                >
+                  $80.00
+                </span>
+              </div>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <div
+                class="ant-descriptions-item-container"
+              >
+                <span
+                  class="ant-descriptions-item-label"
+                >
+                  Discount
+                </span>
+                <span
+                  class="ant-descriptions-item-content"
+                >
+                  $20.00
+                </span>
+              </div>
+            </td>
+            <td
+              class="ant-descriptions-item"
+              colspan="1"
+            >
+              <div
+                class="ant-descriptions-item-container"
+              >
+                <span
+                  class="ant-descriptions-item-label"
+                >
+                  Official
+                </span>
+                <span
+                  class="ant-descriptions-item-content"
+                >
+                  $60.00
+                </span>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
+<div
+  class="ant-descriptions"
+>
+  <div
+    class="ant-descriptions-header"
+  >
+    <div
+      class="ant-descriptions-title"
+    >
+      User Info
+    </div>
+  </div>
+  <div
+    class="ant-descriptions-view"
+  >
+    <table>
+      <tbody>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
             >
               <span
                 class="ant-descriptions-item-label"
@@ -679,59 +849,155 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               >
                 Cloud Database
               </span>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
+            </div>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
             >
               <span
                 class="ant-descriptions-item-label"
               >
-                Billing
+                Billing Mode
               </span>
               <span
                 class="ant-descriptions-item-content"
               >
                 Prepaid
               </span>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
             >
               <span
                 class="ant-descriptions-item-label"
               >
-                time
+                Automatic Renewal
               </span>
               <span
                 class="ant-descriptions-item-content"
               >
-                18:00:00
+                YES
               </span>
-            </td>
-          </tr>
-          <tr
-            class="ant-descriptions-row"
+            </div>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
           >
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
+            <div
+              class="ant-descriptions-item-container"
             >
               <span
                 class="ant-descriptions-item-label"
               >
-                Amount
+                Order time
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                2018-04-24 18:00:00
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="2"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Usage Time
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                2019-04-24 18:00:00
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="2"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Status
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                <span
+                  class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+                >
+                  <span
+                    class="ant-badge-status-dot ant-badge-status-processing"
+                  />
+                  <span
+                    class="ant-badge-status-text"
+                  >
+                    Running
+                  </span>
+                </span>
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Negotiated Amount
               </span>
               <span
                 class="ant-descriptions-item-content"
               >
                 $80.00
               </span>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
+            </div>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
             >
               <span
                 class="ant-descriptions-item-label"
@@ -743,26 +1009,199 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
               >
                 $20.00
               </span>
-            </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
             >
               <span
                 class="ant-descriptions-item-label"
               >
-                Official
+                Official Receipts
               </span>
               <span
                 class="ant-descriptions-item-content"
               >
                 $60.00
               </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+            </div>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Config Info
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Data disk type: MongoDB
+                <br />
+                Database version: 3.4
+                <br />
+                Package: dds.mongo.mid
+                <br />
+                Storage space: 10 GB
+                <br />
+                Replication factor: 3
+                <br />
+                Region: East China 1
+                <br />
+              </span>
+            </div>
+          </td>
+        </tr>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Official Receipts
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $60.00
+              </span>
+            </div>
+          </td>
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Config Info
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                <div
+                  class="ant-table-wrapper"
+                >
+                  <div
+                    class="ant-spin-nested-loading"
+                  >
+                    <div
+                      class="ant-spin-container"
+                    >
+                      <div
+                        class="ant-table ant-table-small"
+                      >
+                        <div
+                          class="ant-table-container"
+                        >
+                          <div
+                            class="ant-table-content"
+                          >
+                            <table
+                              style="table-layout:auto"
+                            >
+                              <colgroup />
+                              <thead
+                                class="ant-table-thead"
+                              >
+                                <tr>
+                                  <th
+                                    class="ant-table-cell"
+                                  >
+                                    姓名
+                                  </th>
+                                  <th
+                                    class="ant-table-cell"
+                                  >
+                                    年龄
+                                  </th>
+                                  <th
+                                    class="ant-table-cell"
+                                  >
+                                    住址
+                                  </th>
+                                </tr>
+                              </thead>
+                              <tbody
+                                class="ant-table-tbody"
+                              >
+                                <tr
+                                  class="ant-table-row ant-table-row-level-0"
+                                  data-row-key="1"
+                                >
+                                  <td
+                                    class="ant-table-cell"
+                                  >
+                                    胡彦斌
+                                  </td>
+                                  <td
+                                    class="ant-table-cell"
+                                  >
+                                    32
+                                  </td>
+                                  <td
+                                    class="ant-table-cell"
+                                  >
+                                    西湖区湖底公园1号
+                                  </td>
+                                </tr>
+                                <tr
+                                  class="ant-table-row ant-table-row-level-0"
+                                  data-row-key="2"
+                                >
+                                  <td
+                                    class="ant-table-cell"
+                                  >
+                                    胡彦祖
+                                  </td>
+                                  <td
+                                    class="ant-table-cell"
+                                  >
+                                    42
+                                  </td>
+                                  <td
+                                    class="ant-table-cell"
+                                  >
+                                    西湖区湖底公园1号
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </div>
 `;
@@ -792,31 +1231,43 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              UserName
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                UserName
+              </span>
+            </div>
           </th>
           <th
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Telephone
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Telephone
+              </span>
+            </div>
           </th>
           <th
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Live
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Live
+              </span>
+            </div>
           </th>
         </tr>
         <tr
@@ -826,31 +1277,43 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Zhou Maomao
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Zhou Maomao
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              1810000000
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                1810000000
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Hangzhou, Zhejiang
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Hangzhou, Zhejiang
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -860,21 +1323,29 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             class="ant-descriptions-item"
             colspan="2"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Address
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Address
+              </span>
+            </div>
           </th>
           <th
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Remark
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Remark
+              </span>
+            </div>
           </th>
         </tr>
         <tr
@@ -884,21 +1355,29 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
             class="ant-descriptions-item"
             colspan="2"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              empty
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                empty
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>

components/descriptions/__tests__/__snapshots__/index.test.js.snap

@@ -16,16 +16,20 @@ exports[`Descriptions Descriptions support colon 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label ant-descriptions-item-no-colon"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Product
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Cloud Database
-            </span>
+              <span
+                class="ant-descriptions-item-label ant-descriptions-item-no-colon"
+              >
+                Product
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -51,11 +55,15 @@ exports[`Descriptions Descriptions support style 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Cloud Database
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -80,16 +88,20 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
             class="ant-descriptions-item my-class"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Product
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Cloud Database
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Product
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -114,46 +126,58 @@ exports[`Descriptions column is number 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Product
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Cloud Database
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Product
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Billing
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Prepaid
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Billing
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Prepaid
+              </span>
+            </div>
           </td>
           <td
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              time
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              18:00:00
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                time
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                18:00:00
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -163,16 +187,20 @@ exports[`Descriptions column is number 1`] = `
             class="ant-descriptions-item"
             colspan="3"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Amount
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              $80.00
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Amount
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $80.00
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -197,16 +225,20 @@ exports[`Descriptions should work with React Fragment 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              bamboo
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              bamboo
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                bamboo
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                bamboo
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -216,16 +248,20 @@ exports[`Descriptions should work with React Fragment 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              bamboo
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              bamboo
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                bamboo
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                bamboo
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -235,16 +271,20 @@ exports[`Descriptions should work with React Fragment 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              bamboo
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              bamboo
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                bamboo
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                bamboo
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -269,11 +309,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Product
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Product
+              </span>
+            </div>
           </th>
         </tr>
         <tr
@@ -283,11 +327,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Cloud Database
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -297,11 +345,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Billing
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Billing
+              </span>
+            </div>
           </th>
         </tr>
         <tr
@@ -311,11 +363,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Prepaid
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Prepaid
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -325,11 +381,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              time
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                time
+              </span>
+            </div>
           </th>
         </tr>
         <tr
@@ -339,11 +399,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              18:00:00
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                18:00:00
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -353,11 +417,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Amount
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Amount
+              </span>
+            </div>
           </th>
         </tr>
         <tr
@@ -367,11 +435,15 @@ exports[`Descriptions vertical layout 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-content"
+            <div
+              class="ant-descriptions-item-container"
             >
-              $80.00
-            </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $80.00
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>
@@ -396,16 +468,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Product
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Cloud Database
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Product
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Cloud Database
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -415,16 +491,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Billing
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              Prepaid
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Billing
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                Prepaid
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -434,16 +514,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              time
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              18:00:00
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                time
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                18:00:00
+              </span>
+            </div>
           </td>
         </tr>
         <tr
@@ -453,16 +537,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
             class="ant-descriptions-item"
             colspan="1"
           >
-            <span
-              class="ant-descriptions-item-label"
+            <div
+              class="ant-descriptions-item-container"
             >
-              Amount
-            </span>
-            <span
-              class="ant-descriptions-item-content"
-            >
-              $80.00
-            </span>
+              <span
+                class="ant-descriptions-item-label"
+              >
+                Amount
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+              >
+                $80.00
+              </span>
+            </div>
           </td>
         </tr>
       </tbody>

components/descriptions/demo/text.md

@@ -0,0 +1,87 @@
+---
+order: 1
+debug: true
+title:
+  zh-CN: 复杂文本的情况
+  en-US: border
+---
+
+## zh-CN
+
+带边框和背景颜色列表。
+
+## en-US
+
+Descriptions with border and background color.
+
+```jsx
+import { Descriptions, Badge, Table } from 'antd';
+
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+];
+
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+];
+ReactDOM.render(
+  <Descriptions title="User Info" column={2}>
+    <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
+    <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
+    <Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
+    <Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
+    <Descriptions.Item label="Usage Time" span={2}>
+      2019-04-24 18:00:00
+    </Descriptions.Item>
+    <Descriptions.Item label="Status" span={3}>
+      <Badge status="processing" text="Running" />
+    </Descriptions.Item>
+    <Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
+    <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
+    <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
+    <Descriptions.Item label="Config Info">
+      Data disk type: MongoDB
+      <br />
+      Database version: 3.4
+      <br />
+      Package: dds.mongo.mid
+      <br />
+      Storage space: 10 GB
+      <br />
+      Replication factor: 3
+      <br />
+      Region: East China 1<br />
+    </Descriptions.Item>
+    <Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
+    <Descriptions.Item label="Config Info">
+      <Table size="small" pagination={false} dataSource={dataSource} columns={columns} />
+    </Descriptions.Item>
+  </Descriptions>,
+  mountNode,
+);
+```

components/descriptions/style/index.less

@@ -82,6 +82,7 @@
 
   &-item-content {
     display: table-cell;
+    flex: 1;
     color: @text-color;
     font-size: @font-size-base;
     line-height: @line-height-base;
@@ -89,10 +90,15 @@
 
   &-item {
     padding-bottom: 0;
+    vertical-align: top;
     > span {
       display: inline-flex;
       align-items: baseline;
     }
+
+    &-container {
+      display: flex;
+    }
   }
 
   &-middle {

components/divider/index.en-US.md

@@ -14,13 +14,11 @@ A divider line separates different content.
 
 ## API
 
-### Divider
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | className | The className of container | string | - |  |
 | dashed | Whether line is dashed | boolean | false |  |
 | orientation | The position of title inside divider | `left` \| `right` \| `center` | `center` |  |
+| plain | Divider text show as plain style | boolean | true | 4.2.0 |
 | style | The style object of container | CSSProperties | - |  |
 | type | The direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |
-| plain | Divider text show as plain style | boolean | true | 4.2.0 |

components/divider/index.zh-CN.md

@@ -20,6 +20,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
 | className   | 分割线样式类               | string                        | -            |       |
 | dashed      | 是否虚线                   | boolean                       | false        |       |
 | orientation | 分割线标题的位置           | `left` \| `right` \| `center` | `center`     |       |
+| plain       | 文字是否显示为普通正文样式 | boolean                       | false        | 4.2.0 |
 | style       | 分割线样式对象             | CSSProperties                 | -            |       |
 | type        | 水平还是垂直类型           | `horizontal` \| `vertical`    | `horizontal` |       |
-| plain       | 文字是否显示为普通正文样式 | boolean                       | false        | 4.2.0 |

components/dropdown/__tests__/__snapshots__/index.test.js.snap

@@ -11,7 +11,7 @@ Array [
   <div>
     <div
       class="ant-dropdown"
-      style="opacity:0"
+      style="opacity:0;pointer-events:none"
     >
       <div>
         menu
@@ -32,10 +32,10 @@ Array [
   <div>
     <div
       class="ant-dropdown"
-      style="opacity:0"
+      style="opacity:0;pointer-events:none"
     >
       <span>
-        overlayNode
+        string
       </span>
     </div>
   </div>,

components/dropdown/dropdown.tsx

@@ -87,7 +87,7 @@ const Dropdown: DropdownInterface = props => {
       overlayNode = overlay;
     }
     overlayNode = React.Children.only(
-      typeof overlayNode === 'string' ? <span>overlayNode</span> : overlayNode,
+      typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
     );
 
     const overlayProps = overlayNode.props;

components/dropdown/index.en-US.md

@@ -19,14 +19,14 @@ When there are more than a few options to choose from, you can wrap them in a `D
 | --- | --- | --- | --- | --- |
 | arrow | Whether the dropdown arrow should be visible | boolean | false |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
-| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
+| getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
-| overlayClassName | Class name of the dropdown root element | string | - |  |
-| overlayStyle | Style of the dropdown root element | object | - |  |
+| overlayClassName | The class name of the dropdown root element | string | - |  |
+| overlayStyle | The style of the dropdown root element | object | - |  |
+| onVisibleChange | Called when the visible state is changed | function(visible) | - |  |
 | placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | visible | Whether the dropdown menu is currently visible | boolean | - |  |
-| onVisibleChange | Called when the visible state is changed | function(visible) | - |  |
 
 You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
 
@@ -38,14 +38,14 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| buttonsRender | Custom buttons inside Dropdown.Button | ([buttons: ReactNode[]]) => ReactNode | - |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | icon | Icon (appears on the right) | ReactNode | - |  |
+| onClick | The same as [Button](/components/button): called when you click the button on the left | function | - |  |
+| onVisibleChange | Called when the visible state is changed | function | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) | - |  |
 | placement | Placement of popup 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 dropdown action | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | Type of the button, the same as [Button](/components/button) | string | `default` |  |
 | visible | Whether the dropdown menu is currently visible | boolean | - |  |
-| onClick | The same as [Button](/components/button): called when you click the button on the left | function | - |  |
-| onVisibleChange | Called when the visible state is changed | function | - |  |
-| buttonsRender | Custom buttons inside Dropdown.Button | ([buttons: ReactNode[]]) => ReactNode | - |  |

components/dropdown/index.zh-CN.md

@@ -27,29 +27,29 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | 下拉根元素的类名称 | string | - |  |
 | overlayStyle | 下拉根元素的样式 | object | - |  |
+| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function(visible) | - |  |
 | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | visible | 菜单是否显示 | boolean | - |  |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function(visible) | - |  |
 
 `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
 
 > 注意： Menu.Item 必须设置唯一的 key 属性。
 >
-> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`.
+> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`。
 
 ### Dropdown.Button
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| buttonsRender | 自定义左右两个按钮 | ([buttons: ReactNode[]]) => ReactNode | - |  |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | icon | 右侧的 icon | ReactNode | - |  |
+| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | function | - |  |
+| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function | - |  |
 | 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 | - |  |
-| buttonsRender | 自定义左右两个按钮 | ([buttons: ReactNode[]]) => ReactNode | - |  |

components/dropdown/style/rtl.less

@@ -16,7 +16,7 @@
   }
 
   &-menu {
-    &-rtl {
+    &&-rtl {
       direction: rtl;
       text-align: right;
     }

components/empty/__tests__/__snapshots__/demo.test.js.snap

@@ -99,9 +99,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
   <div
     class="config-provider"
   >
-    <h3>
+    <h4>
       Select
-    </h3>
+    </h4>
     <div
       class="ant-select ant-select-single ant-select-show-arrow"
       style="width:200px"
@@ -159,9 +159,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
         </span>
       </span>
     </div>
-    <h3>
+    <h4>
       TreeSelect
-    </h3>
+    </h4>
     <div
       class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"
       style="width:200px"
@@ -219,9 +219,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
         </span>
       </span>
     </div>
-    <h3>
+    <h4>
       Cascader
-    </h3>
+    </h4>
     <span
       class="ant-cascader-picker ant-cascader-picker-show-search"
       style="width:200px"
@@ -259,9 +259,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
         </svg>
       </span>
     </span>
-    <h3>
+    <h4>
       Transfer
-    </h3>
+    </h4>
     <div
       class="ant-transfer"
     >
@@ -532,9 +532,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <h3>
+    <h4>
       Table
-    </h3>
+    </h4>
     <div
       class="ant-table-wrapper"
       style="margin-top:8px"
@@ -640,9 +640,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <h3>
+    <h4>
       List
-    </h3>
+    </h4>
     <div
       class="ant-list ant-list-split"
     >

components/empty/demo/config-provider.md

@@ -58,19 +58,19 @@ class Demo extends React.Component {
 
         <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
           <div className="config-provider">
-            <h3>Select</h3>
+            <h4>Select</h4>
             <Select style={style} />
 
-            <h3>TreeSelect</h3>
+            <h4>TreeSelect</h4>
             <TreeSelect style={style} treeData={[]} />
 
-            <h3>Cascader</h3>
+            <h4>Cascader</h4>
             <Cascader style={style} options={[]} showSearch />
 
-            <h3>Transfer</h3>
+            <h4>Transfer</h4>
             <Transfer />
 
-            <h3>Table</h3>
+            <h4>Table</h4>
             <Table
               style={{ marginTop: 8 }}
               columns={[
@@ -87,7 +87,7 @@ class Demo extends React.Component {
               ]}
             />
 
-            <h3>List</h3>
+            <h4>List</h4>
             <List />
           </div>
         </ConfigProvider>
@@ -100,7 +100,7 @@ ReactDOM.render(<Demo />, mountNode);
 ```
 
 <style>
-.code-box-demo .config-provider h3 {
+.code-box-demo .config-provider h4 {
   font-size: inherit;
   margin: 16px 0 8px 0;
 }

components/form/Form.tsx

@@ -1,29 +1,33 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import classNames from 'classnames';
 import FieldForm, { List } from 'rc-field-form';
 import { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
 import { ValidateErrorEntity } from 'rc-field-form/lib/interface';
 import { ColProps } from '../grid/col';
 import { ConfigContext, ConfigConsumerProps } from '../config-provider';
-import { FormContext } from './context';
+import { FormContext, FormContextProps } from './context';
 import { FormLabelAlign } from './interface';
 import useForm, { FormInstance } from './hooks/useForm';
 import SizeContext, { SizeType, SizeContextProvider } from '../config-provider/SizeContext';
 
+export type RequiredMark = boolean | 'optional';
 export type FormLayout = 'horizontal' | 'inline' | 'vertical';
 
-export interface FormProps extends Omit<RcFormProps, 'form'> {
+export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form'> {
   prefixCls?: string;
-  hideRequiredMark?: boolean;
   colon?: boolean;
   name?: string;
   layout?: FormLayout;
   labelAlign?: FormLabelAlign;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
-  form?: FormInstance;
+  form?: FormInstance<Values>;
   size?: SizeType;
   scrollToFirstError?: boolean;
+  requiredMark?: RequiredMark;
+  /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
+  hideRequiredMark?: boolean;
 }
 
 const InternalForm: React.ForwardRefRenderFunction<unknown, FormProps> = (props, ref) => {
@@ -44,17 +48,30 @@ const InternalForm: React.ForwardRefRenderFunction<unknown, FormProps> = (props,
     hideRequiredMark,
     layout = 'horizontal',
     scrollToFirstError,
+    requiredMark,
     onFinishFailed,
     ...restFormProps
   } = props;
 
+  const mergedRequiredMark = useMemo(() => {
+    if (requiredMark !== undefined) {
+      return requiredMark;
+    }
+
+    if (hideRequiredMark) {
+      return false;
+    }
+
+    return true;
+  }, [hideRequiredMark, requiredMark]);
+
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
   const formClassName = classNames(
     prefixCls,
     {
       [`${prefixCls}-${layout}`]: true,
-      [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
+      [`${prefixCls}-hide-required-mark`]: mergedRequiredMark === false,
       [`${prefixCls}-rtl`]: direction === 'rtl',
       [`${prefixCls}-${size}`]: size,
     },
@@ -65,7 +82,7 @@ const InternalForm: React.ForwardRefRenderFunction<unknown, FormProps> = (props,
   const { __INTERNAL__ } = wrapForm;
   __INTERNAL__.name = name;
 
-  const formContextValue = React.useMemo(
+  const formContextValue = useMemo<FormContextProps>(
     () => ({
       name,
       labelAlign,
@@ -73,9 +90,10 @@ const InternalForm: React.ForwardRefRenderFunction<unknown, FormProps> = (props,
       wrapperCol,
       vertical: layout === 'vertical',
       colon,
+      requiredMark: mergedRequiredMark,
       itemRef: __INTERNAL__.itemRef,
     }),
-    [name, labelAlign, labelCol, wrapperCol, layout, colon],
+    [name, labelAlign, labelCol, wrapperCol, layout, colon, mergedRequiredMark],
   );
 
   React.useImperativeHandle(ref, () => wrapForm);
@@ -105,7 +123,9 @@ const InternalForm: React.ForwardRefRenderFunction<unknown, FormProps> = (props,
   );
 };
 
-const Form = React.forwardRef<FormInstance, FormProps>(InternalForm);
+const Form = React.forwardRef<FormInstance, FormProps>(InternalForm) as <Values = any>(
+  props: React.PropsWithChildren<FormProps<Values>> & { ref?: React.Ref<FormInstance<Values>> },
+) => React.ReactElement;
 
 export { useForm, List, FormInstance };
 

components/form/FormItem.tsx

@@ -50,6 +50,7 @@ export interface FormItemProps extends FormItemLabelProps, FormItemInputProps, R
   validateStatus?: ValidateStatus;
   required?: boolean;
   hidden?: boolean;
+  initialValue?: any;
 
   /** Auto passed by List render props. User should not use this. */
   fieldKey?: React.Key | React.Key[];
@@ -86,7 +87,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
   } = props;
   const destroyRef = React.useRef(false);
   const { getPrefixCls } = React.useContext(ConfigContext);
-  const { name: formName } = React.useContext(FormContext);
+  const { name: formName, requiredMark } = React.useContext(FormContext);
   const { updateItemErrors } = React.useContext(FormItemContext);
   const [domErrorVisible, innerSetDomErrorVisible] = React.useState(!!help);
   const prevValidateStatusRef = React.useRef<ValidateStatus | undefined>(validateStatus);
@@ -142,7 +143,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
     meta?: Meta,
     isRequired?: boolean,
   ): React.ReactNode {
-    if (noStyle) {
+    if (noStyle && !hidden) {
       return baseChildren;
     }
 
@@ -224,7 +225,13 @@ function FormItem(props: FormItemProps): React.ReactElement {
         ])}
       >
         {/* Label */}
-        <FormItemLabel htmlFor={fieldId} required={isRequired} {...props} prefixCls={prefixCls} />
+        <FormItemLabel
+          htmlFor={fieldId}
+          required={isRequired}
+          requiredMark={requiredMark}
+          {...props}
+          prefixCls={prefixCls}
+        />
         {/* Input Group */}
         <FormItemInput
           {...props}

components/form/FormItemInput.tsx

@@ -5,12 +5,13 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import useMemo from 'rc-util/lib/hooks/useMemo';
-import CSSMotion from 'rc-animate/lib/CSSMotion';
+import CSSMotion from 'rc-motion';
 
 import Col, { ColProps } from '../grid/col';
 import { ValidateStatus } from './FormItem';
 import { FormContext } from './context';
 import useCacheErrors from './hooks/useCacheErrors';
+import useForceUpdate from '../_util/hooks/useForceUpdate';
 
 interface FormItemInputMiscProps {
   prefixCls: string;
@@ -45,7 +46,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
   validateStatus,
   extra,
 }) => {
-  const [, forceUpdate] = React.useState({});
+  const forceUpdate = useForceUpdate();
 
   const baseClassName = `${prefixCls}-item`;
 
@@ -68,7 +69,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = ({
           onDomErrorVisibleChange(true);
         });
       }
-      forceUpdate({});
+      forceUpdate();
     },
     !!help,
   );

components/form/FormItemLabel.tsx

@@ -3,6 +3,9 @@ import classNames from 'classnames';
 import Col, { ColProps } from '../grid/col';
 import { FormLabelAlign } from './interface';
 import { FormContext, FormContextProps } from './context';
+import { RequiredMark } from './Form';
+import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
+import defaultLocale from '../locale/default';
 
 export interface FormItemLabelProps {
   colon?: boolean;
@@ -10,6 +13,7 @@ export interface FormItemLabelProps {
   label?: React.ReactNode;
   labelAlign?: FormLabelAlign;
   labelCol?: ColProps;
+  requiredMark?: RequiredMark;
 }
 
 const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixCls: string }> = ({
@@ -20,7 +24,10 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
   labelAlign,
   colon,
   required,
+  requiredMark,
 }) => {
+  const [formLocale] = useLocaleReceiver('Form');
+
   if (!label) return null;
 
   return (
@@ -51,8 +58,21 @@ const FormItemLabel: React.FC<FormItemLabelProps & { required?: boolean; prefixC
           labelChildren = (label as string).replace(/[:|：]\s*$/, '');
         }
 
+        // Add required mark if optional
+        if (requiredMark === 'optional' && !required) {
+          labelChildren = (
+            <>
+              {labelChildren}
+              <span className={`${prefixCls}-item-optional`}>
+                {formLocale?.optional || defaultLocale.Form?.optional}
+              </span>
+            </>
+          );
+        }
+
         const labelClassName = classNames({
           [`${prefixCls}-item-required`]: required,
+          [`${prefixCls}-item-required-mark-optional`]: requiredMark === 'optional',
           [`${prefixCls}-item-no-colon`]: !computedColon,
         });
 

components/form/FormList.tsx

@@ -10,7 +10,7 @@ export interface FormListFieldData {
 }
 
 export interface FormListOperation {
-  add: (defaultValue?: StoreValue) => void;
+  add: (defaultValue?: StoreValue, insertIndex?: number) => void;
   remove: (index: number | number[]) => void;
   move: (from: number, to: number) => void;
 }

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -1592,6 +1592,39 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
                  Add field
               </span>
             </button>
+            <button
+              class="ant-btn ant-btn-dashed"
+              style="width:60%;margin-top:20px"
+              type="button"
+            >
+              <span
+                aria-label="plus"
+                class="anticon anticon-plus"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="plus"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <defs />
+                  <path
+                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                  />
+                  <path
+                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                  />
+                </svg>
+              </span>
+              <span>
+                 Add field at head
+              </span>
+            </button>
           </div>
         </div>
       </div>
@@ -3487,6 +3520,201 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
 </form>
 `;
 
+exports[`renders ./components/form/demo/required-mark.md correctly 1`] = `
+<form
+  class="ant-form ant-form-vertical"
+>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label"
+    >
+      <label
+        class="ant-form-item-required-mark-optional"
+        for="requiredMark"
+        title="Required Mark"
+      >
+        Required Mark
+        <span
+          class="ant-form-item-optional"
+        >
+          (optional)
+        </span>
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-radio-group ant-radio-group-outline"
+            id="requiredMark"
+          >
+            <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="optional"
+                />
+                <span
+                  class="ant-radio-button-inner"
+                />
+              </span>
+              <span>
+                Optional
+              </span>
+            </label>
+            <label
+              class="ant-radio-button-wrapper"
+            >
+              <span
+                class="ant-radio-button"
+              >
+                <input
+                  class="ant-radio-button-input"
+                  type="radio"
+                  value="true"
+                />
+                <span
+                  class="ant-radio-button-inner"
+                />
+              </span>
+              <span>
+                Required
+              </span>
+            </label>
+            <label
+              class="ant-radio-button-wrapper"
+            >
+              <span
+                class="ant-radio-button"
+              >
+                <input
+                  class="ant-radio-button-input"
+                  type="radio"
+                  value="false"
+                />
+                <span
+                  class="ant-radio-button-inner"
+                />
+              </span>
+              <span>
+                Hidden
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label"
+    >
+      <label
+        class="ant-form-item-required ant-form-item-required-mark-optional"
+        title="Field A"
+      >
+        Field A
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            placeholder="input placeholder"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label"
+    >
+      <label
+        class="ant-form-item-required-mark-optional"
+        title="Field B"
+      >
+        Field B
+        <span
+          class="ant-form-item-optional"
+        >
+          (optional)
+        </span>
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            placeholder="input placeholder"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            class="ant-btn ant-btn-primary"
+            type="button"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`renders ./components/form/demo/size.md correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal ant-form-default"
@@ -5827,7 +6055,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                     </svg>
                   </span>
                   <span>
-                     Click to upload
+                    Click to upload
                   </span>
                 </button>
               </span>

components/form/__tests__/__snapshots__/index.test.js.snap

@@ -1,6 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Form Form item hidden 1`] = `
+exports[`Form Form item hidden noStyle should not work when hidden 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item ant-form-item-hidden"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            id="light"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Form Form item hidden should work 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >

components/form/__tests__/index.test.js

@@ -699,14 +699,39 @@ describe('Form', () => {
     expect(wrapper.find('input').prop('onBlur')).toBeTruthy();
   });
 
-  it('Form item hidden', () => {
+  describe('Form item hidden', () => {
+    it('should work', () => {
+      const wrapper = mount(
+        <Form>
+          <Form.Item name="light" hidden>
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+      expect(wrapper).toMatchRenderedSnapshot();
+    });
+
+    it('noStyle should not work when hidden', () => {
+      const wrapper = mount(
+        <Form>
+          <Form.Item name="light" hidden noStyle>
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+      expect(wrapper).toMatchRenderedSnapshot();
+    });
+  });
+
+  it('legacy hideRequiredMark', () => {
     const wrapper = mount(
-      <Form>
-        <Form.Item name="light" hidden>
+      <Form hideRequiredMark>
+        <Form.Item name="light" required>
           <Input />
         </Form.Item>
       </Form>,
     );
-    expect(wrapper).toMatchRenderedSnapshot();
+
+    expect(wrapper.find('form').hasClass('ant-form-hide-required-mark')).toBeTruthy();
   });
 });

components/form/__tests__/type.test.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import Form from '..';
+import Form, { FormInstance } from '..';
 import Input from '../../input';
 
+interface FormValues {
+  username?: string;
+  path1?: { path2?: number };
+}
+
 describe('Form.typescript', () => {
   it('Form.Item', () => {
     const form = (
@@ -14,4 +19,52 @@ describe('Form.typescript', () => {
 
     expect(form).toBeTruthy();
   });
+
+  describe('generic', () => {
+    it('hooks', () => {
+      const Demo = () => {
+        const [form] = Form.useForm<FormValues>();
+
+        form.setFieldsValue({ path1: { path2: 2333 } });
+
+        return (
+          <Form
+            form={form}
+            onFinish={values => {
+              expect(values).toBeTruthy();
+              expect(values.username).toBeTruthy();
+              expect(values.path1?.path2).toBeTruthy();
+            }}
+          />
+        );
+      };
+
+      expect(Demo).toBeTruthy();
+    });
+
+    it('ref', () => {
+      class Demo extends React.Component {
+        formRef = React.createRef<FormInstance<FormValues>>();
+
+        componentDidMount() {
+          this.formRef.current?.setFieldsValue({ path1: { path2: 233 } });
+        }
+
+        render() {
+          return (
+            <Form
+              ref={this.formRef}
+              onFinish={values => {
+                expect(values).toBeTruthy();
+                expect(values.username).toBeTruthy();
+                expect(values.path1?.path2).toBeTruthy();
+              }}
+            />
+          );
+        }
+      }
+
+      expect(Demo).toBeTruthy();
+    });
+  });
 });

components/form/context.tsx

@@ -4,6 +4,7 @@ import { FormProvider as RcFormProvider } from 'rc-field-form';
 import { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext';
 import { ColProps } from '../grid/col';
 import { FormLabelAlign } from './interface';
+import { RequiredMark } from './Form';
 
 /**
  * Form Context
@@ -16,6 +17,7 @@ export interface FormContextProps {
   labelAlign?: FormLabelAlign;
   labelCol?: ColProps;
   wrapperCol?: ColProps;
+  requiredMark?: RequiredMark;
   itemRef: (name: (string | number)[]) => (node: React.ReactElement) => void;
 }
 

components/form/demo/dep-debug.md

@@ -3,6 +3,7 @@ order: 99
 title:
   zh-CN: Dep Debug
   en-US: Dep Debug
+debug: true
 ---
 
 ## zh-CN