From 4633e13d54fa57735b543fa7c8cf7a565d1521c8 Mon Sep 17 00:00:00 2001
From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Date: Thu, 4 Apr 2024 18:37:07 +0530
Subject: [PATCH] fix: added href property to sideNavMenuItem (#16113)

* fix: added href property to sideNavMenuItem

* fix: updated snapshots

* chore: update snapshots

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  3 +++
 .../components/UIShell/SideNavMenuItem.tsx    | 24 +++++++++++++++++--
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index ccb86ef96a39..88bbbe854537 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -7255,6 +7255,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "href": Object {
+        "type": "string",
+      },
       "isActive": Object {
         "type": "bool",
       },
diff --git a/packages/react/src/components/UIShell/SideNavMenuItem.tsx b/packages/react/src/components/UIShell/SideNavMenuItem.tsx
index 322971d3638d..e310c5d06784 100644
--- a/packages/react/src/components/UIShell/SideNavMenuItem.tsx
+++ b/packages/react/src/components/UIShell/SideNavMenuItem.tsx
@@ -29,12 +29,23 @@ interface SideNavMenuItemProps extends HTMLAttributes<HTMLElement> {
    * `aria-current="page"`, as well.
    */
   isActive?: boolean;
+
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href?: string;
 }
 
 const SideNavMenuItem = React.forwardRef<HTMLElement, SideNavMenuItemProps>(
   function SideNavMenuItem(props, ref: ForwardedRef<HTMLElement>) {
     const prefix = usePrefix();
-    const { children, className: customClassName, isActive, ...rest } = props;
+    const {
+      children,
+      className: customClassName,
+      isActive,
+      href,
+      ...rest
+    } = props;
     const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
     const linkClassName = cx({
       [`${prefix}--side-nav__link`]: true,
@@ -43,7 +54,11 @@ const SideNavMenuItem = React.forwardRef<HTMLElement, SideNavMenuItemProps>(
 
     return (
       <li className={className}>
-        <Link {...rest} className={linkClassName} ref={ref as Ref<ElementType>}>
+        <Link
+          href={href}
+          {...rest}
+          className={linkClassName}
+          ref={ref as Ref<ElementType>}>
           <SideNavLinkText>{children}</SideNavLinkText>
         </Link>
       </li>
@@ -63,6 +78,11 @@ SideNavMenuItem.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Optionally provide an href for the underlying li`
+   */
+  href: PropTypes.string,
+
   /**
    * Optionally specify whether the link is "active". An active link is one that
    * has an href that is the same as the current page. Can also pass in