feat: MenuItem support danger (#23785)

* feat: Basic danger color

* dark of it

* danger dark style

* invers of dropdown

* update less

* update snapshot

components/dropdown/demo/basic.md

@@ -34,6 +34,7 @@ const menu = (
         3rd menu item
       </a>
     </Menu.Item>
+    <Menu.Item danger>a danger item</Menu.Item>
   </Menu>
 );
 

components/dropdown/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './status';
 
 @dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
 

components/dropdown/style/status.less

@@ -0,0 +1,12 @@
+@import './index';
+
+.@{dropdown-prefix-cls}-menu-item {
+  &&-danger {
+    color: @error-color;
+
+    &:hover {
+      color: @text-color-inverse;
+      background-color: @error-color;
+    }
+  }
+}

components/menu/MenuItem.tsx

@@ -16,6 +16,7 @@ export interface MenuItemProps
   disabled?: boolean;
   level?: number;
   icon?: React.ReactNode;
+  danger?: boolean;
   title?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
@@ -50,7 +51,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
 
   renderItem = ({ siderCollapsed }: SiderContextProps) => {
     const { level, className, children, rootPrefixCls } = this.props;
-    const { title, icon, ...rest } = this.props;
+    const { title, icon, danger, ...rest } = this.props;
 
     return (
       <MenuContext.Consumer>
@@ -81,6 +82,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
               <Item
                 {...rest}
                 className={classNames(className, {
+                  [`${rootPrefixCls}-item-danger`]: danger,
                   [`${rootPrefixCls}-item-only-child`]:
                     (icon ? childrenLength + 1 : childrenLength) === 1,
                 })}

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

@@ -1113,7 +1113,7 @@ Array [
           Option 3
         </li>
         <li
-          class="ant-menu-item ant-menu-item-only-child"
+          class="ant-menu-item ant-menu-item-danger ant-menu-item-only-child"
           role="menuitem"
           style="padding-left:48px"
         >

components/menu/demo/theme.md

@@ -61,7 +61,9 @@ class Sider extends React.Component {
             <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>
+            <Menu.Item key="4" danger>
+              Option 4
+            </Menu.Item>
           </SubMenu>
           <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
             <Menu.Item key="5">Option 5</Menu.Item>

components/menu/index.en-US.md

@@ -58,6 +58,7 @@ More layouts with navigation: [Layout](/components/layout).
 | key      | Unique ID of the menu item           | string    |               |         |
 | title    | Set display title for collapsed item | string    |               |         |
 | icon     | icon of the menu item                | ReactNode |               | 4.2.0   |
+| danger   | Display the danger style             | boolean   | false         | 4.3.0   |
 
 > Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon.
 >

components/menu/index.zh-CN.md

@@ -59,6 +59,7 @@ subtitle: 导航菜单
 | key      | item 的唯一标志          | string    |        |       |
 | title    | 设置收缩时展示的悬浮标题 | string    |        |       |
 | icon     | 菜单图标                 | ReactNode |        | 4.2.0 |
+| danger   | 展示错误状态样式         | boolean   | false  | 4.3.0 |
 
 > 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
 >

components/menu/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './status';
 
 @menu-prefix-cls: ~'@{ant-prefix}-menu';
 

components/menu/style/status.less

@@ -0,0 +1,47 @@
+@import './index';
+
+.@{menu-prefix-cls} {
+  // Danger
+  &-item-danger&-item {
+    color: @menu-highlight-danger-color;
+
+    &:hover,
+    &-active {
+      color: @menu-highlight-danger-color;
+    }
+
+    &:active {
+      background: @menu-item-active-danger-bg;
+    }
+
+    &-selected {
+      color: @menu-highlight-danger-color;
+      > a,
+      > a:hover {
+        color: @menu-highlight-danger-color;
+      }
+    }
+
+    .@{menu-prefix-cls}:not(.@{menu-prefix-cls}-horizontal) &-selected {
+      background-color: @menu-item-active-danger-bg;
+    }
+
+    .@{menu-prefix-cls}-inline &::after {
+      border-right-color: @menu-highlight-danger-color;
+    }
+  }
+
+  // ==================== Dark ====================
+  &-dark &-item-danger&-item {
+    &,
+    &:hover,
+    & > a {
+      color: @menu-dark-danger-color;
+    }
+  }
+
+  &-dark&-dark:not(&-horizontal) &-item-danger&-item-selected {
+    color: @menu-dark-highlight-color;
+    background-color: @menu-dark-item-active-danger-bg;
+  }
+}

components/style/themes/default.less

@@ -516,7 +516,9 @@
 @menu-popup-bg: @component-background;
 @menu-item-color: @text-color;
 @menu-highlight-color: @primary-color;
+@menu-highlight-danger-color: @error-color;
 @menu-item-active-bg: @primary-1;
+@menu-item-active-danger-bg: @red-1;
 @menu-item-active-border-width: 3px;
 @menu-item-group-title-color: @text-color-secondary;
 @menu-icon-size: @font-size-base;
@@ -531,11 +533,13 @@
 
 // dark theme
 @menu-dark-color: @text-color-secondary-dark;
+@menu-dark-danger-color: @error-color;
 @menu-dark-bg: @layout-header-background;
 @menu-dark-arrow-color: #fff;
 @menu-dark-submenu-bg: #000c17;
 @menu-dark-highlight-color: #fff;
 @menu-dark-item-active-bg: @primary-color;
+@menu-dark-item-active-danger-bg: @error-color;
 @menu-dark-selected-item-icon-color: @white;
 @menu-dark-selected-item-text-color: @white;
 @menu-dark-item-hover-bg: transparent;