@telus-uds/components-base 1.3.1 → 1.6.0

package/lib/Button/ButtonGroup.js

@@ -21,9 +21,7 @@ var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _props = require("../utils/props");
-
-var _input = require("../utils/input");
+var _utils = require("../utils");
 
 var _pressability = require("../utils/pressability");
 
@@ -35,7 +33,8 @@ 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; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.pressProps, _props.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
@@ -57,7 +56,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _props.selectTokens)('StackView', themeTokens);
+  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
   const {
     direction,
     space
@@ -66,7 +65,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const {
     currentValues,
     toggleOneValue
-  } = (0, _input.useMultipleInputValues)({
+  } = (0, _utils.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -78,6 +77,12 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest
   });
   const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, { ...systemProps,
     space: space,
     direction: direction,
@@ -87,7 +92,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       label,
       id = label,
       accessibilityLabel,
-      ref: itemRef
+      ref: itemRef,
+      ...itemRest
     }, index) => {
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
@@ -98,7 +104,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       }]);
 
       const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress();
+        if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
 
@@ -108,7 +114,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
         },
         accessibilityRole: itemA11yRole,
         accessibilityLabel,
-        ..._props.a11yProps.getPositionInSet(items.length, index)
+        ..._utils.a11yProps.getPositionInSet(items.length, index)
       }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
       // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
 
@@ -120,6 +126,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
         selected: isSelected,
         inactive: inactive,
         ...itemA11y,
+        ...selectItemProps(itemRest),
         children: label
       }, id);
     })
@@ -127,8 +134,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _props.getTokensPropType)('ButtonGroup'),
-  variant: _props.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('ButtonGroup'),
+  variant: _utils.variantProp.propType,
 
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
@@ -139,7 +146,8 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * The options a user may select
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
+
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.

package/lib/Card/PressableCardBase.js

@@ -29,7 +29,7 @@ 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; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 const tokenKeys = [...(0, _utils.getTokenNames)('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];

package/lib/Checkbox/Checkbox.js

@@ -41,7 +41,7 @@ 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; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
 const selectInputStyles = ({
   iconBackgroundColor,
@@ -232,24 +232,31 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
             pressed
           });
           const iconTokens = selectIconTokens(stateTokens);
+          const labelStyles = selectLabelStyles(stateTokens);
+          const alignWithLabel = label ? [staticStyles.alignWithLabel, {
+            height: labelStyles.lineHeight
+          }] : null;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
             style: staticStyles.container,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-              style: _StyleSheet.default.flatten([staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)]),
-              testID: "Checkbox-Input",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
-                checked: isChecked,
-                defaultChecked: defaultChecked,
-                disabled: inactive,
-                id: inputId,
-                isControlled: isControlled,
-                name: name,
-                value: value
-              }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens,
-                testID: "Checkbox-Icon"
-              })]
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+              style: alignWithLabel,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+                style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
+                testID: "Checkbox-Input",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+                  checked: isChecked,
+                  defaultChecked: defaultChecked,
+                  disabled: inactive,
+                  id: inputId,
+                  isControlled: isControlled,
+                  name: name,
+                  value: value
+                }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens,
+                  testID: "Checkbox-Icon"
+                })]
+              })
             }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-              style: selectLabelStyles(stateTokens),
+              style: labelStyles,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
                 forId: inputId,
                 children: label
@@ -347,5 +354,9 @@ const staticStyles = _StyleSheet.default.create({
   defaultInputStyles: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  alignWithLabel: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 });

package/lib/Checkbox/CheckboxGroup.js

@@ -31,6 +31,8 @@ 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; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 /**
  * A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
  *
@@ -78,6 +80,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * />
  * ```
  */
+
 const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioTokens,
@@ -93,7 +96,8 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   onChange,
   readOnly,
   name: inputGroupName,
-  inactive
+  inactive,
+  ...rest
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -111,11 +115,18 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     onChange,
     readOnly: readOnly || inactive
   });
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   const checkboxes = items.map(({
     label,
     id,
     onChange: itemOnChange,
-    ref: itemRef
+    ref: itemRef,
+    ...itemRest
   }, index) => {
     const checkboxId = id || `Checkbox[${index}]`;
 
@@ -133,7 +144,8 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       label: label,
       name: inputGroupName,
       tokens: radioTokens,
-      variant: variant
+      variant: variant,
+      ...selectItemProps(itemRest)
     }, checkboxId);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
