fix: Tooltip: render non-string content outside of the Text component

[evanfrawley]

Description

When using the <Tooltip> component and passing in a non-string React.ReactNode into content, React produces warnings noting that specific elements cannot appear as descendants of a p tag. This change introduces a prop on Tooltip that allows the dev to define what <Text as="_"> property they want to pass, enabling non-string content to be an allowed child in the tooltip and not produce a console warning.

The change introduces a textAs prop which pulls from the textPropTypes['as'] value and passes that down to the <Text> in the tooltip, falling back to the currently hardcoded p value

Here are the warnings that are produced without this change:

Testing steps

Manual testing on the playground page with a non-string ReactNode example

Relates issues / PRs

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
themes-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 13, 2024 6:51pm

[evanfrawley]

I'm not quite sure if this is the correct solution -- I think another viable solution would be to have another prop, something like contentAs where that can be one of span div label p as found in text.tsx where that would be passed in something like <Text as={contentAs ?? 'p'}>

[chaance]

This is actually intentional. Tooltip is constrained by design to support inline (phrasing) content. Adding support for block content opens up a can of worms for accessibility. I don't think we want to deal with that in Themes, since it's opinionated by design.

If you are sure you need nested block content (most of the time you probably don't, which is why we have HoverCard), you can build your own using Radix Primitives. I'd advise you to vet this carefully and test extensively, expecially if you are using interactive content.