@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/utils/useResponsiveProp.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.resolveResponsiveProp = void 0;
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
+
+const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => hasOwn(objectProp, key));
+/**
+ * Resolves a prop which may be a responsive object with keys for viewports.
+ *
+ * Used internally in useResponsiveProp - see that for more details.
+ *
+ * @param {*} prop
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} viewport
+ * @param {*} [defaultValue]
+ * @returns {*}
+ */
+
+
+const resolveResponsiveProp = (prop, viewport, defaultValue) => {
+  if (prop === undefined) return defaultValue;
+  if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
+  const value = _systemConstants.viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
+  _systemConstants.viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
+  prop[_systemConstants.viewports.keys.find(key => hasOwn(prop, key))];
+  return value === undefined ? defaultValue : value;
+};
+/**
+ * Takes any value and, if that value is a responsive prop (an object with one or more
+ * keys matching system viewport names), returns the value corresponding to the largest
+ * viewport key smaller than the current screen's viewport.
+ *
+ * For example, if passed `{ sm: 4, lg: 8 }`, it will return 8 on `xl` and `lg` viewports,
+ * 4 on `md` and `sm` viewports, and `undefined` (or a provided `defaultValue`) on `xs` viewports.
+ *
+ * To generate propTypes for responsive props, see `responsiveProps` in `./utils/propTypes.js`.
+ *
+ * @param {*} prop - any value which may be an object with viewport keys
+ * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
+ * @returns {*}
+ */
+
+
+exports.resolveResponsiveProp = resolveResponsiveProp;
+
+const useResponsiveProp = (prop, defaultValue) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  return resolveResponsiveProp(prop, viewport, defaultValue);
+};
+
+var _default = useResponsiveProp;
+exports.default = _default;

package/lib/utils/{spacing/useSpacingScale.js → useSpacingScale.js}

