@telus-uds/components-base 1.55.0 → 1.57.0

package/CHANGELOG.md

@@ -1,18 +1,51 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 14 Jul 2023 19:38:21 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Jul 2023 18:10:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.57.0
+
+Fri, 28 Jul 2023 18:10:45 GMT
+
+### Minor changes
+
+- underline style adapted for text - was abscent earlier (akshay.pandey1@telus.com)
+- feedback and textinput changes to match figma designs for koodo rebrand (akshay.pandey1@telus.com)
+- Remove center alignment between title icon and text in Feedback (wlsdud194@hotmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.40.0
+
+### Patches
+
+- `Button`'s nested `View`'s should bubble event to the parent `Pressable` (shahzaibkhalidmalik@outlook.com)
+- add new token for outline border to checkbox (mauricio.batresmontejo@telus.com)
+
+## 1.56.0
+
+Fri, 21 Jul 2023 00:51:24 GMT
+
+### Minor changes
+
+- Rebranded Box for Koodo (wlsdud194@hotmail.com)
+- Branch updated with rebase for components base (35577399+JoshHC@users.noreply.github.com)
+- space of 4px added between the validation and the chevron icons for select component (35577399+JoshHC@users.noreply.github.com)
+- fix content shifting issue in Card component (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.39.0
+
+### Patches
+
+- fix stories for inverse variant icon (mauricio.batresmontejo@telus.com)
+- rebrand inputlabel for koodo (mauricio.batresmontejo@telus.com)
+
 ## 1.55.0
 
-Fri, 14 Jul 2023 19:38:21 GMT
+Fri, 14 Jul 2023 19:47:50 GMT
 
 ### Minor changes
 
 - Refactored IconButton to accomodate QuantitySelector standardization (wlsdud194@hotmail.com)
 - Fixed test data and introduced background color token to base component. (akshay.pandey1@telus.com)
-- Added use of CarouselThumbnail  (kyle.king2@telus.com)
+- Added use of CarouselThumbnail (kyle.king2@telus.com)
 - Bump @telus-uds/system-constants to v1.3.0
 - Bump @telus-uds/system-theme-tokens to v2.38.0
 

package/component-docs.json

@@ -545,7 +545,8 @@
         "labelFontSize": "fontSize",
         "labelFontWeight": "fontWeight",
         "labelLineHeight": "lineHeight",
-        "labelMarginLeft": "size"
+        "labelMarginLeft": "size",
+        "inputOutlineOffset": "size"
       },
       "ChevronLink": {
         "fontSize": "fontSize",
@@ -560,7 +561,14 @@
       },
       "CheckboxGroup": {
         "space": "integer",
-        "fieldSpace": "integer"
+        "fieldSpace": "integer",
+        "showIcon": "show",
+        "outlineWidth": "border",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "outlineOffset": "size"
       },
       "Divider": {
         "width": "size",
@@ -1110,6 +1118,7 @@
         "itemIconSize": "size",
         "itemLineHeight": "lineHeight",
         "listGutter": "size",
+        "itemUnderline": "textLine",
         "backgroundColor": "color",
         "paddingLeft": "size",
         "paddingRight": "size",
@@ -1276,7 +1285,11 @@
         "gradient": "gradient",
         "fontColor": "color",
         "borderRadiusBottomLeft": "size",
-        "borderRadiusBottomRight": "size"
+        "borderRadiusBottomRight": "size",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight"
       },
       "Search": {
         "backgroundColor": "color",
@@ -1666,6 +1679,7 @@
         "animationPaddingBottomBefore": "size",
         "animationPaddingBottomAfter": "size",
         "animationPaddingTopBefore": "size",
+        "padding": "size",
         "animationPaddingTopAfter": "size",
         "animationBackgroundColorBefore": "color",
         "animationBackgroundColorAfter": "color",
@@ -4486,7 +4500,8 @@
                 "labelFontSize": "fontSize",
                 "labelFontWeight": "fontWeight",
                 "labelLineHeight": "lineHeight",
-                "labelMarginLeft": "size"
+                "labelMarginLeft": "size",
+                "inputOutlineOffset": "size"
               }
             },
             "required": false,
@@ -8191,6 +8206,7 @@
                 "itemIconSize": "size",
                 "itemLineHeight": "lineHeight",
                 "listGutter": "size",
+                "itemUnderline": "textLine",
                 "backgroundColor": "color",
                 "paddingLeft": "size",
                 "paddingRight": "size",
@@ -8274,6 +8290,7 @@
                   "itemIconSize": "size",
                   "itemLineHeight": "lineHeight",
                   "listGutter": "size",
+                  "itemUnderline": "textLine",
                   "backgroundColor": "color",
                   "paddingLeft": "size",
                   "paddingRight": "size",
