@telus-uds/components-base 1.24.2 → 1.25.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 19 Jan 2023 21:35:52 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Feb 2023 20:54:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.25.0
+
+Wed, 01 Feb 2023 20:54:30 GMT
+
+### Minor changes
+
+- Floating ui integration for Tooltip component (tiagohldb@gmail.com)
+
+### Patches
+
+- Fixing sub and sup elements line height (tiagohldb@gmail.com)
+
 ## 1.24.2
 
-Thu, 19 Jan 2023 21:35:52 GMT
+Thu, 19 Jan 2023 21:39:36 GMT
 
 ### Patches
 

package/lib/Typography/Typography.js

@@ -92,17 +92,42 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
+
+  const resetTagStyling = child => {
+    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+      var _child$props;
+
+      const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
+        style: { ...(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style),
+          lineHeight: 0
+        }
+      });
+
+      return sanitizedChild;
+    }
+
+    return child;
+  };
+
+  const sanitizeChildren = () => {
+    if (Array.isArray(children)) {
+      return children.map(resetTagStyling);
+    }
+
+    return resetTagStyling(children);
+  };
+
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...resolvedTextProps,
-      children: children
+      children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    children: children
+    children: sanitizeChildren(children)
   });
 });
 Typography.displayName = 'Typography';

package/lib-module/Typography/Typography.js

@@ -71,17 +71,41 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
+
+  const resetTagStyling = child => {
+    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+      var _child$props;
+
+      const sanitizedChild = /*#__PURE__*/React.cloneElement(child, {
+        style: { ...(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style),
+          lineHeight: 0
+        }
+      });
+      return sanitizedChild;
+    }
+
+    return child;
+  };
+
+  const sanitizeChildren = () => {
+    if (Array.isArray(children)) {
+      return children.map(resetTagStyling);
+    }
+
+    return resetTagStyling(children);
+  };
+
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
-      children: children
+      children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    children: children
+    children: sanitizeChildren(children)
   });
 });
 Typography.displayName = 'Typography';

package/package.json

@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.24.2"
+  "version": "1.25.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>
     )
   }