@telus-uds/components-base 1.40.0 → 1.41.0

package/src/Button/ButtonBase.jsx

@@ -49,15 +49,21 @@ const selectOuterContainerStyles = ({
   })
 })
 
-const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) => {
+const selectOuterSizeStyles = ({ outerBorderGap, outerBorderWidth, width, height }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
-  const widthStyles = {}
+  const sizeStyles = {}
+  // Apply width/height tokens: number === pixels, string === explicit units e.g. %
+  if (typeof width === 'number' || typeof height === 'number') {
+    sizeStyles.width = width ? width + outerBorderOffset * 2 : width
+    sizeStyles.height = height ? height + outerBorderOffset * 2 : height
+    return sizeStyles
+  }
 
   if (!width) {
     return {
-      ...widthStyles,
+      ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
@@ -66,26 +72,23 @@ const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) =>
     }
   }
 
-  // Apply width tokens: number === pixels, string === explicit units e.g. %
-  if (typeof width === 'number') {
-    widthStyles.width = width + outerBorderOffset * 2
-    return widthStyles
-  }
-
   // Ensure the negative margin doesn't make element off-centre
   if (Platform.OS === 'web') {
-    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`
-    return widthStyles
+    sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`
+    sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`
+    return sizeStyles
   }
   // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
   if (width === '100%') {
-    widthStyles.flexGrow = 1
-    return widthStyles
+    sizeStyles.flexGrow = 1
+    return sizeStyles
   }
+
   // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
   // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
-  widthStyles.width = width
-  return widthStyles
+  sizeStyles.width = width
+  sizeStyles.height = height
+  return sizeStyles
 }
 
 const selectInnerContainerStyles = ({
@@ -96,30 +99,46 @@ const selectInnerContainerStyles = ({
   paddingBottom,
   shadow,
   borderWidth,
+  borderLeftWidth,
+  borderRightWidth,
+  borderTopWidth,
+  borderBottomWidth,
   minWidth
 }) => {
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = (value) =>
-    typeof value === 'number' && typeof borderWidth === 'number'
-      ? Math.max(0, value - borderWidth)
+  const offsetBorder = ({ value, borderSize = borderWidth }) =>
+    typeof value === 'number' && typeof borderSize === 'number'
+      ? Math.max(0, value - borderSize)
       : value
 
   return {
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
+    paddingLeft: offsetBorder({ value: paddingLeft, borderSize: borderLeftWidth }),
+    paddingRight: offsetBorder({ value: paddingRight, borderSize: borderRightWidth }),
+    paddingTop: offsetBorder({ value: paddingTop, borderSize: borderTopWidth }),
+    paddingBottom: offsetBorder({ value: paddingBottom, borderSize: borderBottomWidth }),
     backgroundColor,
     minWidth,
     ...applyShadowToken(shadow)
   }
 }
 
-const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
+const selectBorderStyles = ({
   borderColor,
   borderWidth,
-  borderRadius
+  borderRadius,
+  borderLeftWidth,
+  borderRightWidth,
+  borderTopWidth,
+  borderBottomWidth
+}) => ({
+  borderColor,
+  borderWidth,
+  borderRadius,
+  borderLeftWidth,
+  borderRightWidth,
+  borderTopWidth,
+  borderBottomWidth
 })
 
 const selectTextStyles = (
@@ -186,7 +205,7 @@ const ButtonBase = forwardRef(
         staticStyles.row,
         selectWebOnlyStyles(inactive, themeTokens, systemProps),
         selectOuterContainerStyles(themeTokens),
-        selectOuterWidthStyles(themeTokens)
+        selectOuterSizeStyles(themeTokens)
       ]
     }
     const { themeOptions } = useTheme()
@@ -269,7 +288,6 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row'
   },
   text: {
-    flexGrow: 1, // On native but not web, flexShrink here wraps text prematurely
     ...Platform.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: { transition: 'color 200ms' }

package/src/ExpandCollapse/Control.jsx

@@ -80,6 +80,7 @@ const ExpandCollapseControl = forwardRef(
       <Pressable ref={ref} {...selectedProps} onPress={onPress} style={getPressableStyle}>
         {(pressableState) => {
           const { icon: IconComponent, ...themeTokens } = getControlTokens(pressableState)
+
           return (
             <>
               {IconComponent && (

package/src/ExpandCollapse/Panel.jsx

@@ -17,7 +17,6 @@ import {
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 // just void functions for now, since there are no style tokens for a panel or control at this point
-const selectGroupStyles = () => {}
 const selectContainerStyles = ({
   contentPaddingLeft,
   contentPaddingRight,
@@ -93,16 +92,27 @@ const ExpandCollapsePanel = forwardRef(
     const focusabilityProps = isExpanded ? {} : a11yProps.nonFocusableProps
 
     return (
-      <View ref={ref} style={selectGroupStyles(themeTokens)}>
+      <View ref={ref} style={themeTokens}>
         <ExpandCollapseControl
           {...selectedProps}
           isExpanded={isExpanded}
           tokens={controlTokens}
+          variant={variant}
           onPress={handleControlPress}
           ref={controlRef}
         >
           {control}
         </ExpandCollapseControl>
+        {isExpanded && (
+          <View
+            style={{
+              borderTopColor: themeTokens.expandDividerColor,
+              borderTopWidth: themeTokens.expanddDividerWidth,
+              marginLeft: themeTokens.contentPaddingLeft,
+              marginRight: themeTokens.contentPaddingRight
+            }}
+          />
+        )}
         <Animated.View ref={animatedRef} style={animatedStyles} {...focusabilityProps}>
           <View onLayout={onContainerLayout}>
             <View style={selectContainerStyles(themeTokens)}>{children}</View>

package/src/Icon/IconText.jsx

@@ -22,7 +22,7 @@ const IconText = forwardRef(
 
     // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
     // See abandoned issue https://github.com/facebook/react-native/issues/6529
-    const size = iconProps?.tokens?.size
+    const size = iconProps?.tokens?.size ?? 0
     const iconAdjustedAndriod = (
       <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
     )

package/src/InputSupports/InputSupports.jsx

@@ -16,6 +16,7 @@ const InputSupports = forwardRef(
       hint,
       hintPosition = 'inline',
       feedback,
+      feedbackTokens = {},
       tooltip,
       validation,
       nativeID
@@ -46,7 +47,14 @@ const InputSupports = forwardRef(
           />
         )}
         {typeof children === 'function' ? children({ inputId, ...a11yProps }) : children}
-        {feedback && <Feedback id={feedbackId} title={feedback} validation={validation} />}
+        {feedback ? (
+          <Feedback
+            id={feedbackId}
+            title={feedback}
+            validation={validation}
+            tokens={feedbackTokens}
+          />
+        ) : null}
       </StackView>
     )
   }
@@ -76,6 +84,10 @@ InputSupports.propTypes = {
    * Visual variant is determined based on the `validation` prop.
    */
   feedback: PropTypes.string,
+  /**
+   * Additional tokens to override the default feedback tokens.
+   */
+  feedbackTokens: PropTypes.objectOf(PropTypes.string),
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */

package/src/Notification/Notification.jsx

@@ -13,9 +13,10 @@ import {
   wrapStringsInText,
   useResponsiveProp
 } from '../utils'
-import ButtonBase from '../Button/ButtonBase'
+import IconButton from '../IconButton'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
+import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -30,7 +31,8 @@ const selectIconProps = ({ iconSize, iconColor }) => ({
 })
 
 const selectIconContainerStyles = ({ iconGap }) => ({
-  paddingRight: iconGap
+  paddingRight: iconGap,
+  placeContent: 'center'
 })
 
 const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({
@@ -39,7 +41,8 @@ const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({
 })
 
 const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
-  paddingLeft: dismissButtonGap
+  paddingLeft: dismissButtonGap,
+  placeContent: 'center'
 })
 
 const selectContentContainerStyle = (maxWidth) => ({
@@ -100,7 +103,8 @@ const selectContentContainerStyle = (maxWidth) => ({
 const Notification = forwardRef(
   ({ children, system, dismissible, copy = 'en', tokens, variant, ...rest }, ref) => {
     const [isDismissed, setIsDismissed] = useState(false)
-    const themeTokens = useThemeTokens('Notification', tokens, variant, { system })
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Notification', tokens, variant, { system, viewport })
     const getCopy = useCopy({ dictionary, copy })
     const { themeOptions } = useTheme()
     const contentMaxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
@@ -116,11 +120,10 @@ const Notification = forwardRef(
       { style: textStyles }
     )
 
-    const { icon: IconComponent, dismissIcon: DismissIconComponent } = themeTokens
+    const { icon: IconComponent, dismissIcon: DismissIconComponent, dismissIconColor } = themeTokens
 
     const onDismissPress = () => setIsDismissed(true)
 
-    // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
     return (
       <View
         ref={ref}
@@ -138,13 +141,16 @@ const Notification = forwardRef(
           </View>
           {dismissible && DismissIconComponent && (
             <View style={selectDismissButtonContainerStyles(themeTokens)}>
-              <ButtonBase
+              <IconButton
+                action="close"
                 onPress={onDismissPress}
+                icon={DismissIconComponent}
                 accessibilityRole="button"
                 accessibilityLabel={getCopy('dismiss')}
+                variant={{ inverse: dismissIconColor === '#ffffff', size: 'small' }}
               >
                 {() => <DismissIconComponent {...selectDismissIconProps(themeTokens)} />}
-              </ButtonBase>
+              </IconButton>
             </View>
           )}
         </View>
@@ -183,8 +189,7 @@ export default Notification
 
 const staticStyles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    justifyContent: 'center'
+    flexDirection: 'row'
   },
   contentContainer: {
     flexDirection: 'row',

package/src/Pagination/Pagination.jsx

@@ -52,6 +52,21 @@ const Pagination = forwardRef(
     })
     const { themeOptions } = useTheme()
 
+    const {
+      borderColor,
+      borderWidth,
+      borderLeftWidth,
+      borderRightWidth,
+      borderTopWidth,
+      borderBottomWidth,
+      ellipsisPadding,
+      ellipsisBorderRightWidth,
+      ellipsisBorderLeftWidth,
+      ellipsisBorderTopWidth,
+      ellipsisBorderBottomWidth,
+      ellipsisHeight
+    } = themeTokens
+
     const items = React.Children.toArray(children)
 
     const {
@@ -69,6 +84,17 @@ const Pagination = forwardRef(
     })
 
     const ellipsisTextStyles = selectTextStyles(themeTokens, themeOptions)
+    const ellipisContainerStyles = StyleSheet.create({
+      container: {
+        height: ellipsisHeight,
+        padding: ellipsisPadding,
+        borderRightWidth: ellipsisBorderRightWidth,
+        borderLeftWidth: ellipsisBorderLeftWidth,
+        borderTopWidth: ellipsisBorderTopWidth,
+        borderBottomWidth: ellipsisBorderBottomWidth,
+        borderColor
+      }
+    })
 
     if (items.length === 0) {
       return null
@@ -110,9 +136,15 @@ const Pagination = forwardRef(
 
         if (shouldRenderEllipsis(itemIndex)) {
           return (
-            <Text key="..." style={ellipsisTextStyles}>
-              ...
-            </Text>
+            <View key="..." style={{ ...ellipisContainerStyles.container }}>
+              <Text
+                style={{
+                  ...ellipsisTextStyles
+                }}
+              >
+                ...
+              </Text>
+            </View>
           )
         }
 
@@ -132,16 +164,34 @@ const Pagination = forwardRef(
     ]
 
     return (
-      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
-        {buttons
-          // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-          .map((element, index) => [element, `page-${index + 1}`])
-          .filter(([element]) => element !== null)
-          .map(([element, key]) => (
-            <Box right={gap} key={key}>
-              {element}
-            </Box>
-          ))}
+      <View
+        style={{
+          ...staticStyles.container
+        }}
+        ref={ref}
+        {...selectProps(rest)}
+      >
+        <View
+          style={{
+            borderColor,
+            borderWidth,
+            borderLeftWidth,
+            borderRightWidth,
+            borderTopWidth,
+            borderBottomWidth,
+            ...staticStyles.container
+          }}
+        >
+          {buttons
+            // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
+            .map((element, index) => [element, `page-${index + 1}`])
+            .filter(([element]) => element !== null)
+            .map(([element, key]) => (
+              <Box right={gap} key={key}>
+                {element}
+              </Box>
+            ))}
+        </View>
       </View>
     )
   }

package/src/Radio/Radio.jsx

@@ -47,6 +47,8 @@ const selectDescriptionStyles = ({
   descriptionFontSize,
   descriptionLineHeight,
   descriptionMarginLeft,
+  descriptionFontName,
+  descriptionFontWeight,
   inputSize,
   fontColor,
   labelMarginLeft = 0
@@ -55,7 +57,9 @@ const selectDescriptionStyles = ({
   color: fontColor,
   ...applyTextStyles({
     fontSize: descriptionFontSize,
-    lineHeight: descriptionLineHeight
+    lineHeight: descriptionLineHeight,
+    fontName: descriptionFontName,
+    fontWeight: descriptionFontWeight
   })
 })
 const selectLabelStyles = ({

package/src/Select/Select.jsx

@@ -142,6 +142,10 @@ const selectValidationIconContainerStyles = ({
     : { paddingBottom })
 })
 
+const selectCustomFeedbackStyles = ({ feedbackBackgroundColor }) => ({
+  backgroundColor: feedbackBackgroundColor
+})
+
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -221,7 +225,12 @@ const Select = forwardRef(
     const { themeOptions } = useTheme()
 
     return (
-      <InputSupports {...supportsProps} {...selectedProps} validation={validation}>
+      <InputSupports
+        {...supportsProps}
+        {...selectedProps}
+        validation={validation}
+        feedbackTokens={selectCustomFeedbackStyles(themeTokens)}
+      >
         {({ inputId, ...props }) => (
           <View style={selectOuterBorderStyles(themeTokens)}>
             <Picker