@@ -13346,7 +13363,14 @@
               "name": "custom",
               "raw": {
                 "space": "integer",
-                "fieldSpace": "integer"
+                "fieldSpace": "integer",
+                "showIcon": "show",
+                "outlineWidth": "border",
+                "borderBottomLeftRadius": "radius",
+                "borderBottomRightRadius": "radius",
+                "borderTopLeftRadius": "radius",
+                "borderTopRightRadius": "radius",
+                "outlineOffset": "size"
               }
             },
             "required": false,
@@ -13378,7 +13402,8 @@
                 "labelFontSize": "fontSize",
                 "labelFontWeight": "fontWeight",
                 "labelLineHeight": "lineHeight",
-                "labelMarginLeft": "size"
+                "labelMarginLeft": "size",
+                "inputOutlineOffset": "size"
               }
             },
             "required": false,

package/lib/Button/ButtonBase.js

@@ -309,7 +309,12 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text];
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, _Platform.default.select({
+        web: {
+          pointerEvents: 'none' // bubbles press event to parent `Pressable`
+
+        }
+      })];
       const iconTokens = selectItemIconTokens(themeTokens);
       const {
         iconSpace
@@ -327,6 +332,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
             // ensure overflowing content wraps
             // TODO: https://github.com/telus/universal-design-system/issues/487
             transition: 'background-color 200ms, border-color 200ms',
+            pointerEvents: 'none',
+            // bubbles press event to parent `Pressable`
             ...rowStyles
           }
         })],

package/lib/Checkbox/Checkbox.js

@@ -53,6 +53,7 @@ const selectInputStyles = (_ref, isChecked) => {
     inputHeight,
     inputOutlineColor,
     inputOutlineWidth,
+    inputOutlineOffset,
     inputShadow,
     inputWidth
   } = _ref;
@@ -68,7 +69,8 @@ const selectInputStyles = (_ref, isChecked) => {
       web: {
         outlineStyle: 'solid',
         outlineColor: inputOutlineColor,
-        outlineWidth: inputOutlineWidth
+        outlineWidth: inputOutlineWidth,
+        outlineOffset: inputOutlineOffset
       }
     })
   };

package/lib/Checkbox/CheckboxGroup.js

@@ -104,7 +104,14 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
-    fieldSpace
+    fieldSpace,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
   } = (0, _ThemeProvider.useThemeTokens)('CheckboxGroup', tokens, variant, {
     viewport
   });
@@ -162,8 +169,16 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    showIcon: true,
     showErrorBorder: true,
+    tokens: {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    },
+    showIcon: showIcon,
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(checkboxes, {
       space,

package/lib/Feedback/Feedback.js

@@ -182,7 +182,6 @@ exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   title: {
     display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: 'row'
   }
 });

package/lib/InputLabel/InputLabel.js

@@ -100,7 +100,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         children: hint
       }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [staticStyles.tooltipAlign, {
-          height: themeTokens.fontSize * themeTokens.lineHeight
+          height: themeTokens.fontSize * themeTokens.lineHeight,
+          color: themeTokens.color
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
           content: tooltip,

package/lib/Link/LinkBase.js

@@ -53,9 +53,9 @@ const selectOuterBorderStyles = _ref => {
       ...(0, _ThemeProvider.applyOuterBorder)({
         outerBorderColor,
         outerBorderWidth,
-        outerBorderGap,
-        borderRadius
-      })
+        outerBorderGap
+      }),
+      borderRadius
     } : {}
   );
 };

package/lib/List/ListItemContent.js

@@ -67,7 +67,10 @@ const ListItemContent = _ref2 => {
   } = (0, _ThemeProvider.useTheme)();
   const textStyles = selectItemTextStyles(tokens, themeOptions);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: staticStyles.wrap,
+    style: [staticStyles.wrap, (tokens === null || tokens === void 0 ? void 0 : tokens.itemUnderline) && {
+      textDecorationLine: tokens.itemUnderline,
+      textDecorationColor: tokens.itemFontColor
+    }],
     children: (0, _utils.wrapStringsInText)(children, {
       style: textStyles
     })

package/lib/Select/Select.js

@@ -143,7 +143,8 @@ const selectIconContainerStyles = _ref4 => {
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + 4,
+    marginRight: -4,
     paddingBottom
   };
 };
