@telus-uds/components-base 1.24.2 → 2.0.0

package/src/Typography/Typography.jsx

@@ -60,6 +60,7 @@ const Typography = forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
     const { themeOptions } = useTheme()
+
     const resolvedTextProps = {
       ...selectTextProps(rest),
       style: selectTextStyles(
@@ -76,13 +77,36 @@ const Typography = forwardRef(
       ...selectContainerProps(rest)
     }
 
+    const resetTagStyling = (child) => {
+      if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
+        const sanitizedChild = React.cloneElement(child, {
+          style: {
+            ...child?.props?.style,
+            lineHeight: 0
+          }
+        })
+
+        return sanitizedChild
+      }
+
+      return child
+    }
+
+    const sanitizeChildren = () => {
+      if (Array.isArray(children)) {
+        return children.map(resetTagStyling)
+      }
+
+      return resetTagStyling(children)
+    }
+
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps}>{children}</Text>
+        <Text {...resolvedTextProps}>{sanitizeChildren(children)}</Text>
       </View>
     ) : (
       <Text ref={ref} {...containerProps} {...resolvedTextProps}>
-        {children}
+        {sanitizeChildren(children)}
       </Text>
     )
   }