@telus-uds/components-base 3.27.0 → 3.28.0

package/src/IconButton/IconButton.jsx

@@ -92,34 +92,46 @@ const selectInnerStyle = (
     height
   },
   password
-) => ({
-  // Inner borders animate with the icon and should be treated like a themable feature of the icon
-  borderColor,
-  borderRadius,
-  borderWidth,
-  borderTopLeftRadius,
-  borderTopRightRadius,
-  borderBottomLeftRadius,
-  borderBottomRightRadius,
-  borderTopWidth,
-  borderRightWidth,
-  borderBottomWidth,
-  borderLeftWidth,
-  padding: calculatePadding(padding, borderWidth),
-  paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
-  paddingRight: calculatePadding(paddingRight, borderRightWidth),
-  paddingTop: calculatePadding(paddingTop, borderTopWidth),
-  paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
-  ...Platform.select({
-    web: {
-      pointerEvents: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }),
-  ...getPasswordDimensions(password, width, height)
-})
+) => {
+  const basePadding = calculatePadding(padding, borderWidth)
+
+  const calculateSpecificPadding = (specificPadding, specificBorderWidth) => {
+    const calculated = calculatePadding(
+      specificPadding ?? padding,
+      specificBorderWidth ?? borderWidth
+    )
+    return calculated !== basePadding && calculated !== undefined ? calculated : undefined
+  }
+
+  return {
+    // Inner borders animate with the icon and should be treated like a themable feature of the icon
+    borderColor,
+    borderRadius,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    padding: basePadding,
+    paddingLeft: calculateSpecificPadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculateSpecificPadding(paddingRight, borderRightWidth),
+    paddingTop: calculateSpecificPadding(paddingTop, borderTopWidth),
+    paddingBottom: calculateSpecificPadding(paddingBottom, borderBottomWidth),
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }),
+    ...getPasswordDimensions(password, width, height)
+  }
+}
 
 /**
  * A pressable themeless base component that handles pressable states and passes tokens

package/src/Modal/Modal.jsx

@@ -68,9 +68,10 @@ const selectModalStyles = ({
   ...applyShadowToken(shadow)
 })
 
-const selectBackdropStyles = ({ backdropColor, backdropOpacity }) => ({
+const selectBackdropStyles = ({ backdropColor, backdropOpacity, backdropCursor }) => ({
   backgroundColor: backdropColor,
-  opacity: backdropOpacity
+  opacity: backdropOpacity,
+  ...(Platform.OS === 'web' && backdropCursor ? { cursor: backdropCursor } : {})
 })
 
 const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
@@ -119,12 +120,20 @@ const Modal = React.forwardRef(
       cancelButtonText,
       cancelButtonType,
       footer,
+      backgroundDismissible = true,
       ...rest
     },
     ref
   ) => {
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth })
+
+    const isBackdropClickable = onClose && backgroundDismissible
+
+    const themeTokens = useThemeTokens('Modal', tokens, variant, {
+      viewport,
+      maxWidth,
+      backdropCursor: isBackdropClickable ? 'pointer' : 'default'
+    })
     const modalRef = useScrollBlocking(isOpen)
     const modalBodyRef = React.useRef(ref)
     const modalContentRef = React.useRef(null)
@@ -253,7 +262,7 @@ const Modal = React.forwardRef(
           </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}>
+          <TouchableWithoutFeedback onPress={isBackdropClickable && handleClose}>
             <View style={[staticStyles.backdrop, selectBackdropStyles(themeTokens)]} />
           </TouchableWithoutFeedback>
         </ScrollView>
@@ -349,7 +358,15 @@ Modal.propTypes = {
   /**
    * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
    */
-  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  /**
+   * Controls whether the modal can be dismissed by clicking on the backdrop.
+   * When set to `false`, clicking the backdrop will not close the modal.
+   * The backdrop cursor automatically changes to 'default' to indicate it's not clickable.
+   * Note: Backdrop dismissal requires `onClose` to be defined.
+   * @default true
+   */
+  backgroundDismissible: PropTypes.bool
 }
 
 export default Modal