@@ -146,6 +158,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(checkboxes, {
       space,
       direction: 'column'
@@ -153,7 +166,8 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 CheckboxGroup.displayName = 'CheckboxGroup';
-CheckboxGroup.propTypes = {
+CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Optional theme token overrides for the outer CheckboxGroup component
    */
@@ -172,7 +186,7 @@ CheckboxGroup.propTypes = {
   /**
    * Array of objects containing specifics for each Checkbox to be rendered in the group.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.exact({
+  items: _propTypes.default.arrayOf(_propTypes.default.exact({ ...selectedItemPropTypes,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
     onChange: _propTypes.default.func,

package/lib/ExpandCollapse/Panel.js

@@ -86,12 +86,13 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
   };
 
   const onContainerLayout = event => {
-    if (containerHeight === null) {
-      const {
-        layout: {
-          height = 0
-        } = {}
-      } = event.nativeEvent;
+    const {
+      layout: {
+        height = 0
+      } = {}
+    } = event.nativeEvent;
+
+    if (_Platform.default.OS === 'web' || _Platform.default.OS !== 'web' && containerHeight === null) {
       setContainerHeight(height);
     }
   };
@@ -116,12 +117,11 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
       tokens: controlTokens,
       onPress: handleControlPress,
       children: control
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: overflowContainerStyles,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+      style: [overflowContainerStyles, animatedStyles, staticStyles.itemsContainer],
       ...focusabilityProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         onLayout: onContainerLayout,
-        style: [staticStyles.itemsContainer, animatedStyles],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           style: selectContainerStyles(themeTokens),
           children: children

package/lib/FlexGrid/Col/Col.js

@@ -46,6 +46,7 @@ const Col = /*#__PURE__*/(0, _react.forwardRef)(({
   mdOffset,
   lgOffset,
   xlOffset,
+  flex,
   ...viewProps
 }, ref) => {
   const gutter = (0, _react.useContext)(_GutterContext.default);
@@ -119,8 +120,11 @@ const Col = /*#__PURE__*/(0, _react.forwardRef)(({
     paddingLeft: gutter ? 16 : 0,
     paddingRight: gutter ? 16 : 0
   };
-  let hidingStyles = {};
-  const shown = _Platform.default.OS === 'web' ? 'block' : 'flex';
+  let hidingStyles = {}; // TODO: consider setting this to always 'flex' in a major release.
+  // `display: block` is invalid in native apps.
+  // See https://telusdigital.atlassian.net/browse/UDS1-92
+
+  const shown = !flex && _Platform.default.OS === 'web' ? 'block' : 'flex';
 
   if (viewPort === _systemConstants.viewports.xs) {
     hidingStyles = {
@@ -286,7 +290,13 @@ Col.propTypes = {
    *
    * Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
    */
-  horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right']))
+  horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right'])),
+
+  /**
+   * (web only) Stretches the column to fill vertical space using `display: flex`.
+   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
+   */
+  flex: _propTypes.default.bool
 };
 var _default = Col;
 exports.default = _default;

package/lib/FlexGrid/Row/Row.js

@@ -106,25 +106,31 @@ const Row = /*#__PURE__*/(0, _react.forwardRef)(({
   const viewPort = (0, _ViewportProvider.useViewport)();
   const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   let flexDirection = '';
+  let flexWrap = '';
 
   if (viewPort === _systemConstants.viewports.xs) {
     flexDirection = reverseLevel[0] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[0] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === _systemConstants.viewports.sm) {
     flexDirection = reverseLevel[1] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[1] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === _systemConstants.viewports.md) {
     flexDirection = reverseLevel[2] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[2] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === _systemConstants.viewports.lg) {
     flexDirection = reverseLevel[3] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[3] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === _systemConstants.viewports.xl) {
     flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap';
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -132,6 +138,7 @@ const Row = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest,
     style: [styles.row, {
       flexDirection,
+      flexWrap,
       ...horizontalAlignStyles(horizontalAlign),
       ...verticalAlignStyles(verticalAlign),
       ...distributeStyles(distribute)
@@ -149,8 +156,7 @@ const styles = _StyleSheet.default.create({
     flexGrow: 0,
     flexShrink: 1,
     flexBasis: 'auto',
-    flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexDirection: 'row'
   }
 });
 

package/lib/HorizontalScroll/HorizontalScroll.js

@@ -154,7 +154,6 @@ const HorizontalScroll = /*#__PURE__*/(0, _react.forwardRef)(({
       onLayout: handleContainerLayout,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [staticStyles.scrollContainer, {
-        marginBottom: gutter,
         borderBottomWidth,
         borderBottomColor
       }],

package/lib/HorizontalScroll/HorizontalScrollButton.js

@@ -9,17 +9,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _ThemeProvider = require("../ThemeProvider");
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
 var _utils = require("../utils");
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _ThemeProvider = require("../ThemeProvider");
 
-var _Typography = _interopRequireDefault(require("../Typography"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
@@ -31,19 +29,11 @@ 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; }
 
-const selectButtonStyles = ({
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}, direction) => [staticStyles.absolute, staticStyles[direction], {
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}];
+const selectContainerStyles = ({
+  offset
+}) => ({
+  marginTop: offset ? -offset : 0
+});
 /**
  * Button within a Tabs component showing users that content is available to the left or
  * right, scrolling a screen's worth of content left or right when pressed.
@@ -57,47 +47,31 @@ const selectButtonStyles = ({
 const HorizontalScrollButton = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'next',
   icon,
-  onPress,
   offset,
+  onPress,
   variant,
   tokens,
   copy
 }, ref) => {
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('HorizontalScrollButton', tokens, variant);
-
-  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState);
-
-  const getPressableStyle = pressableState => [selectButtonStyles(resolveButtonTokens(pressableState), direction), {
-    marginTop: -1 * (offset || 0)
-  }];
-
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('HorizontalScrollButton', tokens, variant);
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
-    ref: ref,
-    style: getPressableStyle,
-    onPress: onPress,
-    accessibilityLabel: label,
-    accessibilityRole: "button" // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-    ,
-    ..._utils.a11yProps.nonFocusableProps,
-    children: pressableState => {
-      const iconTokens = (0, _utils.selectTokens)('Icon', resolveButtonTokens(pressableState), 'icon');
-      return icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-        icon: icon,
-        tokens: iconTokens
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-        tokens: {
-          fontSize: iconTokens.size,
-          lineHeight: 1,
-          color: iconTokens.color
-        },
-        children: direction === 'next' ? '→' : '←'
-      });
-    }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
+      offset
+    })],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      accessibilityLabel: label,
+      icon: icon,
+      onPress: onPress,
+      ref: ref,
+      tokens: themeTokens,
+      variant: variant,
+      ..._utils.a11yProps.nonFocusableProps
+    })
   });
 });
 HorizontalScrollButton.displayName = 'HorizontalScrollButton';

package/lib/InputLabel/InputLabel.js

@@ -69,25 +69,29 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    ref: ref,
-    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
-    ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
-        forId: forId,
-        children: label
-      })
-    }), hint && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
-      nativeID: hintId,
-      children: hint
-    }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: staticStyles.tooltipAlign,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-        content: tooltip
-      })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      ref: ref,
+      style: staticStyles.container,
+      ...selectProps(rest),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+          forId: forId,
+          children: label
+        })
+      }), hint && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens), staticStyles.label],
+        nativeID: hintId,
+        children: hint
+      }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.tooltipAlign, {
+          height: themeTokens.fontSize * themeTokens.lineHeight
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+          content: tooltip
+        })
+      })]
     }), hint && !isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
       nativeID: hintId,
@@ -135,21 +139,19 @@ exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
   container: {
-    display: 'flex',
+    flexShrink: 1,
     flexDirection: 'row',
     alignItems: 'baseline'
   },
-  containerWithHintBelow: {
-    flexWrap: 'wrap'
-  },
   label: {
-    flexShrink: 0
+    flexShrink: 1
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'center'
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 });

package/lib/Link/LinkBase.js

@@ -60,13 +60,9 @@ _Platform.default.OS === 'web' ? {
 } : {};
 
 const selectTextStyles = ({
-  color,
-  textLine,
-  textLineStyle
+  color
 }) => ({
   color,
-  textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle,
   ..._Platform.default.select({
     web: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -87,6 +83,22 @@ const selectBlockStyles = ({
   fontName: blockFontName
 });
 
+const selectDecorationStyles = ({
+  color,
+  textLine,
+  textLineStyle
+}) => ({
+  color,
+  textDecorationLine: textLine,
+  textDecorationStyle: textLineStyle,
+  ..._Platform.default.select({
+    web: {
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      transition: 'color 200ms'
+    }
+  })
+});
+
 const selectIconTokens = ({
   color,
   iconSize,
@@ -165,8 +177,9 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const decorationStyles = selectDecorationStyles(themeTokens);
       const hasIcon = Boolean(icon || themeTokens.icon);
-      return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer];
+      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);