@telus-uds/components-base 1.5.0 → 1.7.0

package/src/Button/ButtonGroup.jsx

@@ -9,17 +9,25 @@ import { useViewport } from '../ViewportProvider'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
   pressProps,
   getTokensPropType,
   selectSystemProps,
   selectTokens,
+  useMultipleInputValues,
   variantProp,
   viewProps
-} from '../utils/props'
-import { useMultipleInputValues } from '../utils/input'
+} from '../utils'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  pressProps,
+  viewProps
+])
 
 const ButtonGroup = forwardRef(
   (
@@ -61,6 +69,11 @@ const ButtonGroup = forwardRef(
     })
     const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox'
 
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
     return (
       <StackWrap
         {...systemProps}
@@ -69,41 +82,44 @@ const ButtonGroup = forwardRef(
         tokens={stackTokens}
         ref={ref}
       >
-        {items.map(({ label, id = label, accessibilityLabel, ref: itemRef }, index) => {
-          const isSelected = currentValues.includes(id)
+        {items.map(
+          ({ label, id = label, accessibilityLabel, ref: itemRef, ...itemRest }, index) => {
+            const isSelected = currentValues.includes(id)
 
-          // Pass an object of relevant component state as first argument for any passed-in press handlers
-          const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+            // 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 = (event) => {
-            if (pressHandlers.onPress) pressHandlers.onPress()
-            toggleOneValue(id, event)
-          }
+            const handlePress = (event) => {
+              if (pressHandlers.onPress) pressHandlers.onPress(event)
+              toggleOneValue(id, event)
+            }
 
-          const itemA11y = {
-            accessibilityState: { checked: isSelected },
-            accessibilityRole: itemA11yRole,
-            accessibilityLabel,
-            ...a11yProps.getPositionInSet(items.length, index)
-          }
+            const itemA11y = {
+              accessibilityState: { checked: isSelected },
+              accessibilityRole: itemA11yRole,
+              accessibilityLabel,
+              ...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
-          return (
-            <ButtonBase
-              ref={itemRef}
-              key={id}
-              {...pressHandlers}
-              onPress={handlePress}
-              tokens={getButtonTokens}
-              selected={isSelected}
-              inactive={inactive}
-              {...itemA11y}
-            >
-              {label}
-            </ButtonBase>
-          )
-        })}
+            // 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
+            return (
+              <ButtonBase
+                ref={itemRef}
+                key={id}
+                {...pressHandlers}
+                onPress={handlePress}
+                tokens={getButtonTokens}
+                selected={isSelected}
+                inactive={inactive}
+                {...itemA11y}
+                {...selectItemProps(itemRest)}
+              >
+                {label}
+              </ButtonBase>
+            )
+          }
+        )}
       </StackWrap>
     )
   }
@@ -124,6 +140,7 @@ ButtonGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.shape({
+      ...selectedItemPropTypes,
       /**
        * The text displayed to the user in the button, describing this option,
        * passed to the button as its child.

package/src/Card/PressableCardBase.jsx

@@ -7,6 +7,7 @@ import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   clickProps,
+  focusHandlerProps,
   getTokenNames,
   getTokensSetPropType,
   linkProps,
@@ -20,7 +21,11 @@ import {
 } from '../utils'
 import CardBase from './CardBase'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 const tokenKeys = [
   ...getTokenNames('Card'),

package/src/Checkbox/Checkbox.jsx

@@ -9,6 +9,7 @@ import StackView from '../StackView'
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
+  focusHandlerProps,
   getTokensPropType,
   selectSystemProps,
   useInputValue,
@@ -17,7 +18,11 @@ import {
 } from '../utils'
 import useUniqueId from '../utils/useUniqueId'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
 
 const selectInputStyles = (
   {
@@ -179,32 +184,38 @@ const Checkbox = forwardRef(
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
               const iconTokens = selectIconTokens(stateTokens)
+              const labelStyles = selectLabelStyles(stateTokens)
+              const alignWithLabel = label
+                ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
+                : null
 
               return (
                 <View style={staticStyles.container}>
-                  <View
-                    style={StyleSheet.flatten([
-                      staticStyles.defaultInputStyles,
-                      selectInputStyles(stateTokens, isChecked)
-                    ])}
-                    testID="Checkbox-Input"
-                  >
-                    {/* Add a real input on Web, skip on native platforms */}
-                    <CheckboxInput
-                      checked={isChecked}
-                      defaultChecked={defaultChecked}
-                      disabled={inactive}
-                      id={inputId}
-                      isControlled={isControlled}
-                      name={name}
-                      value={value}
-                    />
-                    {isChecked && IconComponent && (
-                      <IconComponent {...iconTokens} testID="Checkbox-Icon" />
-                    )}
+                  <View style={alignWithLabel}>
+                    <View
+                      style={[
+                        staticStyles.defaultInputStyles,
+                        selectInputStyles(stateTokens, isChecked)
+                      ]}
+                      testID="Checkbox-Input"
+                    >
+                      {/* Add a real input on Web, skip on native platforms */}
+                      <CheckboxInput
+                        checked={isChecked}
+                        defaultChecked={defaultChecked}
+                        disabled={inactive}
+                        id={inputId}
+                        isControlled={isControlled}
+                        name={name}
+                        value={value}
+                      />
+                      {isChecked && IconComponent && (
+                        <IconComponent {...iconTokens} testID="Checkbox-Icon" />
+                      )}
+                    </View>
                   </View>
                   {Boolean(label) && (
-                    <Text style={selectLabelStyles(stateTokens)}>
+                    <Text style={labelStyles}>
                       <CheckboxLabel forId={inputId}>{label}</CheckboxLabel>
                     </Text>
                   )}
@@ -285,5 +296,6 @@ export default Checkbox
 const staticStyles = StyleSheet.create({
   wrapper: { backgroundColor: 'transparent' },
   container: { flexDirection: 'row', alignItems: 'center' },
-  defaultInputStyles: { alignItems: 'center', justifyContent: 'center' }
+  defaultInputStyles: { alignItems: 'center', justifyContent: 'center' },
+  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' }
 })

package/src/Checkbox/CheckboxGroup.jsx

@@ -4,11 +4,27 @@ import ABBPropTypes from 'airbnb-prop-types'
 
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
-import { getTokensPropType, useMultipleInputValues, variantProp } from '../utils'
+import {
+  a11yProps,
+  containUniqueFields,
+  focusHandlerProps,
+  getTokensPropType,
+  selectSystemProps,
+  useMultipleInputValues,
+  variantProp,
+  viewProps
+} from '../utils'
 import { getStackedContent } from '../StackView'
 import Checkbox from './Checkbox'
 import Fieldset from '../Fieldset'
 
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
+
 /**
  * A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
  *
@@ -73,7 +89,8 @@ const CheckboxGroup = forwardRef(
       onChange,
       readOnly,
       name: inputGroupName,
-      inactive
+      inactive,
+      ...rest
     },
     ref
   ) => {
@@ -89,27 +106,37 @@ const CheckboxGroup = forwardRef(
       onChange,
       readOnly: readOnly || inactive
     })
-    const checkboxes = items.map(({ label, id, onChange: itemOnChange, ref: itemRef }, index) => {
-      const checkboxId = id || `Checkbox[${index}]`
-      const handleChange = (newCheckedState, event) => {
-        if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
-        toggleOneValue(checkboxId, event)
+
+    const uniqueFields = ['id', 'label']
+    if (!containUniqueFields(items, uniqueFields)) {
+      throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`)
+    }
+
+    const checkboxes = items.map(
+      ({ label, id, onChange: itemOnChange, ref: itemRef, ...itemRest }, index) => {
+        const checkboxId = id || `Checkbox[${index}]`
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event)
+          toggleOneValue(checkboxId, event)
+        }
+
+        return (
+          <Checkbox
+            ref={itemRef}
+            key={checkboxId}
+            id={checkboxId}
+            checked={currentValues.includes(checkboxId)}
+            onChange={handleChange}
+            inactive={inactive}
+            label={label}
+            name={inputGroupName}
+            tokens={radioTokens}
+            variant={variant}
+            {...selectItemProps(itemRest)}
+          />
+        )
       }
-      return (
-        <Checkbox
-          ref={itemRef}
-          key={checkboxId}
-          id={checkboxId}
-          checked={currentValues.includes(checkboxId)}
-          onChange={handleChange}
-          inactive={inactive}
-          label={label}
-          name={inputGroupName}
-          tokens={radioTokens}
-          variant={variant}
-        />
-      )
-    })
+    )
 
     return (
       <Fieldset
@@ -122,6 +149,7 @@ const CheckboxGroup = forwardRef(
         feedback={feedback}
         inactive={inactive}
         validation={validation}
+        {...selectProps(rest)}
       >
         {getStackedContent(checkboxes, { space, direction: 'column' })}
       </Fieldset>
@@ -131,6 +159,7 @@ const CheckboxGroup = forwardRef(
 CheckboxGroup.displayName = 'CheckboxGroup'
 
 CheckboxGroup.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides for the outer CheckboxGroup component
    */
@@ -148,6 +177,7 @@ CheckboxGroup.propTypes = {
    */
   items: PropTypes.arrayOf(
     PropTypes.exact({
+      ...selectedItemPropTypes,
       label: PropTypes.string,
       id: PropTypes.string,
       onChange: PropTypes.func,

package/src/ExpandCollapse/Panel.jsx

@@ -74,8 +74,8 @@ const ExpandCollapsePanel = forwardRef(
     }
 
     const onContainerLayout = (event) => {
-      if (containerHeight === null) {
-        const { layout: { height = 0 } = {} } = event.nativeEvent
+      const { layout: { height = 0 } = {} } = event.nativeEvent
+      if (Platform.OS === 'web' || (Platform.OS !== 'web' && containerHeight === null)) {
         setContainerHeight(height)
       }
     }
@@ -104,14 +104,14 @@ const ExpandCollapsePanel = forwardRef(
         >
           {control}
         </ExpandCollapseControl>
-        <View style={overflowContainerStyles} {...focusabilityProps}>
-          <Animated.View
-            onLayout={onContainerLayout}
-            style={[staticStyles.itemsContainer, animatedStyles]}
-          >
+        <Animated.View
+          style={[overflowContainerStyles, animatedStyles, staticStyles.itemsContainer]}
+          {...focusabilityProps}
+        >
+          <View onLayout={onContainerLayout}>
             <View style={selectContainerStyles(themeTokens)}>{children}</View>
-          </Animated.View>
-        </View>
+          </View>
+        </Animated.View>
       </View>
     )
   }

package/src/FlexGrid/Col/Col.jsx

@@ -23,6 +23,7 @@ const Col = forwardRef(
       mdOffset,
       lgOffset,
       xlOffset,
+      flex,
       ...viewProps
     },
     ref
@@ -106,7 +107,10 @@ const Col = forwardRef(
 
     let hidingStyles = {}
 
-    const shown = Platform.OS === 'web' ? 'block' : 'flex'
+    // TODO: consider setting this to always 'flex' in a major release.
+    // `display: block` is invalid in native apps.
+    // See https://telusdigital.atlassian.net/browse/UDS1-92
+    const shown = !flex && Platform.OS === 'web' ? 'block' : 'flex'
 
     if (viewPort === viewports.xs) {
       hidingStyles = {
@@ -267,7 +271,12 @@ Col.propTypes = {
    */
   horizontalAlign: responsiveProps.getTypeOptionallyByViewport(
     PropTypes.oneOf(['left', 'center', 'right'])
-  )
+  ),
+  /**
+   * (web only) Stretches the column to fill vertical space using `display: flex`.
+   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
+   */
+  flex: PropTypes.bool
 }
 
 export default Col

package/src/FlexGrid/Row/Row.jsx

@@ -72,21 +72,27 @@ const Row = forwardRef(
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
 
     let flexDirection = ''
+    let flexWrap = ''
 
     if (viewPort === viewports.xs) {
       flexDirection = reverseLevel[0] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[0] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.sm) {
       flexDirection = reverseLevel[1] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[1] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.md) {
       flexDirection = reverseLevel[2] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[2] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.lg) {
       flexDirection = reverseLevel[3] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[3] ? 'wrap-reverse' : 'wrap'
     }
     if (viewPort === viewports.xl) {
       flexDirection = reverseLevel[4] ? 'row-reverse' : 'row'
+      flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap'
     }
 
     return (
@@ -97,6 +103,7 @@ const Row = forwardRef(
           styles.row,
           {
             flexDirection,
+            flexWrap,
             ...horizontalAlignStyles(horizontalAlign),
             ...verticalAlignStyles(verticalAlign),
             ...distributeStyles(distribute)
@@ -118,8 +125,7 @@ const styles = StyleSheet.create({
     flexGrow: 0,
     flexShrink: 1,
     flexBasis: 'auto',
-    flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexDirection: 'row'
   }
 })
 

package/src/InputLabel/InputLabel.jsx

@@ -47,35 +47,46 @@ const InputLabel = forwardRef(
     const isHintInline = hintPosition === 'inline'
 
     return (
-      <View
-        ref={ref}
-        style={[staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]}
-        {...selectProps(rest)}
-      >
-        <Text
-          style={[selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]}
-        >
-          <LabelContent forId={forId}>{label}</LabelContent>
-        </Text>
-        {hint && isHintInline && (
+      <>
+        <View ref={ref} style={staticStyles.container} {...selectProps(rest)}>
           <Text
-            style={[selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)]}
-            nativeID={hintId}
+            style={[
+              selectLabelStyles(themeTokens),
+              selectGapStyles(themeTokens),
+              staticStyles.label
+            ]}
           >
-            {hint}
+            <LabelContent forId={forId}>{label}</LabelContent>
           </Text>
-        )}
-        {hasTooltip && (
-          <View style={staticStyles.tooltipAlign}>
-            <Tooltip content={tooltip} />
-          </View>
-        )}
+          {hint && isHintInline && (
+            <Text
+              style={[
+                selectHintStyles(themeTokens),
+                hasTooltip && selectGapStyles(themeTokens),
+                staticStyles.label
+              ]}
+              nativeID={hintId}
+            >
+              {hint}
+            </Text>
+          )}
+          {hasTooltip && (
+            <View
+              style={[
+                staticStyles.tooltipAlign,
+                { height: themeTokens.fontSize * themeTokens.lineHeight }
+              ]}
+            >
+              <Tooltip content={tooltip} />
+            </View>
+          )}
+        </View>
         {hint && !isHintInline && (
           <Text style={[selectHintStyles(themeTokens), staticStyles.hintBelow]} nativeID={hintId}>
             {hint}
           </Text>
         )}
-      </View>
+      </>
     )
   }
 )
@@ -115,21 +126,19 @@ export default InputLabel
 
 const staticStyles = StyleSheet.create({
   container: {
-    display: 'flex',
+    flexShrink: 1,
     flexDirection: 'row',
     alignItems: 'baseline'
   },
-  containerWithHintBelow: {
-    flexWrap: 'wrap'
-  },
   label: {
-    flexShrink: 0
+    flexShrink: 1
   },
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
   },
   tooltipAlign: {
-    alignSelf: 'center'
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 })

package/src/Link/LinkBase.jsx

@@ -45,10 +45,8 @@ const selectOuterBorderStyles = ({
       }
     : {}
 
-const selectTextStyles = ({ color, textLine, textLineStyle }) => ({
+const selectTextStyles = ({ color }) => ({
   color,
-  textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle,
   ...Platform.select({
     web: {
       // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -65,6 +63,18 @@ const selectBlockStyles = ({ blockFontWeight, blockFontSize, blockLineHeight, bl
     fontName: blockFontName
   })
 
+const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
+  color,
+  textDecorationLine: textLine,
+  textDecorationStyle: textLineStyle,
+  ...Platform.select({
+    web: {
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      transition: 'color 200ms'
+    }
+  })
+})
+
 const selectIconTokens = ({ color, iconSize, iconTranslateX, iconTranslateY }) => ({
   color,
   translateX: iconTranslateX,
@@ -132,8 +142,14 @@ const LinkBase = forwardRef(
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
+          const decorationStyles = selectDecorationStyles(themeTokens)
           const hasIcon = Boolean(icon || themeTokens.icon)
-          return [outerBorderStyles, blockLeftStyle, hasIcon && staticStyles.rowContainer]
+          return [
+            outerBorderStyles,
+            blockLeftStyle,
+            decorationStyles,
+            hasIcon && staticStyles.rowContainer
+          ]
         }}
       >
         {(linkState) => {

package/src/Link/TextButton.jsx

@@ -10,19 +10,7 @@ import LinkBase from './LinkBase'
  * take place on the current page, or for navigation within an app.
  */
 const TextButton = forwardRef(
-  (
-    {
-      onPress,
-      children,
-      variant,
-      tokens,
-      // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
-      // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
-      accessibilityRole = 'button',
-      ...linkProps
-    },
-    ref
-  ) => {
+  ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (
       <LinkBase
@@ -44,10 +32,4 @@ TextButton.propTypes = {
   onPress: PropTypes.func.isRequired
 }
 
-// Remove incompatible Link prop (if this build includes propTypes)
-// TODO: test if this works with web navigation in omniplatform React Navigation
-// https://github.com/telus/universal-design-system/issues/665
-// eslint-disable-next-line react/forbid-foreign-prop-types
-if (TextButton.propTypes?.href) delete TextButton.propTypes.href
-
 export default TextButton