@@ -167,7 +168,7 @@ const selectValidationIconContainerStyles = _ref6 => {
     paddingBottom
   } = _ref6;
   return {
-    paddingRight: icon ? paddingRight + iconSize : paddingRight,
+    paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
     ...(_Platform.default.OS === 'android' ? {
       paddingBottom: paddingBottom + _constants.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
     } : {

package/lib-module/Button/ButtonBase.js

@@ -283,7 +283,12 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text];
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, Platform.select({
+        web: {
+          pointerEvents: 'none' // bubbles press event to parent `Pressable`
+
+        }
+      })];
       const iconTokens = selectItemIconTokens(themeTokens);
       const {
         iconSpace
@@ -301,6 +306,8 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref11, ref) => {
             // ensure overflowing content wraps
             // TODO: https://github.com/telus/universal-design-system/issues/487
             transition: 'background-color 200ms, border-color 200ms',
+            pointerEvents: 'none',
+            // bubbles press event to parent `Pressable`
             ...rowStyles
           }
         })],

package/lib-module/Checkbox/Checkbox.js

@@ -26,6 +26,7 @@ const selectInputStyles = (_ref, isChecked) => {
     inputHeight,
     inputOutlineColor,
     inputOutlineWidth,
+    inputOutlineOffset,
     inputShadow,
     inputWidth
   } = _ref;
@@ -41,7 +42,8 @@ const selectInputStyles = (_ref, isChecked) => {
       web: {
         outlineStyle: 'solid',
         outlineColor: inputOutlineColor,
-        outlineWidth: inputOutlineWidth
+        outlineWidth: inputOutlineWidth,
+        outlineOffset: inputOutlineOffset
       }
     })
   };

package/lib-module/Checkbox/CheckboxGroup.js

@@ -81,7 +81,14 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const viewport = useViewport();
   const {
     space,
-    fieldSpace
+    fieldSpace,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
   } = useThemeTokens('CheckboxGroup', tokens, variant, {
     viewport
   });
@@ -139,8 +146,16 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    showIcon: true,
     showErrorBorder: true,
+    tokens: {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    },
+    showIcon: showIcon,
     ...selectProps(rest),
     children: getStackedContent(checkboxes, {
       space,

package/lib-module/Feedback/Feedback.js

@@ -159,7 +159,6 @@ export default Feedback;
 const staticStyles = StyleSheet.create({
   title: {
     display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: 'row'
   }
 });

package/lib-module/InputLabel/InputLabel.js

@@ -79,7 +79,8 @@ const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
         children: hint
       }), hasTooltip && /*#__PURE__*/_jsx(View, {
         style: [staticStyles.tooltipAlign, {
-          height: themeTokens.fontSize * themeTokens.lineHeight
+          height: themeTokens.fontSize * themeTokens.lineHeight,
+          color: themeTokens.color
         }],
         children: /*#__PURE__*/_jsx(Tooltip, {
           content: tooltip,

package/lib-module/Link/LinkBase.js

@@ -28,9 +28,9 @@ const selectOuterBorderStyles = _ref => {
       ...applyOuterBorder({
         outerBorderColor,
         outerBorderWidth,
-        outerBorderGap,
-        borderRadius
-      })
+        outerBorderGap
+      }),
+      borderRadius
     } : {}
   );
 };

package/lib-module/List/ListItemContent.js

@@ -50,7 +50,10 @@ const ListItemContent = _ref2 => {
   } = useTheme();
   const textStyles = selectItemTextStyles(tokens, themeOptions);
   return /*#__PURE__*/_jsx(View, {
-    style: staticStyles.wrap,
+    style: [staticStyles.wrap, (tokens === null || tokens === void 0 ? void 0 : tokens.itemUnderline) && {
+      textDecorationLine: tokens.itemUnderline,
+      textDecorationColor: tokens.itemFontColor
+    }],
     children: wrapStringsInText(children, {
       style: textStyles
     })

package/lib-module/Select/Select.js

@@ -118,7 +118,8 @@ const selectIconContainerStyles = _ref4 => {
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + 4,
+    marginRight: -4,
     paddingBottom
   };
 };
@@ -142,7 +143,7 @@ const selectValidationIconContainerStyles = _ref6 => {
     paddingBottom
   } = _ref6;
   return {
-    paddingRight: icon ? paddingRight + iconSize : paddingRight,
+    paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
     ...(Platform.OS === 'android' ? {
       paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
     } : {

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.38.0",
+    "@telus-uds/system-theme-tokens": "^2.40.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.55.0"
+  "version": "1.57.0"
 }

package/src/Button/ButtonBase.jsx

@@ -235,7 +235,15 @@ const ButtonBase = forwardRef(
           const themeTokens = resolveButtonTokens(pressableState)
           const containerStyles = selectInnerContainerStyles(themeTokens)
           const borderStyles = selectBorderStyles(themeTokens)
-          const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text]
+          const textStyles = [
+            selectTextStyles(themeTokens, themeOptions),
+            staticStyles.text,
+            Platform.select({
+              web: {
+                pointerEvents: 'none' // bubbles press event to parent `Pressable`
+              }
+            })
+          ]
           const iconTokens = selectItemIconTokens(themeTokens)
           const { iconSpace } = themeTokens
 
@@ -259,6 +267,7 @@ const ButtonBase = forwardRef(
                     maxWidth: '100%', // ensure overflowing content wraps
                     // TODO: https://github.com/telus/universal-design-system/issues/487
                     transition: 'background-color 200ms, border-color 200ms',
+                    pointerEvents: 'none', // bubbles press event to parent `Pressable`
                     ...rowStyles
                   }
                 })

package/src/Checkbox/Checkbox.jsx

@@ -39,6 +39,7 @@ const selectInputStyles = (
     inputHeight,
     inputOutlineColor,
     inputOutlineWidth,
+    inputOutlineOffset,
     inputShadow,
     inputWidth
   },
@@ -55,7 +56,8 @@ const selectInputStyles = (
     web: {
       outlineStyle: 'solid',
       outlineColor: inputOutlineColor,
-      outlineWidth: inputOutlineWidth
+      outlineWidth: inputOutlineWidth,
+      outlineOffset: inputOutlineOffset
     }
   })
 })

