@telus-uds/components-base 1.2.0 → 1.4.0

package/src/StepTracker/Step.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
-
 import StackView from '../StackView'
 import Icon from '../Icon'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { applyTextStyles } from '../ThemeProvider'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectCompletedIconTokens = ({ completedIconColor, completedIconSize }) => ({
   size: completedIconSize,
   color: completedIconColor
@@ -117,7 +118,7 @@ const getStepTestID = (isCompleted, isCurrent) => {
 /**
  * A single step of a StepTracker.
  */
-const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens }) => {
+const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens, ...rest }) => {
   const { completedIcon, showStepLabel, showStepName, ...themeTokens } = tokens
   const isFirst = stepIndex === 0
   const isLast = stepIndex === stepCount - 1
@@ -131,7 +132,8 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens })
       tokens={{ alignItems: 'stretch', flexGrow: 1 }}
       accessibilityLabel={label}
       accessibilityLevel={2}
-      accessibilityCurrent={status === stepIndex ? 'true' : 'false'}
+      accessibilityCurrent={status === stepIndex}
+      {...selectProps(rest)}
     >
       <StackView direction="row" space={0} tokens={{ alignItems: 'center', flexGrow: 0 }}>
         <View
@@ -178,6 +180,7 @@ const Step = ({ label, name, status = 0, stepCount = 0, stepIndex = 0, tokens })
 }
 
 Step.propTypes = {
+  ...selectedSystemPropTypes,
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   status: PropTypes.number.isRequired,

package/src/StepTracker/StepTracker.jsx

@@ -1,17 +1,16 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { StyleSheet, Text, View } from 'react-native'
-
 import StackView from '../StackView'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import useCopy from '../utils/useCopy'
-
 import Step from './Step'
 import defaultDictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = ({
   containerPaddingBottom,
   containerPaddingLeft,
@@ -101,7 +100,7 @@ const StepTracker = forwardRef(
       .replace('%{stepCount}', steps.length)
       .replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1])
     if (!steps.length) return null
-    const accessibilityProps = {
+    const selectedProps = selectProps({
       accessibilityLabel: stepTrackerLabel,
       accessibilityLevel: 1,
       accessibilityRole: 'progressbar',
@@ -111,11 +110,11 @@ const StepTracker = forwardRef(
         now: current,
         text: steps[current]
       },
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     return (
-      <View ref={ref} style={selectContainerStyles(themeTokens)} {...accessibilityProps}>
+      <View ref={ref} style={selectContainerStyles(themeTokens)} {...selectedProps}>
         <StackView space={0}>
           <View style={staticStyles.stepsContainer}>
             {steps.map((label, index) => {
@@ -150,6 +149,7 @@ const StepTracker = forwardRef(
 StepTracker.displayName = 'StepTracker'
 
 StepTracker.propTypes = {
+  ...selectedSystemPropTypes,
   current: PropTypes.number,
   copy: PropTypes.oneOf(['en', 'fr']),
   dictionary: PropTypes.shape({

package/src/Tabs/Tabs.jsx

@@ -1,16 +1,26 @@
 import React, { forwardRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
-
 import { useThemeTokens } from '../ThemeProvider'
 import StackView from '../StackView'
-import { getTokensPropType, variantProp, useHash, useInputValue, withLinkRouter } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useHash,
+  useInputValue,
+  variantProp,
+  viewProps,
+  withLinkRouter
+} from '../utils'
 import HorizontalScroll, {
   horizontalScrollUtils,
   HorizontalScrollButton
 } from '../HorizontalScroll'
 import TabsItem from './TabsItem'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const { selectHorizontalScrollTokens, useItemPositions } = horizontalScrollUtils
 
 /**
@@ -29,7 +39,8 @@ const Tabs = forwardRef(
       onChange,
       items = [],
       LinkRouter,
-      linkRouterProps
+      linkRouterProps,
+      ...rest
     },
     ref
   ) => {
@@ -58,6 +69,7 @@ const Tabs = forwardRef(
         tokens={selectHorizontalScrollTokens(themeTokens)}
         scrollButtonTokens={scrollButtonTokens}
         accessibilityRole="tablist"
+        {...selectProps(rest)}
       >
         <StackView space={space} direction="row">
           {items.map(
@@ -102,6 +114,7 @@ const Tabs = forwardRef(
 Tabs.displayName = 'Tabs'
 
 Tabs.propTypes = {
+  ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
   items: PropTypes.arrayOf(
     PropTypes.shape({

package/src/Tabs/TabsItem.jsx

@@ -4,18 +4,22 @@ import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import {
+  a11yProps,
+  clickProps,
+  getTokensPropType,
+  linkProps,
   resolvePressableTokens,
+  selectSystemProps,
   selectTokens,
   variantProp,
-  getTokensPropType,
-  linkProps,
-  a11yProps,
-  clickProps,
+  viewProps,
   withLinkRouter
 } from '../utils'
 import Spacer from '../Spacer'
 import { horizontalScrollUtils } from '../HorizontalScroll'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const { itemPositionsPropType, getItemPositionLayoutHandler } = horizontalScrollUtils
 
 const selectHighlightBarStyles = ({
@@ -115,11 +119,11 @@ const TabsItem = forwardRef(
           }
         : undefined
 
-    const a11y = {
+    const selectedProps = selectProps({
       accessibilityRole,
       accessibilityState,
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     useEffect(() => {
       // If this is selected while off-screen, scroll it into view
@@ -145,7 +149,7 @@ const TabsItem = forwardRef(
         href={href}
         style={getPressableStyle}
         onLayout={handleLayout}
-        {...a11y}
+        {...selectedProps}
       >
         {(pressableState) => {
           const { space, textAlign, ...themeTokens } = resolveTokens(pressableState)
@@ -185,7 +189,7 @@ const TabsItem = forwardRef(
 TabsItem.displayName = 'TabsItem'
 
 TabsItem.propTypes = {
-  ...a11yProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('TabsItem'),
   variant: variantProp.propType,
   onPress: PropTypes.func,

package/src/Tags/Tags.jsx

@@ -10,14 +10,18 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  getTokensPropType,
   pressProps,
+  selectSystemProps,
+  selectTokens,
   variantProp,
-  getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+  viewProps
+} from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
 const selectIconTextTokens = ({
   icon,
   iconPosition,
@@ -85,14 +89,20 @@ const Tags = forwardRef(
       readOnly
     })
 
-    const a11y = a11yProps.select({
+    const selectedProps = selectProps({
       accessibilityRole,
       ...rest
     })
     const itemA11yRole = 'checkbox'
 
     return (
-      <StackWrap ref={ref} {...a11y} space={space} direction={direction} tokens={stackTokens}>
+      <StackWrap
+        ref={ref}
+        {...selectedProps}
+        space={space}
+        direction={direction}
+        tokens={stackTokens}
+      >
         {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
           const isSelected = currentValues.includes(id)
 
@@ -161,8 +171,7 @@ const Tags = forwardRef(
 Tags.displayName = 'Tags'
 
 Tags.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Tags'),
   variant: variantProp.propType,
   /**

package/src/TextInput/TextArea.jsx

@@ -1,13 +1,25 @@
 import React, { forwardRef, useState } from 'react'
 
 import { Platform } from 'react-native'
-import { getTokensPropType, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  inputSupportsProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 import InputSupports from '../InputSupports'
 import TextInputBase from './TextInputBase'
 import { useThemeTokens } from '../ThemeProvider'
-import inputSupportProps from '../InputSupports/propTypes'
 import textInputPropTypes from './propTypes'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  inputSupportsProps,
+  viewProps
+])
+
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -32,7 +44,7 @@ import textInputPropTypes from './propTypes'
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) => {
+const TextArea = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   const themeTokens = useThemeTokens('TextArea', tokens, variant)
   const [inputHeight, setInputHeight] = useState()
 
@@ -48,10 +60,10 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) =
     }
   }
 
-  const { props: supportsProps, rest } = inputSupportProps.select(remainingProps)
+  const { props: supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
-    ...rest,
+    ...selectedProps,
     variant: { ...variant, validation: supportsProps.validation },
     multiline: true,
     onContentSizeChange: onHeightChange,
@@ -61,8 +73,8 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) =
 
   return (
     <InputSupports {...supportsProps}>
-      {({ a11yProps, inputId }) => (
-        <TextInputBase ref={ref} {...inputProps} {...a11yProps} nativeID={inputId} />
+      {({ inputId, ...props }) => (
+        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
       )}
     </InputSupports>
   )
@@ -70,7 +82,7 @@ const TextArea = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) =
 TextArea.displayName = 'TextArea'
 
 TextArea.propTypes = {
-  ...inputSupportProps.types,
+  ...selectedSystemPropTypes,
   ...textInputPropTypes,
   tokens: getTokensPropType('TextArea', 'TextInput'), // TODO: support both TextArea and TextInput tokens
   variant: variantProp.propType

package/src/TextInput/TextInput.jsx

@@ -1,11 +1,23 @@
 import React, { forwardRef } from 'react'
 
-import { getTokensPropType, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  inputSupportsProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 import InputSupports from '../InputSupports'
 import TextInputBase from './TextInputBase'
-import inputSupportProps from '../InputSupports/propTypes'
 import textInputPropTypes from './propTypes'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  inputSupportsProps,
+  viewProps
+])
+
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -24,19 +36,19 @@ import textInputPropTypes from './propTypes'
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref) => {
-  const { props: supportsProps, rest } = inputSupportProps.select(remainingProps)
+const TextInput = forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
+  const { props: supportsProps, ...selectedProps } = selectProps(rest)
 
   const inputProps = {
-    ...rest,
+    ...selectedProps,
     tokens,
     variant: { ...variant, validation: supportsProps.validation }
   }
 
   return (
     <InputSupports {...supportsProps}>
-      {({ a11yProps, inputId }) => (
-        <TextInputBase ref={ref} {...inputProps} {...a11yProps} nativeID={inputId} />
+      {({ inputId, ...props }) => (
+        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
       )}
     </InputSupports>
   )
@@ -44,7 +56,7 @@ const TextInput = forwardRef(({ tokens, variant = {}, ...remainingProps }, ref)
 TextInput.displayName = 'TextInput'
 
 TextInput.propTypes = {
-  ...inputSupportProps.types,
+  ...selectedSystemPropTypes,
   ...textInputPropTypes,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType

package/src/TextInput/TextInputBase.jsx

@@ -3,7 +3,16 @@ import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-
 
 import PropTypes from 'prop-types'
 import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useInputValue,
+  variantProp,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectInputStyles = (
   {
@@ -114,7 +123,7 @@ const TextInputBase = forwardRef(
       onMouseOut,
       tokens,
       variant = {},
-      ...remainingProps
+      ...rest
     },
     ref
   ) => {
@@ -158,7 +167,7 @@ const TextInputBase = forwardRef(
     const { icon: IconComponent } = themeTokens
 
     const inputProps = {
-      ...remainingProps,
+      ...selectProps(rest),
       editable: !inactive,
       onFocus: handleFocus,
       onBlur: handleBlur,
@@ -191,6 +200,7 @@ const TextInputBase = forwardRef(
 TextInputBase.displayName = 'TextInputBase'
 
 TextInputBase.propTypes = {
+  ...selectedSystemPropTypes,
   value: PropTypes.string,
   height: PropTypes.number,
   initialValue: PropTypes.string,

package/src/ThemeProvider/useThemeTokens.js

@@ -2,9 +2,9 @@ import { useCallback } from 'react'
 import useTheme from './useTheme'
 import { getComponentTheme, getThemeTokens, resolveThemeTokens, mergeAppearances } from './utils'
 /**
- * @typedef {import('../utils/propTypes.js').AppearanceSet} AppearanceSet
- * @typedef {import('../utils/propTypes.js').TokensProp} TokensProp
- * @typedef {import('../utils/propTypes.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
  */
 
 /**

package/src/ThemeProvider/utils/theme-tokens.js

@@ -3,9 +3,9 @@ import semVerSatisfies from 'semver/functions/satisfies'
 import pkg from '../../../package.json'
 
 /**
- * @typedef {import('../../utils/propTypes.js').AppearanceSet} AppearanceSet
- * @typedef {import('../../utils/propTypes.js').TokensProp} TokensProp
- * @typedef {import('../../utils/propTypes.js').TokensSet} TokensSet
+ * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
+ * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../../utils/props/tokens.js').TokensSet} TokensSet
  */
 
 /**

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -8,13 +8,17 @@ import StackView from '../StackView'
 import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider'
 import {
   a11yProps,
+  getTokensPropType,
+  selectTokens,
   pressProps,
+  selectSystemProps,
+  useUniqueId,
   variantProp,
-  getTokensPropType,
-  selectTokens
-} from '../utils/propTypes'
+  viewProps
+} from '../utils'
 import { useInputValue } from '../utils/input'
-import { useUniqueId } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
 
 const selectButtonTokens = (tokens) =>
   selectTokens('Button', {
@@ -85,7 +89,8 @@ const ToggleSwitch = forwardRef(
       tooltip,
       variant,
       accessibilityRole = 'switch',
-      accessibilityLabel = label
+      accessibilityLabel = label,
+      ...rest
     },
     ref
   ) => {
@@ -125,6 +130,7 @@ const ToggleSwitch = forwardRef(
           accessibilityRole={accessibilityRole}
           accessibilityState={{ checked: currentValue }}
           onPress={handlePress}
+          {...selectProps(rest)}
         >
           {(buttonState) => {
             const stateTokens = getTokens(buttonState)
@@ -157,8 +163,7 @@ const ToggleSwitch = forwardRef(
 ToggleSwitch.displayName = 'ToggleSwitch'
 
 ToggleSwitch.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ToggleSwitch'),
   variant: variantProp.propType,
   /**

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -8,9 +8,18 @@ import Fieldset from '../Fieldset'
 import { getStackedContent } from '../StackView'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
-import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/propTypes'
+import {
+  a11yProps,
+  getTokensPropType,
+  pressProps,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils/props'
 import { useMultipleInputValues } from '../utils/input'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+
 const ToggleSwitchGroup = forwardRef(
   (
     {
@@ -51,11 +60,11 @@ const ToggleSwitchGroup = forwardRef(
       readOnly
     })
 
-    const a11y = a11yProps.select({
+    const selectedProps = selectProps({
       accessibilityRole,
       ...rest
     })
-    const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
+    const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch'
 
     const toggleSwitches = items.map(
       (
@@ -111,7 +120,7 @@ const ToggleSwitchGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
-        {...a11y}
+        {...selectedProps}
       >
         {getStackedContent(toggleSwitches, { space, direction: 'column' })}
       </Fieldset>
@@ -121,8 +130,7 @@ const ToggleSwitchGroup = forwardRef(
 ToggleSwitchGroup.displayName = 'ToggleSwitchGroup'
 
 ToggleSwitchGroup.propTypes = {
-  ...a11yProps.propTypes,
-  ...pressProps.propTypes,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('ToggleSwitchGroup'),
   variant: variantProp.propType,
   /**

package/src/Tooltip/Tooltip.jsx

@@ -3,13 +3,22 @@ import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-n
 
 import PropTypes from 'prop-types'
 import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, selectTokens, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils'
 import Backdrop from './Backdrop'
 import getTooltipPosition from './getTooltipPosition'
 import TooltipButton from '../TooltipButton'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectTooltipStyles = ({
   backgroundColor,
   paddingTop,
@@ -100,7 +109,7 @@ 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 }, ref) => {
+  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isOpen, setIsOpen] = useState(false)
 
     const controlRef = useRef()
@@ -209,7 +218,7 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container}>
+      <View style={staticStyles.container} {...selectProps(rest)}>
         <Pressable
           onPress={toggleIsOpen}
           ref={controlRef}
@@ -256,6 +265,7 @@ const Tooltip = forwardRef(
 Tooltip.displayName = 'Tooltip'
 
 Tooltip.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.

package/src/TooltipButton/TooltipButton.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { View } from 'react-native'
-
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyOuterBorder } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import Icon from '../Icon'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectInnerContainerStyles = ({ borderRadius, width }) => ({ borderRadius, width })
 
 const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
@@ -19,13 +20,13 @@ const selectIconTokens = ({ iconSize, iconColor /* iconScale = 1 */ }) => ({
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-const TooltipButton = ({ pressableState, tokens, variant }) => {
+const TooltipButton = ({ pressableState, tokens, variant, ...rest }) => {
   const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState)
 
   const { icon: IconComponent } = themeTokens
 
   return (
-    <View style={applyOuterBorder(themeTokens)}>
+    <View style={applyOuterBorder(themeTokens)} {...selectProps(rest)}>
       <View style={selectInnerContainerStyles(themeTokens)}>
         {IconComponent && <Icon icon={IconComponent} tokens={selectIconTokens(themeTokens)} />}
       </View>
@@ -34,6 +35,7 @@ const TooltipButton = ({ pressableState, tokens, variant }) => {
 }
 
 TooltipButton.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Used as appearances when resolving theme tokens.
    */