@telus-uds/components-base 1.8.4 → 1.8.5

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 22 Jun 2022 15:03:03 GMT and should not be manually modified.
+This log was last generated on Tue, 28 Jun 2022 21:35:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.8.5
+
+Tue, 28 Jun 2022 21:35:29 GMT
+
+### Patches
+
+- fix: add forcing inline display on links without icons (ruslan.bredikhin@nearform.com)
+- fix: move testID to the icon container (ruslan.bredikhin@nearform.com)
+
 ## 1.8.4
 
-Wed, 22 Jun 2022 15:03:03 GMT
+Wed, 22 Jun 2022 15:03:54 GMT
 
 ### Patches
 

package/lib/Checkbox/Checkbox.js

@@ -265,8 +265,10 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
                   isControlled: isControlled,
                   name: name,
                   value: value
-                }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens,
-                  testID: "Checkbox-Icon"
+                }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                  testID: "Checkbox-Icon",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+                  })
                 })]
               })
             }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {

package/lib/Link/InlinePressable.js

@@ -37,11 +37,12 @@ const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     style,
+    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
-    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -51,6 +52,9 @@ InlinePressable.displayName = 'InlinePressable';
 const staticStyles = _StyleSheet.default.create({
   inline: {
     // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
     display: 'inline-flex'
   }
 });

package/lib/Link/LinkBase.js

@@ -186,17 +186,20 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
 
   const resolveLinkTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {
     iconPosition
-  }); // On web, this makes focus rings wrap only the link, not the entire block
+  });
 
+  const defaultThemeTokens = resolveLinkTokens({});
+  const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...selectedProps,
+    inline: hasIcon // assuming links without icons should be inline (even if they are long)
+    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const hasIcon = Boolean(icon || themeTokens.icon);
       return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {

package/lib-module/Checkbox/Checkbox.js

@@ -237,8 +237,10 @@ const Checkbox = /*#__PURE__*/forwardRef((_ref5, ref) => {
                   isControlled: isControlled,
                   name: name,
                   value: value
-                }), isChecked && IconComponent && /*#__PURE__*/_jsx(IconComponent, { ...iconTokens,
-                  testID: "Checkbox-Icon"
+                }), isChecked && IconComponent && /*#__PURE__*/_jsx(View, {
+                  testID: "Checkbox-Icon",
+                  children: /*#__PURE__*/_jsx(IconComponent, { ...iconTokens
+                  })
                 })]
               })
             }), Boolean(label) && /*#__PURE__*/_jsx(Text, {

package/lib-module/Link/InlinePressable.js

@@ -21,11 +21,12 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     style,
+    inline = false,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
-    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    style: pressState => [staticStyles[inline ? 'inline' : 'inlineFlex'], typeof style === 'function' ? style(pressState) : style],
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });
@@ -34,6 +35,9 @@ InlinePressable.displayName = 'InlinePressable';
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
     display: 'inline-flex'
   }
 });

package/lib-module/Link/LinkBase.js

@@ -158,17 +158,20 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
 
   const resolveLinkTokens = pressState => resolvePressableTokens(tokens, pressState, {
     iconPosition
-  }); // On web, this makes focus rings wrap only the link, not the entire block
+  });
 
+  const defaultThemeTokens = resolveLinkTokens({});
+  const hasIcon = Boolean(icon || defaultThemeTokens.icon); // On web, this makes focus rings wrap only the link, not the entire block
 
   const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
   return /*#__PURE__*/_jsx(InlinePressable, { ...selectedProps,
+    inline: hasIcon // assuming links without icons should be inline (even if they are long)
+    ,
     ref: ref,
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      const hasIcon = Boolean(icon || themeTokens.icon);
       return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "Base components",
   "keywords": [
     "base"

package/src/Checkbox/Checkbox.jsx

@@ -213,7 +213,9 @@ const Checkbox = forwardRef(
                         value={value}
                       />
                       {isChecked && IconComponent && (
-                        <IconComponent {...iconTokens} testID="Checkbox-Icon" />
+                        <View testID="Checkbox-Icon">
+                          <IconComponent {...iconTokens} />
+                        </View>
                       )}
                     </View>
                   </View>

package/src/Link/InlinePressable.jsx

@@ -15,11 +15,11 @@ import { Pressable, StyleSheet } from 'react-native'
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
+const InlinePressable = forwardRef(({ children, style, inline = false, ...props }, ref) => (
   <Pressable
     ref={ref}
     style={(pressState) => [
-      staticStyles.inline,
+      staticStyles[inline ? 'inline' : 'inlineFlex'],
       typeof style === 'function' ? style(pressState) : style
     ]}
     {...props}
@@ -32,6 +32,9 @@ InlinePressable.displayName = 'InlinePressable'
 const staticStyles = StyleSheet.create({
   inline: {
     // Stop Pressable defaulting to (block) flex
+    display: 'inline'
+  },
+  inlineFlex: {
     display: 'inline-flex'
   }
 })

package/src/Link/LinkBase.jsx

@@ -132,18 +132,21 @@ const LinkBase = forwardRef(
     const resolveLinkTokens = (pressState) =>
       resolvePressableTokens(tokens, pressState, { iconPosition })
 
+    const defaultThemeTokens = resolveLinkTokens({})
+    const hasIcon = Boolean(icon || defaultThemeTokens.icon)
+
     // On web, this makes focus rings wrap only the link, not the entire block
     const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
     return (
       <InlinePressable
         {...selectedProps}
+        inline={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-          const hasIcon = Boolean(icon || themeTokens.icon)
           return [
             outerBorderStyles,
             blockLeftStyle,