@telus-uds/components-base 1.1.0 → 1.3.1

package/src/Link/LinkBase.jsx

@@ -3,17 +3,23 @@ import PropTypes from 'prop-types'
 import { Text, Platform, StyleSheet } from 'react-native'
 import {
   a11yProps,
+  clickProps,
+  getTokensPropType,
   hrefAttrsProp,
-  variantProp,
   linkProps,
-  getTokensPropType
-} from '../utils/propTypes'
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils/props'
 import { resolvePressableTokens } from '../utils/pressability'
+import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
 import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
+
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
@@ -92,7 +98,6 @@ const LinkBase = forwardRef(
   (
     {
       href,
-      onPress,
       icon,
       iconPosition = icon ? 'left' : undefined,
       iconProps,
@@ -100,13 +105,13 @@ const LinkBase = forwardRef(
       tokens = {},
       children,
       accessibilityRole = 'link',
-      dataSet,
-      ...props
+      ...rawRest
     },
     ref
   ) => {
+    const { onPress, ...props } = clickProps.toPressProps(rawRest)
     const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-    const linkPropSet = linkProps.select({
+    const selectedProps = selectProps({
       accessibilityRole,
       href,
       onPress: linkProps.handleHref({ href, onPress }),
@@ -122,9 +127,8 @@ const LinkBase = forwardRef(
 
     return (
       <InlinePressable
-        {...linkPropSet}
+        {...selectedProps}
         ref={ref}
-        dataSet={dataSet}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
@@ -162,8 +166,7 @@ const LinkBase = forwardRef(
 LinkBase.displayName = 'LinkBase'
 
 LinkBase.propTypes = {
-  ...a11yProps.types,
-  ...linkProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Link'),
   variant: variantProp.propType,
   /**
@@ -200,4 +203,4 @@ const staticStyles = StyleSheet.create({
   }
 })
 
-export default LinkBase
+export default withLinkRouter(LinkBase)

package/src/List/List.jsx

@@ -1,17 +1,24 @@
 import React, { cloneElement, forwardRef, Children } from 'react'
 import { View, Platform } from 'react-native'
 import PropTypes from 'prop-types'
-import { getTokensPropType, variantProp, componentPropType } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import {
+  a11yProps,
+  componentPropType,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps
+} from '../utils'
 import ListItem from './ListItem'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 /**
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
 const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
   const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
-  const a11y = a11yProps.select(rest)
   const items = Children.map(children, (child, index) => {
     if (child.type.name === ListItem.name) {
       return cloneElement(child, {
@@ -25,7 +32,7 @@ const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, re
   })
 
   return (
-    <View ref={ref} accessibilityRole={accessibilityRole} {...a11y}>
+    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
       {items}
     </View>
   )
@@ -33,7 +40,7 @@ const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, re
 List.displayName = 'List'
 
 List.propTypes = {
-  ...a11yProps.types,
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: componentPropType('ListItem'),

package/src/List/ListItem.jsx

@@ -2,7 +2,16 @@ import React, { forwardRef } from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import { getTokensPropType, variantProp, wrapStringsInText } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  wrapStringsInText
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBulletStyles = ({ itemBulletWidth, itemBulletHeight, itemBulletColor }) => ({
   width: itemBulletWidth,
@@ -53,7 +62,10 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
  * ListItem is responsible for rendering icon or a bullet as side item
  */
 const ListItem = forwardRef(
-  ({ tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem }, ref) => {
+  (
+    { tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem, ...rest },
+    ref
+  ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
 
     const itemStyles = selectItemStyles(themeTokens)
@@ -118,6 +130,7 @@ const ListItem = forwardRef(
         ref={ref}
         style={[staticStyles.itemContainer, getContainerStyle()]}
         accessibilityRole={accessibilityRole}
+        {...selectProps(rest)}
       >
         {renderMarker()}
         {renderItem()}
@@ -137,6 +150,7 @@ const staticStyles = StyleSheet.create({
 })
 
 ListItem.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: PropTypes.node.isRequired,

package/src/Modal/Modal.jsx

@@ -9,11 +9,21 @@ import {
 
 import PropTypes from 'prop-types'
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, useCopy, copyPropTypes, variantProp } from '../utils'
+import {
+  a11yProps,
+  copyPropTypes,
+  getTokensPropType,
+  selectSystemProps,
+  useCopy,
+  variantProp,
+  viewProps
+} from '../utils'
 import { useViewport } from '../ViewportProvider'
 import ButtonBase from '../Button/ButtonBase'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = ({
   containerPaddingLeft,
   containerPaddingRight,
@@ -79,72 +89,75 @@ const selectCloseIconProps = ({ closeIconSize, closeIconColor }) => ({
  * - Don’t use modals to reinforce or repeat information already available in the parent page or view
  * - Don’t use modals consecutively
  */
-const Modal = forwardRef(({ children, isOpen, onClose, maxWidth, tokens, variant, copy }, ref) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
+const Modal = forwardRef(
+  ({ children, isOpen, onClose, maxWidth, tokens, variant, copy, ...rest }, ref) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
 
-  const { closeIcon: CloseIconComponent } = themeTokens
+    const { closeIcon: CloseIconComponent } = themeTokens
 
-  const getCopy = useCopy({ dictionary, copy })
-  const closeLabel = getCopy('closeButton')
+    const getCopy = useCopy({ dictionary, copy })
+    const closeLabel = getCopy('closeButton')
 
-  const handleClose = () => {
-    if (typeof onClose === 'function') onClose()
-  }
+    const handleClose = () => {
+      if (typeof onClose === 'function') onClose()
+    }
 
-  const handleKeyUp = (event) => {
-    if (event.key === 'Escape') onClose()
-  }
+    const handleKeyUp = (event) => {
+      if (event.key === 'Escape') onClose()
+    }
 
-  if (!isOpen) {
-    return null
-  }
+    if (!isOpen) {
+      return null
+    }
 
-  // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
-  return (
-    <NativeModal transparent>
-      <View style={[staticStyles.positioningContainer]}>
-        <View
-          style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
-          pointerEvents="box-none" // don't capture backdrop press events
-        >
+    // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
+    return (
+      <NativeModal transparent {...selectProps(rest)}>
+        <View style={[staticStyles.positioningContainer]}>
           <View
-            ref={ref}
-            style={[staticStyles.modal, selectModalStyles(themeTokens)]}
-            onKeyUp={handleKeyUp}
+            style={[staticStyles.sizingContainer, selectContainerStyles(themeTokens)]}
+            pointerEvents="box-none" // don't capture backdrop press events
           >
             <View
-              style={[
-                staticStyles.closeButtonContainer,
-                selectCloseButtonContainerStyles(themeTokens)
-              ]}
+              ref={ref}
+              style={[staticStyles.modal, selectModalStyles(themeTokens)]}
+              onKeyUp={handleKeyUp}
             >
-              <ButtonBase
-                onPress={handleClose}
-                accessibilityRole="button"
-                accessibilityLabel={closeLabel}
+              <View
+                style={[
+                  staticStyles.closeButtonContainer,
+                  selectCloseButtonContainerStyles(themeTokens)
+                ]}
               >
-                {
-                  // TODO: add close button interactive states after IconButton is done
-                  () => <CloseIconComponent {...selectCloseIconProps(themeTokens)} />
-                }
-              </ButtonBase>
+                <ButtonBase
+                  onPress={handleClose}
+                  accessibilityRole="button"
+                  accessibilityLabel={closeLabel}
+                >
+                  {
+                    // TODO: add close button interactive states after IconButton is done
+                    () => <CloseIconComponent {...selectCloseIconProps(themeTokens)} />
+                  }
+                </ButtonBase>
+              </View>
+              {children}
             </View>
-            {children}
           </View>
+          {/* when a modal becomes open its first focusable element is being automatically focused */}
+          {/* and we prefer the close button over backdrop */}
+          <TouchableWithoutFeedback onPress={handleClose}>
+            <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
+          </TouchableWithoutFeedback>
         </View>
-        {/* when a modal becomes open its first focusable element is being automatically focused */}
-        {/* and we prefer the close button over backdrop */}
-        <TouchableWithoutFeedback onPress={handleClose}>
-          <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
-        </TouchableWithoutFeedback>
-      </View>
-    </NativeModal>
-  )
-})
+      </NativeModal>
+    )
+  }
+)
 Modal.displayName = 'Modal'
 
 Modal.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   copy: copyPropTypes,
   isOpen: PropTypes.bool,

package/src/Notification/Notification.jsx

@@ -3,11 +3,20 @@ import { StyleSheet, Text, View } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, selectTokens, variantProp } from '../utils'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  selectTokens,
+  variantProp,
+  viewProps
+} from '../utils'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = (tokens) => ({ ...tokens })
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
@@ -82,7 +91,7 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = forwardRef(
-  ({ children, system, dismissible, copy = 'en', tokens, variant }, ref) => {
+  ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isDismissed, setIsDismissed] = useState(false)
     const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
     const getCopy = useCopy({ dictionary, copy })
@@ -102,7 +111,11 @@ const Notification = forwardRef(
 
     // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
     return (
-      <View ref={ref} style={[staticStyles.container, selectContainerStyles(themeTokens)]}>
+      <View
+        ref={ref}
+        style={[staticStyles.container, selectContainerStyles(themeTokens)]}
+        {...selectProps(rest)}
+      >
         {IconComponent && (
           <View style={selectIconContainerStyles(themeTokens)}>
             <IconComponent {...selectIconProps(themeTokens)} />
@@ -129,6 +142,7 @@ const Notification = forwardRef(
 Notification.displayName = 'Notification'
 
 Notification.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Content of the `Notification`.
    */

package/src/Pagination/PageButton.jsx

@@ -10,7 +10,8 @@ import {
   hrefAttrsProp,
   linkProps,
   selectTokens,
-  variantProp
+  variantProp,
+  withLinkRouter
 } from '../utils'
 
 import useCopy from '../utils/useCopy'
@@ -66,4 +67,4 @@ PageButton.propTypes = {
   tokens: getTokensPropType('PaginationPageButton')
 }
 
-export default PageButton
+export default withLinkRouter(PageButton)

package/src/Pagination/Pagination.jsx

@@ -1,7 +1,16 @@
 import React, { forwardRef } from 'react'
 import { View, Text, StyleSheet } from 'react-native'
 
-import { componentPropType, copyPropTypes, getTokensPropType, variantProp } from '../utils'
+import {
+  a11yProps,
+  componentPropType,
+  copyPropTypes,
+  getTokensPropType,
+  selectSystemProps,
+  variantProp,
+  viewProps,
+  withLinkRouter
+} from '../utils'
 import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
@@ -10,6 +19,8 @@ import usePagination from './usePagination'
 import PageButton from './PageButton'
 import SideButton from './SideButton'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight }) =>
   applyTextStyles({
     color,
@@ -20,7 +31,20 @@ const selectTextStyles = ({ color, fontName, fontSize, fontWeight, lineHeight })
   })
 
 const Pagination = forwardRef(
-  ({ children, copy = 'en', variant, tokens, sideButtonVariant, sideButtonTokens }, ref) => {
+  (
+    {
+      children,
+      copy = 'en',
+      variant,
+      tokens,
+      sideButtonVariant,
+      sideButtonTokens,
+      LinkRouter,
+      linkRouterProps,
+      ...rest
+    },
+    ref
+  ) => {
     const viewport = useViewport()
     const { truncateAbove, gap, ...themeTokens } = useThemeTokens('Pagination', tokens, variant, {
       viewport
@@ -58,16 +82,22 @@ const Pagination = forwardRef(
           copy={copy}
           variant={sideButtonVariant}
           tokens={sideButtonTokens}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
         />
       ),
-      ...items.map((child, itemIndex) => {
+      ...items.map((_child, itemIndex) => {
         const buttonLabel = `${itemIndex + 1}`
         const itemProps = getItemProps(itemIndex)
+        const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter
+        const itemLinkRouterProps = { ...linkRouterProps, ...itemProps.linkRouterProps }
 
         if (shouldRenderButton(itemIndex)) {
           return (
             <PageButton
               {...itemProps}
+              LinkRouter={ItemLinkRouter}
+              linkRouterProps={itemLinkRouterProps}
               label={buttonLabel}
               copy={copy}
               isActive={isItemActive(itemIndex)}
@@ -88,12 +118,14 @@ const Pagination = forwardRef(
           copy={copy}
           variant={sideButtonVariant}
           tokens={sideButtonTokens}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
         />
       )
     ]
 
     return (
-      <View style={staticStyles.container} ref={ref}>
+      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
         {buttons
           // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
           .map((element, index) => [element, `page-${index + 1}`])
@@ -112,6 +144,8 @@ PageButton.displayName = 'PageButton'
 Pagination.PageButton = PageButton
 
 Pagination.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
   children: componentPropType('PageButton'),
   copy: copyPropTypes,
   variant: variantProp.propType,

package/src/Pagination/SideButton.jsx

@@ -7,7 +7,7 @@ import ButtonBase from '../Button/ButtonBase'
 import { IconText } from '../Icon'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
-import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens } from '../utils'
+import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils'
 
 import dictionary from './dictionary'
 import useCopy from '../utils/useCopy'
@@ -82,4 +82,4 @@ SideButton.propTypes = {
   ...linkProps.types
 }
 
-export default SideButton
+export default withLinkRouter(SideButton)

package/src/Progress/Progress.jsx

@@ -2,9 +2,10 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { a11yProps } from '../utils/propTypes'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectProgressStyles = ({
   backgroundColor,
@@ -53,7 +54,7 @@ const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
 
   return (
-    <View ref={ref} style={selectProgressStyles(themeTokens)} {...a11yProps.select(rest)}>
+    <View ref={ref} style={selectProgressStyles(themeTokens)} {...selectProps(rest)}>
       {children}
     </View>
   )
@@ -61,6 +62,7 @@ const Progress = forwardRef(({ children, tokens, variant, ...rest }, ref) => {
 Progress.displayName = 'Progress'
 
 Progress.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.
    */

package/src/Progress/ProgressBar.jsx

@@ -3,9 +3,10 @@ import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
 import ProgressBarBackground from './ProgressBarBackground'
-import { a11yProps } from '../utils/propTypes'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectBarStyles = (
   { backgroundColor, borderRadius, outlineWidth, outlineColor },
@@ -60,7 +61,7 @@ const ProgressBar = forwardRef(
     } else if (percentage > 100) {
       throw new Error('ProgressBar: `percentage` cannot exceed 100')
     }
-    const accessibilityProps = {
+    const selectedProps = selectProps({
       accessibilityRole: 'progressbar',
       accessibilityValue: {
         min: 0,
@@ -68,14 +69,14 @@ const ProgressBar = forwardRef(
         now: percentage,
         text: `${percentage}%`
       },
-      ...a11yProps.select(rest)
-    }
+      ...rest
+    })
 
     return percentage > 0 ? (
       <View
         ref={ref}
         style={[staticStyles.bar, selectBarStyles(themeTokens, percentage)]}
-        {...accessibilityProps}
+        {...selectedProps}
       >
         {children ?? <ProgressBarBackground variant={variant} />}
       </View>
@@ -85,6 +86,7 @@ const ProgressBar = forwardRef(
 ProgressBar.displayName = 'ProgressBar'
 
 ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional children that can be used to customize the progress bar filling.
    */

package/src/Radio/Radio.jsx

@@ -2,15 +2,22 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pressable, StyleSheet, Text, View } from 'react-native'
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 import RadioLabel from '../InputLabel/LabelContent'
 import RadioButton, { selectRadioButtonTokens } from './RadioButton'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, useUniqueId, variantProp } from '../utils'
-import { a11yProps } from '../utils/propTypes'
+import {
+  a11yProps,
+  getTokensPropType,
+  selectSystemProps,
+  useInputValue,
+  useUniqueId,
+  variantProp,
+  viewProps
+} from '../utils'
 import StackView from '../StackView'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
 const selectContainerStyles = ({
   containerBackgroundColor,
   containerBorderRadius,
@@ -132,7 +139,6 @@ const Radio = forwardRef(
       // The expected keyboard shortcut for activating a radio is the Space key
       if (event?.key === ' ') handleChange(event)
     }
-    const accessibilityProps = a11yProps.select(rest)
     const uniqueId = useUniqueId('radio')
     const inputId = id ?? uniqueId
 
@@ -144,7 +150,7 @@ const Radio = forwardRef(
         onPress={handleChange}
         accessibilityRole="radio"
         accessibilityState={{ checked: isChecked, disabled: inactive }}
-        {...accessibilityProps}
+        {...selectProps(rest)}
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })
@@ -182,7 +188,7 @@ const Radio = forwardRef(
 Radio.displayName = 'Radio'
 
 Radio.propTypes = {
-  ...a11yProps.propTypes,
+  ...selectedSystemPropTypes,
   /**
    * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
    */

package/src/Radio/RadioButton.jsx

@@ -4,7 +4,15 @@ import { Platform, StyleSheet, View } from 'react-native'
 
 import RadioInput from './RadioInput'
 import { applyOuterBorder, resolveThemeTokens, validateThemeTokens } from '../ThemeProvider'
-import { getTokensSetPropType, selectTokens } from '../utils'
+import {
+  a11yProps,
+  getTokensSetPropType,
+  selectSystemProps,
+  selectTokens,
+  viewProps
+} from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // TODO: roll out a standard approach to token sets
 // https://github.com/telus/universal-design-system/issues/782
@@ -87,7 +95,8 @@ const RadioButton = forwardRef(
       isControlled,
       handleChange,
       name: inputName,
-      value
+      value,
+      ...rest
     },
     ref
   ) => {
@@ -98,7 +107,7 @@ const RadioButton = forwardRef(
     )
 
     return (
-      <View style={selectOuterBorderStyles(themeTokens)}>
+      <View style={selectOuterBorderStyles(themeTokens)} {...selectProps(rest)}>
         <View
           style={[staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)]}
           testID="Radio-Input"
@@ -124,6 +133,7 @@ const RadioButton = forwardRef(
 RadioButton.displayName = 'RadioButton'
 
 RadioButton.propTypes = {
+  ...selectedSystemPropTypes,
   isChecked: PropTypes.bool,
   tokens: getTokensSetPropType(tokenKeys, { allowFunction: true }),
   inactive: PropTypes.bool,