@telus-uds/components-base 1.61.0 → 1.62.1

package/CHANGELOG.md

@@ -1,12 +1,29 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 12 Sep 2023 23:35:19 GMT and should not be manually modified.
+This log was last generated on Wed, 27 Sep 2023 20:45:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.62.1
+
+Wed, 27 Sep 2023 20:45:15 GMT
+
+### Patches
+
+- Clicking on any clickable area should bubble event to relevant `Pressable` element (shahzaibkhalidmalik@outlook.com)
+
+## 1.62.0
+
+Fri, 15 Sep 2023 21:02:27 GMT
+
+### Minor changes
+
+- TextInputBase component changed to match with design intention for the IconButton (35577399+JoshHC@users.noreply.github.com)
+- `Tooltip`: Add `onPress` callback function to be triggered when tooltip button is clicked (shahzaibkhalidmalik@outlook.com)
+
 ## 1.61.0
 
-Tue, 12 Sep 2023 23:35:19 GMT
+Tue, 12 Sep 2023 23:39:14 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -799,7 +799,9 @@
         "iconSize": "size",
         "iconScale": "iconScale",
         "iconTranslateX": "size",
-        "iconTranslateY": "size"
+        "iconTranslateY": "size",
+        "height": "size",
+        "width": "size"
       },
       "Link": {
         "color": "color",
@@ -6410,6 +6412,17 @@
             "required": false,
             "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling."
           },
+          "style": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "type": {
+              "name": "object"
+            },
+            "required": false,
+            "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}"
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -6527,7 +6540,9 @@
                 "iconSize": "size",
                 "iconScale": "iconScale",
                 "iconTranslateX": "size",
-                "iconTranslateY": "size"
+                "iconTranslateY": "size",
+                "height": "size",
+                "width": "size"
               }
             },
             "required": false,
@@ -9718,28 +9733,6 @@
         "docs": {
           "description": "`SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.\n\n This component can only be accessed as a name-spaced component: `SideNav.Item`.",
           "props": {
-            "isActive": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "type": {
-                "name": "bool"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function."
-            },
-            "isExpanded": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "type": {
-                "name": "bool"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent."
-            },
             "accessibilityRole": {
               "defaultValue": {
                 "value": "'link'",
@@ -9749,7 +9742,7 @@
                 "name": "string"
               },
               "required": false,
-              "description": "Accesibility Role"
+              "description": ""
             },
             "children": {
               "type": {
@@ -9758,20 +9751,6 @@
               "required": true,
               "description": "Text content of the `Item`."
             },
-            "itemId": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function - used to keep track of active item."
-            },
-            "groupId": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Set internally in `SideNav` render function - used to keep track of expanded items groups."
-            },
             "onPress": {
               "type": {
                 "name": "func"
@@ -9825,6 +9804,13 @@
               "required": false,
               "description": "On Web if href is passed, React Native Web maps this object's props to\n`rel`, `target` and `download` attrs."
             },
+            "testID": {
+              "type": {
+                "name": "number"
+              },
+              "required": false,
+              "description": ""
+            },
             "tokens": {
               "type": {
                 "name": "custom",
@@ -9872,13 +9858,6 @@
               },
               "required": false,
               "description": ""
-            },
-            "testID": {
-              "type": {
-                "name": "number"
-              },
-              "required": false,
-              "description": "test ID"
             }
           },
           "attributes": {
@@ -11291,6 +11270,17 @@
             "required": false,
             "description": "Select English or French copy for the accessible label."
           },
+          "onPress": {
+            "defaultValue": {
+              "value": "() => {}",
+              "computed": false
+            },
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "Callback function triggered when the tooltip is pressed."
+          },
           "inline": {
             "defaultValue": {
               "value": "false",
@@ -11332,6 +11322,13 @@
             "required": false,
             "description": "The message. Can be raw text or text components."
           },
+          "nativeID": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "The `id` of the tooltip button."
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -11841,6 +11838,11 @@
                   "name": "bool",
                   "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                   "required": false
+                },
+                "style": {
+                  "name": "object",
+                  "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                  "required": false
                 }
               }
             },
@@ -12024,6 +12026,11 @@
                   "name": "bool",
                   "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                   "required": false
+                },
+                "style": {
+                  "name": "object",
+                  "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                  "required": false
                 }
               }
             },
@@ -12464,6 +12471,11 @@
                   "name": "bool",
                   "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                   "required": false
+                },
+                "style": {
+                  "name": "object",
+                  "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                  "required": false
                 }
               }
             },
@@ -14058,6 +14070,11 @@
                   "name": "bool",
                   "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                   "required": false
+                },
+                "style": {
+                  "name": "object",
+                  "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                  "required": false
                 }
               }
             },
@@ -14335,6 +14352,11 @@
                   "name": "bool",
                   "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
                   "required": false
+                },
+                "style": {
+                  "name": "object",
+                  "description": "Custom style object to be applied to the icon component.\nThis is useful for overriding the default icon style but for cases where desires styles are not available as tokens.\n\nNote: This prop is only used in web.\n\n@example\n<Icon style={{ color: 'red' }}",
+                  "required": false
                 }
               }
             },

package/lib/Icon/Icon.js

@@ -32,6 +32,7 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant,
     tokens,
     scalesWithText = false,
+    style = {},
     dataSet
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
@@ -48,7 +49,8 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' '),
+      ...style
     },
     dataSet: dataSet,
     children: iconContent
