From 03e4a98415fa80f352555b392a5390f472e4f091 Mon Sep 17 00:00:00 2001
From: Gustavo Santos <gefgu@hotmail.com>
Date: Fri, 30 Sep 2022 20:53:56 -0300
Subject: [PATCH 1/3] feat(menu): add optional danger state for menu items

---
 packages/react-core/src/components/Menu/MenuItem.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/src/components/Menu/MenuItem.tsx
index bcc73d6dc04..1af964b3850 100644
--- a/packages/react-core/src/components/Menu/MenuItem.tsx
+++ b/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}

From fe9df92da422d939507bb77254ddcac2ebba50cd Mon Sep 17 00:00:00 2001
From: Gustavo Santos <gefgu@hotmail.com>
Date: Thu, 6 Oct 2022 20:37:08 -0300
Subject: [PATCH 2/3] docs(menu): add demo for danger state

---
 .../src/components/Menu/examples/Menu.md      |  6 +++-
 .../Menu/examples/MenuDangerMenuItem.tsx      | 28 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx

diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md
index 030ab52202d..393bec9369d 100644
--- a/packages/react-core/src/components/Menu/examples/Menu.md
+++ b/packages/react-core/src/components/Menu/examples/Menu.md
@@ -22,7 +22,6 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 
 ```ts file="MenuBasic.tsx"
 ```
-
 ### With icons
 
 ```ts file="MenuWithIcons.tsx"
@@ -119,3 +118,8 @@ To render an initially drilled in menu, the `menuDrilledIn`, `drilldownPath`, an
 
 ```ts file="MenuWithViewMore.tsx"
 ```
+
+### Danger menu item
+
+```ts file="MenuDangerMenuItem.tsx"
+```
\ No newline at end of file
diff --git a/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx b/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx
new file mode 100644
index 00000000000..a3a1f9d57b2
--- /dev/null
+++ b/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>
+  );
+};

From 8d30b55fde66a47eb26fcd9420cbf9a477e6343e Mon Sep 17 00:00:00 2001
From: Gustavo Santos <gefgu@hotmail.com>
Date: Mon, 17 Oct 2022 21:10:57 -0300
Subject: [PATCH 3/3] chore: move example to match html

---
 .../react-core/src/components/Menu/examples/Menu.md   | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md
index 393bec9369d..f80b3626f0d 100644
--- a/packages/react-core/src/components/Menu/examples/Menu.md
+++ b/packages/react-core/src/components/Menu/examples/Menu.md
@@ -22,6 +22,12 @@ 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"
@@ -118,8 +124,3 @@ To render an initially drilled in menu, the `menuDrilledIn`, `drilldownPath`, an
 
 ```ts file="MenuWithViewMore.tsx"
 ```
-
-### Danger menu item
-
-```ts file="MenuDangerMenuItem.tsx"
-```
\ No newline at end of file