@telus-uds/components-base 1.44.0 → 1.46.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 24 May 2023 23:40:09 GMT and should not be manually modified.
+This log was last generated on Tue, 30 May 2023 02:42:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.46.0
+
+Tue, 30 May 2023 02:42:51 GMT
+
+### Minor changes
+
+- Standardized RadioCardGroup (wlsdud194@hotmail.com)
+- Button outer width is no longer set to 0 if token width = 0 (wlsdud194@hotmail.com)
+- fix:list overflowing (samuraix221@hotmail.com)
+
+## 1.45.0
+
+Sat, 27 May 2023 00:44:50 GMT
+
+### Minor changes
+
+- Add in button group stories how looks icon right (mauricio.batresmontejo@telus.com)
+- link component modified to anchor the icon to the top of the line (35577399+JoshHC@users.noreply.github.com)
+- add "numeric" variant to 'TextInput' component (kyle.king2@telus.com)
+- feature:fieldset tokenization (samuraix221@hotmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.28.0
+
 ## 1.44.0
 
-Wed, 24 May 2023 23:40:09 GMT
+Wed, 24 May 2023 23:46:34 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -631,6 +631,19 @@
         "iconColor": "color",
         "iconGap": "size"
       },
+      "Fieldset": {
+        "outlineWidth": "border",
+        "outlineColor": "color",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "paddingBottom": "size",
+        "paddingTop": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "outlineOffset": "size"
+      },
       "HorizontalScrollButton": {
         "backgroundColor": "color",
         "borderRadius": "radius",
@@ -1112,7 +1125,14 @@
       },
       "RadioGroup": {
         "space": "integer",
-        "fieldSpace": "integer"
+        "fieldSpace": "integer",
+        "showIcon": "show",
+        "outlineWidth": "border",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "outlineOffset": "size"
       },
       "Ribbon": {
         "paddingLeft": "size",
@@ -4533,6 +4553,55 @@
             "required": false,
             "description": "Use to show border in case of error for a group of components"
           },
+          "variant": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": ""
+          },
+          "tokens": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "type": {
+              "name": "custom",
+              "raw": {
+                "outlineWidth": "border",
+                "outlineColor": "color",
+                "borderTopLeftRadius": "radius",
+                "borderTopRightRadius": "radius",
+                "borderBottomLeftRadius": "radius",
+                "borderBottomRightRadius": "radius",
+                "paddingBottom": "size",
+                "paddingTop": "size",
+                "paddingLeft": "size",
+                "paddingRight": "size",
+                "outlineOffset": "size"
+              }
+            },
+            "required": false,
+            "description": ""
+          },
           "children": {
             "type": {
               "name": "union",
@@ -13452,7 +13521,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,

package/lib/Button/ButtonBase.js

@@ -81,7 +81,7 @@ const selectOuterSizeStyles = _ref3 => {
   });
   const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
 
-  if (typeof width === 'number' || typeof height === 'number') {
+  if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
     return sizeStyles;

package/lib/Fieldset/Fieldset.js

@@ -9,12 +9,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _Feedback = _interopRequireDefault(require("../Feedback"));
 
 var _utils = require("../utils");
 
+var _ThemeProvider = require("../ThemeProvider");
+
 var _FieldsetContainer = _interopRequireDefault(require("./FieldsetContainer"));
 
 var _StackView = require("../StackView");
@@ -53,9 +53,19 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive,
     accessibilityRole,
     name: fieldsetName,
-    children
+    children,
+    variant = {},
+    tokens = {}
   } = _ref;
-  // Skips `inputId` because a fieldset' legend describes multiple inputs
+
+  /* Fieldset tokenization:
+  - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
+   */
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Fieldset', tokens, {
+    error: validation === 'error' && showErrorBorder,
+    ...variant
+  }); // Skips `inputId` because a fieldset' legend describes multiple inputs
+
   const {
     hintId,
     feedbackId,
@@ -81,11 +91,43 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     variant: {
       icon: showIcon
     }
-  }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
+  });
+
+  const borderStyles = _ref2 => {
+    let {
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset
+    } = _ref2;
+    return {
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius: borderTopLeftRadius * 0.1,
+      borderTopRightRadius: borderTopRightRadius * 0.1,
+      borderBottomLeftRadius: borderBottomLeftRadius * 0.1,
+      borderBottomRightRadius: borderBottomRightRadius * 0.1,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset,
+      borderWidth: 0,
+      outlineStyle: validation === 'error' && showErrorBorder ? 'solid' : 'none'
+    };
+  }; // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between
   // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
 
+
   const childContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: typeof children === 'function' ? children(a11yProps) : children
   });
