Merge pull request #69 from abusix/pla-885-use-button-instead-of-div-…

…for-disclosure-nav-items feat(components): use button for disclosure nav item
abusix · Dec 8, 2023 · f76f198 · f76f198
2 parents e6768d3 + eb1ac62
commit f76f198
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/navigation/navigation-disclosure-panel.tsx b/src/components/navigation/navigation-disclosure-panel.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { Disclosure } from "@headlessui/react";
 import { classNames } from "../../util/class-names";
 
-export interface NavigationDisclosurePanelItemProps {
-    children: React.ReactNode;
+export interface NavigationDisclosurePanelItemProps
+    extends React.ComponentPropsWithoutRef<"button"> {
     isActive?: boolean;
     isIndented?: boolean;
 }
@@ -12,20 +12,23 @@ const NavigationDisclosurePanelItem = ({
     children,
     isActive,
     isIndented,
+    ...props
 }: NavigationDisclosurePanelItemProps) => {
     return (
-        <div
+        <button
+            type="button"
             className={classNames(
                 "relative w-full px-8 py-3 text-left text-sm text-neutral-0 hover:bg-primary-900+10",
                 isIndented && "px-14",
                 isActive && "bg-primary-900+20 font-semibold hover:bg-primary-900+20"
             )}
+            {...props}
         >
             {children}
             {isActive && (
                 <div className="absolute bottom-0 left-0 top-0 h-full w-0.5 rounded-r-sm bg-neutral-0" />
             )}
-        </div>
+        </button>
     );
 };