Support rendering anchor tags in DropdownMenuItem

WordPress · Jun 14, 2023 · 27f4ddc · 27f4ddc
1 parent 654d7eb
commit 27f4ddc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx
@@ -210,19 +210,22 @@ export const DropdownMenuItem = forwardRef(
 		{ children, prefix, suffix, ...props }: DropdownMenuItemProps,
 		forwardedRef: React.ForwardedRef< any >
 	) => {
+		const Component = props.href ? 'a' : 'div';
 		return (
-			<DropdownMenuStyled.Item { ...props } ref={ forwardedRef }>
-				{ prefix && (
-					<DropdownMenuStyled.ItemPrefixWrapper>
-						{ prefix }
-					</DropdownMenuStyled.ItemPrefixWrapper>
-				) }
-				{ children }
-				{ suffix && (
-					<DropdownMenuStyled.ItemSuffixWrapper>
-						{ suffix }
-					</DropdownMenuStyled.ItemSuffixWrapper>
-				) }
+			<DropdownMenuStyled.Item { ...props } asChild ref={ forwardedRef }>
+				<Component>
+					{ prefix && (
+						<DropdownMenuStyled.ItemPrefixWrapper>
+							{ prefix }
+						</DropdownMenuStyled.ItemPrefixWrapper>
+					) }
+					{ children }
+					{ suffix && (
+						<DropdownMenuStyled.ItemSuffixWrapper>
+							{ suffix }
+						</DropdownMenuStyled.ItemSuffixWrapper>
+					) }
+				</Component>
 			</DropdownMenuStyled.Item>
 		);
 	}

diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -176,6 +176,14 @@ const baseItem = css`
 	outline: none;
 	cursor: pointer;
 
+	/* Undo existing base focus/hover/active styles */
+	&:focus,
+	&:hover,
+	&:active {
+		color: ${ COLORS.gray[ 900 ] };
+		box-shadow: none;
+	}
+
 	&[data-disabled] {
 		/*
 		TODO:

diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts
@@ -147,6 +147,21 @@ export type DropdownMenuItemProps = {
 	 * The contents of the item's suffix
 	 */
 	suffix?: React.ReactNode;
+	/**
+	 * If specified, the menu item will render as an anchor tag and allow
+	 * navigation to the provided URL.
+	 */
+	href?: HTMLAnchorElement[ 'href' ];
+	/**
+	 * Equivalent to the `rel` attribute for an HTML Anchor Tag. It should
+	 * be only specified when passing a non-empty `href` prop.
+	 */
+	rel?: HTMLAnchorElement[ 'rel' ];
+	/**
+	 * Equivalent to the `target` attribute for an HTML Anchor Tag. It should
+	 * be only specified when passing a non-empty `href` prop.
+	 */
+	target?: HTMLAnchorElement[ 'target' ];
 } & Pick<
 	DropdownMenuPrimitive.DropdownMenuItemProps,
 	'onClick' | 'onMouseEnter' | 'onMouseMove' | 'onMouseLeave'