@@ -94,30 +136,20 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     space,
     preserveFragments: true
   });
-  const borderStyle = validation === 'error' && showErrorBorder ? staticStyles.errorBorder : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldsetContainer.default, {
     ref: ref,
     inactive: inactive,
     accessibilityRole: accessibilityRole,
     name: fieldsetName,
-    borderStyle: borderStyle,
+    borderStyle: borderStyles(themeTokens),
     showBorderStyle: showErrorBorder,
     children: stackedContent
   });
 });
-
-const staticStyles = _StyleSheet.default.create({
-  errorBorder: {
-    border: true,
-    borderWidth: 1,
-    borderColor: 'red',
-    borderRadius: 10,
-    padding: 8
-  }
-});
-
 Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Fieldset'),
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
   /**

package/lib/Link/LinkBase.js

@@ -271,7 +271,6 @@ const staticStyles = _StyleSheet.default.create({
   },
   rowContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'flex-start'
   },
   baseline: {

package/lib/List/List.js

@@ -68,6 +68,10 @@ const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
+    style: {
+      flexShrink: 1,
+      flex: 1
+    },
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: items

package/lib/Radio/RadioGroup.js

@@ -104,12 +104,30 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
+  /* showIcon passes a boolean to displayIcon
+   */
+
   const {
     space,
-    fieldSpace
+    fieldSpace,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
   } = (0, _ThemeProvider.useThemeTokens)('RadioGroup', tokens, variant, {
     viewport
   });
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
   const {
     currentValue,
     setValue
@@ -169,7 +187,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     showErrorBorder: true,
-    showIcon: true,
+    tokens: borderTokens,
+    showIcon: showIcon,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(radios, {

package/lib/TextInput/TextInputBase.js

@@ -234,9 +234,13 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;
 
+    const {
+      numeric
+    } = variant;
     const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    setValue(text, event);
-    if (typeof onChangeText === 'function') onChangeText(text, event);
+    const filteredText = numeric ? text.replace(/[^\d]/g, '') : text;
+    setValue(filteredText, event);
+    if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
 
   const states = {
@@ -304,8 +308,6 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
-    // currentValue is being updated even if the input is not controlled, passing it down to the
-    // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
   };
   const {
@@ -318,6 +320,8 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
       ref: inputRef,
+      keyboardType: variant.numeric && 'numeric',
+      inputMode: variant.numeric && 'numeric',
       style: nativeInputStyle,
       secureTextEntry: variant.password && !showPassword,
       ...inputProps

package/lib-module/Button/ButtonBase.js

@@ -57,7 +57,7 @@ const selectOuterSizeStyles = _ref3 => {
   });
   const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
 
-  if (typeof width === 'number' || typeof height === 'number') {
+  if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
     return sizeStyles;

package/lib-module/Fieldset/Fieldset.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Feedback from '../Feedback';
-import { spacingProps } from '../utils';
+import { getTokensPropType, spacingProps, variantProp } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
 import FieldsetContainer from './FieldsetContainer';
 import { getStackedContent } from '../StackView';
 import InputLabel from '../InputLabel';
@@ -32,9 +32,19 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive,
     accessibilityRole,
     name: fieldsetName,
-    children
+    children,
+    variant = {},
+    tokens = {}
   } = _ref;
-  // Skips `inputId` because a fieldset' legend describes multiple inputs
+
+  /* Fieldset tokenization:
+  - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
+   */
+  const themeTokens = useThemeTokens('Fieldset', tokens, {
+    error: validation === 'error' && showErrorBorder,
+    ...variant
+  }); // Skips `inputId` because a fieldset' legend describes multiple inputs
+
   const {
     hintId,
     feedbackId,
@@ -62,7 +72,38 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant: {
       icon: showIcon
     }
-  }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
+  });
+
+  const borderStyles = _ref2 => {
+    let {
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset
+    } = _ref2;
+    return {
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius: borderTopLeftRadius * 0.1,
+      borderTopRightRadius: borderTopRightRadius * 0.1,
+      borderBottomLeftRadius: borderBottomLeftRadius * 0.1,
+      borderBottomRightRadius: borderBottomRightRadius * 0.1,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset,
+      borderWidth: 0,
+      outlineStyle: validation === 'error' && showErrorBorder ? 'solid' : 'none'
+    };
+  }; // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between
   // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
@@ -77,28 +118,20 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     space,
     preserveFragments: true
   });
