From 47d103096a306bf8f11f0ed451be05966ab01f17 Mon Sep 17 00:00:00 2001
From: Aaryan Porwal <aaryan.porwal@canonical.com>
Date: Wed, 18 Sep 2024 11:35:59 +0530
Subject: [PATCH] fix: Update SideNavigationLink component's prop type

---
 .../SideNavigationLink.test.tsx               |  8 ++++-
 .../SideNavigationLink/SideNavigationLink.tsx | 35 ++++++++++---------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
index d72705f6..2ea3ddc2 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.test.tsx
@@ -45,6 +45,12 @@ it("can use a custom link component", () => {
 
 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} />);
+  render(
+    <SideNavigationLink
+      label="Test content"
+      onClick={jest.fn()}
+      forwardRef={ref}
+    />,
+  );
   expect(ref.current?.getBoundingClientRect()).toBeDefined();
 });
diff --git a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
index e7d1ff6a..d4ac5c53 100644
--- a/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
+++ b/src/components/SideNavigation/SideNavigationLink/SideNavigationLink.tsx
@@ -1,29 +1,30 @@
 import React from "react";
 import classNames from "classnames";
-import type { HTMLProps, ReactNode } from "react";
+import type { HTMLProps } from "react";
 
 import type { SideNavigationBaseProps } from "../SideNavigationBase";
 import SideNavigationBase from "../SideNavigationBase";
+import { PropsWithSpread } from "types";
 
 export type LinkDefaultElement = HTMLProps<HTMLAnchorElement>;
 
-export type Props<L = LinkDefaultElement, E = HTMLAnchorElement> = Partial<
+export type Props<
+  L = LinkDefaultElement,
+  E = HTMLAnchorElement,
+> = PropsWithSpread<
+  {
+    /**
+     * The component or element to use for the link element e.g. `a` or `NavLink`.
+     * @default a
+     */
+    component?: SideNavigationBaseProps<L>["component"];
+    /**
+     * A ref to pass to the link element.
+     */
+    forwardRef?: React.Ref<E> | null;
+  },
   Omit<SideNavigationBaseProps<L>, "component">
-> & {
-  /**
-   * The navigation item's label.
-   */
-  label: ReactNode;
-  /**
-   * The component or element to use for the link element e.g. `a` or `NavLink`.
-   * @default a
-   */
-  component?: SideNavigationBaseProps<L>["component"];
-  /**
-   * A ref to pass to the link element.
-   */
-  forwardRef?: React.Ref<E> | null;
-};
+>;
 
 const SideNavigationLink = <L = LinkDefaultElement, E = HTMLAnchorElement>({
   component,