@telus-uds/components-base 1.62.0 → 1.62.1

package/CHANGELOG.md

@@ -1,12 +1,20 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 15 Sep 2023 20:56:52 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 20:56:52 GMT
+Fri, 15 Sep 2023 21:02:27 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -6412,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",
@@ -11311,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",
@@ -11820,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
                 }
               }
             },
@@ -12003,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
                 }
               }
             },
@@ -12443,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
                 }
               }
             },
@@ -14037,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
                 }
               }
             },
@@ -14314,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/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/Tooltip/Tooltip.js

@@ -153,6 +153,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -265,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

@@ -182,6 +182,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -317,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

@@ -42,6 +42,11 @@ const propTypes = {
    * 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,
 

package/lib-module/Link/LinkBase.js

@@ -197,10 +197,11 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
         iconPosition: iconPosition,
         space: iconSpace,
         iconProps: { ...iconProps,
-          tokens: iconTokens
+          tokens: iconTokens,
+          style: staticStyles.bubblePointerEvents
         },
         children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline],
+          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(linkState) : children
         })
       });
@@ -258,6 +259,12 @@ const staticStyles = StyleSheet.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: { ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
 export default withLinkRouter(LinkBase);

package/lib-module/Tooltip/Tooltip.js

@@ -127,6 +127,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -239,6 +240,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/_jsxs(View, {
       ref: floating,

package/lib-module/Tooltip/Tooltip.native.js

@@ -154,6 +154,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     tokens,
     variant,
     inline = false,
+    nativeID,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -288,6 +289,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
       hitSlop: pressableHitSlop,
       accessibilityLabel: getCopy('a11yText'),
       accessibilityRole: "button",
+      nativeID: nativeID,
       children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
     }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
       onPress: close,

package/lib-module/Tooltip/shared.js

@@ -31,6 +31,11 @@ const propTypes = {
    * Callback function triggered when the tooltip is pressed.
    */
   onPress: PropTypes.func,
+
+  /**
+   * The `id` of the tooltip button.
+   */
+  nativeID: PropTypes.string,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 };

package/lib-module/TooltipButton/TooltipButton.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
 import PropTypes from 'prop-types';
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
@@ -53,7 +55,7 @@ const TooltipButton = _ref3 => {
   return /*#__PURE__*/_jsx(View, {
     style: [applyOuterBorder(themeTokens), themeTokens.outerBorderWidth && {
       margin: -themeTokens.outerBorderWidth
-    }],
+    }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(View, {
       style: selectInnerContainerStyles(themeTokens),
@@ -65,6 +67,14 @@ const TooltipButton = _ref3 => {
   });
 };
 
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: { ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+});
 TooltipButton.propTypes = { ...selectedSystemPropTypes,
 
   /**

package/package.json

@@ -74,5 +74,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.62.0"
+  "version": "1.62.1"
 }

package/src/Icon/Icon.jsx

@@ -7,7 +7,15 @@ import { getTokensPropType, scaleWithText, variantProp } from '../utils'
 
 const Icon = forwardRef(
   (
-    { icon: IconComponent, accessibilityLabel, variant, tokens, scalesWithText = false, dataSet },
+    {
+      icon: IconComponent,
+      accessibilityLabel,
+      variant,
+      tokens,
+      scalesWithText = false,
+      style = {},
+      dataSet
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('Icon', tokens, variant)
@@ -32,7 +40,8 @@ const Icon = forwardRef(
             themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''
           ]
             .filter((exists) => exists)
-            .join(' ')
+            .join(' '),
+          ...style
         }}
         dataSet={dataSet}
       >
@@ -55,7 +64,17 @@ 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 = {

package/src/Link/LinkBase.jsx

@@ -180,9 +180,20 @@ const LinkBase = forwardRef(
               icon={IconComponent}
               iconPosition={iconPosition}
               space={iconSpace}
-              iconProps={{ ...iconProps, tokens: iconTokens }}
+              iconProps={{
+                ...iconProps,
+                tokens: iconTokens,
+                style: staticStyles.bubblePointerEvents
+              }}
             >
-              <Text style={[textStyles, blockTextStyles, staticStyles.baseline]}>
+              <Text
+                style={[
+                  textStyles,
+                  blockTextStyles,
+                  staticStyles.baseline,
+                  staticStyles.bubblePointerEvents
+                ]}
+              >
                 {typeof children === 'function' ? children(linkState) : children}
               </Text>
             </IconText>
@@ -239,6 +250,13 @@ const staticStyles = StyleSheet.create({
   },
   baseline: {
     alignSelf: 'baseline'
+  },
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 })
 

package/src/Tooltip/Tooltip.jsx

@@ -92,6 +92,7 @@ const Tooltip = forwardRef(
       tokens,
       variant,
       inline = false,
+      nativeID,
       ...rest
     },
     ref
@@ -193,6 +194,7 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
             ? (pressableState) => control(getPressableState(pressableState), variant)

package/src/Tooltip/Tooltip.native.jsx

@@ -118,6 +118,7 @@ const Tooltip = forwardRef(
       tokens,
       variant,
       inline = false,
+      nativeID,
       ...rest
     },
     ref
@@ -252,6 +253,7 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
             ? (pressableState) => control(getPressableState(pressableState), variant)

package/src/Tooltip/shared.js

@@ -28,6 +28,10 @@ const propTypes = {
    * Callback function triggered when the tooltip is pressed.
    */
   onPress: PropTypes.func,
+  /**
+   * The `id` of the tooltip button.
+   */
+  nativeID: PropTypes.string,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }

package/src/TooltipButton/TooltipButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, StyleSheet, Platform } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
@@ -35,7 +35,8 @@ const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
         applyOuterBorder(themeTokens),
         themeTokens.outerBorderWidth && {
           margin: -themeTokens.outerBorderWidth
-        }
+        },
+        staticStyles.bubblePointerEvents
       ]}
       {...selectProps(rest)}
     >
@@ -46,6 +47,16 @@ const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
   )
 }
 
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+})
+
 TooltipButton.propTypes = {
   ...selectedSystemPropTypes,
   /**