@@ -67,7 +69,18 @@ const iconComponentPropTypes = {
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: _propTypes.default.bool
+  scalesWithText: _propTypes.default.bool,
+
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: _propTypes.default.object
 };
 exports.iconComponentPropTypes = iconComponentPropTypes;
 Icon.propTypes = { ...iconComponentPropTypes,

package/lib/IconButton/IconButton.js

@@ -31,9 +31,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// function to get the dimentionals of the conditionals
+const getPasswordDimensions = (password, width, height) => {
+  return password ? {
+    width,
+    height
+  } : {};
+};
+
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectOuterStyle = _ref => {
+const selectOuterStyle = (_ref, password) => {
   let {
     backgroundColor,
     outerBorderWidth,
@@ -44,7 +52,9 @@ const selectOuterStyle = _ref => {
     borderTopRightRadius,
     borderBottomLeftRadius,
     borderBottomRightRadius,
-    shadow
+    shadow,
+    width,
+    height
   } = _ref;
   return [{
     backgroundColor,
@@ -59,10 +69,13 @@ const selectOuterStyle = _ref => {
       outerBorderColor,
       outerBorderGap
     }),
+    ...getPasswordDimensions(password, width, height),
     ..._Platform.default.select({
       web: {
         outline: 'none',
-        display: 'inline-flex'
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
     })
   }, staticStyles.outer];
@@ -71,7 +84,7 @@ const selectOuterStyle = _ref => {
 const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
 
 
-const selectInnerStyle = _ref2 => {
+const selectInnerStyle = (_ref2, password) => {
   let {
     borderColor,
     borderWidth,
@@ -88,7 +101,9 @@ const selectInnerStyle = _ref2 => {
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    width,
+    height
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
@@ -110,9 +125,13 @@ const selectInnerStyle = _ref2 => {
     paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
     ..._Platform.default.select({
       web: {
-        pointerEvents: 'none'
+        pointerEvents: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
       }
-    })
+    }),
+    ...getPasswordDimensions(password, width, height)
   };
 };
 /**
@@ -158,7 +177,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
 
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState)));
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState), variant.password));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
@@ -171,7 +190,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     children: pressableState => {
       const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectInnerStyle(themeTokens),
+        style: selectInnerStyle(themeTokens, variant.password),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,

package/lib/Link/LinkBase.js

@@ -225,10 +225,11 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
         iconPosition: iconPosition,
         space: iconSpace,
         iconProps: { ...iconProps,
-          tokens: iconTokens
+          tokens: iconTokens,
+          style: staticStyles.bubblePointerEvents
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline],
+          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(linkState) : children
         })
       });
@@ -287,6 +288,12 @@ const staticStyles = _StyleSheet.default.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: { ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
 

package/lib/SideNav/Item.js

@@ -138,13 +138,13 @@ Item.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: _propTypes.default.string,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: _propTypes.default.string,
@@ -158,28 +158,20 @@ Item.propTypes = { ...selectedSystemPropTypes,
   hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: _propTypes.default.bool,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
-  variant: _utils.variantProp.propType,
-
-  /**
-   * Accesibility Role
-   */
   accessibilityRole: _propTypes.default.string,
-
-  /**
-   * test ID
-   */
-  testID: _propTypes.default.number
+  testID: _propTypes.default.number,
+  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
+  variant: _utils.variantProp.propType
 };
 var _default = Item;
 exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -295,7 +295,12 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       variant: {
         compact: true,
         password: true,
-        inactive: !!variant.inactive
+        inactive: variant.inactive,
+        size: 'large'
+      },
+      tokens: {
+        width: 40,
+        height: 40
       }
     }, !showPassword ? 'hide' : 'show'));
   }

package/lib/Tooltip/Tooltip.js

@@ -149,9 +149,11 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -189,7 +191,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 
@@ -261,6 +266,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       ref: floating,

package/lib/Tooltip/Tooltip.native.js

@@ -178,9 +178,11 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -209,7 +211,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
   });
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 
@@ -313,6 +318,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
       onPress: close,

package/lib/Tooltip/shared.js

@@ -37,6 +37,16 @@ const propTypes = {
    * Display tooltip icon button as an inline element.
    */
   inline: _propTypes.default.bool,
+
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: _propTypes.default.func,
+
+  /**
+   * The `id` of the tooltip button.
+   */
+  nativeID: _propTypes.default.string,
   tokens: (0, _utils.getTokensPropType)('Tooltip'),
   variant: _utils.variantProp.propType
 };

package/lib/TooltipButton/TooltipButton.js

@@ -9,6 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -69,7 +73,7 @@ const TooltipButton = _ref3 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [(0, _ThemeProvider.applyOuterBorder)(themeTokens), themeTokens.outerBorderWidth && {
       margin: -themeTokens.outerBorderWidth
-    }],
+    }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),
@@ -81,6 +85,15 @@ const TooltipButton = _ref3 => {
   });
 };
 
+const staticStyles = _StyleSheet.default.create({
+  bubblePointerEvents: { ..._Platform.default.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+});
+
 TooltipButton.propTypes = { ...selectedSystemPropTypes,
 
   /**

package/lib-module/Icon/Icon.js

@@ -12,6 +12,7 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant,
     tokens,
     scalesWithText = false,
+    style = {},
     dataSet
   } = _ref;
   const themeTokens = useThemeTokens('Icon', tokens, variant);
@@ -30,7 +31,8 @@ const Icon = /*#__PURE__*/forwardRef((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' '),
+      ...style
     },
     dataSet: dataSet,
     children: iconContent
@@ -49,7 +51,18 @@ export const iconComponentPropTypes = {
   /**
    * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  scalesWithText: PropTypes.bool
+  scalesWithText: PropTypes.bool,
+
+  /**
+   * Custom style object to be applied to the icon component.
+   * This is useful for overriding the default icon style but for cases where desires styles are not available as tokens.
+   *
+   * Note: This prop is only used in web.
+   *
+   * @example
+   * <Icon style={{ color: 'red' }}
+   */
+  style: PropTypes.object
 };
 Icon.propTypes = { ...iconComponentPropTypes,