@telus-uds/components-base 1.23.0 → 1.24.1

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 14 Dec 2022 01:42:49 GMT and should not be manually modified.
+This log was last generated on Thu, 05 Jan 2023 03:41:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.24.1
+
+Thu, 05 Jan 2023 03:41:27 GMT
+
+### Patches
+
+- fix the list with headings in docs and storybook (mauricio.batresmontejo@telus.com)
+
+## 1.24.0
+
+Thu, 15 Dec 2022 23:08:41 GMT
+
+### Minor changes
+
+- Add `isStatic` prop to `ActivityIndicator` and `Spinner` (shahzaibkhalidmalik@outlook.com)
+
 ## 1.23.0
 
-Wed, 14 Dec 2022 01:42:49 GMT
+Wed, 14 Dec 2022 01:46:10 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,17 +3463,6 @@
       "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"

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/Feedback/Feedback.js

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

package/lib/Fieldset/Fieldset.js

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

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 
+var _Typography = _interopRequireDefault(require("../Typography"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -29,14 +31,20 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     tokens,
     variant,
     children,
+    title,
     ...listItemProps
   } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ListItemBase.default, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: children
+    children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: {
+        size: 'h4'
+      },
+      children: title
+    }), children]
   });
 });
 ListItem.displayName = 'ListItem';

package/lib/Radio/RadioGroup.js

@@ -168,8 +168,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    showIcon: true,
     showErrorBorder: true,
+    showIcon: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(radios, {

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/Feedback/Feedback.js

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

package/lib-module/Fieldset/Fieldset.js

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

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
 import ListItemBase from './ListItemBase';
+import Typography from '../Typography';
 import { useThemeTokens } from '../ThemeProvider';
 import { variantProp } from '../utils';
 /**
@@ -7,19 +8,26 @@ import { variantProp } from '../utils';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
     children,
+    title,
     ...listItemProps
   } = _ref;
   const themeTokens = useThemeTokens('List', tokens, variant);
-  return /*#__PURE__*/_jsx(ListItemBase, {
+  return /*#__PURE__*/_jsxs(ListItemBase, {
     tokens: themeTokens,
     ref: ref,
     ...listItemProps,
-    children: children
+    children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
+      variant: {
+        size: 'h4'
+      },
+      children: title
+    }), children]
   });
 });
 ListItem.displayName = 'ListItem';

package/lib-module/Radio/RadioGroup.js

@@ -145,8 +145,8 @@ const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
-    showIcon: true,
     showErrorBorder: true,
+    showIcon: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: getStackedContent(radios, {

package/package.json

@@ -70,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.23.0"
+  "version": "1.24.1"
 }

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/Feedback/Feedback.jsx

@@ -56,14 +56,10 @@ 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, showFeedbackIcon = false, ...rest },
-    ref
-  ) => {
+  ({ title, children, id, validation, tokens, variant, ...rest }, ref) => {
     const themeTokens = useThemeTokens('Feedback', tokens, {
       ...variant,
-      validation,
-      icon: showFeedbackIcon
+      validation
     })
     const { space } = themeTokens
 
@@ -121,8 +117,7 @@ Feedback.propTypes = {
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType,
-  showFeedbackIcon: PropTypes.bool
+  variant: variantProp.propType
 }
 
 export default Feedback

package/src/Fieldset/Fieldset.jsx

@@ -59,7 +59,7 @@ const Fieldset = forwardRef(
         id={feedbackId}
         title={feedback}
         validation={validation}
-        showFeedbackIcon={showIcon}
+        variant={{ icon: showIcon }}
       />
     )
 

package/src/List/ListItem.jsx

@@ -1,16 +1,18 @@
 import React, { forwardRef } from 'react'
 
 import ListItemBase from './ListItemBase'
+import Typography from '../Typography'
 import { useThemeTokens } from '../ThemeProvider'
 import { variantProp } from '../utils'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = forwardRef(({ tokens, variant, children, ...listItemProps }, ref) => {
+const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
     <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
+      {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
       {children}
     </ListItemBase>
   )

package/src/Radio/RadioGroup.jsx

@@ -155,8 +155,8 @@ const RadioGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
-        showIcon
         showErrorBorder
+        showIcon
         accessibilityRole="radiogroup"
         {...selectProps(rest)}
       >