feat(menu): add optional danger state for menu items (#8131)

* feat(menu): add optional danger state for menu items

* docs(menu): add demo for danger state

* chore: move example to match html

Author: gefgu

packages/react-core/src/components/Menu/MenuItem.tsx

@@ -52,6 +52,8 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   isSelected?: boolean;
   /** Flag indicating the item is focused */
   isFocused?: boolean;
+  /** Flag indicating the item is in danger state */
+  isDanger?: boolean;
   /** @beta Flyout menu */
   flyoutMenu?: React.ReactElement;
   /** @beta Callback function when mouse leaves trigger */
@@ -91,6 +93,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   isExternalLink = false,
   isSelected = null,
   isFocused,
+  isDanger = false,
   icon,
   actions,
   onShowFlyout,
@@ -295,6 +298,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
         isLoadButton && styles.modifiers.load,
         isLoading && styles.modifiers.loading,
         isFocused && styles.modifiers.focus,
+        isDanger && styles.modifiers.danger,
         className
       )}
       onMouseOver={onMouseOver}

packages/react-core/src/components/Menu/examples/Menu.md

@@ -23,6 +23,11 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 ```ts file="MenuBasic.tsx"
 ```
 
+### Danger menu item
+
+```ts file="MenuDangerMenuItem.tsx"
+```
+
 ### With icons
 
 ```ts file="MenuWithIcons.tsx"

packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Divider, Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core';
+
+export const MenuDangerMenuItem: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu activeItemId={activeItem} onSelect={onSelect}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Action 1</MenuItem>
+          <MenuItem itemId={1}>Action 2</MenuItem>
+          <Divider component="li" />
+          <MenuItem itemId={2} isDanger>
+            Delete
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};