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, '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 = ({ isExternalLink = false, isSelected = null, isFocused, + isDanger = false, icon, actions, onShowFlyout, @@ -295,6 +298,7 @@ const MenuItemBase: React.FunctionComponent = ({ isLoadButton && styles.modifiers.load, isLoading && styles.modifiers.loading, isFocused && styles.modifiers.focus, + isDanger && styles.modifiers.danger, className )} onMouseOver={onMouseOver} diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index 030ab52202d..f80b3626f0d 100644 --- a/packages/react-core/src/components/Menu/examples/Menu.md +++ b/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" 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 | undefined, itemId: number | string | undefined) => { + const item = itemId as number; + // eslint-disable-next-line no-console + console.log(`clicked ${itemId}`); + setActiveItem(item); + }; + + return ( + + + + Action 1 + Action 2 + + + Delete + + + + + ); +};