Menu anim (#7567)

* update menu icon animate

* add padding !important, restore menu retraction animate

* update dropdown arrow

components/dropdown/style/index.less

@@ -113,15 +113,17 @@
         background-color: @border-color-split;
         line-height: 0;
       }
-    }
+      .@{dropdown-prefix-cls}-menu-submenu-arrow {
-
+        position: absolute;
-    &-submenu-title:after {
+        right: 8px;
-      font-family: "anticon" !important;
+        &:after {
-      position: absolute;
+          font-family: "anticon" !important;
-      content: "\e61f";
+          font-style: normal;
-      right: 8px;
+          content: "\e61f";
-      color: @text-color-secondary;
+          color: @text-color-secondary;
-      .iconfont-size-under-12px(10px);
+          .iconfont-size-under-12px(10px);
+        }
+      }
     }
 
     &-submenu-vertical {
@@ -139,7 +141,7 @@
 
     &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
       &,
-      &:after {
+      .@{dropdown-prefix-cls}-menu-submenu-arrow:after {
         color: @disabled-color;
       }
     }
@@ -211,7 +213,7 @@
   .@{dropdown-prefix-cls}-menu-submenu-title,
   .@{dropdown-prefix-cls}-menu-item > a {
     color: @text-color-secondary-dark;
-    &:after {
+    .@{dropdown-prefix-cls}-menu-submenu-arrow:after {
       color: @text-color-secondary-dark;
     }
     &:hover {

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

@@ -747,6 +747,9 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
                 User
               </span>
             </span>
+            <i
+              class="ant-menu-submenu-arrow"
+            />
           </div>
         </li>
         <li
@@ -767,6 +770,9 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
                 Team
               </span>
             </span>
+            <i
+              class="ant-menu-submenu-arrow"
+            />
           </div>
         </li>
         <li
@@ -1068,6 +1074,9 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                   />
                   subnav 1
                 </span>
+                <i
+                  class="ant-menu-submenu-arrow"
+                />
               </div>
               <ul
                 aria-activedescendant=""
@@ -1125,6 +1134,9 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                   />
                   subnav 2
                 </span>
+                <i
+                  class="ant-menu-submenu-arrow"
+                />
               </div>
             </li>
             <li
@@ -1143,6 +1155,9 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                   />
                   subnav 3
                 </span>
+                <i
+                  class="ant-menu-submenu-arrow"
+                />
               </div>
             </li>
           </ul>
@@ -1238,6 +1253,9 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
                 />
                 subnav 1
               </span>
+              <i
+                class="ant-menu-submenu-arrow"
+              />
             </div>
             <ul
               aria-activedescendant=""
@@ -1295,6 +1313,9 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
                 />
                 subnav 2
               </span>
+              <i
+                class="ant-menu-submenu-arrow"
+              />
             </div>
           </li>
           <li
@@ -1313,6 +1334,9 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
                 />
                 subnav 3
               </span>
+              <i
+                class="ant-menu-submenu-arrow"
+              />
             </div>
           </li>
         </ul>

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

@@ -43,6 +43,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
         />
         Navigation Three - Submenu
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
   <li
@@ -87,6 +90,9 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
           Navigation One
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
     <ul
       aria-activedescendant=""
@@ -172,6 +178,9 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
           Navigation Two
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
   <li
@@ -192,6 +201,9 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
           Navigation Three
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
 </ul>
@@ -273,6 +285,9 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
             Navigation One
           </span>
         </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
       </div>
       <ul
         aria-activedescendant=""
@@ -332,6 +347,9 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
             Navigation Two
           </span>
         </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
       </div>
     </li>
   </ul>
@@ -364,6 +382,9 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
           Navigation One
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
     <ul
       aria-activedescendant=""
@@ -423,6 +444,9 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
           Navigation Two
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
   <li
@@ -443,6 +467,9 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
           Navigation Three
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
 </ul>
@@ -521,6 +548,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
             Navigation Three
           </span>
         </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
       </div>
       <ul
         aria-activedescendant=""
@@ -555,6 +585,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
             style="padding-left:48px;"
           >
             Submenu
+            <i
+              class="ant-menu-submenu-arrow"
+            />
           </div>
         </li>
       </ul>
@@ -577,6 +610,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
             Navigation Four
           </span>
         </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
       </div>
     </li>
   </ul>
@@ -623,6 +659,9 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
             Navigation One
           </span>
         </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
       </div>
       <ul
         aria-activedescendant=""
@@ -682,6 +721,9 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
             Navigtion Two
           </span>
         </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
       </div>
     </li>
     <li
@@ -702,6 +744,9 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
             Navigation Three
           </span>
         </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
       </div>
     </li>
   </ul>
@@ -733,6 +778,9 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
           Navigation One
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
   <li
@@ -752,6 +800,9 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
           Navigation Two
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
   <li
@@ -771,6 +822,9 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
           Navigation Three
         </span>
       </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
     </div>
   </li>
 </ul>

components/menu/style/index.less

@@ -240,36 +240,61 @@
       }
     }
 
-    &-vertical > .@{menu-prefix-cls}-submenu-title:after {
+    &-vertical > .@{menu-prefix-cls}-submenu-title,
-      font-family: "anticon" !important;
+    &-inline > .@{menu-prefix-cls}-submenu-title {
-      font-style: normal;
+      .@{menu-prefix-cls}-submenu-arrow {
-      vertical-align: baseline;
+        transition: transform .3s @ease-in-out;
-      text-align: center;
+        position: absolute;
-      text-transform: none;
+        top: 50%;
-      text-rendering: auto;
+        right: 16px;
-      position: absolute;
+        &:after,
-      content: "\e61d";
+        &:before {
-      right: 16px;
+          content: '';
-      transform: rotate(270deg) scale(0.75);
+          position: absolute;
+          vertical-align: baseline;
+          background: #fff;
+          background-image: linear-gradient(to right, @text-color, @text-color);
+          width: 6px;
+          height: 2px;
+          border-radius: 2px;
+          transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
+        }
+      }
     }
 
-    &-inline > .@{menu-prefix-cls}-submenu-title:after {
+    &-vertical > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow:before {
-      font-family: "anticon" !important;
+      transform: rotate(-45deg) translateY(2px);
-      font-style: normal;
+    }
-      vertical-align: baseline;
+    &-vertical > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow:after {
-      text-align: center;
+      transform: rotate(45deg) translateY(-2px);
-      text-transform: none;
+    }
-      text-rendering: auto;
+
-      position: absolute;
+    &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow:after {
-      content: "\e61d";
+      transform: rotate(45deg) translateX(-2px);
-      right: 16px;
+    }
-      top: 0;
+    &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow:before {
-      .iconfont-size-under-12px(8px);
+      transform: rotate(-45deg) translateX(2px);
+    }
+
+    &-vertical > .@{menu-prefix-cls}-submenu-title:hover,
+    &-inline > .@{menu-prefix-cls}-submenu-title:hover {
+      .@{menu-prefix-cls}-submenu-arrow {
+        &:after,
+        &:before {
+          background: linear-gradient(to right, @primary-color, @primary-color);
+        }
+      }
     }
 
     &-open {
-      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title:after {
+      &.@{menu-prefix-cls}-submenu-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
-        transform: rotate(180deg) scale(0.75);
+        transform: translateY(-2px);
+        &:after {
+          transform: rotate(-45deg) translateX(-2px);
+        }
+        &:before {
+          transform: rotate(45deg) translateX(2px);
+        }
       }
     }
   }
@@ -338,8 +363,8 @@
     > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       left: 0;
       text-overflow: clip;
-      padding: 0 (@menu-collapsed-width - 16px) / 2;
+      padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
-      &:after {
+      .@{menu-prefix-cls}-submenu-arrow {
         display: none;
       }
       .@{iconfont-css-prefix} {
@@ -364,13 +389,6 @@
     }
   }
 
-  &-vertical&-inline-collapsed {
-    > .@{menu-prefix-cls}-item,
-    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
-      text-align: center;
-    }
-  }
-
   &-item-group-list {
     .@{menu-prefix-cls}-item,
     .@{menu-prefix-cls}-submenu-title {
@@ -434,6 +452,13 @@
   &-dark &-sub {
     color: @text-color-secondary-dark;
     background: @menu-dark-bg;
+    .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
+      &:after,
+      &:before {
+        background: @menu-dark-bg;
+        background-image: linear-gradient(to right, @text-color-secondary-dark, @text-color-secondary-dark);
+      }
+    }
   }
 
   &-dark &-inline&-sub {
@@ -482,6 +507,15 @@
     > a {
       color: #fff;
     }
+    .@{menu-prefix-cls}-submenu-title,
+    .@{menu-prefix-cls}-submenu-title:hover {
+      .@{menu-prefix-cls}-submenu-arrow {
+        &:after,
+        &:before {
+          background-image: linear-gradient(to right, #fff, #fff);
+        }
+      }
+    }
   }
 
   &-dark &-item-selected {

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -195,6 +195,9 @@ exports[`Table.filter renders menu correctly 1`] = `
             class="ant-dropdown-menu-submenu-title"
           >
             Title
+            <i
+              class="ant-dropdown-menu-submenu-arrow"
+            />
           </div>
         </li>
       </ul>
@@ -289,6 +292,9 @@ exports[`Table.filter renders radio filter correctly 1`] = `
             class="ant-dropdown-menu-submenu-title"
           >
             Title
+            <i
+              class="ant-dropdown-menu-submenu-arrow"
+            />
           </div>
         </li>
       </ul>

package.json

@@ -55,7 +55,7 @@
     "rc-editor-mention": "~0.6.12",
     "rc-form": "~1.4.0",
     "rc-input-number": "~3.6.0",
-    "rc-menu": "~5.0.10",
+    "rc-menu": "~5.1.0",
     "rc-notification": "~2.0.0",
     "rc-pagination": "~1.12.4",
     "rc-progress": "~2.2.2",