-  const borderStyle = validation === 'error' && showErrorBorder ? staticStyles.errorBorder : null;
   return /*#__PURE__*/_jsx(FieldsetContainer, {
     ref: ref,
     inactive: inactive,
     accessibilityRole: accessibilityRole,
     name: fieldsetName,
-    borderStyle: borderStyle,
+    borderStyle: borderStyles(themeTokens),
     showBorderStyle: showErrorBorder,
     children: stackedContent
   });
 });
-const staticStyles = StyleSheet.create({
-  errorBorder: {
-    border: true,
-    borderWidth: 1,
-    borderColor: 'red',
-    borderRadius: 10,
-    padding: 8
-  }
-});
 Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Fieldset'),
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
 
   /**

package/lib-module/Link/LinkBase.js

@@ -242,7 +242,6 @@ const staticStyles = StyleSheet.create({
   },
   rowContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'flex-start'
   },
   baseline: {

package/lib-module/List/List.js

@@ -47,6 +47,10 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
+    style: {
+      flexShrink: 1,
+      flex: 1
+    },
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: items

package/lib-module/Radio/RadioGroup.js

@@ -81,12 +81,30 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = useViewport();
+  /* showIcon passes a boolean to displayIcon
+   */
+
   const {
     space,
-    fieldSpace
+    fieldSpace,
+    showIcon,
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
   } = useThemeTokens('RadioGroup', tokens, variant, {
     viewport
   });
