Merge pull request #25889 from ant-design/master

chore: merge master into feature

.github/workflows/test.yml

@@ -93,6 +93,8 @@ jobs:
 
       - name: dist
         run: npm run dist
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
 
       - name: check
         run: node ./tests/dekko/dist.test.js

CHANGELOG.en-US.md

@@ -15,9 +15,20 @@ timeline: true
 
 ---
 
+## 4.5.1
+
+`2020-07-28`
+
+- 🐞 Fix Badge style causing build error. [#25863](https://github.com/ant-design/ant-design/pull/25863)
+- 🐞 Fix Menu in `horizontal` `dark` status Menu.Item background style glitch. [#25850](https://github.com/ant-design/ant-design/pull/25850)
+- 💄 Optimize Divider color in none-white background. [#25855](https://github.com/ant-design/ant-design/pull/25855)
+- 💄 Remove multiple Select choice animation of item. [#25852](https://github.com/ant-design/ant-design/pull/25852)
+- TypeScript
+  - Export Form `FormList` interface. [#25849](https://github.com/ant-design/ant-design/pull/25849)
+
 ## 4.5.0
 
-`2020-07-27`
+`2020-07-28`
 
 - 🆕 Input and Input.TextArea support `bordered` prop. [#25617](https://github.com/ant-design/ant-design/pull/25617)
 - 🆕 Add `useMessage` hook for Message to support `context` access. [#25422](https://github.com/ant-design/ant-design/pull/25422)
@@ -58,7 +69,7 @@ timeline: true
 - 💄 Card action pane color is unified with body color. [#25722](https://github.com/ant-design/ant-design/pull/25722)
 - ⌨️ Improve Alert/message/notification accessibility by adding role attribute. [#25774](https://github.com/ant-design/ant-design/pull/25774)
 - 🇭🇰 Add zh_HK localization. [#25731](https://github.com/ant-design/ant-design/pull/25731) [@wuchu](https://github.com/wuchu)
-- 🇩🇪 Improve de_DE localization. [#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
+- 🇩🇪 Improve Form de_DE localization. [#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
 
 ## 4.4.3
 

CHANGELOG.zh-CN.md

@@ -15,9 +15,20 @@ timeline: true
 
 ---
 
+## 4.5.1
+
+`2020-07-28`
+
+- 🐞 修复 Badge 样式导致构建出错的问题。[#25863](https://github.com/ant-design/ant-design/pull/25863)
+- 🐞 修复 Menu 在 `horizontal` `dark` 状态下 Menu.Item 背景样式出错。[#25850](https://github.com/ant-design/ant-design/pull/25850)
+- 💄 优化 Divider 颜色在非白底背景上的表现。[#25855](https://github.com/ant-design/ant-design/pull/25855)
+- 💄 移除多选 Select 选项的动画效果使交互更流畅。[#25852](https://github.com/ant-design/ant-design/pull/25852)
+- TypeScript
+  - 导出 Form `FormList` 接口。[#25849](https://github.com/ant-design/ant-design/pull/25849)
+
 ## 4.5.0
 
-`2020-07-27`
+`2020-07-28`
 
 - 🆕 Input 和 Input.TextArea 支持 `bordered` 属性。[#25617](https://github.com/ant-design/ant-design/pull/25617)
 - 🆕 Message 新增 `useMessage` hook，以支持 `context` 访问。[#25422](https://github.com/ant-design/ant-design/pull/25422)
@@ -57,8 +68,8 @@ timeline: true
 - 🐞 修复 Tabs 禁用时 focus & active 状态的颜色。[25827](https://github.com/ant-design/ant-design/pull/25827) [hsuanxyz](https://github.com/hsuanxyz)
 - 💄 Card 操作面板颜色与主体颜色统一。[#25722](https://github.com/ant-design/ant-design/pull/25722)
 - ⌨️ 提升 Alert/message/notification 组件的可访问性。[#25774](https://github.com/ant-design/ant-design/pull/25774)
-- 🇭🇰 新增 zh_HK 本地化。[#25731](https://github.com/ant-design/ant-design/pull/25731) [@wuchu](https://github.com/wuchu)
+- 🇭🇰 增加中文繁体（香港） zh_HK 本地化。[#25731](https://github.com/ant-design/ant-design/pull/25731) [@wuchu](https://github.com/wuchu)
-- 🇩🇪 改进 de_DE 本地化。[#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
+- 🇩🇪 新增 Form 校验文案的德语 de_DE 本地化。[#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
 
 ## 4.4.3
 

components/_util/interopDefault.ts

@@ -1,5 +0,0 @@
-// https://github.com/moment/moment/issues/3650
-// since we are using ts 3.5.1, it should be safe to remove.
-export default function interopDefault(m: any) {
-  return m.default || m;
-}

components/_util/motion.tsx

@@ -28,10 +28,7 @@ interface 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';
-function skipOpacityTransition(_: HTMLElement, event: TransitionEvent) {
-  return event.propertyName === 'height';
-}
 
 const collapseMotion: Motion = {
   motionName: 'ant-motion-collapse',
@@ -41,11 +38,9 @@ const collapseMotion: Motion = {
   onEnterActive: getRealHeight,
   onLeaveStart: getCurrentHeight,
   onLeaveActive: getCollapsedHeight,
-
   onAppearEnd: skipOpacityTransition,
   onEnterEnd: skipOpacityTransition,
   onLeaveEnd: skipOpacityTransition,
-
   motionDeadline: 500,
 };
 

components/badge/style/index.less

@@ -200,3 +200,4 @@
 }
 
 @import './rtl';
+@import './ribbon';

components/badge/style/index.tsx

@@ -1,3 +1,2 @@
 import '../../style/index.less';
-import './ribbon.less';
 import './index.less';

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

@@ -27,7 +27,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 4
               </h3>
             </div>
@@ -45,7 +47,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 1
               </h3>
             </div>
@@ -63,7 +67,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 2
               </h3>
             </div>
@@ -81,7 +87,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 3
               </h3>
             </div>
@@ -99,7 +107,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 4
               </h3>
             </div>
@@ -117,7 +127,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 1
               </h3>
             </div>
@@ -135,7 +147,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 2
               </h3>
             </div>
@@ -153,7 +167,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 3
               </h3>
             </div>
@@ -171,7 +187,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 4
               </h3>
             </div>
@@ -243,7 +261,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 4
               </h3>
             </div>
@@ -261,7 +281,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 1
               </h3>
             </div>
@@ -279,7 +301,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 2
               </h3>
             </div>
@@ -297,7 +321,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 3
               </h3>
             </div>
@@ -315,7 +341,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 4
               </h3>
             </div>
@@ -333,7 +361,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 1
               </h3>
             </div>
@@ -351,7 +381,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 2
               </h3>
             </div>
@@ -369,7 +401,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 3
               </h3>
             </div>
@@ -387,7 +421,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 4
               </h3>
             </div>
@@ -459,7 +495,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 1
               </h3>
             </div>
@@ -477,7 +515,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 2
               </h3>
             </div>
@@ -495,7 +535,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 3
               </h3>
             </div>
@@ -513,7 +555,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
               style="width:100%;display:inline-block"
               tabindex="-1"
             >
-              <h3>
+              <h3
+                style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+              >
                 4
               </h3>
             </div>
@@ -668,7 +712,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   4
                 </h3>
               </div>
@@ -686,7 +732,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   1
                 </h3>
               </div>
@@ -704,7 +752,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   2
                 </h3>
               </div>
@@ -722,7 +772,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   3
                 </h3>
               </div>
@@ -740,7 +792,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   4
                 </h3>
               </div>
@@ -758,7 +812,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   1
                 </h3>
               </div>
@@ -776,7 +832,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   2
                 </h3>
               </div>
@@ -794,7 +852,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   3
                 </h3>
               </div>
@@ -812,7 +872,9 @@ Array [
                 style="width:100%;display:inline-block"
                 tabindex="-1"
               >
-                <h3>
+                <h3
+                  style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
+                >
                   4
                 </h3>
               </div>

components/carousel/demo/autoplay.md

@@ -16,36 +16,29 @@ Timing of scrolling to the next card/picture.
 ```jsx
 import { Carousel } from 'antd';
 
+const contentStyle = {
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
 ReactDOM.render(
   <Carousel autoplay>
     <div>
-      <h3>1</h3>
+      <h3 style={contentStyle}>1</h3>
     </div>
     <div>
-      <h3>2</h3>
+      <h3 style={contentStyle}>2</h3>
     </div>
     <div>
-      <h3>3</h3>
+      <h3 style={contentStyle}>3</h3>
     </div>
     <div>
-      <h3>4</h3>
+      <h3 style={contentStyle}>4</h3>
     </div>
   </Carousel>,
   mountNode,
 );
 ```
-
-```css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-```

components/carousel/demo/basic.md

@@ -20,36 +20,29 @@ function onChange(a, b, c) {
   console.log(a, b, c);
 }
 
+const contentStyle = {
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
 ReactDOM.render(
   <Carousel afterChange={onChange}>
     <div>
-      <h3>1</h3>
+      <h3 style={contentStyle}>1</h3>
     </div>
     <div>
-      <h3>2</h3>
+      <h3 style={contentStyle}>2</h3>
     </div>
     <div>
-      <h3>3</h3>
+      <h3 style={contentStyle}>3</h3>
     </div>
     <div>
-      <h3>4</h3>
+      <h3 style={contentStyle}>4</h3>
     </div>
   </Carousel>,
   mountNode,
 );
 ```
-
-```css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-```

components/carousel/demo/fade.md

@@ -16,36 +16,29 @@ Slides use fade for transition.
 ```jsx
 import { Carousel } from 'antd';
 
+const contentStyle = {
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
 ReactDOM.render(
   <Carousel effect="fade">
     <div>
-      <h3>1</h3>
+      <h3 style={contentStyle}>1</h3>
     </div>
     <div>
-      <h3>2</h3>
+      <h3 style={contentStyle}>2</h3>
     </div>
     <div>
-      <h3>3</h3>
+      <h3 style={contentStyle}>3</h3>
     </div>
     <div>
-      <h3>4</h3>
+      <h3 style={contentStyle}>4</h3>
     </div>
   </Carousel>,
   mountNode,
 );
 ```
-
-```css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-```

components/carousel/demo/position.md

@@ -16,6 +16,14 @@ There are 4 position options available.
 ```jsx
 import { Carousel, Radio } from 'antd';
 
+const contentStyle = {
+  height: '160px',
+  color: '#fff',
+  lineHeight: '160px',
+  textAlign: 'center',
+  background: '#364d79',
+};
+
 class PositionCarouselDemo extends React.Component {
   state = {
     dotPosition: 'top',
@@ -39,16 +47,16 @@ class PositionCarouselDemo extends React.Component {
         </Radio.Group>
         <Carousel dotPosition={dotPosition}>
           <div>
-            <h3>1</h3>
+            <h3 style={contentStyle}>1</h3>
           </div>
           <div>
-            <h3>2</h3>
+            <h3 style={contentStyle}>2</h3>
           </div>
           <div>
-            <h3>3</h3>
+            <h3 style={contentStyle}>3</h3>
           </div>
           <div>
-            <h3>4</h3>
+            <h3 style={contentStyle}>4</h3>
           </div>
         </Carousel>
       </>
@@ -58,18 +66,3 @@ class PositionCarouselDemo extends React.Component {
 
 ReactDOM.render(<PositionCarouselDemo />, mountNode);
 ```
-
-```css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-```

components/carousel/style/index.less

@@ -47,6 +47,15 @@
           visibility: visible;
         }
       }
+
+      // fix Carousel content height not match parent node
+      // when children is empty node
+      // https://github.com/ant-design/ant-design/issues/25878
+      > div > div > *:empty::after {
+        visibility: hidden;
+        content: 'none';
+        pointer-events: none;
+      }
     }
   }
   .slick-slider .slick-track,

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

@@ -1078,8 +1078,11 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
       motionEnter={false}
       motionLeave={false}
       motionName="slide-up"
+      onAppearStart={[Function]}
       onEnterEnd={[Function]}
+      onEnterStart={[Function]}
       onLeaveEnd={[Function]}
+      onLeaveStart={[Function]}
       removeOnLeave={false}
       visible={true}
     >
@@ -1089,8 +1092,11 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
         motionEnter={false}
         motionLeave={false}
         motionName="slide-up"
+        onAppearStart={[Function]}
         onEnterEnd={[Function]}
+        onEnterStart={[Function]}
         onLeaveEnd={[Function]}
+        onLeaveStart={[Function]}
         removeOnLeave={false}
         visible={true}
       >
@@ -1512,8 +1518,11 @@ exports[`Cascader should render not found content 1`] = `
       motionEnter={false}
       motionLeave={false}
       motionName="slide-up"
+      onAppearStart={[Function]}
       onEnterEnd={[Function]}
+      onEnterStart={[Function]}
       onLeaveEnd={[Function]}
+      onLeaveStart={[Function]}
       removeOnLeave={false}
       visible={true}
     >
@@ -1523,8 +1532,11 @@ exports[`Cascader should render not found content 1`] = `
         motionEnter={false}
         motionLeave={false}
         motionName="slide-up"
+        onAppearStart={[Function]}
         onEnterEnd={[Function]}
+        onEnterStart={[Function]}
         onLeaveEnd={[Function]}
+        onLeaveStart={[Function]}
         removeOnLeave={false}
         visible={true}
       >
@@ -1827,8 +1839,11 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
       motionEnter={false}
       motionLeave={false}
       motionName="slide-up"
+      onAppearStart={[Function]}
       onEnterEnd={[Function]}
+      onEnterStart={[Function]}
       onLeaveEnd={[Function]}
+      onLeaveStart={[Function]}
       removeOnLeave={false}
       visible={true}
     >
@@ -1838,8 +1853,11 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
         motionEnter={false}
         motionLeave={false}
         motionName="slide-up"
+        onAppearStart={[Function]}
         onEnterEnd={[Function]}
+        onEnterStart={[Function]}
         onLeaveEnd={[Function]}
+        onLeaveStart={[Function]}
         removeOnLeave={false}
         visible={true}
       >

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

@@ -5,7 +5,7 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-    style="height:2px;background-color:#7cb305"
+    style="border-width:2px;border-color:#7cb305"
   />,
   <div
     class="ant-divider ant-divider-horizontal ant-divider-dashed"
@@ -15,7 +15,7 @@ Array [
   <div
     class="ant-divider ant-divider-vertical"
     role="separator"
-    style="height:60px;background-color:#7cb305"
+    style="height:60px;border-color:#7cb305"
   />,
   <div
     class="ant-divider ant-divider-vertical ant-divider-dashed"

components/divider/demo/customize-style.md

@@ -19,9 +19,9 @@ import { Divider } from 'antd';
 
 ReactDOM.render(
   <>
-    <Divider style={{ height: 2, backgroundColor: '#7cb305' }} />
+    <Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />
     <Divider style={{ borderColor: '#7cb305' }} dashed />
-    <Divider type="vertical" style={{ height: 60, backgroundColor: '#7cb305' }} />
+    <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
   </>,
   mountNode,

components/divider/style/index.less

@@ -6,7 +6,7 @@
 .@{divider-prefix-cls} {
   .reset-component;
 
-  border-top: 1px solid @border-color-split;
+  border-top: 1px solid @divider-color;
 
   &-vertical {
     position: relative;
@@ -16,7 +16,7 @@
     margin: 0 8px;
     vertical-align: middle;
     border-top: 0;
-    border-left: 1px solid @border-color-split;
+    border-left: 1px solid @divider-color;
   }
 
   &-horizontal {
@@ -41,7 +41,7 @@
       position: relative;
       top: 50%;
       width: 50%;
-      border-top: 1px solid @border-color-split;
+      border-top: 1px solid @divider-color;
       transform: translateY(50%);
       content: '';
     }
@@ -76,7 +76,7 @@
 
   &-dashed {
     background: none;
-    border-color: @border-color-split;
+    border-color: @divider-color;
     border-style: dashed;
     border-width: 1px 0 0;
   }

components/dropdown/demo/dropdown-button.md

@@ -36,7 +36,7 @@ const menu = (
       2nd menu item
     </Menu.Item>
     <Menu.Item key="3" icon={<UserOutlined />}>
-      3rd item
+      3rd menu item
     </Menu.Item>
   </Menu>
 );

components/form/FormList.tsx

@@ -3,21 +3,21 @@ import { List } from 'rc-field-form';
 import { StoreValue } from 'rc-field-form/lib/interface';
 import devWarning from '../_util/devWarning';
 
-interface FieldData {
+export interface FormListFieldData {
   name: number;
   key: number;
   fieldKey: number;
 }
 
-interface Operation {
+export interface FormListOperation {
   add: (defaultValue?: StoreValue) => void;
   remove: (index: number | number[]) => void;
   move: (from: number, to: number) => void;
 }
 
-interface FormListProps {
+export interface FormListProps {
   name: string | number | (string | number)[];
-  children: (fields: FieldData[], operation: Operation) => React.ReactNode;
+  children: (fields: FormListFieldData[], operation: FormListOperation) => React.ReactNode;
 }
 
 const FormList: React.FC<FormListProps> = ({ children, ...props }) => {

components/form/__tests__/index.test.js

@@ -22,7 +22,7 @@ describe('Form', () => {
 
   async function change(wrapper, index, value) {
     wrapper.find(Input).at(index).simulate('change', { target: { value } });
-    await sleep(100);
+    await sleep(200);
     wrapper.update();
   }
 

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

@@ -809,6 +809,216 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
 </ul>
 `;
 
+exports[`renders ./components/menu/demo/style-debug.md correctly 1`] = `
+Array [
+  <button
+    aria-checked="true"
+    class="ant-switch ant-switch-checked"
+    role="switch"
+    type="button"
+  >
+    <div
+      class="ant-switch-handle"
+    />
+    <span
+      class="ant-switch-inner"
+    >
+      Dark
+    </span>
+  </button>,
+  <br />,
+  <br />,
+  <ul
+    class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
+    role="menu"
+  >
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-submenu-selected"
+      role="menuitem"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span
+          aria-label="mail"
+          class="anticon anticon-mail"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="mail"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+            />
+          </svg>
+        </span>
+        <span>
+          Navigation One Long Long Long Long
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal"
+      role="menuitem"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span
+          aria-label="appstore"
+          class="anticon anticon-appstore"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
+            />
+          </svg>
+        </span>
+        <span>
+          Navigation Two
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-item ant-menu-item-only-child"
+      role="menuitem"
+    >
+      Option 11
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="display:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="ant-menu-item ant-menu-item-only-child"
+      role="menuitem"
+    >
+      Option 12
+    </li>
+    <li
+      class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
+      role="menuitem"
+      style="visibility:hidden;position:absolute"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        role="button"
+      >
+        <span>
+          ···
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+  </ul>,
+]
+`;
+
 exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
 Array [
   <button

components/menu/demo/style-debug.md

@@ -0,0 +1,82 @@
+---
+order: 99
+title:
+  zh-CN: Style debug
+  en-US: Style debug
+debug: true
+---
+
+## zh-CN
+
+buggy!
+
+## en-US
+
+buggy!
+
+```jsx
+import { Menu, Switch } from 'antd';
+import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
+
+const { SubMenu } = Menu;
+
+class Sider extends React.Component {
+  state = {
+    theme: 'dark',
+    current: '1',
+  };
+
+  changeTheme = value => {
+    this.setState({
+      theme: value ? 'dark' : 'light',
+    });
+  };
+
+  handleClick = e => {
+    console.log('click ', e);
+    this.setState({
+      current: e.key,
+    });
+  };
+
+  render() {
+    return (
+      <>
+        <Switch
+          checked={this.state.theme === 'dark'}
+          onChange={this.changeTheme}
+          checkedChildren="Dark"
+          unCheckedChildren="Light"
+        />
+        <br />
+        <br />
+        <Menu
+          theme={this.state.theme}
+          onClick={this.handleClick}
+          selectedKeys={[this.state.current]}
+          mode="horizontal"
+        >
+          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One Long Long Long Long">
+            <Menu.Item key="1">Option 1</Menu.Item>
+            <Menu.Item key="2">Option 2</Menu.Item>
+            <Menu.Item key="3">Option 3</Menu.Item>
+            <Menu.Item key="4">Option 4</Menu.Item>
+          </SubMenu>
+          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
+            <Menu.Item key="5">Option 5</Menu.Item>
+            <Menu.Item key="6">Option 6</Menu.Item>
+            <SubMenu key="sub3" title="Submenu">
+              <Menu.Item key="7">Option 7</Menu.Item>
+              <Menu.Item key="8">Option 8</Menu.Item>
+            </SubMenu>
+          </SubMenu>
+          <Menu.Item key="11">Option 11</Menu.Item>
+          <Menu.Item key="12">Option 12</Menu.Item>
+        </Menu>
+      </>
+    );
+  }
+}
+
+ReactDOM.render(<Sider />, mountNode);
+```

components/menu/style/dark.less

@@ -31,6 +31,7 @@
   &-dark&-horizontal > &-submenu {
     top: 0;
     margin-top: 0;
+    padding: @menu-item-padding;
     border-color: @menu-dark-bg;
     border-bottom: 0;
   }

components/menu/style/index.less

@@ -41,6 +41,9 @@
     transition: all 0.3s;
   }
 
+  &-horizontal &-submenu {
+    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out;
+  }
   &-submenu,
   &-submenu-inline {
     transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
@@ -167,6 +170,11 @@
     min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
   }
 
+  &-horizontal &-item,
+  &-horizontal &-submenu-title {
+    transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
+      background 0.3s @ease-in-out;
+  }
   &-item,
   &-submenu-title {
     position: relative;
@@ -333,17 +341,23 @@
     border-bottom: @border-width-base @border-style-base @border-color-split;
     box-shadow: none;
 
+    &:not(.@{menu-prefix-cls}-dark) {
+      > .@{menu-prefix-cls}-item,
+      > .@{menu-prefix-cls}-submenu {
+        margin: @menu-item-padding;
+        margin-top: -1px;
+        margin-bottom: 0;
+        padding: @menu-item-padding;
+        padding-right: 0;
+        padding-left: 0;
+      }
+    }
+
     > .@{menu-prefix-cls}-item,
     > .@{menu-prefix-cls}-submenu {
       position: relative;
       top: 1px;
       display: inline-block;
-      margin: @menu-item-padding;
-      margin-top: 0;
-      margin-bottom: 0;
-      padding: @menu-item-padding;
-      padding-right: 0;
-      padding-left: 0;
       vertical-align: bottom;
       border-bottom: 2px solid transparent;
 

components/select/index.tsx

@@ -47,7 +47,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
 
   static defaultProps = {
     transitionName: 'slide-up',
-    choiceTransitionName: 'zoom',
+    choiceTransitionName: '',
     bordered: true,
   };
 

components/style/themes/default.less

@@ -245,6 +245,7 @@
 // Divider
 @divider-text-padding: 1em;
 @divider-orientation-margin: 5%;
+@divider-color: rgba(0, 0, 0, 6%);
 
 // Dropdown
 @dropdown-selected-color: @primary-color;

components/tree-select/index.tsx

@@ -46,7 +46,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
 
   static defaultProps = {
     transitionName: 'slide-up',
-    choiceTransitionName: 'zoom',
+    choiceTransitionName: '',
     bordered: true,
   };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "An enterprise-class UI design language and React components implementation",
   "keywords": [
     "ant",

site/theme/template/Layout/Header/Navigation.less

@@ -13,6 +13,7 @@
 
     & > .ant-menu-item,
     & > .ant-menu-submenu {
+      min-width: 40px;
       height: @header-height;
       margin-right: 12px;
       margin-left: 12px;

site/theme/template/Layout/Header/index.tsx

@@ -153,9 +153,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
         .replace(/\/$/, '');
       return;
     }
-    window.location.href = currentUrl
+    window.location.href = currentUrl.replace(window.location.origin, url);
-      .replace(window.location.origin, url)
-      .replace(currentPathname, utils.getLocalizedPathname(currentPathname));
   };
 
   onLangChange = () => {