migrate to passing a textAs prop

radix-ui · Aug 13, 2024 · 85fc6ac · 85fc6ac
1 parent ad96a37
commit 85fc6ac
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git 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)'}}>[email protected]</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)'}}>[email protected]</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
@@ -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
@@ -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>