Merge pull request #14937 from TylerAPfledderer/refactor/linkbox-asChild-strat

refactor(link-box): use `asChild` strategy for `LinkBox` component

Author: pettinarip

src/components/Contributors.tsx

@@ -34,7 +34,6 @@ const Contributors = () => {
       <Flex className="flex-wrap">
         {contributorsList.map((contributor) => (
           <LinkBox
-            as="div"
             className="m-2 max-w-[132px] transform shadow transition-transform duration-100 hover:scale-[1.02] hover:rounded hover:bg-background-highlight focus:scale-[1.02] focus:rounded"
             key={contributor.login}
           >

src/components/ui/avatar.tsx

@@ -151,25 +151,22 @@ const Avatar = React.forwardRef<
 
     const _ref = ref as React.ForwardedRef<HTMLDivElement>
     return (
-      <LinkBox
-        // !! Inconsistent strategy, using `as` prop instead of `asChild` bool
-        as={Center}
-        ref={_ref}
-        className={cn(_direction, "gap-x-1 gap-y-0")}
-      >
-        <LinkOverlay
-          asChild
-          className={cn(
-            "peer z-overlay inline-flex items-center gap-1 p-1",
-            size !== "md" ? "text-xs" : "text-sm"
-          )}
-        >
-          <BaseLink {...commonLinkProps}>{label}</BaseLink>
-        </LinkOverlay>
-        <AvatarBase size={size}>
-          <AvatarImage src={src} />
-          <AvatarFallback>{fallbackInitials}</AvatarFallback>
-        </AvatarBase>
+      <LinkBox ref={_ref} className={cn(_direction, "gap-x-1 gap-y-0")} asChild>
+        <Center>
+          <LinkOverlay
+            asChild
+            className={cn(
+              "peer z-overlay inline-flex items-center gap-1 p-1",
+              size !== "md" ? "text-xs" : "text-sm"
+            )}
+          >
+            <BaseLink {...commonLinkProps}>{label}</BaseLink>
+          </LinkOverlay>
+          <AvatarBase size={size}>
+            <AvatarImage src={src} />
+            <AvatarFallback>{fallbackInitials}</AvatarFallback>
+          </AvatarBase>
+        </Center>
       </LinkBox>
     )
   }

src/components/ui/link-box.tsx

@@ -1,19 +1,15 @@
-import {
-  type BaseHTMLAttributes,
-  type ElementRef,
-  type ElementType,
-  forwardRef,
-} from "react"
+import { type BaseHTMLAttributes, type ElementRef, forwardRef } from "react"
 import { Slot } from "@radix-ui/react-slot"
 
 import { cn } from "@/lib/utils/cn"
 
 type LinkBoxElement = ElementRef<"div">
 
-type LinkBoxProps = BaseHTMLAttributes<HTMLDivElement> & { as?: ElementType }
+type LinkBoxProps = BaseHTMLAttributes<HTMLDivElement> & { asChild?: boolean }
 
 const LinkBox = forwardRef<LinkBoxElement, LinkBoxProps>(
-  ({ as: Comp = "div", className, ...props }, ref) => {
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div"
     return (
       <Comp ref={ref} className={cn("relative z-10", className)} {...props} />
     )