feat: add the dashed props of menu divider (#31379)

close #31292

components/menu/MenuDivider.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Divider } from 'rc-menu';
+import { ConfigContext } from '../config-provider';
+
+export interface MenuDividerProps extends React.HTMLAttributes<HTMLLIElement> {
+  className?: string;
+  prefixCls?: string;
+  style?: React.CSSProperties;
+  dashed?: boolean;
+}
+
+const MenuDivider: React.FC<MenuDividerProps> = ({
+  prefixCls: customizePrefixCls,
+  className,
+  dashed,
+  ...restProps
+}) => {
+  const { getPrefixCls } = React.useContext(ConfigContext);
+
+  const prefixCls = getPrefixCls('menu', customizePrefixCls);
+  const classString = classNames(
+    {
+      [`${prefixCls}-item-divider-dashed`]: !!dashed,
+    },
+    className,
+  );
+
+  return <Divider className={classString} {...restProps} />;
+};
+
+export default MenuDivider;

components/menu/__tests__/index.test.js

@@ -821,4 +821,25 @@ describe('Menu', () => {
     expect(wrapper.find('.ant-menu-inline-collapsed-noicon').first().text()).toEqual('L');
     expect(wrapper.find('.ant-menu-inline-collapsed-noicon').last().text()).toEqual('B');
   });
+
+  it('divider should show', () => {
+    const wrapper = mount(
+      <Menu mode="vertical">
+        <SubMenu key="sub1" title="Navigation One">
+          <Menu.Item key="1">Option 1</Menu.Item>
+        </SubMenu>
+        <Menu.Divider dashed />
+        <SubMenu key="sub2" title="Navigation Two">
+          <Menu.Item key="2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Divider />
+        <SubMenu key="sub4" title="Navigation Three">
+          <Menu.Item key="3">Option 3</Menu.Item>
+        </SubMenu>
+      </Menu>,
+    );
+
+    expect(wrapper.find('li.ant-menu-item-divider').length).toBe(2);
+    expect(wrapper.find('li.ant-menu-item-divider-dashed').length).toBe(1);
+  });
 });

components/menu/demo/vertical.md

@@ -30,7 +30,7 @@ ReactDOM.render(
         <Menu.Item key="1">Option 1</Menu.Item>
         <Menu.Item key="2">Option 2</Menu.Item>
       </Menu.ItemGroup>
-      <Menu.ItemGroup title="Iteom 2">
+      <Menu.ItemGroup title="Item 2">
         <Menu.Item key="3">Option 3</Menu.Item>
         <Menu.Item key="4">Option 4</Menu.Item>
       </Menu.ItemGroup>

components/menu/index.en-US.md

@@ -111,6 +111,10 @@ More layouts with navigation: [Layout](/components/layout).
 
 Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.
 
+| Param  | Description            | Type    | Default value | Version |
+| ------ | ---------------------- | ------- | ------------- | ------- |
+| dashed | Whether line is dashed | boolean | false         | 4.17.0  |
+
 ## FAQ
 
 ### Why Menu children node will render twice?

components/menu/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import RcMenu, { Divider, ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
+import RcMenu, { ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
@@ -11,6 +11,9 @@ import { SiderContext, SiderContextProps } from '../layout/Sider';
 import collapseMotion from '../_util/motion';
 import { cloneElement } from '../_util/reactNode';
 import MenuContext, { MenuTheme } from './MenuContext';
+import MenuDivider from './MenuDivider';
+
+export { MenuDividerProps } from './MenuDivider';
 
 export { MenuItemGroupProps } from 'rc-menu';
 
@@ -113,7 +116,7 @@ class InternalMenu extends React.Component<InternalMenuProps> {
 
 // We should keep this as ref-able
 class Menu extends React.Component<MenuProps, {}> {
-  static Divider = Divider;
+  static Divider = MenuDivider;
 
   static Item = Item;
 

components/menu/index.zh-CN.md

@@ -112,6 +112,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 
 菜单项分割线，只用在弹出菜单内。
 
+| 参数   | 说明     | 类型    | 默认值 | 版本   |
+| ------ | -------- | ------- | ------ | ------ |
+| dashed | 是否虚线 | boolean | false  | 4.17.0 |
+
 ## FAQ
 
 ### 为何 Menu 的子元素会渲染两次？

components/menu/style/index.less

@@ -118,10 +118,15 @@
   }
 
   &-item-divider {
-    height: 1px;
     overflow: hidden;
     line-height: 0;
-    background-color: @border-color-split;
+    border-color: @border-color-split;
+    border-style: solid;
+    border-width: 1px 0 0;
+  }
+
+  &-item-divider-dashed {
+    border-style: dashed;
   }
 
   &-horizontal &-item,
@@ -238,12 +243,8 @@
   }
 
   & > &-item-divider {
-    height: 1px;
     margin: 1px 0;
     padding: 0;
-    overflow: hidden;
-    line-height: 0;
-    background-color: @border-color-split;
   }
 
   &-submenu {