@telus-uds/components-base 1.59.2 → 1.60.0

package/lib/Tooltip/shared.js

@@ -32,6 +32,11 @@ const propTypes = {
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
   position: _propTypes.default.oneOf(['auto', 'above', 'right', 'below', 'left']),
+
+  /**
+   * Display tooltip icon button as an inline element.
+   */
+  inline: _propTypes.default.bool,
   tokens: (0, _utils.getTokensPropType)('Tooltip'),
   variant: _utils.variantProp.propType
 };

package/lib-module/Button/ButtonLink.js

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props';
@@ -41,6 +42,8 @@ ButtonLink.displayName = 'ButtonLink';
 ButtonLink.propTypes = { ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
-  children: textAndA11yText
+  children: textAndA11yText,
+  dataSet: PropTypes.object,
+  accessibilityRole: PropTypes.string
 };
 export default ButtonLink;

package/lib-module/ExpandCollapse/Panel.js

@@ -159,6 +159,13 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref4, ref) => {
       ...focusabilityProps,
       children: /*#__PURE__*/_jsx(View, {
         onLayout: onContainerLayout,
+        style: { ...Platform.select({
+            default: {
+              flex: 1
+            },
+            web: {}
+          })
+        },
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
           children: children

package/lib-module/IconButton/IconButton.js

@@ -106,6 +106,7 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     icon: IconComponent,
     href,
     hrefAttrs,
+    testID,
     accessibilityRole = href ? 'link' : 'button',
     ...rawRest
   } = _ref3;
@@ -141,6 +142,7 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     hrefAttrs: hrefAttrs,
     style: getOuterStyle,
     ...selectedProps,
+    testID: testID,
     children: pressableState => {
       const themeTokens = getTokens(resolvePressableState(pressableState));
       return /*#__PURE__*/_jsx(View, {
@@ -160,6 +162,12 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
 
+  /**
+   * A unique identifier for testing purposes.
+   * Will be added as a `data-testid` attribute.
+   */
+  testID: PropTypes.string,
+
   /**
    * Defines the icon to be rendered
    */

package/lib-module/Link/ChevronLink.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
-import { selectTokens, getTokensPropType } from '../utils';
+import { selectTokens, getTokensPropType, linkProps } from '../utils';
 import LinkBase from './LinkBase';
 /**
  * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
@@ -18,7 +18,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens = {},
     variant,
     dataSet,
-    ...linkProps
+    ...otherlinkProps
   } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
 
@@ -41,7 +41,7 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant);
-  return /*#__PURE__*/_jsx(LinkBase, { ...linkProps,
+  return /*#__PURE__*/_jsx(LinkBase, { ...otherlinkProps,
     iconPosition: direction,
     tokens: getTokens,
     dataSet: dataSet,
@@ -51,6 +51,13 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 ChevronLink.displayName = 'ChevronLink';
 ChevronLink.propTypes = { ...LinkBase.propTypes,
+  children: PropTypes.node,
+  variant: PropTypes.exact({
+    size: PropTypes.oneOf(['large', 'small', 'micro']),
+    alternative: PropTypes.bool,
+    inverse: PropTypes.bool
+  }),
+  ...linkProps.types,
   tokens: getTokensPropType('ChevronLink', 'Link'),
 
   /**

package/lib-module/Link/LinkBase.js

@@ -210,6 +210,20 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
 LinkBase.displayName = 'LinkBase';
 LinkBase.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
+
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+
+  /**
+   * AccesibilityRole for the link base
+   */
+  accessibilityrole: PropTypes.string,
+
+  /**
+   * Children nodes that can be added
+   */
   variant: variantProp.propType,
 
   /**

package/lib-module/Link/TextButton.js

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
+import { variantProp } from '../utils';
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
  * Link but has the accessibility role of a `Button`. It should be used for actions that
@@ -30,6 +31,15 @@ const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 TextButton.displayName = 'TextButton';
 TextButton.propTypes = { ...LinkBase.propTypes,
-  onPress: PropTypes.func.isRequired
+
+  /** onPress function */
+  onPress: PropTypes.func.isRequired,
+
+  /** Children node that can be added */
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+
+  /** Accesibility role for TextButton */
+  accessibilityRole: PropTypes.string
 };
 export default TextButton;

package/lib-module/Pagination/dictionary.js

@@ -8,11 +8,11 @@ export default {
     nextText: 'Next'
   },
   fr: {
-    goToLabel: 'Aller au page n°',
+    goToLabel: 'Aller à la page n°',
     currentLabel: '(page actuelle)',
-    previousLabel: 'Aller au page précédent',
+    previousLabel: 'Aller à la page précédente',
     previousText: 'Précédent',
-    nextLabel: 'Aller au prochain page',
+    nextLabel: 'Aller à la page suivante',
     nextText: 'Suivant'
   }
 };

package/lib-module/Progress/ProgressBarBackground.js

@@ -3,8 +3,8 @@ import ImageBackground from "react-native-web/dist/exports/ImageBackground";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { variantProp } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
-const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`;
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`;
 const ProgressBarBackground = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     variant

package/lib-module/SideNav/Item.js

@@ -116,13 +116,13 @@ Item.propTypes = { ...selectedSystemPropTypes,
   children: PropTypes.node.isRequired,
 
   /**
-   * @ignore
+   *
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: PropTypes.string,
 
   /**
-   * @ignore
+   *
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
@@ -136,17 +136,27 @@ Item.propTypes = { ...selectedSystemPropTypes,
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
 
   /**
-   * @ignore
+   *
    * Set internally in `SideNav` render function.
    */
   isActive: PropTypes.bool,
 
   /**
-   * @ignore
+   *
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
   tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+
+  /**
+   * Accesibility Role
+   */
+  accessibilityRole: PropTypes.string,
+
+  /**
+   * test ID
+   */
+  testID: PropTypes.number
 };
 export default Item;

package/lib-module/Tags/Tags.js

@@ -252,6 +252,11 @@ Tags.propTypes = { ...selectedSystemPropTypes,
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: PropTypes.arrayOf(PropTypes.string)
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * AccesibilityRole for the Tags
+   */
+  accessibilityRole: PropTypes.string
 };
 export default Tags;

package/lib-module/Tooltip/Tooltip.js

@@ -125,6 +125,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    inline = false,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -219,7 +220,11 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     right: 10
   } : undefined;
   return /*#__PURE__*/_jsxs(View, {
-    style: staticStyles.container,
+    style: [staticStyles.container, Platform.select({
+      web: {
+        display: inline ? 'inline-block' : 'flex'
+      }
+    })],
     ...selectProps(rest),
     ref: ref,
     children: [/*#__PURE__*/_jsx(Pressable, {

package/lib-module/Tooltip/Tooltip.native.js

@@ -152,6 +152,7 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    inline = false,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = useState(false);
@@ -269,7 +270,11 @@ const Tooltip = /*#__PURE__*/forwardRef((_ref6, ref) => {
     right: 10
   } : undefined;
   return /*#__PURE__*/_jsxs(View, {
-    style: staticStyles.container,
+    style: [staticStyles.container, Platform.select({
+      web: {
+        display: inline ? 'inline-block' : 'flex'
+      }
+    })],
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Pressable, {
       onPress: toggleIsOpen,

package/lib-module/Tooltip/shared.js

@@ -21,6 +21,11 @@ const propTypes = {
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
   position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
+
+  /**
+   * Display tooltip icon button as an inline element.
+   */
+  inline: PropTypes.bool,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 };

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.41.0",
+    "@telus-uds/system-theme-tokens": "^2.41.1",
     "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.59.2"
+  "version": "1.60.0"
 }

package/src/Button/ButtonLink.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
@@ -33,7 +34,9 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
-  children: textAndA11yText
+  children: textAndA11yText,
+  dataSet: PropTypes.object,
+  accessibilityRole: PropTypes.string
 }
 
 export default ButtonLink

package/src/ExpandCollapse/Panel.jsx

@@ -157,7 +157,17 @@ const ExpandCollapsePanel = forwardRef(
           />
         )}
         <Animated.View ref={animatedRef} style={animatedStyles} {...focusabilityProps}>
-          <View onLayout={onContainerLayout}>
+          <View
+            onLayout={onContainerLayout}
+            style={{
+              ...Platform.select({
+                default: {
+                  flex: 1
+                },
+                web: {}
+              })
+            }}
+          >
             <View style={selectContainerStyles(themeTokens)}>{children}</View>
           </View>
         </Animated.View>

package/src/IconButton/IconButton.jsx

@@ -107,6 +107,7 @@ const IconButton = forwardRef(
       icon: IconComponent,
       href,
       hrefAttrs,
+      testID,
       accessibilityRole = href ? 'link' : 'button',
       ...rawRest
     },
@@ -133,6 +134,7 @@ const IconButton = forwardRef(
         hrefAttrs={hrefAttrs}
         style={getOuterStyle}
         {...selectedProps}
+        testID={testID}
       >
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
@@ -157,6 +159,11 @@ IconButton.propTypes = {
   ...selectedSystemPropTypes,
   variant: variantProp.propType,
   tokens: getTokensPropType('IconButton'),
+  /**
+   * A unique identifier for testing purposes.
+   * Will be added as a `data-testid` attribute.
+   */
+  testID: PropTypes.string,
   /**
    * Defines the icon to be rendered
    */

package/src/Link/ChevronLink.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
-import { selectTokens, getTokensPropType } from '../utils'
+import { selectTokens, getTokensPropType, linkProps } from '../utils'
 import LinkBase from './LinkBase'
 
 /**
@@ -12,7 +12,7 @@ import LinkBase from './LinkBase'
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 const ChevronLink = forwardRef(
-  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...linkProps }, ref) => {
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
       const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
@@ -32,7 +32,7 @@ const ChevronLink = forwardRef(
     const getTokens = useThemeTokensCallback('Link', applyChevronTokens, variant)
     return (
       <LinkBase
-        {...linkProps}
+        {...otherlinkProps}
         iconPosition={direction}
         tokens={getTokens}
         dataSet={dataSet}
@@ -47,6 +47,13 @@ const ChevronLink = forwardRef(
 ChevronLink.displayName = 'ChevronLink'
 ChevronLink.propTypes = {
   ...LinkBase.propTypes,
+  children: PropTypes.node,
+  variant: PropTypes.exact({
+    size: PropTypes.oneOf(['large', 'small', 'micro']),
+    alternative: PropTypes.bool,
+    inverse: PropTypes.bool
+  }),
+  ...linkProps.types,
   tokens: getTokensPropType('ChevronLink', 'Link'),
   /**
    * Changes direction of chevron icon

package/src/Link/LinkBase.jsx

@@ -197,6 +197,17 @@ LinkBase.displayName = 'LinkBase'
 LinkBase.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
+  /**
+   * href for the Link
+   */
+  href: PropTypes.string,
+  /**
+   * AccesibilityRole for the link base
+   */
+  accessibilityrole: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
   variant: variantProp.propType,
   /**
    * Optional variant that may be passed down to the link's icon if there is one

package/src/Link/TextButton.jsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
+import { variantProp } from '../utils'
 
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
@@ -29,7 +29,13 @@ TextButton.displayName = 'TextButton'
 
 TextButton.propTypes = {
   ...LinkBase.propTypes,
-  onPress: PropTypes.func.isRequired
+  /** onPress function */
+  onPress: PropTypes.func.isRequired,
+  /** Children node that can be added */
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  /** Accesibility role for TextButton */
+  accessibilityRole: PropTypes.string
 }
 
 export default TextButton

package/src/Pagination/dictionary.js

@@ -8,11 +8,11 @@ export default {
     nextText: 'Next'
   },
   fr: {
-    goToLabel: 'Aller au page n°',
+    goToLabel: 'Aller à la page n°',
     currentLabel: '(page actuelle)',
-    previousLabel: 'Aller au page précédent',
+    previousLabel: 'Aller à la page précédente',
     previousText: 'Précédent',
-    nextLabel: 'Aller au prochain page',
+    nextLabel: 'Aller à la page suivante',
     nextText: 'Suivant'
   }
 }

package/src/Progress/ProgressBarBackground.jsx

@@ -3,8 +3,8 @@ import { ImageBackground, StyleSheet } from 'react-native'
 
 import { variantProp } from '../utils'
 
-const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`
-const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`
 const ProgressBarBackground = forwardRef(({ variant }, ref) => {
   let source = null
   if (variant?.inactive) {

package/src/SideNav/Item.jsx

@@ -111,12 +111,12 @@ Item.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * @ignore
+   *
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: PropTypes.string,
   /**
-   * @ignore
+   *
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: PropTypes.string,
@@ -128,17 +128,25 @@ Item.propTypes = {
    */
   hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
   /**
-   * @ignore
+   *
    * Set internally in `SideNav` render function.
    */
   isActive: PropTypes.bool,
   /**
-   * @ignore
+   *
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: PropTypes.bool,
   tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Accesibility Role
+   */
+  accessibilityRole: PropTypes.string,
+  /**
+   * test ID
+   */
+  testID: PropTypes.number
 }
 
 export default Item

package/src/Tags/Tags.jsx

@@ -249,7 +249,11 @@ Tags.propTypes = {
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: PropTypes.arrayOf(PropTypes.string)
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * AccesibilityRole for the Tags
+   */
+  accessibilityRole: PropTypes.string
 }
 
 export default Tags

package/src/Tooltip/Tooltip.jsx

@@ -82,7 +82,10 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
+  (
+    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = useState(false)
     const arrowRef = useRef()
 
@@ -157,7 +160,18 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)} ref={ref}>
+      <View
+        style={[
+          staticStyles.container,
+          Platform.select({
+            web: {
+              display: inline ? 'inline-block' : 'flex'
+            }
+          })
+        ]}
+        {...selectProps(rest)}
+        ref={ref}
+      >
         <Pressable
           onPress={toggleIsOpen}
           ref={reference}

package/src/Tooltip/Tooltip.native.jsx

@@ -108,7 +108,10 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
+  (
+    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = useState(false)
 
     const controlRef = useRef()
@@ -217,7 +220,17 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)}>
+      <View
+        style={[
+          staticStyles.container,
+          Platform.select({
+            web: {
+              display: inline ? 'inline-block' : 'flex'
+            }
+          })
+        ]}
+        {...selectProps(rest)}
+      >
         <Pressable
           onPress={toggleIsOpen}
           ref={controlRef}

package/src/Tooltip/shared.js

@@ -20,6 +20,10 @@ const propTypes = {
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
   position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
+  /**
+   * Display tooltip icon button as an inline element.
+   */
+  inline: PropTypes.bool,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }