@telus-uds/components-base 3.28.2 → 3.29.0

package/src/ExpandCollapse/Panel.jsx

@@ -90,6 +90,7 @@ const ExpandCollapsePanel = React.forwardRef(
       onPress,
       control,
       controlTokens,
+      controlAlign,
       children,
       tokens,
       variant,
@@ -174,6 +175,7 @@ const ExpandCollapsePanel = React.forwardRef(
             {...selectedProps}
             isExpanded={isExpanded}
             tokens={controlTokens}
+            controlAlign={controlAlign}
             variant={variant}
             onPress={handleControlPress}
             ref={controlRef}
@@ -284,6 +286,10 @@ ExpandCollapsePanel.propTypes = {
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
   controlTokens: getTokensPropType('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -7,9 +7,24 @@ import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
 
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
 const ExpandCollapseMini = React.forwardRef(
   (
-    { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
+    {
+      children,
+      onToggle = () => {},
+      tokens = {},
+      nativeID,
+      initialOpen = false,
+      dataSet,
+      align,
+      ...rest
+    },
     ref
   ) => {
     const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel')
@@ -40,10 +55,11 @@ const ExpandCollapseMini = React.forwardRef(
               textLine: tokens.textLine ?? 'none',
               backgroundColor: 'transparent'
             }}
+            controlAlign={align && alignMap[align]}
             // TODO refactor
             // eslint-disable-next-line react/no-unstable-nested-components
             control={(pressableState) => (
-              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+              <ExpandCollapseMiniControl pressableState={pressableState} align={align} {...rest} />
             )}
             controlRef={ref}
             nativeID={nativeID}
@@ -87,7 +103,11 @@ ExpandCollapseMini.propTypes = {
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: PropTypes.object
+  dataSet: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
 
 export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -7,6 +7,12 @@ import { htmlAttrs, viewProps, selectSystemProps } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+}
+
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
 const presentationOnly = {
@@ -24,6 +30,7 @@ const ExpandCollapseMiniControl = React.forwardRef(
       iconPosition = 'right',
       tokens,
       variant = {},
+      align,
       ...rest
     },
     ref
@@ -96,7 +103,8 @@ const ExpandCollapseMiniControl = React.forwardRef(
           ...getTokens(linkState),
           iconSize,
           blockFontSize: fontSize,
-          blockLineHeight: lineHeight
+          blockLineHeight: lineHeight,
+          ...(align && { alignSelf: alignSelfMap[align] })
         })}
         ref={ref}
         {...presentationOnly}
@@ -132,7 +140,11 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: PropTypes.object
+  variant: PropTypes.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: PropTypes.oneOf(['start', 'middle', 'end'])
 }
 
 export default ExpandCollapseMiniControl

package/src/Link/ChevronLink.jsx

@@ -34,6 +34,7 @@ const ChevronLink = React.forwardRef(
     return (
       <LinkBase
         {...otherlinkProps}
+        useMeasuredMobileIconLayout
         iconPosition={direction}
         tokens={getTokens}
         dataSet={dataSet}

package/src/Link/LinkBase.jsx

@@ -16,6 +16,7 @@ import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
+import MobileIconTextContent from './MobileIconTextContent'
 import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
@@ -133,6 +134,7 @@ const LinkBase = React.forwardRef(
       tokens = {},
       children,
       dataSet,
+      useMeasuredMobileIconLayout = false,
       accessibilityRole = 'link',
       ...rawRest
     },
@@ -171,12 +173,14 @@ const LinkBase = React.forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
-
-          const mobileCompensation = null
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
 
           return [
             outerBorderStyles,
-            mobileCompensation,
+            shouldUseMeasuredMobileContent
+              ? staticStyles.measuredMobileOuterBorderCompensation
+              : null,
             blockLeftStyle,
             decorationStyles,
             hasIcon && staticStyles.rowContainer
@@ -196,28 +200,50 @@ const LinkBase = React.forwardRef(
 
           const isTextOnlyLink = !IconComponent && !icon && accessibilityRole === 'link'
           const adjustedIconSpace = Platform.OS !== 'web' && isTextOnlyLink ? 0 : iconSpace
+          const shouldUseMeasuredMobileContent =
+            Platform.OS !== 'web' && useMeasuredMobileIconLayout
+          const textBaselineStyle = shouldUseMeasuredMobileContent ? null : staticStyles.baseline
+
+          const linkTextContent = (
+            <Text
+              style={[
+                textStyles,
+                blockTextStyles,
+                textBaselineStyle,
+                staticStyles.bubblePointerEvents
+              ]}
+            >
+              {typeof children === 'function' ? children(linkState) : children}
+            </Text>
+          )
+
+          const sharedIconProps = {
+            ...iconProps,
+            tokens: iconTokens,
+            style: staticStyles.bubblePointerEvents
+          }
+
+          if (shouldUseMeasuredMobileContent) {
+            return (
+              <MobileIconTextContent
+                icon={IconComponent}
+                iconPosition={iconPosition}
+                space={adjustedIconSpace}
+                iconProps={sharedIconProps}
+              >
+                {linkTextContent}
+              </MobileIconTextContent>
+            )
+          }
 
           return (
             <IconText
               icon={IconComponent}
               iconPosition={iconPosition}
               space={adjustedIconSpace}
-              iconProps={{
-                ...iconProps,
-                tokens: iconTokens,
-                style: staticStyles.bubblePointerEvents
-              }}
+              iconProps={sharedIconProps}
             >
-              <Text
-                style={[
-                  textStyles,
-                  blockTextStyles,
-                  staticStyles.baseline,
-                  staticStyles.bubblePointerEvents
-                ]}
-              >
-                {typeof children === 'function' ? children(linkState) : children}
-              </Text>
+              {linkTextContent}
             </IconText>
           )
         }}
@@ -280,11 +306,12 @@ const staticStyles = StyleSheet.create({
       }
     })
   },
-  outerBorderCompensation: {
+  measuredMobileOuterBorderCompensation: {
     ...(Platform.OS !== 'web' && {
       marginHorizontal: 2,
+      marginVertical: 2,
       paddingHorizontal: Platform.OS === 'android' ? 2 : 0,
-      paddingTop: Platform.OS === 'android' ? 2 : 0
+      paddingVertical: Platform.OS === 'android' ? 2 : 0
     })
   }
 })

package/src/Link/MobileIconTextContent.jsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text, View, StyleSheet } from 'react-native'
+
+import Icon, { iconComponentPropTypes } from '../Icon/Icon'
+import { spacingProps } from '../utils'
+
+const MobileIconTextContent = React.forwardRef(
+  ({ space = 0, iconPosition = 'left', icon: IconComponent, iconProps = {}, children }, ref) => {
+    const [translateY, setTranslateY] = React.useState(0)
+    const latestTranslateYRef = React.useRef(0)
+    const layoutsRef = React.useRef({
+      container: null,
+      text: null,
+      icon: null
+    })
+
+    const applyAlignment = React.useCallback(() => {
+      const { container, text, icon } = layoutsRef.current
+
+      if (!container || !icon || !icon.height) return
+
+      const targetY = text ? text.y + text.height / 2 : container.height / 2
+      const iconY = icon.y + icon.height / 2
+      const nextTranslateY = Math.round((targetY - iconY) * 100) / 100
+
+      if (!Number.isFinite(nextTranslateY)) return
+      if (Math.abs(nextTranslateY - latestTranslateYRef.current) < 0.5) return
+
+      latestTranslateYRef.current = nextTranslateY
+      setTranslateY(nextTranslateY)
+    }, [])
+
+    const handleContainerLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.container = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleTextLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.text = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const handleIconLayout = React.useCallback(
+      ({ nativeEvent: { layout } }) => {
+        layoutsRef.current.icon = layout
+        applyAlignment()
+      },
+      [applyAlignment]
+    )
+
+    const iconContent = IconComponent ? (
+      <Icon ref={ref} icon={IconComponent} scalesWithText {...iconProps} />
+    ) : null
+
+    const iconWrapper = IconComponent ? (
+      <View
+        onLayout={handleIconLayout}
+        style={[staticStyles.iconContainer, { transform: [{ translateY }] }]}
+      >
+        {iconContent}
+      </View>
+    ) : null
+
+    if (iconPosition === 'inline') {
+      return (
+        <Text onLayout={handleContainerLayout}>
+          <Text onLayout={handleTextLayout}>{children}</Text>{' '}
+          <View style={staticStyles.inlineIconContainer}>{iconWrapper}</View>
+        </Text>
+      )
+    }
+
+    const iconSpaceStyle = iconPosition === 'left' ? { marginRight: space } : { marginLeft: space }
+
+    return (
+      <View onLayout={handleContainerLayout} style={staticStyles.rowContainer}>
+        {iconPosition === 'left' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+        <View onLayout={handleTextLayout}>{children}</View>
+        {iconPosition === 'right' && <View style={iconSpaceStyle}>{iconWrapper}</View>}
+      </View>
+    )
+  }
+)
+
+MobileIconTextContent.displayName = 'MobileIconTextContent'
+
+MobileIconTextContent.propTypes = {
+  /**
+   * Amount of space between text and icon. Uses the theme spacing scale.
+   */
+  space: spacingProps.types.spacingValue,
+  /**
+   * Position of the icon relative to text.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: PropTypes.elementType,
+  /**
+   * Props passed to the icon component.
+   */
+  iconProps: PropTypes.exact(iconComponentPropTypes),
+  /**
+   * Content rendered alongside the icon.
+   */
+  children: PropTypes.node
+}
+
+const staticStyles = StyleSheet.create({
+  rowContainer: {
+    flexDirection: 'row'
+  },
+  iconContainer: {
+    alignSelf: 'flex-start'
+  },
+  inlineIconContainer: {
+    position: 'absolute'
+  }
+})
+
+export default MobileIconTextContent

package/src/TabBar/TabBar.jsx

@@ -42,12 +42,24 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  *     items={items}
  *     initiallySelectedItem="1"
  *     onChange={(itemId) => console.log(itemId)}
+ *     accessibilityLabel="Main navigation"
  *   />
  * )
  */
 
 const TabBar = React.forwardRef(
-  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+  (
+    {
+      items = [],
+      initiallySelectedItem = '0',
+      onChange,
+      variant,
+      tokens,
+      accessibilityLabel,
+      ...rest
+    },
+    ref
+  ) => {
     const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
     const themeTokens = useThemeTokens('TabBar', tokens, variant)
 
@@ -62,7 +74,11 @@ const TabBar = React.forwardRef(
         style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
         {...selectProps(rest)}
       >
-        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+        <View
+          style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}
+          accessibilityRole="tablist"
+          accessibilityLabel={accessibilityLabel}
+        >
           {items.map((item, index) => (
             <TabBarItem
               key={item.id}
@@ -73,7 +89,6 @@ const TabBar = React.forwardRef(
               iconActive={item.iconActive}
               onPress={() => handlePress(item.id)}
               id={`tab-item-${index}`}
-              accessibilityRole="tablist"
               tokens={item.tokens}
             />
           ))}
@@ -105,7 +120,9 @@ TabBar.propTypes = {
   /** Variant of TabBar for styling purposes. */
   variant: variantProp.propType,
   /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
+  tokens: getTokensPropType('TabBar'),
+  /** Accessible label for the tab bar navigation region, used by screen readers to identify the tablist. */
+  accessibilityLabel: PropTypes.string
 }
 
 const styles = StyleSheet.create({