@telus-uds/components-base 0.0.2-prerelease.3 → 0.0.2-prerelease.7

package/src/Button/Button.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
+
 import ButtonBase from './ButtonBase'
 import buttonPropTypes 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,

package/src/Button/ButtonBase.jsx

@@ -1,23 +1,22 @@
 import React from 'react'
 import { Pressable, Text, View, StyleSheet, Platform } from 'react-native'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
 import { applyTextStyles, applyShadowToken } 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,
+  hrefAttrsProp,
+  linkProps,
+  resolvePressableState,
+  resolvePressableTokens
+} from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
 const selectOuterContainerStyles = ({
+  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -25,6 +24,7 @@ const selectOuterContainerStyles = ({
   outerBorderRadius = 0,
   outerBackgroundColor
 }) => ({
+  alignSelf,
   padding: outerBorderGap,
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor,
@@ -33,25 +33,13 @@ const selectOuterContainerStyles = ({
   opacity
 })
 
-const selectOuterWidthStyles = ({
-  outerBorderGap,
-  outerBorderWidth,
-  width,
-  // TODO: make margin the responsibility of a parent
-  // https://github.com/telus/universal-design-system/issues/525
-  marginTop = 0,
-  marginBottom = 0,
-  marginLeft = 0,
-  marginRight = 0
-}) => {
+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 = {
-    marginTop: marginTop - outerBorderOffset,
-    marginBottom: marginBottom - outerBorderOffset,
-    marginLeft: marginLeft - outerBorderOffset,
-    marginRight: marginRight - outerBorderOffset
+    margin: 0 - outerBorderOffset
   }
 
   if (!width) {
@@ -59,9 +47,8 @@ const selectOuterWidthStyles = ({
       ...widthStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
-        web: { width: 'fit-content' },
-        // No fit-content or inline-block in RN. TODO: we might need to provide a prop to allow flex-end or center
-        native: { alignSelf: 'flex-start' }
+        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+        web: { display: 'inline-flex' }
       })
     }
   }
@@ -95,7 +82,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)
@@ -110,6 +98,7 @@ const selectInnerContainerStyles = ({
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
+    minWidth,
     ...applyShadowToken(shadow)
   }
 }
@@ -130,76 +119,76 @@ 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: {}
+  })
+}
+
+// TODO: see if this can be made into a generalised utility, ideally when
+// there is a stable, generic, generalised approach to within-component text
+const resolveChildren = (children, { textStyles, state }) => {
+  switch (typeof children) {
+    case 'function':
+      return children(state)
+    case 'string':
+      return <Text style={textStyles}>{children}</Text>
+    default:
+      return children
+  }
+}
 
 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 resolveTokens = (pressableState) =>
+    resolvePressableTokens(tokens, pressableState, extraButtonState)
 
   const a11y = a11yProps.select(rest)
 
   const getPressableStyle = (pressableState) => {
-    const themeTokens = getTokensByPressableState(pressableState)
+    const themeTokens = resolveTokens(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)}
       {...a11y}
     >
       {(pressableState) => {
-        const themeTokens = getTokensByPressableState(pressableState)
+        const themeTokens = resolveTokens(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
@@ -207,6 +196,7 @@ const ButtonBase = ({
               containerStyles,
               borderStyles,
               stretchStyles,
+              staticStyles.row,
               Platform.select({
                 web: {
                   maxWidth: '100%', // ensure overflowing content wraps
@@ -216,14 +206,10 @@ const ButtonBase = ({
               })
             ]}
           >
-            {typeof children === 'function' ? (
-              children({
-                ...getButtonState(pressableState),
-                textStyles
-              })
-            ) : (
-              <Text style={textStyles}>{children}</Text>
-            )}
+            {resolveChildren(children, {
+              state: { ...resolvePressableState(pressableState, extraButtonState), textStyles },
+              textStyles
+            })}
           </View>
         )
       }}
@@ -238,10 +224,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

@@ -1,24 +1,23 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { View, Platform } from 'react-native'
+import { Platform } from 'react-native'
 
 import ButtonBase from './ButtonBase'
+import { StackWrap } from '../StackView'
 import { useViewport } from '../ViewportProvider'
-import { useThemeTokens } from '../ThemeProvider'
-import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/propTypes'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
+import {
+  a11yProps,
+  pressProps,
+  variantProp,
+  getTokensPropType,
+  selectTokens
+} from '../utils/propTypes'
 import { useMultipleInputValues } from '../utils/input'
-
-const selectContainerStyles = ({ direction }) => ({
-  flexDirection: direction
-})
-
-const selectItemTokens = ({ gap }, index) => ({
-  marginLeft: index && gap
-})
+import { getPressHandlersWithArgs } from '../utils/pressability'
 
 const ButtonGroup = ({
   variant,
-  buttonVariant = {},
   tokens,
   items = [],
   values,
@@ -34,7 +33,10 @@ const ButtonGroup = ({
 }) => {
   const viewport = useViewport()
   const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, { viewport })
-  const containerStyles = selectContainerStyles(themeTokens)
+  const stackTokens = selectTokens('StackView', themeTokens)
+  const { direction, space } = themeTokens
+
+  const getButtonTokens = useThemeTokensCallback('ButtonGroupItem', tokens, variant)
 
   const { currentValues, toggleOneValue } = useMultipleInputValues({
     initialValues,
@@ -51,20 +53,13 @@ const ButtonGroup = ({
   const itemA11yRole = a11y.accessibilityRole === 'radioGroup' ? 'radio' : 'checkbox'
 
   return (
-    <View style={containerStyles} {...a11y}>
+    <StackWrap {...a11y} space={space} direction={direction} tokens={stackTokens}>
       {items.map(({ label, id = label, accessibilityLabel }, index) => {
-        const itemTokens = selectItemTokens(themeTokens, 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)
@@ -74,28 +69,17 @@ 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
         // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
-        // See also: TODO: make margin the responsibility of a parent
-        // https://github.com/telus/universal-design-system/issues/525
         return (
           <ButtonBase
             key={id}
             {...pressHandlers}
             onPress={handlePress}
-            variant={{ component: 'ButtonGroup', ...buttonVariant }}
-            tokens={itemTokens}
+            tokens={getButtonTokens}
             selected={isSelected}
             inactive={inactive}
             {...itemA11y}
@@ -104,7 +88,7 @@ const ButtonGroup = ({
           </ButtonBase>
         )
       })}
-    </View>
+    </StackWrap>
   )
 }
 
@@ -113,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`.

package/src/Button/ButtonLink.jsx

@@ -2,14 +2,23 @@ import React from 'react'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes from './propTypes'
 import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider'
 
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = ({ accessibilityRole = 'link', ...props }) => {
+const ButtonLink = ({ accessibilityRole = 'link', tokens, variant, ...props }) => {
   const { hrefAttrs, rest } = hrefAttrsProp.bundle(props)
-  return <ButtonBase accessibilityRole={accessibilityRole} hrefAttrs={hrefAttrs} {...rest} />
+  const getTokens = useThemeTokensCallback('Button', tokens, variant)
+  return (
+    <ButtonBase
+      accessibilityRole={accessibilityRole}
+      tokens={getTokens}
+      hrefAttrs={hrefAttrs}
+      {...rest}
+    />
+  )
 }
 
 ButtonLink.propTypes = {