@telus-uds/components-base 1.22.0 → 1.24.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 07 Dec 2022 15:09:47 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Dec 2022 23:06:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.24.0
+
+Thu, 15 Dec 2022 23:06:31 GMT
+
+### Minor changes
+
+- Add `isStatic` prop to `ActivityIndicator` and `Spinner` (shahzaibkhalidmalik@outlook.com)
+
+## 1.23.0
+
+Wed, 14 Dec 2022 01:46:10 GMT
+
+### Minor changes
+
+- undefined (mauricio.batresmontejo@telus.com)
+
+### Patches
+
+- chore: new design to error feedback for radio group (mauricio.batresmontejo@telus.com)
+
 ## 1.22.0
 
-Wed, 07 Dec 2022 15:09:47 GMT
+Wed, 07 Dec 2022 15:14:20 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -2541,6 +2541,17 @@
       "docs": {
         "description": "`ActivityIndicator` renders a visual loading state.\nIt does not handle positioning or layout of that visual loader.",
         "props": {
+          "isStatic": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If true, it should render a static spinner"
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -3452,6 +3463,17 @@
       "docs": {
         "description": "A feedback box commonly used with form fields.\n\n### Standalone usage\nWhile its primary use is to facilitate feedback states for other form components such as `TextInput`,\nyou may use it standalone.\n\n### Complex content\nYou may pass any React tree as the children of this component, bear in mind that a render function\nis better suited for styling children based on Feedback's variant.\n\n### Using a render function\nWhen a function is passed for rendering content, it will receive the feedback text styles and\nvariant as arguments.\n\n### Accessibility\nAll accessibility props set on this component will be applied to the outer container.",
         "props": {
+          "showFeedbackIcon": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": ""
+          },
           "title": {
             "type": {
               "name": "string"
@@ -12299,6 +12321,10 @@
                     "name": "func",
                     "required": false
                   },
+                  "description": {
+                    "name": "string",
+                    "required": false
+                  },
                   "ref": {
                     "name": "custom",
                     "raw": "ABBPropTypes.ref()",

package/lib/ActivityIndicator/Spinner.js

@@ -39,11 +39,13 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     ref: ref,
     width: "".concat(size, "px"),
@@ -53,7 +55,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     role: "progressbar",
     "aria-busy": true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      children: [reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+      children: [reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
         attributeName: "transform",
         type: "rotate",
         values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
@@ -66,9 +68,9 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         cx: "24",
         cy: "24",
         r: "20",
-        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+        strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
-        children: reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dashoffset",
             values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),

package/lib/ActivityIndicator/Spinner.native.js

@@ -34,7 +34,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
 
   const {
@@ -44,6 +45,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const {
     reduceMotionEnabled
   } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
 
   _react.default.useLayoutEffect(() => {
     const loop = _Animated.default.timing(timer, {
@@ -55,8 +57,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       isInteraction: false
     });
 
-    if (!reduceMotionEnabled) _Animated.default.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotionEnabled]);
+    if (!reduceMotion) _Animated.default.loop(loop).start();else loop.stop();
+  }, [timer, reduceMotion]);
 
   const frames = 60 * _shared.DURATION / 1000;
 
@@ -64,10 +66,10 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const containerStyle = {
     width: size,
-    height: size / (reduceMotionEnabled ? 1.5 : 2),
+    height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   };
-  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  const animationFrequency = reduceMotion ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
@@ -106,7 +108,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           height: size
         };
 
-        if (!reduceMotionEnabled) {
+        if (!reduceMotion) {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],

package/lib/ActivityIndicator/index.js

@@ -27,7 +27,8 @@ const ActivityIndicator = _ref => {
   let {
     variant,
     tokens,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     size,
@@ -38,7 +39,8 @@ const ActivityIndicator = _ref => {
     size: size,
     color: color,
     thickness: thickness,
-    label: label
+    label: label,
+    isStatic: isStatic
   });
 };
 
@@ -49,7 +51,12 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: _propTypes.default.string.isRequired
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: _propTypes.default.bool
 };
 var _default = ActivityIndicator;
 exports.default = _default;

package/lib/ActivityIndicator/shared.js

@@ -22,6 +22,7 @@ const propTypes = {
   color: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
   size: _propTypes.default.number.isRequired,
-  thickness: _propTypes.default.number.isRequired
+  thickness: _propTypes.default.number.isRequired,
+  isStatic: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/lib/Checkbox/CheckboxGroup.js

@@ -162,6 +162,8 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    showIcon: true,
+    showErrorBorder: true,
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(checkboxes, {
       space,

package/lib/Feedback/Feedback.js

@@ -105,12 +105,12 @@ const Feedback = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     validation,
     tokens,
     variant,
-    icon,
+    showFeedbackIcon = false,
     ...rest
   } = _ref5;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Feedback', tokens, { ...variant,
     validation,
-    icon
+    icon: showFeedbackIcon
   });
   const {
     space
@@ -176,7 +176,8 @@ Feedback.propTypes = { ...selectedSystemPropTypes,
   /** @ignore */
   id: _propTypes.default.string,
   tokens: (0, _utils.getTokensPropType)('Feedback'),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+  showFeedbackIcon: _propTypes.default.bool
 };
 var _default = Feedback;
 exports.default = _default;

package/lib/Fieldset/Fieldset.js

@@ -78,7 +78,7 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     id: feedbackId,
     title: feedback,
     validation: validation,
-    icon: showIcon
+    showFeedbackIcon: showIcon
   }); // 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

package/lib/List/PressableListItemBase.js

@@ -132,6 +132,7 @@ const staticStyles = _StyleSheet.default.create({
 PressableListItemBase.propTypes = { ..._utils.withLinkRouter.propTypes,
   href: _propTypes.default.string,
   onPress: _propTypes.default.func,
+  // eslint-disable-next-line react/forbid-prop-types
   tokens: _propTypes.default.any,
   icon: _propTypes.default.elementType,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),

package/lib/Radio/RadioGroup.js

@@ -131,6 +131,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       id,
       onChange: itemOnChange,
       ref: itemRef,
+      description,
       ...itemRest
     } = _ref2;
     const radioId = id || "Radio[".concat(index, "]");
@@ -142,7 +143,6 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
-      error: validation === 'error',
       ref: itemRef,
       id: radioId,
       checked: isChecked,
@@ -152,6 +152,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       name: inputGroupName,
       tokens: radioTokens,
       variant: variant,
+      description: description,
       ...selectItemProps(itemRest)
     }, radioId);
   });
