@telus-uds/components-base 3.26.0 → 3.28.0

package/lib/esm/IconButton/IconButton.js

@@ -79,6 +79,11 @@ const selectInnerStyle = (_ref2, password) => {
     width,
     height
   } = _ref2;
+  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,
@@ -92,11 +97,11 @@ const selectInnerStyle = (_ref2, password) => {
     borderRightWidth,
     borderBottomWidth,
     borderLeftWidth,
-    padding: calculatePadding(padding, borderWidth),
-    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
-    paddingRight: calculatePadding(paddingRight, borderRightWidth),
-    paddingTop: calculatePadding(paddingTop, borderTopWidth),
-    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
+    padding: basePadding,
+    paddingLeft: calculateSpecificPadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculateSpecificPadding(paddingRight, borderRightWidth),
+    paddingTop: calculateSpecificPadding(paddingTop, borderTopWidth),
+    paddingBottom: calculateSpecificPadding(paddingBottom, borderBottomWidth),
     ...Platform.select({
       web: {
         pointerEvents: 'none',

package/lib/esm/List/List.js

@@ -6,10 +6,15 @@ import PropTypes from 'prop-types';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 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 +27,7 @@ const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     showDivider,
     tokens,
     variant,
+    iconVerticalAlign,
     accessibilityRole = Platform.select({
       web: 'list',
       default: undefined
@@ -31,13 +37,17 @@ const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   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 /*#__PURE__*/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 /*#__PURE__*/React.cloneElement(child, childProps);
     }
     return child;
   });
@@ -71,6 +81,11 @@ 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/lib/esm/List/ListItem.js

@@ -1,7 +1,8 @@
 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
@@ -13,6 +14,7 @@ const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     variant,
     children,
     title,
+    iconVerticalAlign = 'top',
     ...listItemProps
   } = _ref;
   const themeTokens = useThemeTokens('List', tokens, variant);
@@ -21,12 +23,27 @@ const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     ...listItemProps,
     title: title,
+    iconVerticalAlign: iconVerticalAlign,
     children: children
   });
 });
 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/lib/esm/List/ListItemBase.js

@@ -10,6 +10,12 @@ import Typography from '../Typography';
 import { useThemeTokens } from '../ThemeProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const VERTICAL_CENTERING_DIVISOR = 2;
+const alignmentMap = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end'
+};
 const selectItemBlockStyles = _ref => {
   let {
     interItemMargin
@@ -31,10 +37,16 @@ const selectDividerStyles = _ref2 => {
     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 = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
@@ -45,6 +57,7 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     children,
     title,
     isLastItem,
+    iconVerticalAlign = 'top',
     accessibilityRole = Platform.select({
       web: 'listitem',
       default: undefined
@@ -58,7 +71,6 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     iconMarginTop,
     itemIconSize
   } = themeTokens;
-  let adjustedIconMarginTop = iconMarginTop;
   const {
     fontSize,
     lineHeight: lineHeightRatio
@@ -66,9 +78,8 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     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
@@ -95,7 +106,7 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       iconSize,
       isLastItem
     }) : /*#__PURE__*/_jsxs(View, {
-      style: staticStyles.container,
+      style: [staticStyles.innerContainer, selectAlignmentStyles(iconVerticalAlign)],
       children: [/*#__PURE__*/_jsx(ListItemMark, {
         tokens: {
           ...tokens,
@@ -105,7 +116,7 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         iconColor: iconColor,
         iconSize: iconSize
       }), /*#__PURE__*/_jsxs(View, {
-        style: staticStyles.titleAndContentContainer,
+        style: [staticStyles.titleAndContentContainer],
         children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
           variant: {
             size: 'h4',
@@ -121,15 +132,21 @@ const ListItemBase = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   });
 });
 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
   }
 });
 ListItemBase.propTypes = {
@@ -137,6 +154,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/lib/esm/List/ListItemMark.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Icon from '../Icon';
 import { useVariants } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -9,49 +8,29 @@ 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 = _ref => {
+const selectContainerStyles = _ref => {
   let {
-    itemIconSize,
-    itemIconColor
+    listGutter
   } = _ref;
   return {
-    size: itemIconSize,
-    color: itemIconColor
-  };
-};
-const selectSideItemContainerStyles = _ref2 => {
-  let {
-    listGutter,
-    iconMarginTop
-  } = _ref2;
-  return {
-    marginTop: iconMarginTop,
-    marginRight: listGutter
+    marginInlineEnd: listGutter,
+    display: 'flex',
+    alignItems: 'flex-start'
   };
 };
-
-// Align bullets with the top line of text the same way icons are aligned
-const selectBulletPositioningStyles = _ref3 => {
+const selectBulletStyles = _ref2 => {
   let {
     itemIconSize
-  } = _ref3;
+  } = _ref2;
   return {
     width: itemIconSize,
-    height: itemIconSize
-  };
-};
-const selectBulletContainerStyles = _ref4 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletContainerHeight,
-    itemBulletContainerAlign
-  } = _ref4;
-  return {
-    width: itemBulletContainerWidth,
-    height: itemBulletContainerHeight,
-    alignItems: itemBulletContainerAlign
+    height: itemIconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
   };
 };
 const getIconColorVariants = iconVariants => iconVariants?.filter(variant => variant[0] === 'color').map(variant => variant[1]);
@@ -63,31 +42,31 @@ const getIconColorVariants = iconVariants => iconVariants?.filter(variant => var
  * It's the responsibility of themes to make sure that the supplied tokens align the
  * icon or bullet nicely against the first line of text in a ListIconContent.
  */
-const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const ListItemMark = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     icon,
     iconColor,
     iconSize,
     tokens = {}
-  } = _ref5;
+  } = _ref3;
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-  const bulletContainerStyles = selectBulletContainerStyles(themeTokens);
-
-  // TODO: Remove it when iconColor custom colors are deprecated.
+  const containerStyles = selectContainerStyles(themeTokens);
   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 /*#__PURE__*/_jsx(View, {
-      style: [sideItemContainerStyles, bulletContainerStyles],
+      style: containerStyles,
       children: /*#__PURE__*/_jsx(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) && {
@@ -97,23 +76,21 @@ const ListItemMark = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       })
     });
   }
