Merge pull request #425 from purple-technology/fx-1772

feat: extending MenuItem functionality

Author: PetrHendrych97

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [5.29.0](https://github.com/purple-technology/phoenix-components/compare/v5.28.2...v5.29.0) (2025-08-29)
+
+
+### Features
+
+* add button support for MenuItem alongside anchor depending on href prop ([b75494b](https://github.com/purple-technology/phoenix-components/commit/b75494b4358336c929183cd350b8c7dc6ca58bf0))
+
 ### [5.28.2](https://github.com/purple-technology/phoenix-components/compare/v5.28.1...v5.28.2) (2025-08-18)
 
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@purple/phoenix-components",
-	"version": "5.28.2",
+	"version": "5.29.0",
 	"description": "",
 	"main": "dist/bundle.umd.js",
 	"module": "dist/bundle.esm.js",

src/components/Menu/Menu.stories.tsx

@@ -11,8 +11,13 @@ export default {
 
 export const Menu = (args) => (
 	<MenuComponent {...args}>
-		<MenuItemComponent onClick={args.hide}>Withdraw</MenuItemComponent>
-		<MenuItemComponent onClick={args.hide}>Transfer</MenuItemComponent>
+		<MenuItemComponent onClick={args.hide}>No href item</MenuItemComponent>
+		<MenuItemComponent href="/" onClick={args.hide}>
+			With href item
+		</MenuItemComponent>
+		<MenuItemComponent disabled href="/" onClick={args.hide}>
+			Disabled item
+		</MenuItemComponent>
 		<HorizontalDivider my="3xs" />
 		<MenuItemComponent icon="lock" onClick={args.hide}>
 			Change password

src/components/Menu/MenuItem.tsx

@@ -7,7 +7,11 @@ import { PhoenixIconsColored } from '../../types/PhoenixIcons'
 import { MarginProps } from '../common/Spacing/MarginProps'
 import { PaddingProps } from '../common/Spacing/PaddingProps'
 import MenuItemIcon from './MenuItemIcon'
-import { StyledMenuItem, StyledMenuItemAnchor } from './MenuStyles'
+import {
+	StyledMenuItem,
+	StyledMenuItemAnchor,
+	StyledMenuItemButton
+} from './MenuStyles'
 
 export interface MenuItemProps
 	extends MarginProps,
@@ -26,22 +30,38 @@ export const MenuItem: React.FC<PropsWithChildren<MenuItemProps>> = ({
 	onClick,
 	children,
 	icon,
+	href,
+	disabled,
 	className,
-	...props
+	colorTheme,
+	...restProps
 }) => {
+	const getClickHandler = ():
+		| MouseEventHandler<HTMLAnchorElement>
+		| undefined => (disabled ? undefined : onClick)
+
+	const commonProps = {
+		onClick: getClickHandler(),
+		disabled,
+		...restProps
+	}
+
+	const content = (
+		<>
+			<MenuItemIcon icon={icon} disabled={disabled} colorTheme={colorTheme} />
+			{children}
+		</>
+	)
+
 	return (
-		<StyledMenuItem data-testid={testId} className={className} {...props}>
-			<StyledMenuItemAnchor
-				onClick={!props.disabled ? onClick : undefined}
-				{...props}
-			>
-				<MenuItemIcon
-					icon={icon}
-					disabled={props.disabled}
-					colorTheme={props.colorTheme}
-				/>
-				{children}
-			</StyledMenuItemAnchor>
+		<StyledMenuItem data-testid={testId} className={className} {...restProps}>
+			{href ? (
+				<StyledMenuItemAnchor href={href} {...commonProps}>
+					{content}
+				</StyledMenuItemAnchor>
+			) : (
+				<StyledMenuItemButton {...commonProps}>{content}</StyledMenuItemButton>
+			)}
 		</StyledMenuItem>
 	)
 }

src/components/Menu/MenuStyles.tsx

@@ -24,12 +24,12 @@ export const StyledMenuItem = styled.li`
 	${marginCss}
 `
 
-interface StyledMenuItemAnchorProps {
+interface MenuItemBaseCssProps {
 	colorTheme?: ColorTheme
 	disabled?: boolean
 }
 
-export const StyledMenuItemAnchor = styled.a<StyledMenuItemAnchorProps>`
+const menuItemBaseCss = css<MenuItemBaseCssProps>`
 	display: flex;
 	align-items: center;
 	text-decoration: none;
@@ -55,6 +55,19 @@ export const StyledMenuItemAnchor = styled.a<StyledMenuItemAnchorProps>`
 			: undefined}
 `
 
+export const StyledMenuItemButton = styled.button<MenuItemBaseCssProps>`
+	${menuItemBaseCss};
+	border: none;
+	background: inherit;
+	width: 100%;
+	font-size: 14px;
+	font-family: ${({ theme }): string => theme.tokens.ref.fontFamily.base};
+`
+
+export const StyledMenuItemAnchor = styled.a<MenuItemBaseCssProps>`
+	${menuItemBaseCss}
+`
+
 export const styledIconCss = css<MenuItemIconProps>`
 	width: 20px;
 	height: 20px;