package/src/Checkbox/CheckboxGroup.jsx

@@ -98,7 +98,17 @@ const CheckboxGroup = forwardRef(
   ) => {
     const viewport = useViewport()
 
-    const { space, fieldSpace } = useThemeTokens('CheckboxGroup', tokens, variant, {
+    const {
+      space,
+      fieldSpace,
+      showIcon,
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    } = useThemeTokens('CheckboxGroup', tokens, variant, {
       viewport
     })
 
@@ -152,8 +162,16 @@ const CheckboxGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
-        showIcon
         showErrorBorder
+        tokens={{
+          outlineWidth,
+          borderTopLeftRadius,
+          borderTopRightRadius,
+          borderBottomLeftRadius,
+          borderBottomRightRadius,
+          outlineOffset
+        }}
+        showIcon={showIcon}
         {...selectProps(rest)}
       >
         {getStackedContent(checkboxes, { space, direction: 'column' })}

package/src/Feedback/Feedback.jsx

@@ -125,7 +125,6 @@ export default Feedback
 const staticStyles = StyleSheet.create({
   title: {
     display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center'
+    flexDirection: 'row'
   }
 })

package/src/InputLabel/InputLabel.jsx

@@ -86,7 +86,10 @@ const InputLabel = forwardRef(
             <View
               style={[
                 staticStyles.tooltipAlign,
-                { height: themeTokens.fontSize * themeTokens.lineHeight }
+                {
+                  height: themeTokens.fontSize * themeTokens.lineHeight,
+                  color: themeTokens.color
+                }
               ]}
             >
               <Tooltip content={tooltip} copy={copy} />

package/src/Link/LinkBase.jsx

@@ -36,9 +36,9 @@ const selectOuterBorderStyles = ({
         ...applyOuterBorder({
           outerBorderColor,
           outerBorderWidth,
-          outerBorderGap,
-          borderRadius
-        })
+          outerBorderGap
+        }),
+        borderRadius
       }
     : {}
 
@@ -156,7 +156,6 @@ const LinkBase = forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-
           return [
             outerBorderStyles,
             blockLeftStyle,

package/src/List/ListItemContent.jsx

@@ -37,7 +37,19 @@ const selectItemTextStyles = (
 const ListItemContent = ({ tokens, children }) => {
   const { themeOptions } = useTheme()
   const textStyles = selectItemTextStyles(tokens, themeOptions)
-  return <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: textStyles })}</View>
+  return (
+    <View
+      style={[
+        staticStyles.wrap,
+        tokens?.itemUnderline && {
+          textDecorationLine: tokens.itemUnderline,
+          textDecorationColor: tokens.itemFontColor
+        }
+      ]}
+    >
+      {wrapStringsInText(children, { style: textStyles })}
+    </View>
+  )
 }
 
 const staticStyles = StyleSheet.create({

package/src/Select/Select.jsx

@@ -119,7 +119,8 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({
 })
 
 const selectIconContainerStyles = ({ paddingRight, paddingBottom }) => ({
-  paddingRight,
+  paddingRight: paddingRight + 4,
+  marginRight: -4,
   paddingBottom
 })
 
@@ -134,7 +135,7 @@ const selectValidationIconContainerStyles = ({
   paddingRight = 0,
   paddingBottom
 }) => ({
-  paddingRight: icon ? paddingRight + iconSize : paddingRight,
+  paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
   ...(Platform.OS === 'android'
     ? {
         paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET