ui: rename wrapsButton → asChild in <Tooltip> (#42161)

GitOrigin-RevId: 09001a25ab2da11e094c3ec90f28e059b37ee576

Author: Nicolapps

npm-packages/@convex-dev/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@convex-dev/design-system",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "sideEffects": false,
   "files": [

npm-packages/@convex-dev/design-system/src/Button.tsx

@@ -93,7 +93,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
         tip={tip}
         side={tipSide}
         disableHoverableContent={tipDisableHoverableContent}
-        wrapsButton
+        asChild
       >
         <Link
           passHref
@@ -119,7 +119,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
       tip={tip}
       side={tipSide}
       disableHoverableContent={tipDisableHoverableContent}
-      wrapsButton
+      asChild
     >
       {/* we're allowed to use button here. It's the Button component */}
       {/* eslint-disable-next-line react/forbid-elements */}

npm-packages/@convex-dev/design-system/src/Tooltip.tsx

@@ -11,7 +11,7 @@ export function Tooltip({
   align = "center",
   className,
   contentClassName,
-  wrapsButton = false,
+  asChild = false,
   delayDuration = 0,
   maxWidthClassName = "max-w-[16rem]",
   disableHoverableContent = false,
@@ -23,7 +23,7 @@ export function Tooltip({
   className?: string;
   contentClassName?: string;
   maxWidthClassName?: string;
-  wrapsButton?: boolean;
+  asChild?: boolean;
   delayDuration?: number;
   disableHoverableContent?: boolean;
 }) {
@@ -38,7 +38,7 @@ export function Tooltip({
     >
       <RadixTooltip.Root>
         <RadixTooltip.Trigger
-          asChild={wrapsButton}
+          asChild={asChild}
           className={classNames(
             "focus-visible:outline-0 cursor-default",
             className,

npm-packages/dashboard-common/src/elements/Calendar.tsx

@@ -72,7 +72,7 @@ export function Calendar({
           return (
             <Tooltip
               tip={buttonProps["aria-disabled"] === true && beforeStartTooltip}
-              wrapsButton
+              asChild
             >
               {/* eslint-disable-next-line react/forbid-elements, react/button-has-type -- Component managed by react-day-picker */}
               <button {...buttonProps}>
@@ -131,7 +131,7 @@ export function Calendar({
                     ? beforeStartTooltip
                     : undefined
                 }
-                wrapsButton
+                asChild
               >
                 {children}
               </Tooltip>

npm-packages/dashboard-common/src/elements/ToggleTheme.tsx

@@ -60,7 +60,7 @@ function ThemeRadioInput({
         checked={!currentTheme || currentTheme === theme}
         hidden
       />
-      <Tooltip tip={startCase(theme)} wrapsButton>
+      <Tooltip tip={startCase(theme)} asChild>
         <label
           aria-label="System Theme"
           htmlFor={`${theme}-theme`}

npm-packages/dashboard-common/src/features/data/components/Table/DataCell/DataCell.tsx

@@ -235,7 +235,7 @@ function DataCellImpl({
               contentClassName="bg-background-secondary animate-fadeInFromLoading"
               maxWidthClassName="max-w-[22rem]"
               delayDuration={250}
-              wrapsButton
+              asChild
             >
               <Link2Icon className="mr-2 flex-none text-content-secondary" />
             </Tooltip>

npm-packages/dashboard-common/src/features/data/components/Table/DataCell/DataCellValue.tsx

@@ -41,7 +41,7 @@ export const DataCellValue = forwardRef<HTMLSpanElement, DataCellValueProps>(
           // but keyboard users can still copy it via clipboard.
           // Only render tooltip when hovering because it's slow
           isHovered ? (
-            <Tooltip tip={value} side="bottom" align="start" wrapsButton>
+            <Tooltip tip={value} side="bottom" align="start" asChild>
               <span>{new Date(value).toLocaleString()}</span>
             </Tooltip>
           ) : (

npm-packages/dashboard-common/src/features/data/components/TableTab.tsx

@@ -43,7 +43,7 @@ export function TableTab({
           }
           className="flex w-full items-start gap-0.5"
           side="right"
-          wrapsButton
+          asChild
         >
           <Link
             href={{

npm-packages/dashboard-common/src/features/files/components/Uploader.tsx

@@ -158,7 +158,7 @@ export function Uploader({
 
   return (
     <div className="flex items-center justify-center gap-2">
-      <Tooltip wrapsButton tip={cantUploadFilesReason} side="left">
+      <Tooltip asChild tip={cantUploadFilesReason} side="left">
         <label
           htmlFor="uploader"
           aria-disabled={isUploading || cantUploadFilesReason !== null}

npm-packages/dashboard-common/src/features/functionRunner/components/FunctionTester.tsx

@@ -218,7 +218,7 @@ export function GlobalFunctionTester({
           key={`close-${isVertical.toString()}`}
           side={isVertical ? "bottom" : "top"}
           tip="Close panel"
-          wrapsButton
+          asChild
         >
           <ClosePanelButton
             onClose={() => hideGlobalRunner("click")}