-  const bulletColor = themeTokens.itemBulletColor;
   const {
-    bulletIcon
+    itemIconSize,
+    itemIconColor
   } = themeTokens;
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
+  const bulletStyles = selectBulletStyles(themeTokens);
   return /*#__PURE__*/_jsx(View, {
-    style: [sideItemContainerStyles, itemBulletContainerStyles],
+    style: containerStyles,
     ref: ref,
     children: /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      testID: "unordered-item-bullet",
+      style: bulletStyles,
       children: /*#__PURE__*/_jsx(Icon, {
-        icon: bulletIcon,
+        icon: themeTokens.bulletIcon,
         tokens: {
-          color: bulletColor,
-          size: themeTokens.itemIconSize
+          color: itemIconColor,
+          size: itemIconSize
         }
       })
     })
@@ -135,10 +112,4 @@ ListItemMark.propTypes = {
    */
   iconSize: PropTypes.number
 };
-const staticStyles = StyleSheet.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
 export default ListItemMark;

package/lib/esm/List/PressableListItemBase.js

@@ -91,6 +91,7 @@ const PressableListItemBase = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
 });
 PressableListItemBase.displayName = 'PressableListItemBase';
+PressableListItemBase.__UDS_COMPONENT_TYPE__ = 'ListItem';
 const staticStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',

package/lib/esm/Modal/Modal.js

@@ -64,11 +64,15 @@ const selectModalStyles = _ref2 => {
 const selectBackdropStyles = _ref3 => {
   let {
     backdropColor,
-    backdropOpacity
+    backdropOpacity,
+    backdropCursor
   } = _ref3;
   return {
     backgroundColor: backdropColor,
-    opacity: backdropOpacity
+    opacity: backdropOpacity,
+    ...(Platform.OS === 'web' && backdropCursor ? {
+      cursor: backdropCursor
+    } : {})
   };
 };
 const selectCloseButtonContainerStyles = _ref4 => {
@@ -121,12 +125,15 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cancelButtonText,
     cancelButtonType,
     footer,
+    backgroundDismissible = true,
     ...rest
   } = _ref5;
   const viewport = useViewport();
+  const isBackdropClickable = onClose && backgroundDismissible;
   const themeTokens = useThemeTokens('Modal', tokens, variant, {
     viewport,
-    maxWidth
+    maxWidth,
+    backdropCursor: isBackdropClickable ? 'pointer' : 'default'
   });
   const modalRef = useScrollBlocking(isOpen);
   const modalBodyRef = React.useRef(ref);
@@ -232,7 +239,7 @@ const Modal = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
           })]
         })
       }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: handleClose,
+        onPress: isBackdropClickable && handleClose,
         children: /*#__PURE__*/_jsx(View, {
           style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
         })
@@ -329,7 +336,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;
 const staticStyles = StyleSheet.create({
@@ -339,12 +354,7 @@ const staticStyles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: -1,
-    ...Platform.select({
-      web: {
-        cursor: 'pointer'
-      }
-    })
+    zIndex: -1
   },
   positioningContainer: {
     flexBasis: '100%',

package/lib/esm/Progress/Progress.js

@@ -4,6 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import ProgressContext from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectProgressStyles = _ref => {
@@ -47,6 +48,12 @@ const selectProgressStyles = _ref => {
  *
  * - 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
  *
@@ -63,11 +70,18 @@ const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     ...rest
   } = _ref2;
   const themeTokens = useThemeTokens('Progress', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
-    ...selectProps(rest),
-    children: children
+  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
+  const layers = variant?.layers ?? false;
+  return /*#__PURE__*/_jsx(ProgressContext.Provider, {
+    value: {
+      layers
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
+      ...selectProps(rest),
+      children: children
+    })
   });
 });
 Progress.displayName = 'Progress';

package/lib/esm/Progress/ProgressBar.js

@@ -7,16 +7,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';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
+const selectBarStyles = _ref => {
   let {
+    themeTokens,
+    calculatedPercentage,
+    barPosition,
+    layers
+  } = _ref;
+  const {
     backgroundColor,
     borderRadius,
     outlineWidth,
     outlineColor,
     shadow
-  } = _ref;
+  } = themeTokens;
   return {
     backgroundColor,
     borderRadius,
@@ -24,7 +31,10 @@ const selectBarStyles = (_ref, calculatedPercentage, barPosition) => {
     outlineColor,
     ...applyShadowToken(shadow),
     width: `${calculatedPercentage}%`,
-    left: `${barPosition}%`
+    left: `${barPosition}%`,
+    ...(layers ? {
+      position: 'absolute'
+    } : {})
   };
 };
 
@@ -75,6 +85,9 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     },
     ...rest
   } = _ref2;
+  const {
+    layers
+  } = React.useContext(ProgressContext);
   const {
     items,
     current
@@ -107,7 +120,12 @@ const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   return percentage > MIN_PERCENT_VALUE || items ? /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)],
+    style: [staticStyles.bar, selectBarStyles({
+      themeTokens,
+      calculatedPercentage,
+      barPosition,
+      layers
+    })],
     ...selectedProps,
     children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant

package/lib/esm/Progress/ProgressContext.js

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

package/lib/esm/SideNav/Item.js

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