+  const borderTokens = {
+    outlineWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    outlineOffset
+  };
   const {
     currentValue,
     setValue
@@ -146,7 +164,8 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive: inactive,
     validation: validation,
     showErrorBorder: true,
-    showIcon: true,
+    tokens: borderTokens,
+    showIcon: showIcon,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: getStackedContent(radios, {

package/lib-module/TextInput/TextInputBase.js

@@ -208,9 +208,13 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const handleChangeText = event => {
     var _event$nativeEvent, _event$target;
 
+    const {
+      numeric
+    } = variant;
     const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
-    setValue(text, event);
-    if (typeof onChangeText === 'function') onChangeText(text, event);
+    const filteredText = numeric ? text.replace(/[^\d]/g, '') : text;
+    setValue(filteredText, event);
+    if (typeof onChangeText === 'function') onChangeText(filteredText, event);
   };
 
   const states = {
@@ -278,8 +282,6 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     onMouseOut: handleMouseOut,
     onChange: handleChangeText,
     defaultValue: initialValue,
-    // currentValue is being updated even if the input is not controlled, passing it down to the
-    // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
   };
   const {
@@ -292,6 +294,8 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/_jsx(NativeTextInput, {
       ref: inputRef,
+      keyboardType: variant.numeric && 'numeric',
+      inputMode: variant.numeric && 'numeric',
       style: nativeInputStyle,
       secureTextEntry: variant.password && !showPassword,
       ...inputProps

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.27.0",
+    "@telus-uds/system-theme-tokens": "^2.28.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.44.0"
+  "version": "1.46.0"
 }

package/src/Button/ButtonBase.jsx

@@ -55,7 +55,7 @@ const selectOuterSizeStyles = ({ outerBorderGap, outerBorderWidth, width, height
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
   const sizeStyles = {}
   // Apply width/height tokens: number === pixels, string === explicit units e.g. %
-  if (typeof width === 'number' || typeof height === 'number') {
+  if ((typeof width === 'number' && width > 0) || (typeof height === 'number' && height > 0)) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height
     return sizeStyles

package/src/Fieldset/Fieldset.jsx

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { StyleSheet } from 'react-native'
 
 import Feedback from '../Feedback'
-import { spacingProps } from '../utils'
+import { getTokensPropType, spacingProps, variantProp } from '../utils'
+import { useThemeTokens } from '../ThemeProvider'
 import FieldsetContainer from './FieldsetContainer'
 import { getStackedContent } from '../StackView'
 import InputLabel from '../InputLabel'
@@ -32,10 +32,19 @@ const Fieldset = forwardRef(
       inactive,
       accessibilityRole,
       name: fieldsetName,
-      children
+      children,
+      variant = {},
+      tokens = {}
     },
     ref
   ) => {
+    /* Fieldset tokenization:
+    - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
+     */
+    const themeTokens = useThemeTokens('Fieldset', tokens, {
+      error: validation === 'error' && showErrorBorder,
+      ...variant
+    })
     // Skips `inputId` because a fieldset' legend describes multiple inputs
     const { hintId, feedbackId, a11yProps } = useInputSupports({
       feedback,
@@ -63,6 +72,34 @@ const Fieldset = forwardRef(
       />
     )
 
+    const borderStyles = ({
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset
+    }) => ({
+      outlineWidth,
+      outlineColor,
+      borderTopLeftRadius: borderTopLeftRadius * 0.1,
+      borderTopRightRadius: borderTopRightRadius * 0.1,
+      borderBottomLeftRadius: borderBottomLeftRadius * 0.1,
+      borderBottomRightRadius: borderBottomRightRadius * 0.1,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      outlineOffset,
+      borderWidth: 0,
+      outlineStyle: validation === 'error' && showErrorBorder ? 'solid' : 'none'
+    })
+
     // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
     // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
     // fieldset as much as possible, but also allow different spacing within content and between
@@ -73,15 +110,13 @@ const Fieldset = forwardRef(
         ? [legendContent, feedbackContent, childContent]
         : [legendContent, childContent, feedbackContent]
     const stackedContent = getStackedContent(orderedContent, { space, preserveFragments: true })
-    const borderStyle = validation === 'error' && showErrorBorder ? staticStyles.errorBorder : null
-
     return (
       <FieldsetContainer
         ref={ref}
         inactive={inactive}
         accessibilityRole={accessibilityRole}
         name={fieldsetName}
-        borderStyle={borderStyle}
+        borderStyle={borderStyles(themeTokens)}
         showBorderStyle={showErrorBorder}
       >
         {stackedContent}
@@ -89,19 +124,12 @@ const Fieldset = forwardRef(
     )
   }
 )
-const staticStyles = StyleSheet.create({
-  errorBorder: {
-    border: true,
-    borderWidth: 1,
-    borderColor: 'red',
-    borderRadius: 10,
-    padding: 8
-  }
-})
 
 Fieldset.displayName = 'Fieldset'
 
 Fieldset.propTypes = {
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Fieldset'),
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   /**
    * Whether the English or French copy will be used (e.g. for accessibility labels).

package/src/Link/LinkBase.jsx

@@ -223,7 +223,6 @@ const staticStyles = StyleSheet.create({
   },
   rowContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'flex-start'
   },
   baseline: {

package/src/List/List.jsx

@@ -42,7 +42,12 @@ const List = forwardRef(
     })
 
     return (
-      <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
+      <View
+        ref={ref}
+        style={{ flexShrink: 1, flex: 1 }}
+        accessibilityRole={accessibilityRole}
+        {...selectProps(rest)}
+      >
         {items}
       </View>
     )

package/src/Radio/RadioGroup.jsx

@@ -99,10 +99,31 @@ const RadioGroup = forwardRef(
   ) => {
     const viewport = useViewport()
 
-    const { space, fieldSpace } = useThemeTokens('RadioGroup', tokens, variant, {
+    /* showIcon passes a boolean to displayIcon
+     */
+    const {
+      space,
+      fieldSpace,
+      showIcon,
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    } = useThemeTokens('RadioGroup', tokens, variant, {
       viewport
     })
 
+    const borderTokens = {
+      outlineWidth,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outlineOffset
+    }
+
     const { currentValue, setValue } = useInputValue({
       value: checkedId,
       initialValue: initialCheckedId,
@@ -156,7 +177,8 @@ const RadioGroup = forwardRef(
         inactive={inactive}
         validation={validation}
         showErrorBorder
-        showIcon
+        tokens={borderTokens}
+        showIcon={showIcon}
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >

package/src/TextInput/TextInputBase.jsx

@@ -198,9 +198,11 @@ const TextInputBase = forwardRef(
     }, [element, pattern])
 
     const handleChangeText = (event) => {
+      const { numeric } = variant
       const text = event.nativeEvent?.text || event.target?.value
-      setValue(text, event)
-      if (typeof onChangeText === 'function') onChangeText(text, event)
+      const filteredText = numeric ? text.replace(/[^\d]/g, '') : text
+      setValue(filteredText, event)
+      if (typeof onChangeText === 'function') onChangeText(filteredText, event)
     }
 
     const states = { focus: isFocused, hover: isHovered, inactive }
@@ -265,8 +267,6 @@ const TextInputBase = forwardRef(
       onMouseOut: handleMouseOut,
       onChange: handleChangeText,
       defaultValue: initialValue,
-      // currentValue is being updated even if the input is not controlled, passing it down to the
-      // Input could lead to changing its state from uncontrolled to controlled
       value: isControlled ? currentValue : undefined
     }
 
@@ -277,6 +277,8 @@ const TextInputBase = forwardRef(
       <View style={selectOuterBorderStyles(themeTokens)}>
         <NativeTextInput
           ref={inputRef}
+          keyboardType={variant.numeric && 'numeric'}
+          inputMode={variant.numeric && 'numeric'}
           style={nativeInputStyle}
           secureTextEntry={variant.password && !showPassword}
           {...inputProps}