@telus-uds/components-base 3.26.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/List/List.jsx

@@ -5,10 +5,22 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const LIST_ITEM_TYPE = 'ListItem'
+const LINKS_ITEM_TYPE = 'LinksItem'
+
 const isListItem = (element) => {
-  const elementName = element?.type?.displayName || element?.type?.name
-  // Match our own ListItem, and also, custom list items
-  return Boolean(elementName.match(/Item/))
+  if (!element?.type) return false
+
+  if (element.type.__UDS_COMPONENT_TYPE__ === LIST_ITEM_TYPE) {
+    return true
+  }
+
+  const elementName = element.type.displayName || element.type.name || ''
+  return (
+    elementName === LIST_ITEM_TYPE ||
+    elementName.includes(LIST_ITEM_TYPE) ||
+    elementName.includes(LINKS_ITEM_TYPE)
+  )
 }
 
 /**
@@ -22,6 +34,7 @@ const List = React.forwardRef(
       showDivider,
       tokens,
       variant,
+      iconVerticalAlign,
       accessibilityRole = Platform.select({ web: 'list', default: undefined }),
       ...rest
     },
@@ -30,13 +43,19 @@ const List = React.forwardRef(
     const items = React.Children.map(children, (child, index) => {
       // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
       if (isListItem(child)) {
-        return React.cloneElement(child, {
-          showDivider,
-          isLastItem: index + 1 === React.Children.count(children),
+        const childProps = {
           tokens,
           variant,
-          ...child.props
-        })
+          ...child.props,
+          showDivider,
+          isLastItem: index + 1 === React.Children.count(children)
+        }
+
+        if (!child.props.iconVerticalAlign && iconVerticalAlign) {
+          childProps.iconVerticalAlign = iconVerticalAlign
+        }
+
+        return React.cloneElement(child, childProps)
       }
       return child
     })
@@ -76,7 +95,12 @@ List.propTypes = {
   /**
    * In case it is not the last item allow display divider
    */
-  showDivider: PropTypes.bool
+  showDivider: PropTypes.bool,
+  /**
+   * The vertical alignment of the icon in ListItems.
+   * This prop is passed down to ListItem components and can be overridden in individual List.Item components.
+   */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom'])
 }
 
 export default List

package/src/List/ListItem.jsx

@@ -1,25 +1,47 @@
 import React from 'react'
-
+import PropTypes from 'prop-types'
 import ListItemBase from './ListItemBase'
 import { useThemeTokens } from '../ThemeProvider'
-import { variantProp } from '../utils'
+import { getTokensPropType, variantProp } from '../utils'
 
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-const ListItem = React.forwardRef(({ tokens, variant, children, title, ...listItemProps }, ref) => {
-  const themeTokens = useThemeTokens('List', tokens, variant)
-  return (
-    <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps} title={title}>
-      {children}
-    </ListItemBase>
-  )
-})
+const ListItem = React.forwardRef(
+  ({ tokens, variant, children, title, iconVerticalAlign = 'top', ...listItemProps }, ref) => {
+    const themeTokens = useThemeTokens('List', tokens, variant)
+    return (
+      <ListItemBase
+        tokens={themeTokens}
+        ref={ref}
+        {...listItemProps}
+        title={title}
+        iconVerticalAlign={iconVerticalAlign}
+      >
+        {children}
+      </ListItemBase>
+    )
+  }
+)
 ListItem.displayName = 'ListItem'
 
 ListItem.propTypes = {
+  /** Theme tokens for styling */
+  tokens: getTokensPropType('List'),
+  /** Variant configuration for the component */
   variant: variantProp.propType,
-  ...ListItemBase.propTypes
+  /** Content to be rendered within the list item */
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /** Title of the list item */
+  title: PropTypes.node,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
+  /** Icon to be displayed */
+  icon: PropTypes.elementType,
+  /** Color of the icon */
+  iconColor: PropTypes.string,
+  /** Size of the icon */
+  iconSize: PropTypes.number
 }
 
 export default ListItem