@@ -167,6 +168,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    showIcon: true,
+    showErrorBorder: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(radios, {
@@ -205,6 +208,7 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
     onChange: _propTypes.default.func,
+    description: _propTypes.default.string,
     ref: _airbnbPropTypes.default.ref()
   })),
 

package/lib-module/ActivityIndicator/Spinner.js

@@ -26,11 +26,13 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     reduceMotionEnabled
   } = useA11yInfo();
+  const reduceMotion = reduceMotionEnabled || isStatic;
   return /*#__PURE__*/_jsx("svg", {
     ref: ref,
     width: "".concat(size, "px"),
@@ -40,7 +42,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
     role: "progressbar",
     "aria-busy": true,
     children: /*#__PURE__*/_jsxs("g", {
-      children: [reduceMotionEnabled ? null : /*#__PURE__*/_jsx("animateTransform", {
+      children: [reduceMotion ? null : /*#__PURE__*/_jsx("animateTransform", {
         attributeName: "transform",
         type: "rotate",
         values: "-180 24 24;".concat(360 + MIN_STROKE_ANGLE - 180, " 24 24"),
@@ -53,9 +55,9 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
         cx: "24",
         cy: "24",
         r: "20",
-        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+        strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
-        children: reduceMotionEnabled ? null : /*#__PURE__*/_jsxs(_Fragment, {
+        children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",
             values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -13,7 +13,8 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
     size,
     color,
     thickness,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     current: timer
@@ -21,6 +22,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     reduceMotionEnabled
   } = useA11yInfo();
+  const reduceMotion = reduceMotionEnabled || isStatic;
   React.useLayoutEffect(() => {
     const loop = Animated.timing(timer, {
       duration: DURATION,
@@ -30,16 +32,16 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
       toValue: 1,
       isInteraction: false
     });
-    if (!reduceMotionEnabled) Animated.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotionEnabled]);
+    if (!reduceMotion) Animated.loop(loop).start();else loop.stop();
+  }, [timer, reduceMotion]);
   const frames = 60 * DURATION / 1000;
   const easing = Easing.bezier(...BEZIER);
   const containerStyle = {
     width: size,
-    height: size / (reduceMotionEnabled ? 1.5 : 2),
+    height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   };
-  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+  const animationFrequency = reduceMotion ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
 
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
@@ -78,7 +80,7 @@ const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
           height: size
         };
 
-        if (!reduceMotionEnabled) {
+        if (!reduceMotion) {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],

package/lib-module/ActivityIndicator/index.js

@@ -14,7 +14,8 @@ const ActivityIndicator = _ref => {
   let {
     variant,
     tokens,
-    label
+    label,
+    isStatic = false
   } = _ref;
   const {
     size,
@@ -25,7 +26,8 @@ const ActivityIndicator = _ref => {
     size: size,
     color: color,
     thickness: thickness,
-    label: label
+    label: label,
+    isStatic: isStatic
   });
 };
 
@@ -36,6 +38,11 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
 };
 export default ActivityIndicator;

package/lib-module/ActivityIndicator/shared.js

@@ -8,5 +8,6 @@ export const propTypes = {
   color: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired
+  thickness: PropTypes.number.isRequired,
+  isStatic: PropTypes.bool
 };

package/lib-module/Checkbox/CheckboxGroup.js

@@ -139,6 +139,8 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    showIcon: true,
+    showErrorBorder: true,
     ...selectProps(rest),
     children: getStackedContent(checkboxes, {
       space,

package/lib-module/Feedback/Feedback.js

@@ -84,12 +84,12 @@ const Feedback = /*#__PURE__*/forwardRef((_ref5, ref) => {
     validation,
     tokens,
     variant,
-    icon,
+    showFeedbackIcon = false,
     ...rest
   } = _ref5;
   const themeTokens = useThemeTokens('Feedback', tokens, { ...variant,
     validation,
-    icon
+    icon: showFeedbackIcon
   });
   const {
     space
@@ -155,7 +155,8 @@ Feedback.propTypes = { ...selectedSystemPropTypes,
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  showFeedbackIcon: PropTypes.bool
 };
 export default Feedback;
 const staticStyles = StyleSheet.create({

package/lib-module/Fieldset/Fieldset.js

@@ -59,7 +59,7 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     id: feedbackId,
     title: feedback,
     validation: validation,
-    icon: showIcon
+    showFeedbackIcon: showIcon
   }); // 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

package/lib-module/List/PressableListItemBase.js

@@ -105,6 +105,7 @@ const staticStyles = StyleSheet.create({
 PressableListItemBase.propTypes = { ...withLinkRouter.propTypes,
   href: PropTypes.string,
   onPress: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
   tokens: PropTypes.any,
   icon: PropTypes.elementType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

package/lib-module/Radio/RadioGroup.js

@@ -108,6 +108,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       id,
       onChange: itemOnChange,
       ref: itemRef,
+      description,
       ...itemRest
     } = _ref2;
     const radioId = id || "Radio[".concat(index, "]");
@@ -119,7 +120,6 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     };
 
     return /*#__PURE__*/_jsx(Radio, {
-      error: validation === 'error',
       ref: itemRef,
       id: radioId,
       checked: isChecked,
@@ -129,6 +129,7 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
       name: inputGroupName,
       tokens: radioTokens,
       variant: variant,
+      description: description,
       ...selectItemProps(itemRest)
     }, radioId);
   });
@@ -144,6 +145,8 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    showIcon: true,
+    showErrorBorder: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: getStackedContent(radios, {
@@ -182,6 +185,7 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
     label: PropTypes.string,
     id: PropTypes.string,
     onChange: PropTypes.func,
+    description: PropTypes.string,
     ref: ABBPropTypes.ref()
   })),
 

package/package.json

@@ -70,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.22.0"
+  "version": "1.24.0"
 }

package/src/ActivityIndicator/Spinner.jsx

@@ -21,8 +21,9 @@ const bezierProps = {
 }
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
+const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { reduceMotionEnabled } = useA11yInfo()
+  const reduceMotion = reduceMotionEnabled || isStatic
   return (
     <svg
       ref={ref}
@@ -34,7 +35,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       aria-busy={true}
     >
       <g>
-        {reduceMotionEnabled ? null : (
+        {reduceMotion ? null : (
           <animateTransform
             attributeName="transform"
             type="rotate"
@@ -50,12 +51,10 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
           cx="24"
           cy="24"
           r="20"
-          strokeDasharray={
-            reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]
-          }
+          strokeDasharray={reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE]}
           strokeDashoffset={0}
         >
-          {reduceMotionEnabled ? null : (
+          {reduceMotion ? null : (
             <>
               <animate
                 attributeName="stroke-dashoffset"

package/src/ActivityIndicator/Spinner.native.jsx

@@ -6,9 +6,10 @@ import { useA11yInfo } from '../A11yInfoProvider'
 const ea = MIN_EMPTY_ANGLE / 2
 const sa = MIN_STROKE_ANGLE / 2
 
-const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
+const Spinner = forwardRef(({ size, color, thickness, label, isStatic = false }, ref) => {
   const { current: timer } = React.useRef(new Animated.Value(0))
   const { reduceMotionEnabled } = useA11yInfo()
+  const reduceMotion = reduceMotionEnabled || isStatic
 
   React.useLayoutEffect(() => {
     const loop = Animated.timing(timer, {
@@ -20,18 +21,18 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
       isInteraction: false
     })
 
-    if (!reduceMotionEnabled) Animated.loop(loop).start()
+    if (!reduceMotion) Animated.loop(loop).start()
     else loop.stop()
-  }, [timer, reduceMotionEnabled])
+  }, [timer, reduceMotion])
 
   const frames = (60 * DURATION) / 1000
   const easing = Easing.bezier(...BEZIER)
   const containerStyle = {
     width: size,
-    height: size / (reduceMotionEnabled ? 1.5 : 2),
+    height: size / (reduceMotion ? 1.5 : 2),
     overflow: 'hidden'
   }
-  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]
+  const animationFrequency = reduceMotion ? [0] : [0, 1]
 
   // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
   return (
@@ -72,7 +73,7 @@ const Spinner = forwardRef(({ size, color, thickness, label }, ref) => {
             height: size
           }
 
-          if (!reduceMotionEnabled) {
+          if (!reduceMotion) {
             layerStyle.transform = [
               {
                 rotate: timer.interpolate({

package/src/ActivityIndicator/index.jsx

@@ -9,9 +9,11 @@ import Spinner from './Spinner'
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = ({ variant, tokens, label }) => {
+const ActivityIndicator = ({ variant, tokens, label, isStatic = false }) => {
   const { size, color, thickness } = useThemeTokens('ActivityIndicator', tokens, variant)
-  return <Spinner size={size} color={color} thickness={thickness} label={label} />
+  return (
+    <Spinner size={size} color={color} thickness={thickness} label={label} isStatic={isStatic} />
+  )
 }
 
 ActivityIndicator.propTypes = {
@@ -20,7 +22,11 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  /**
+   * If true, it should render a static spinner
+   */
+  isStatic: PropTypes.bool
 }
 
 export default ActivityIndicator

package/src/ActivityIndicator/shared.js

@@ -10,5 +10,6 @@ export const propTypes = {
   color: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired
+  thickness: PropTypes.number.isRequired,
+  isStatic: PropTypes.bool
 }

package/src/Checkbox/CheckboxGroup.jsx

@@ -152,6 +152,8 @@ const CheckboxGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
+        showIcon
+        showErrorBorder
         {...selectProps(rest)}
       >
         {getStackedContent(checkboxes, { space, direction: 'column' })}

package/src/Feedback/Feedback.jsx

@@ -56,8 +56,15 @@ const selectIconContainerStyles = ({ iconGap }) => ({
  * All accessibility props set on this component will be applied to the outer container.
  */
 const Feedback = forwardRef(
-  ({ title, children, id, validation, tokens, variant, icon, ...rest }, ref) => {
-    const themeTokens = useThemeTokens('Feedback', tokens, { ...variant, validation, icon })
+  (
+    { title, children, id, validation, tokens, variant, showFeedbackIcon = false, ...rest },
+    ref
+  ) => {
+    const themeTokens = useThemeTokens('Feedback', tokens, {
+      ...variant,
+      validation,
+      icon: showFeedbackIcon
+    })
     const { space } = themeTokens
 
     const { icon: IconComponent } = themeTokens
@@ -114,7 +121,8 @@ Feedback.propTypes = {
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  showFeedbackIcon: PropTypes.bool
 }
 
 export default Feedback

package/src/Fieldset/Fieldset.jsx

@@ -55,7 +55,12 @@ const Fieldset = forwardRef(
       />
     )
     const feedbackContent = feedback && (
-      <Feedback id={feedbackId} title={feedback} validation={validation} icon={showIcon} />
+      <Feedback
+        id={feedbackId}
+        title={feedback}
+        validation={validation}
+        showFeedbackIcon={showIcon}
+      />
     )
 
     // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,

package/src/List/PressableListItemBase.jsx

@@ -91,6 +91,7 @@ PressableListItemBase.propTypes = {
   ...withLinkRouter.propTypes,
   href: PropTypes.string,
   onPress: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
   tokens: PropTypes.any,
   icon: PropTypes.elementType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),

package/src/Radio/RadioGroup.jsx

@@ -116,17 +116,15 @@ const RadioGroup = forwardRef(
     }
 
     const radios = items.map(
-      ({ label, id, onChange: itemOnChange, ref: itemRef, ...itemRest }, index) => {
+      ({ label, id, onChange: itemOnChange, ref: itemRef, description, ...itemRest }, index) => {
         const radioId = id || `Radio[${index}]`
         const isChecked = currentValue === radioId
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
           if (newCheckedState) setValue(radioId, event)
         }
-
         return (
           <Radio
-            error={validation === 'error'}
             ref={itemRef}
             key={radioId}
             id={radioId}
@@ -137,6 +135,7 @@ const RadioGroup = forwardRef(
             name={inputGroupName}
             tokens={radioTokens}
             variant={variant}
+            description={description}
             {...selectItemProps(itemRest)}
           />
         )
@@ -156,6 +155,8 @@ const RadioGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
+        showIcon
+        showErrorBorder
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >
@@ -193,6 +194,7 @@ RadioGroup.propTypes = {
       label: PropTypes.string,
       id: PropTypes.string,
       onChange: PropTypes.func,
+      description: PropTypes.string,
       ref: ABBPropTypes.ref()
     })
   ),