Fix Dropdown item styles (#1031)

* fix Dropdown item styles * eslint fix
factorialco · Jan 10, 2025 · d69f808 · d69f808
1 parent c52b76d
commit d69f808
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 50 deletions.
diff --git a/lib/experimental/Navigation/Dropdown/DropdownItem.tsx b/lib/experimental/Navigation/Dropdown/DropdownItem.tsx
@@ -1,19 +1,8 @@
-import { Icon, IconType } from "@/components/Utilities/Icon"
-import { AvatarVariant, renderAvatar } from "@/experimental/exports"
-import { Link } from "@/lib/linkHandler"
+import { Icon } from "@/components/Utilities/Icon"
+import { DropdownItemObject, renderAvatar } from "@/experimental/exports"
 import { cn } from "@/lib/utils"
-import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu"
-import { NavigationItem } from "../utils"
 
-export type DropdownItemObject = NavigationItem & {
-  onClick?: () => void
-  icon?: IconType
-  description?: string
-  critical?: boolean
-  avatar?: AvatarVariant
-}
-
-const Content = ({ item }: { item: DropdownItemObject }) => (
+export const DropdownItemContent = ({ item }: { item: DropdownItemObject }) => (
   <>
     {item.avatar && renderAvatar(item.avatar, "xsmall")}
     {item.icon && (
@@ -38,33 +27,3 @@ const Content = ({ item }: { item: DropdownItemObject }) => (
     </div>
   </>
 )
-
-const DropdownItem = ({ item }: { item: DropdownItemObject }) => {
-  const itemClass = cn(
-    "flex items-start gap-1.5 w-full",
-    item.critical && "text-f1-foreground-critical"
-  )
-
-  return (
-    <DropdownMenuItem asChild onClick={item.onClick} className={itemClass}>
-      {item.href ? (
-        <Link
-          href={item.href}
-          className={cn(
-            itemClass,
-            "text-f1-foreground no-underline hover:cursor-pointer"
-          )}
-          {...item}
-        >
-          <Content item={item} />
-        </Link>
-      ) : (
-        <div className={itemClass}>
-          <Content item={item} />
-        </div>
-      )}
-    </DropdownMenuItem>
-  )
-}
-
-export { DropdownItem, Content as DropdownItemContent }
diff --git a/lib/experimental/Navigation/Dropdown/index.tsx b/lib/experimental/Navigation/Dropdown/index.tsx
@@ -1,4 +1,6 @@
 import { Button } from "@/components/Actions/Button"
+import { IconType } from "@/components/Utilities/Icon"
+import { AvatarVariant } from "@/experimental/Information/Avatars/utils"
 import { Ellipsis, EllipsisHorizontal } from "@/icons/app"
 import { Link } from "@/lib/linkHandler"
 import { cn } from "@/lib/utils"
@@ -11,25 +13,60 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/ui/dropdown-menu"
 import { Separator } from "@/ui/separator"
 import { useState } from "react"
-import {
-  DropdownItem,
-  DropdownItemContent,
-  DropdownItemObject,
-} from "./DropdownItem"
+import { NavigationItem } from "../utils"
+import { DropdownItemContent } from "./DropdownItem"
 
-export type { DropdownItemObject } from "./DropdownItem"
 export type DropdownItem = DropdownItemObject | "separator"
 
+export type DropdownItemObject = NavigationItem & {
+  onClick?: () => void
+  icon?: IconType
+  description?: string
+  critical?: boolean
+  avatar?: AvatarVariant
+}
+
 type DropdownProps = {
   items: DropdownItem[]
   children?: React.ReactNode
 }
 
+const DropdownItem = ({ item }: { item: DropdownItemObject }) => {
+  const { label: _label, ...props } = item
+
+  const itemClass = cn(
+    "flex items-start gap-1.5 w-full",
+    item.critical && "text-f1-foreground-critical"
+  )
+
+  return (
+    <DropdownMenuItem asChild onClick={item.onClick} className={itemClass}>
+      {item.href ? (
+        <Link
+          href={item.href}
+          className={cn(
+            itemClass,
+            "text-f1-foreground no-underline hover:cursor-pointer"
+          )}
+          {...props}
+        >
+          <DropdownItemContent item={item} />
+        </Link>
+      ) : (
+        <div className={itemClass}>
+          <DropdownItemContent item={item} />
+        </div>
+      )}
+    </DropdownMenuItem>
+  )
+}
+
 export function Dropdown({ items, children }: DropdownProps) {
   return (
     <DropdownMenu>