fix(InfoTable): style and overflow

.changeset/cozy-areas-ask.md

@@ -0,0 +1,13 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`InfoTable.Cell`: 
+- should not override the custom style of its children.
+- when children are an array of strings or numbers, the same style is applied as for a single string.
+
+`Text`: updated tooltip detection logic to handle overflowing content when children are of type `(string | number)[]`. Such arrays are now converted to strings for tooltip display. For example:
+```js
+<Text as="p" variant="body">Ready?{isReady ? "Yes!" : "No..."}</Text>
+```
+Previously, no tooltip appeared when overflowing since the computed child was `['Ready?', 'Yes!']` (or `['Ready?', 'No...']`). Now, the tooltip correctly displays `Ready? Yes!`.

packages/ui/src/compositions/InfoTable/components/Cell.tsx

@@ -5,6 +5,7 @@ import { useContext } from 'react'
 import type { CSSProperties, ReactNode } from 'react'
 import { Stack } from '../../../components/Stack'
 import { Text } from '../../../components/Text'
+import { isStringNumberArray } from '../../../helpers/isStringNumberArray'
 import { InfoTableContext } from '../Context'
 import { infoTableStyle } from '../styles.css'
 
@@ -31,7 +32,10 @@ export const InfoTableCell = ({ children, title, multiline = false, style }: Cel
       </Text>
       <Text
         as="dd"
-        className={cn(infoTableStyle.desc, typeof children === 'string' ? '' : infoTableStyle.descFlex)}
+        className={cn(
+          infoTableStyle.desc,
+          typeof children === 'string' || isStringNumberArray(children) ? '' : infoTableStyle.descFlex,
+        )}
         oneLine={!multiline}
         prominence="default"
         sentiment="neutral"

packages/ui/src/compositions/InfoTable/styles.css.ts

@@ -66,7 +66,7 @@ const cellWithCopyButton = style({
   minWidth: 0,
 })
 
-globalStyle(`${desc} > *`, {
+globalStyle(`:where(${desc}) > *`, {
   marginRight: theme.space[1],
   minWidth: 0,
   maxWidth: '100%',

packages/ui/src/helpers/__tests__/index.test.ts

@@ -19,10 +19,10 @@ describe(recursivelyGetChildrenString, () => {
   it.each`
     test                                                      | value                                         | expected
     ${'is bare string'}                                       | ${'hello'}                                    | ${'hello'}
-    ${'is array'}                                             | ${['hello', 'world']}                         | ${''}
+    ${'is array'}                                             | ${['hello', 'world']}                         | ${'hello world'}
     ${'is Boolean'}                                           | ${true}                                       | ${''}
     ${'is complex children with a nested string children'}    | ${complexChildrenWithStringNestedChildren}    | ${'hello'}
-    ${'is complex children with a nested array children'}     | ${complexChildrenWithArrayNestedChildren}     | ${''}
+    ${'is complex children with a nested array children'}     | ${complexChildrenWithArrayNestedChildren}     | ${'hello'}
     ${'is complex children without a nested string children'} | ${complexChildrenWithoutStringNestedChildren} | ${''}
   `('returns "$expected" when $test', current => {
     expect(recursivelyGetChildrenString(current.value as string)).toBe(current.expected)

packages/ui/src/helpers/isStringNumberArray.ts

@@ -0,0 +1,6 @@
+export const isStringNumberArray = (value: unknown): value is (string | number)[] => {
+  return (
+    Array.isArray(value) &&
+    value.every((item): item is string | number => typeof item === 'string' || typeof item === 'number')
+  )
+}

packages/ui/src/helpers/recursivelyGetChildrenString.ts

@@ -1,12 +1,24 @@
 import type { ReactNode } from 'react'
+import { isStringNumberArray } from './isStringNumberArray'
 
 const recursivelyGetChildrenString = (children: ReactNode): string => {
   if (typeof children === 'string') {
     return children
   }
+
+  if (isStringNumberArray(children)) {
+    return children.join(' ')
+  }
+
   if (Array.isArray(children)) {
-    return ''
-  } // We can't determine which string to display in tooltip
+    let finalString = ''
+    for (const child of children) {
+      finalString = finalString.concat(' ', recursivelyGetChildrenString(child))
+    } // Recursively add every string or number of the array
+
+    return finalString
+  }
+
   if (typeof children === 'object') {
     const childProps = ((children as unknown as Record<string, unknown>)?.['props'] as Record<string, unknown>)?.[
       'children'