@@ -1,14 +1,43 @@
-import { useViewport } from '../../ViewportProvider';
-import { useThemeTokens } from '../../ThemeProvider';
-import { resolveSpacingValue, resolveSpacingOptions } from './utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _useResponsiveProp = require("./useResponsiveProp");
+
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
- * @typedef {import('../propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('../propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('./propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('./propTypes.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('./propTypes.js').SpacingOptions} SpacingOptions
  */
+const resolveSpacingOptions = space => {
+  if (!(space !== null && space !== void 0 && space.options)) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
+  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
+  // https://github.com/telus/universal-design-system/issues/583
 
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
 /**
  * Pass a {@link SpacingValue}, which is one of:
  *
@@ -79,24 +108,28 @@ import { resolveSpacingValue, resolveSpacingOptions } from './utils';
  * @returns {number}
  */
 
+
 const useSpacingScale = spaceValue => {
+  var _spaceValue$space;
+
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
-  const viewport = useViewport();
+  const viewport = (0, _ViewportProvider.useViewport)();
   const {
     tokens,
     variant,
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = overridden ? null : resolveSpacingValue(spaceValue, viewport);
+  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
-  } = useThemeTokens('spacingScale', tokens, variant, {
-    space,
+  } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {
+    space: typeof space === 'number' ? space : 0,
     viewport
   });
   return Math.max(size - subtract, 0);
 };
 
-export default useSpacingScale;
+var _default = useSpacingScale;
+exports.default = _default;

package/lib/utils/useUniqueId.js

@@ -1,12 +1,21 @@
-import { useState } from 'react';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
 let id = 0;
 
 function useUniqueId(prefix = '') {
-  const [uniqueId] = useState(() => {
+  const [uniqueId] = (0, _react.useState)(() => {
     id += 1;
-    return `${prefix}-${id}`;
+    return "".concat(prefix, "-").concat(id);
   });
   return uniqueId;
 }
 
-export default useUniqueId;
+var _default = useUniqueId;
+exports.default = _default;

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.5",
+  "version": "0.0.2-prerelease.9",
   "description": "Base components",
   "keywords": [
     "base"
   ],
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
-  "license": "ISC",
+  "license": "UNLICENSED",
   "main": "lib/index.js",
-  "module": "lib/index.js",
-  "react-native": "lib/index.js",
+  "react-native": "src/index.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -35,9 +34,10 @@
     "skip": true
   },
   "peerDependencies": {
-    "react": "*",
+    "react": "^17.0.2",
+    "react-dom": "*",
     "react-native": "*",
-    "react-native-web": "~0.14.13"
+    "react-native-web": "^0.17.0"
   },
   "devDependencies": {
     "@testing-library/jest-native": "^4.0.1",
@@ -46,9 +46,12 @@
     "react-test-renderer": "^16.3.2"
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.3",
+    "airbnb-prop-types": "^2.16.0",
+    "@telus-uds/system-constants": "^0.0.2-prerelease.2",
+    "@telus-uds/system-themes": "^0.0.2-prerelease.2",
+    "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-native-picker-select": "^8.0.4"
   }
 }

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.4",
-  "changelog": "### [0.0.2-prerelease.5](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.4...@telus-uds/components-base/v0.0.2-prerelease.5) (2021-10-27)\n\n\n### Features\n\n* **allium-web:** Add `ExpandCollapseMiniControl` component ([#661](https://github.com/telus/universal-design-system/issues/661)) ([227407e](https://github.com/telus/universal-design-system/commit/227407ec6a48c0a170b8e39761ba33293f13eb3c)), closes [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605) [#605](https://github.com/telus/universal-design-system/issues/605)\n* **allium:** add Allium `Card` ([#639](https://github.com/telus/universal-design-system/issues/639)) ([f88179c](https://github.com/telus/universal-design-system/commit/f88179c503dfe574bf7bac6bb36ce4726a9af338))\n* **base, allium:** add reverse directions and switch Allium card to using `StackView` ([#676](https://github.com/telus/universal-design-system/issues/676)) ([819a15f](https://github.com/telus/universal-design-system/commit/819a15f059faa47d1bc4e96c6370e9694effc003))\n* **base:** add StackView and Spacer ([#662](https://github.com/telus/universal-design-system/issues/662)) ([cc3965e](https://github.com/telus/universal-design-system/commit/cc3965e83c1ec2fa0f0dd006a03eeeeda5384940))\n* **base:** add StackWrap component ([#666](https://github.com/telus/universal-design-system/issues/666)) ([f34fb60](https://github.com/telus/universal-design-system/commit/f34fb60d0a923b1e4b3105c21b4a762b630ab309))\n* **base:** add TextInput component ([#649](https://github.com/telus/universal-design-system/issues/649)) ([245c073](https://github.com/telus/universal-design-system/commit/245c073ed3ba3a022f989d234fbf5cf972edec25))\n* **base:** add the Feedback component ([#656](https://github.com/telus/universal-design-system/issues/656)) ([5d7a5b6](https://github.com/telus/universal-design-system/commit/5d7a5b69c870ce1077adfdb230fddd1aa120b373))\n\n\n### Bug Fixes\n\n* **base:** control stretch from a row parent ([#668](https://github.com/telus/universal-design-system/issues/668)) ([fa13c37](https://github.com/telus/universal-design-system/commit/fa13c37b2bd6b4118dbeb39bc2cdf59d13d5b151))\n* **base:** fix icon link width in block container ([#645](https://github.com/telus/universal-design-system/issues/645)) ([ff60d1d](https://github.com/telus/universal-design-system/commit/ff60d1d1d0a66b7735b902098c7ca22e442265e1))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.5",
-  "newVersion": "0.0.2-prerelease.5",
+  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.8",
+  "changelog": "### [0.0.2-prerelease.9](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.8...@telus-uds/components-base/v0.0.2-prerelease.9) (2021-12-29)\n\n\n### Features\n\n* **base:** implement IconButton ([#958](https://github.com/telus/universal-design-system/issues/958)) ([c3ff7dd](https://github.com/telus/universal-design-system/commit/c3ff7dd9fb76123d3ff8409e507c89ad91b7fef2))\n",
+  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.9",
+  "newVersion": "0.0.2-prerelease.9",
   "packageName": "@telus-uds/components-base"
 }

package/src/Box/Box.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
-import { a11yProps, spacingProps, variantProp, getTokensPropType, useSpacingScale } from '../utils'
+import {
+  a11yProps,
+  spacingProps,
+  variantProp,
+  getTokensPropType,
+  useSpacingScale,
+  viewProps
+} from '../utils'
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
@@ -102,7 +109,7 @@ const Box = ({
   testID,
   ...rest
 }) => {
-  const a11y = a11yProps.select(rest)
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
 
   const themeTokens = useThemeTokens('Box', tokens, variant)
   const styles = {
@@ -117,13 +124,13 @@ const Box = ({
     const scrollProps = typeof scroll === 'object' ? scroll : {}
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
     return (
-      <ScrollView {...scrollProps} {...a11y} testID={testID}>
+      <ScrollView {...scrollProps} {...props} testID={testID}>
         {children}
       </ScrollView>
     )
   }
   return (
-    <View {...a11y} style={styles} testID={testID}>
+    <View {...props} style={styles} testID={testID}>
       {children}
     </View>
   )

package/src/Button/Button.jsx

@@ -1,15 +1,19 @@
 import React from 'react'
+
 import ButtonBase from './ButtonBase'
-import buttonPropTypes from './propTypes'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/propTypes'
 
-const Button = ({ accessibilityRole = 'button', ...props }) => (
-  <ButtonBase {...props} accessibilityRole={accessibilityRole} />
-)
+const Button = ({ accessibilityRole = 'button', tokens, variant, ...props }) => {
+  const getTokens = useThemeTokensCallback('Button', tokens, variant)
+  return <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} />
+}
 
 Button.propTypes = {
   ...a11yProps.types,
-  ...buttonPropTypes
+  ...buttonPropTypes,
+  children: textAndA11yText
 }
 
 export default Button

package/src/Button/ButtonBase.jsx

@@ -1,18 +1,16 @@
 import React from 'react'
-import { Pressable, Text, View, StyleSheet, Platform } from 'react-native'
+import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { applyTextStyles, applyShadowToken } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
 import buttonPropTypes from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
-
-const getCursorStyle = (inactive, accessibilityRole) => {
-  if (inactive) return 'not-allowed'
-  // These roles should result in cursor: pointer but don't in current RNW releases
-  if (['checkbox', 'radio', 'switch'].includes(accessibilityRole)) return 'pointer'
-  // For everything else, let React Native Web figure it out internally
-  return undefined
-}
+import {
+  a11yProps,
+  getCursorStyle,
+  linkProps,
+  resolvePressableState,
+  resolvePressableTokens,
+  wrapStringsInText
+} from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
@@ -22,26 +20,26 @@ const selectOuterContainerStyles = ({
   opacity,
   outerBorderColor,
   outerBorderWidth,
-  outerBorderGap = 0,
-  outerBorderRadius = 0,
+  outerBorderGap,
+  borderRadius,
   outerBackgroundColor
 }) => ({
   alignSelf,
-  padding: outerBorderGap,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius + outerBorderGap,
   backgroundColor: outerBackgroundColor,
-  opacity
+  opacity,
+  ...applyOuterBorder({
+    outerBorderGap,
+    outerBorderWidth,
+    outerBorderColor,
+    borderRadius
+  })
 })
 
 const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
-  const widthStyles = {
-    margin: 0 - outerBorderOffset
-  }
+  const widthStyles = {}
 
   if (!width) {
     return {
@@ -83,7 +81,8 @@ const selectInnerContainerStyles = ({
   paddingTop,
   paddingBottom,
   shadow,
-  borderWidth
+  borderWidth,
+  minWidth
 }) => {
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -98,6 +97,7 @@ const selectInnerContainerStyles = ({
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
+    minWidth,
     ...applyShadowToken(shadow)
   }
 }
@@ -118,76 +118,63 @@ const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, t
     textAlign
   })
 
-const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) =>
-  Platform.OS === 'web'
-    ? {
-        // if it would overflow the container, wraps instead
-        maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
-        cursor: getCursorStyle(inactive, accessibilityRole),
-        outline: 'none' // removes the default browser :focus outline
-      }
-    : {}
+const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
+  return Platform.select({
+    web: {
+      // if it would overflow the container, wraps instead
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      outline: 'none', // removes the default browser :focus outline
+      ...getCursorStyle(inactive, accessibilityRole)
+    },
+    default: {}
+  })
+}
 
 const ButtonBase = ({
   href,
   hrefAttrs,
   children,
-  variant,
   onPress,
-  tokens,
+  tokens = {},
   disabled = false, // alias for inactive
   inactive = disabled,
   selected = false,
   ...rest
 }) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
-  const getButtonState = ({ pressed, focused, hovered }) => ({
-    pressed,
-    focus: focused,
-    hover: hovered,
-    inactive,
-    selected
-  })
-  const getTokensByPressableState = (pressableState) => getTokens(getButtonState(pressableState))
+  const extraButtonState = { inactive, selected }
+  const resolveButtonTokens = (pressableState) =>
+    resolvePressableTokens(tokens, pressableState, extraButtonState)
 
   const a11y = a11yProps.select(rest)
 
   const getPressableStyle = (pressableState) => {
-    const themeTokens = getTokensByPressableState(pressableState)
+    const themeTokens = resolveButtonTokens(pressableState)
     return [
-      staticStyles.wrapper,
+      staticStyles.row,
       selectWebOnlyStyles(inactive, themeTokens, a11y),
       selectOuterContainerStyles(themeTokens),
       selectOuterWidthStyles(themeTokens)
     ]
   }
 
-  const handlePress = linkProps.handleHref({ href, onPress })
-
   return (
     <Pressable
-      onPress={handlePress}
+      href={href}
+      onPress={linkProps.handleHref({ href, onPress })}
       style={getPressableStyle}
       disabled={inactive}
-      href={href}
-      {...hrefAttrsProp.spread(hrefAttrs)}
+      hrefAttrs={hrefAttrs}
       {...a11y}
     >
       {(pressableState) => {
-        const themeTokens = getTokensByPressableState(pressableState)
+        const themeTokens = resolveButtonTokens(pressableState)
         const containerStyles = selectInnerContainerStyles(themeTokens)
         const borderStyles = selectBorderStyles(themeTokens)
-        const textStyles = {
-          ...selectTextStyles(themeTokens),
-          ...Platform.select({
-            // TODO: https://github.com/telus/universal-design-system/issues/487
-            web: { transition: 'color 200ms' }
-          })
-        }
+        const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
 
         // If the container has a width set, fill it instead of sizing from content.
         // If in future we support text alignments other than center, add here.
-        const stretchStyles = !!themeTokens.width && staticStyles.center
+        const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
 
         return (
           <View
@@ -195,6 +182,7 @@ const ButtonBase = ({
               containerStyles,
               borderStyles,
               stretchStyles,
+              staticStyles.row,
               Platform.select({
                 web: {
                   maxWidth: '100%', // ensure overflowing content wraps
@@ -204,13 +192,14 @@ const ButtonBase = ({
               })
             ]}
           >
-            {typeof children === 'function' ? (
-              children({
-                ...getButtonState(pressableState),
-                textStyles
-              })
-            ) : (
-              <Text style={textStyles}>{children}</Text>
+            {wrapStringsInText(
+              typeof children === 'function'
+                ? children({
+                    ...resolvePressableState(pressableState, extraButtonState),
+                    textStyles
+                  })
+                : children,
+              { style: textStyles }
             )}
           </View>
         )
@@ -226,10 +215,21 @@ ButtonBase.propTypes = {
 }
 
 const staticStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row' // ensures alignSelf is horizontal
+  row: {
+    // Apply all button alignment horizontally; no vertical stacking within a button
+    flexDirection: 'row'
+  },
+  text: {
+    flexGrow: 1, // On native but not web, flexShrink here wraps text prematurely
+    ...Platform.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: { transition: 'color 200ms' }
+    })
+  },
+  align: {
+    alignItems: 'center'
   },
-  center: {
+  stretch: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'

package/src/Button/ButtonGroup.jsx

@@ -5,7 +5,7 @@ import { Platform } from 'react-native'
 import ButtonBase from './ButtonBase'
 import { StackWrap } from '../StackView'
 import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   pressProps,
@@ -14,10 +14,10 @@ import {
   selectTokens
 } from '../utils/propTypes'
 import { useMultipleInputValues } from '../utils/input'
+import { getPressHandlersWithArgs } from '../utils/pressability'
 
 const ButtonGroup = ({
   variant,
-  buttonVariant = {},
   tokens,
   items = [],
   values,
@@ -27,7 +27,7 @@ const ButtonGroup = ({
   readOnly = false,
   inactive = false,
   accessibilityRole = maxValues === 1
-    ? 'radioGroup' // radioGroup is cross-platform; only web aria has generic groups
+    ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
     : Platform.select({ web: 'group', default: 'none' }),
   ...rest
 }) => {
@@ -36,6 +36,8 @@ const ButtonGroup = ({
   const stackTokens = selectTokens('StackView', themeTokens)
   const { direction, space } = themeTokens
 
+  const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
+
   const { currentValues, toggleOneValue } = useMultipleInputValues({
     initialValues,
     values,
@@ -48,22 +50,16 @@ const ButtonGroup = ({
     accessibilityRole,
     ...rest
   })
-  const itemA11yRole = a11y.accessibilityRole === 'radioGroup' ? 'radio' : 'checkbox'
+  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
   return (
     <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens}>
       {items.map(({ label, id = label, accessibilityLabel }, index) => {
         const isSelected = currentValues.includes(id)
 
-        // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-        const pressHandlers = Object.fromEntries(
-          Object.entries(pressProps.select(rest)).map(([key, handler]) => ({
-            [key]: (args) => {
-              // Pass each handler data on this button and current selection
-              handler({ id, label, currentValues }, ...args)
-            }
-          }))
-        )
+        // Pass an object of relevant component state as first argument for any passed-in press handlers
+        const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+
         const handlePress = () => {
           if (pressHandlers.onPress) pressHandlers.onPress()
           toggleOneValue(id)
@@ -73,15 +69,7 @@ const ButtonGroup = ({
           accessibilityState: { checked: isSelected },
           accessibilityRole: itemA11yRole,
           accessibilityLabel,
-          ...Platform.select({
-            web: {
-              // accessibilityPosInSet etc exists in React Native Web main branch
-              // but not in a release compatible with Expo etc; just use `aria-*`
-              'aria-setsize': items.length,
-              'aria-posinset': index + 1
-            },
-            default: {}
-          })
+          ...a11yProps.getPositionInSet(items.length, index)
         }
 
         // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
@@ -91,7 +79,7 @@ const ButtonGroup = ({
             key={id}
             {...pressHandlers}
             onPress={handlePress}
-            variant={{ component: 'ButtonGroup', ...buttonVariant }}
+            tokens={getButtonTokens}
             selected={isSelected}
             inactive={inactive}
             {...itemA11y}
@@ -109,7 +97,6 @@ ButtonGroup.propTypes = {
   ...pressProps.propTypes,
   tokens: getTokensPropType('ButtonGroup'),
   variant: variantProp.propType,
-  buttonVariant: variantProp.propType,
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
    * like radio buttons. To have no limit and allow any number of selections, pass `null`.