From 85ab02b57337ec5ab99d57978c343fcfc3083fa8 Mon Sep 17 00:00:00 2001
From: Aaryan Porwal <aaryan.porwal@canonical.com>
Date: Tue, 10 Sep 2024 18:54:33 +0530
Subject: [PATCH] fix(side nav): Pass ref to SideNavBase and write a test

---
 .../SideNavigationBase/SideNavigationBase.tsx             | 7 ++++++-
 .../SideNavigationLink/SideNavigationLink.test.tsx        | 8 ++++++++
 .../SideNavigationLink/SideNavigationLink.tsx             | 2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.tsx b/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.tsx
index f0ae52f0a..a9fe1d683 100644
--- a/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.tsx
+++ b/src/components/SideNavigation/SideNavigationBase/SideNavigationBase.tsx
@@ -25,6 +25,10 @@ export type Props<C> = PropsWithSpread<
      * The navigation item's status.
      */
     status?: ReactNode;
+    /**
+     * A ref to pass to the element.
+     */
+    forwardRef?: React.Ref<HTMLSpanElement> | null;
   },
   C
 >;
@@ -35,6 +39,7 @@ const SideNavigationBase = <C,>({
   icon,
   label,
   status,
+  forwardRef,
   ...props
 }: Props<C>) => {
   return (
@@ -42,7 +47,7 @@ const SideNavigationBase = <C,>({
       {icon ? (
         <Icon name={icon} light={dark} className="p-side-navigation__icon" />
       ) : null}
-      <span className="p-side-navigation__label">
+      <span className="p-side-navigation__label" ref={forwardRef}>
         <span className="p-side-navigation__label">{label}</span>
       </span>
       {status ? (
diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
index c6b20637d..767e5a011 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
@@ -42,3 +42,11 @@ it("can use a custom link component", () => {
     "p-side-navigation__link",
   );
 });
+
+it("gets the ref and checks if it can be used to get the element's position", () => {
+  const ref = React.createRef<HTMLAnchorElement>();
+  render(
+    <SideNavigationLink label="Test content" forwardRef={ref} component="a" />,
+  );
+  expect(ref.current?.getBoundingClientRect()).toBeDefined();
+});
diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
index 0b6c37348..b5760fbd6 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
@@ -37,7 +37,7 @@ const SideNavigationLink = <L = LinkDefaultElement, E = HTMLAnchorElement>({
       className={classNames("p-side-navigation__link", className)}
       component={component ?? "a"}
       {...props}
-      ref={forwardRef}
+      forwardRef={forwardRef}
     />
   );
 };