@telus-uds/components-base 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # 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 Wed, 14 Dec 2022 01:42:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.23.0
+
+Wed, 14 Dec 2022 01:42:49 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

@@ -3452,6 +3452,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 +12310,10 @@
                     "name": "func",
                     "required": false
                   },
+                  "description": {
+                    "name": "string",
+                    "required": false
+                  },
                   "ref": {
                     "name": "custom",
                     "raw": "ABBPropTypes.ref()",

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/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.23.0"
 }

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()
     })
   ),