@@ -361,12 +378,7 @@ const staticStyles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: -1,
-    ...Platform.select({
-      web: {
-        cursor: 'pointer'
-      }
-    })
+    zIndex: -1
   },
   positioningContainer: {
     flexBasis: '100%',

package/src/Progress/Progress.jsx

@@ -4,6 +4,7 @@ import { View, StyleSheet } from 'react-native'
 
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
+import ProgressContext from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -45,6 +46,12 @@ const selectProgressStyles = ({
  *
  * - Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your
  *   progress bar container narrower.
+ * - Use the `layers` variant to control how multiple progress bars are positioned:
+ *   - `false` (default): bars are positioned vertically one below the other.
+ *   - `true`: bars overlay on top of each other (layered/stacked on z-axis).
+ *   Note: The `layers` prop is deprecated. After August 2026, `layers: true` will become the permanent
+ *   default behavior and the `layers` prop will be removed. To maintain vertical layout after removal,
+ *   use separate individual Progress components.
  *
  * ## Usability and A11y guidelines
  *
@@ -55,15 +62,19 @@ const selectProgressStyles = ({
  */
 const Progress = React.forwardRef(({ children, tokens, variant, ...rest }, ref) => {
   const themeTokens = useThemeTokens('Progress', tokens, variant)
+  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
+  const layers = variant?.layers ?? false
 
   return (
-    <View
-      ref={ref}
-      style={[staticStyles.progressContainer, selectProgressStyles(themeTokens)]}
-      {...selectProps(rest)}
-    >
-      {children}
-    </View>
+    <ProgressContext.Provider value={{ layers }}>
+      <View
+        ref={ref}
+        style={[staticStyles.progressContainer, selectProgressStyles(themeTokens)]}
+        {...selectProps(rest)}
+      >
+        {children}
+      </View>
+    </ProgressContext.Provider>
   )
 })
 Progress.displayName = 'Progress'

package/src/Progress/ProgressBar.jsx

@@ -6,22 +6,23 @@ import ProgressBarBackground from './ProgressBarBackground'
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { MAX_PERCENT_VALUE, MIN_PERCENT_VALUE } from './constants'
+import ProgressContext from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectBarStyles = (
-  { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow },
-  calculatedPercentage,
-  barPosition
-) => ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor,
-  ...applyShadowToken(shadow),
-  width: `${calculatedPercentage}%`,
-  left: `${barPosition}%`
-})
+const selectBarStyles = ({ themeTokens, calculatedPercentage, barPosition, layers }) => {
+  const { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow } = themeTokens
+  return {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor,
+    ...applyShadowToken(shadow),
+    width: `${calculatedPercentage}%`,
+    left: `${barPosition}%`,
+    ...(layers ? { position: 'absolute' } : {})
+  }
+}
 
 /**
  * The `ProgressBar` is a visual representation of linear progression.
@@ -70,6 +71,7 @@ const ProgressBar = React.forwardRef(
     },
     ref
   ) => {
+    const { layers } = React.useContext(ProgressContext)
     const { items, current } = offset
     let calculatedPercentage = percentage
     let barPosition = MIN_PERCENT_VALUE
@@ -104,7 +106,10 @@ const ProgressBar = React.forwardRef(
     return percentage > MIN_PERCENT_VALUE || items ? (
       <View
         ref={ref}
-        style={[staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)]}
+        style={[
+          staticStyles.bar,
+          selectBarStyles({ themeTokens, calculatedPercentage, barPosition, layers })
+        ]}
         {...selectedProps}
       >
         {children ?? <ProgressBarBackground variant={variant} />}

package/src/Progress/ProgressContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const ProgressContext = createContext({ layers: false })
+
+export default ProgressContext

package/src/SideNav/Item.jsx

@@ -29,9 +29,9 @@ function selectItemStyles({
 }) {
   return {
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderBottomColor: borderColor,
+    borderBottomWidth: borderWidth,
+    borderBottomStyle: borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,

package/src/SideNav/ItemsGroup.jsx

@@ -6,6 +6,12 @@ import ExpandCollapse from '../ExpandCollapse'
 import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils'
 import { useThemeTokensCallback } from '../ThemeProvider'
 
+const selectPanelTokens = ({ borderWidth, borderColor, backgroundColor }) => ({
+  contentPanelBackgroundColor: backgroundColor,
+  borderBottomWidth: borderWidth,
+  borderColor
+})
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -37,27 +43,30 @@ const ItemsGroup = React.forwardRef(
     const getItemAppearance = (appearance) => ({ ...getAppearance(appearance), type: 'parent' })
 
     const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant)
-    const getPanelTokens = (appearance) => {
-      const { panelBorderColor, ...itemsGroupTokens } = getGroupTokens(getAppearance(appearance))
-      const groupTokens = {
-        ...itemsGroupTokens,
-        borderWidth: 0,
-        marginBottom: 0
-      }
-      return selectTokens('ExpandCollapsePanel', groupTokens)
-    }
-
     const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant)
-    const getControlTokens = (appearance) =>
-      selectTokens('ExpandCollapseControl', {
-        ...getItemTokens(getItemAppearance(appearance)), // main style from SideNavItem
-        ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
+
+    const getPanelTokens = (appearance) =>
+      selectTokens('ExpandCollapsePanel', {
+        ...staticTokens.panel,
+        ...getGroupTokens(getAppearance(appearance)),
+        ...selectPanelTokens(getItemTokens(getItemAppearance(appearance)))
       })
 
+    const getControlTokens = (appearance) => ({
+      ...selectTokens('ExpandCollapseControl', {
+        ...getItemTokens(getItemAppearance(appearance)), // main style from SideNavItem
+        ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc,
+      }),
+      ...staticTokens.control
+    })
+
     const controlContent = (controlState) => {
       const currentItemTokens = getItemTokens(getItemAppearance(controlState))
-
-      return <ItemContent tokens={currentItemTokens}>{label}</ItemContent>
+      return (
+        <ItemContent tokens={{ ...currentItemTokens, ...staticTokens.content }}>
+          {label}
+        </ItemContent>
+      )
     }
 
     return (
@@ -70,12 +79,23 @@ const ItemsGroup = React.forwardRef(
         controlTokens={getControlTokens}
         control={controlContent}
         accessibilityState={{ active: isActive }} // ExpandCollapse.Panel handles expanded state
+        disableMobileScrollBuffer
       >
         {children}
       </ExpandCollapse.Panel>
     )
   }
 )
+
+const staticTokens = {
+  panel: {
+    borderWidth: 0,
+    marginBottom: 0
+  },
+  control: { borderWidth: 0, textLine: null },
+  content: { accentWidth: 0 }
+}
+
 ItemsGroup.displayName = 'ItemsGroup'
 
 ItemsGroup.propTypes = {

package/src/SideNav/SideNav.jsx

@@ -14,14 +14,23 @@ import {
   viewProps
 } from '../utils'
 
-function selectBorderStyles(tokens) {
+const selectContainerTokens = ({ borderWidth, borderStyle, borderColor }) => {
   return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
+    borderTopWidth: borderWidth,
+    borderStyle,
+    borderColor
   }
 }
 
+const selectItemTokens = (tokens = {}, isLastItem = false) => ({
+  ...tokens,
+  ...(isLastItem
+    ? {
+        borderWidth: 0
+      }
+    : {})
+})
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -46,11 +55,11 @@ const SideNav = React.forwardRef(
       <ExpandCollapse
         ref={ref}
         maxOpen={accordion ? 1 : null}
-        style={selectBorderStyles(themeTokens)}
+        tokens={selectContainerTokens(themeTokens)}
         {...selectProps(rest)}
       >
         {({ openIds, onToggle }) => {
-          const renderItem = (item, index, groupId) => {
+          const renderItem = (item, index, groupId, isLastItem = false) => {
             const { itemId = `item-${index}`, onPress } = item.props
             const handlePress = (...args) => {
               onItemPress(...args)
@@ -64,7 +73,7 @@ const SideNav = React.forwardRef(
                 itemId={itemId}
                 groupId={groupId}
                 variant={groupId ? { ...variant, type: 'child' } : variant}
-                tokens={itemTokens}
+                tokens={selectItemTokens(itemTokens, isLastItem)}
                 isActive={isItemActive(itemId, groupId)}
                 onPress={handlePress}
               />
@@ -93,7 +102,12 @@ const SideNav = React.forwardRef(
                   onToggle={handleToggle}
                 >
                   {React.Children.map(child.props.children, (item, itemIndex) =>
-                    renderItem(item, itemIndex, groupId)
+                    renderItem(
+                      item,
+                      itemIndex,
+                      groupId,
+                      itemIndex === child.props.children.length - 1
+                    )
                   )}
                 </ItemsGroup>
               )