@telus-uds/components-base 1.56.0 → 1.58.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 21 Jul 2023 00:42:38 GMT and should not be manually modified.
+This log was last generated on Wed, 02 Aug 2023 18:10:10 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.58.0
+
+Wed, 02 Aug 2023 18:10:10 GMT
+
+### Minor changes
+
+- added condition on applying "raised" in Carousel for next/prev buttons  (kyle.king2@telus.com)
+
+## 1.57.0
+
+Fri, 28 Jul 2023 18:18:38 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:42:38 GMT
+Fri, 21 Jul 2023 00:51:24 GMT
 
 ### Minor changes
 

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",
@@ -4487,7 +4500,8 @@
                 "labelFontSize": "fontSize",
                 "labelFontWeight": "fontWeight",
                 "labelLineHeight": "lineHeight",
-                "labelMarginLeft": "size"
+                "labelMarginLeft": "size",
+                "inputOutlineOffset": "size"
               }
             },
             "required": false,
@@ -8192,6 +8206,7 @@
                 "itemIconSize": "size",
                 "itemLineHeight": "lineHeight",
                 "listGutter": "size",
+                "itemUnderline": "textLine",
                 "backgroundColor": "color",
                 "paddingLeft": "size",
                 "paddingRight": "size",
@@ -8275,6 +8290,7 @@
                   "itemIconSize": "size",
                   "itemLineHeight": "lineHeight",
                   "listGutter": "size",
+                  "itemUnderline": "textLine",
                   "backgroundColor": "color",
                   "paddingLeft": "size",
                   "paddingRight": "size",
@@ -13347,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,
@@ -13379,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/Carousel/Carousel.js

@@ -461,7 +461,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: true
+    raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
+    inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
 
   const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {

package/lib/Carousel/CarouselThumbnail.js

@@ -104,7 +104,9 @@ const CarouselThumbnail = _ref2 => {
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex && styles.selected];
+      return [pressableStyles, index === activeIndex && styles.selected, {
+        outline: 'none'
+      }];
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,

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/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-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/Carousel/Carousel.js

@@ -405,7 +405,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: true
+    raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
+    inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
   const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter

package/lib-module/Carousel/CarouselThumbnail.js

@@ -88,7 +88,9 @@ const CarouselThumbnail = _ref2 => {
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex && styles.selected];
+      return [pressableStyles, index === activeIndex && styles.selected, {
+        outline: 'none'
+      }];
     },
     children: /*#__PURE__*/_jsx(Image, {
       accessibilityIgnoresInvertColors: true,

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/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/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.39.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.56.0"
+  "version": "1.58.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/Carousel/Carousel.jsx

@@ -420,7 +420,11 @@ const Carousel = React.forwardRef(
     // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
     // Normally we avoid setting variants of subcomponents, however this could be re-considered.
     // Related discussion - https://github.com/telus/universal-design-system/issues/1549
-    const previousNextIconButtonVariants = { size: previousNextIconSize, raised: true }
+    const previousNextIconButtonVariants = {
+      size: previousNextIconSize,
+      raised: !variant?.inverse && true,
+      inverse: variant?.inverse
+    }
 
     const getCopyWithPlaceholders = React.useCallback(
       (copyKey) => {

package/src/Carousel/CarouselThumbnail.jsx

@@ -60,7 +60,13 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
           })
         )
 
-        return [pressableStyles, index === activeIndex && styles.selected]
+        return [
+          pressableStyles,
+          index === activeIndex && styles.selected,
+          {
+            outline: 'none'
+          }
+        ]
       }}
     >
       <Image

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/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({