package/src/List/ListItemBase.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
-
 import ListItemContent from './ListItemContent'
 import ListItemMark from './ListItemMark'
 import Typography from '../Typography'
@@ -10,6 +9,14 @@ import { useThemeTokens } from '../ThemeProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const VERTICAL_CENTERING_DIVISOR = 2
+
+const alignmentMap = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+}
+
 const selectItemBlockStyles = ({ interItemMargin }) => ({
   marginBottom: interItemMargin
 })
@@ -21,9 +28,17 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
   paddingBottom: interItemMarginWithDivider
 })
 
+const selectAlignmentStyles = (iconVerticalAlign) => ({
+  alignItems: alignmentMap[iconVerticalAlign]
+})
+
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
+const calculateIconMarginTop = (itemIconSize, fontSize, lineHeightRatio) => {
+  return (fontSize * lineHeightRatio - itemIconSize) / VERTICAL_CENTERING_DIVISOR
+}
+
 const ListItemBase = React.forwardRef(
   (
     {
@@ -35,6 +50,7 @@ const ListItemBase = React.forwardRef(
       children,
       title,
       isLastItem,
+      iconVerticalAlign = 'top',
       accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
       ...rest
     },
@@ -45,15 +61,15 @@ const ListItemBase = React.forwardRef(
     const itemBlockStyles = selectItemBlockStyles(themeTokens)
     const dividerStyles = selectDividerStyles(themeTokens)
     const { iconMarginTop, itemIconSize } = themeTokens
-    let adjustedIconMarginTop = iconMarginTop
     const { fontSize, lineHeight: lineHeightRatio } = useThemeTokens(
       'Typography',
       {},
       { size: 'h4', bold: true }
     )
-    if (title) {
-      adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2
-    }
+    const adjustedIconMarginTop = title
+      ? calculateIconMarginTop(itemIconSize, fontSize, lineHeightRatio)
+      : iconMarginTop
+
     /**
      * Function responsible returning styling, in case the item is the last shouldn't
      * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -81,14 +97,14 @@ const ListItemBase = React.forwardRef(
         {typeof children === 'function' ? (
           children({ tokens, icon, iconColor, iconSize, isLastItem })
         ) : (
-          <View style={staticStyles.container}>
+          <View style={[staticStyles.innerContainer, selectAlignmentStyles(iconVerticalAlign)]}>
             <ListItemMark
               tokens={{ ...tokens, iconMarginTop: adjustedIconMarginTop }}
               icon={icon}
               iconColor={iconColor}
               iconSize={iconSize}
             />
-            <View style={staticStyles.titleAndContentContainer}>
+            <View style={[staticStyles.titleAndContentContainer]}>
               {Boolean(title) && (
                 <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>
               )}
@@ -101,16 +117,22 @@ const ListItemBase = React.forwardRef(
   }
 )
 ListItemBase.displayName = 'ListItem'
+ListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem'
 
 const staticStyles = StyleSheet.create({
   container: {
+    flexDirection: 'row',
+    width: '100%'
+  },
+  innerContainer: {
     flex: 1,
     flexDirection: 'row'
   },
   titleAndContentContainer: {
     flexDirection: 'column',
-    flexShrink: 1,
-    flexGrow: 1
+    flex: 1,
+    flexGrow: 1,
+    flexShrink: 1
   }
 })
 
@@ -119,6 +141,8 @@ ListItemBase.propTypes = {
   tokens: getTokensPropType('List'),
   variant: variantProp.propType,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  /** Controls the vertical alignment of the icon */
+  iconVerticalAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
   /**
    * Renders side item icon
    */

package/src/List/ListItemMark.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import { View, StyleSheet } from 'react-native'
+import { View } from 'react-native'
 import Icon from '../Icon'
 import { useVariants } from '../utils'
 
@@ -9,33 +8,21 @@ export const tokenTypes = {
   itemIconSize: PropTypes.number.isRequired,
   itemIconColor: PropTypes.string.isRequired,
   listGutter: PropTypes.number.isRequired,
-  iconMarginTop: PropTypes.number.isRequired
+  iconMarginTop: PropTypes.number.isRequired,
+  bulletIcon: PropTypes.elementType.isRequired
 }
 
-const selectItemIconTokens = ({ itemIconSize, itemIconColor }) => ({
-  size: itemIconSize,
-  color: itemIconColor
-})
-
-const selectSideItemContainerStyles = ({ listGutter, iconMarginTop }) => ({
-  marginTop: iconMarginTop,
-  marginRight: listGutter
+const selectContainerStyles = ({ listGutter }) => ({
+  marginInlineEnd: listGutter,
+  display: 'flex',
+  alignItems: 'flex-start'
 })
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = ({ itemIconSize }) => ({
+const selectBulletStyles = ({ itemIconSize }) => ({
   width: itemIconSize,
-  height: itemIconSize
-})
-
-const selectBulletContainerStyles = ({
-  itemBulletContainerWidth,
-  itemBulletContainerHeight,
-  itemBulletContainerAlign
-}) => ({
-  width: itemBulletContainerWidth,
-  height: itemBulletContainerHeight,
-  alignItems: itemBulletContainerAlign
+  height: itemIconSize,
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0
 })
 
 const getIconColorVariants = (iconVariants) =>
@@ -50,26 +37,24 @@ const getIconColorVariants = (iconVariants) =>
  */
 const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {} }, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens
+  const containerStyles = selectContainerStyles(themeTokens)
 
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-  const bulletContainerStyles = selectBulletContainerStyles(themeTokens)
-
-  // TODO: Remove it when iconColor custom colors are deprecated.
   const iconVariants = useVariants('Icon')
   const iconColorVariants = getIconColorVariants(iconVariants)
 
   if (icon) {
-    const iconTokens = selectItemIconTokens(themeTokens)
+    const { itemIconSize, itemIconColor } = themeTokens
+    const finalIconSize = iconSize ?? itemIconSize
+    const finalIconColor =
+      iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : itemIconColor
+
     return (
-      <View style={[sideItemContainerStyles, bulletContainerStyles]}>
+      <View style={containerStyles}>
         <Icon
           icon={icon}
           tokens={{
-            size: iconSize ?? iconTokens.size,
-            ...(((iconColor && !iconColorVariants?.includes(iconColor)) || !iconColor) && {
-              color:
-                iconColor && !iconColorVariants?.includes(iconColor) ? iconColor : iconTokens.color
-            })
+            size: finalIconSize,
+            color: finalIconColor
           }}
           variant={{
             ...(iconColorVariants?.includes(iconColor) && { color: iconColor })
@@ -79,18 +64,19 @@ const ListItemMark = React.forwardRef(({ icon, iconColor, iconSize, tokens = {}
     )
   }
 
-  const bulletColor = themeTokens.itemBulletColor
-  const { bulletIcon } = themeTokens
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens)
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
+  const { itemIconSize, itemIconColor } = themeTokens
+  const bulletStyles = selectBulletStyles(themeTokens)
 
   return (
-    <View style={[sideItemContainerStyles, itemBulletContainerStyles]} ref={ref}>
-      <View
-        style={[staticStyles.bulletPositioning, itemBulletPositioningStyles]}
-        testID="unordered-item-bullet"
-      >
-        <Icon icon={bulletIcon} tokens={{ color: bulletColor, size: themeTokens.itemIconSize }} />
+    <View style={containerStyles} ref={ref}>
+      <View style={bulletStyles}>
+        <Icon
+          icon={themeTokens.bulletIcon}
+          tokens={{
+            color: itemIconColor,
+            size: itemIconSize
+          }}
+        />
       </View>
     </View>
   )
@@ -114,11 +100,4 @@ ListItemMark.propTypes = {
   iconSize: PropTypes.number
 }
 
-const staticStyles = StyleSheet.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-})
-
 export default ListItemMark

package/src/List/PressableListItemBase.jsx

@@ -81,6 +81,7 @@ const PressableListItemBase = React.forwardRef(
 )
 
 PressableListItemBase.displayName = 'PressableListItemBase'
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem'
 
 const staticStyles = StyleSheet.create({
   itemContainer: {

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,