From 85fc6ac7dd317cf460bdd62165094cbaa443e6b7 Mon Sep 17 00:00:00 2001
From: Evan Frawley <evanfrawley@gmail.com>
Date: Tue, 13 Aug 2024 11:48:28 -0700
Subject: [PATCH] migrate to passing a textAs prop

---
 apps/playground/app/sink/page.tsx             | 27 ++++++++++---------
 .../src/components/tooltip.props.ts           |  3 +++
 .../src/components/tooltip.tsx                | 11 +++-----
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/apps/playground/app/sink/page.tsx b/apps/playground/app/sink/page.tsx
index c8782136..ba65abee 100644
--- a/apps/playground/app/sink/page.tsx
+++ b/apps/playground/app/sink/page.tsx
@@ -238,18 +238,21 @@ export default function Sink() {
                               </Button>
                             </Tooltip>
 
-                            <Tooltip content={
-                               <DataList.Root my="1">
-                                <DataList.Item>
-                                  <DataList.Label style={{ color: 'var(--gray-5)'}}>Name</DataList.Label>
-                                  <DataList.Value style={{ color: 'var(--gray-1)'}}>Susan Kare</DataList.Value>
-                                </DataList.Item>
-                                <DataList.Item>
-                                  <DataList.Label style={{ color: 'var(--gray-5)'}}>Email</DataList.Label>
-                                  <DataList.Value style={{ color: 'var(--gray-1)'}}>susan.kare@apple.com</DataList.Value>
-                                </DataList.Item>
-                              </DataList.Root>
-                            }>
+                            <Tooltip
+                              textAs="div"
+                              content={
+                                <DataList.Root my="1">
+                                  <DataList.Item>
+                                    <DataList.Label style={{ color: 'var(--gray-5)'}}>Name</DataList.Label>
+                                    <DataList.Value style={{ color: 'var(--gray-1)'}}>Susan Kare</DataList.Value>
+                                  </DataList.Item>
+                                  <DataList.Item>
+                                    <DataList.Label style={{ color: 'var(--gray-5)'}}>Email</DataList.Label>
+                                    <DataList.Value style={{ color: 'var(--gray-1)'}}>susan.kare@apple.com</DataList.Value>
+                                  </DataList.Item>
+                                </DataList.Root>
+                              }
+                            >
                               <Button variant="solid" size="1">
                                 Non-string ReactNode
                               </Button>
diff --git a/packages/radix-ui-themes/src/components/tooltip.props.ts b/packages/radix-ui-themes/src/components/tooltip.props.ts
index b8e08b35..e7815320 100644
--- a/packages/radix-ui-themes/src/components/tooltip.props.ts
+++ b/packages/radix-ui-themes/src/components/tooltip.props.ts
@@ -1,4 +1,5 @@
 import { widthPropDefs } from '../props/width.props.js';
+import { textPropDefs } from './text.props.js';
 
 import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 
@@ -7,11 +8,13 @@ const tooltipPropDefs = {
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '360px' },
+  textAs: textPropDefs['as']
 } satisfies {
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;
   content: PropDef<React.ReactNode>;
+  textAs: PropDef<string>;
 };
 
 type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs & typeof widthPropDefs>;
diff --git a/packages/radix-ui-themes/src/components/tooltip.tsx b/packages/radix-ui-themes/src/components/tooltip.tsx
index e8356037..596479ce 100644
--- a/packages/radix-ui-themes/src/components/tooltip.tsx
+++ b/packages/radix-ui-themes/src/components/tooltip.tsx
@@ -31,6 +31,7 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
     content,
     container,
     forceMount,
+    textAs,
     ...tooltipContentProps
   } = extractProps(props, tooltipPropDefs);
   const rootProps = { open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent };
@@ -47,13 +48,9 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
             ref={forwardedRef}
             className={classNames('rt-TooltipContent', className)}
           >
-            {typeof content === 'string' ? (
-              <Text as="p" className="rt-TooltipText" size="1">
-                {content}
-              </Text>
-            ) : (
-              <>{content}</>
-            )}
+            <Text as={textAs ?? 'p'} className="rt-TooltipText" size="1">
+              {content}
+            </Text>
             <TooltipPrimitive.Arrow className="rt-TooltipArrow" />
           </TooltipPrimitive.Content>
         </Theme>