@telus-uds/components-base 1.85.1 → 1.87.0

package/src/Link/TextButton.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
 import { variantProp } from '../utils'
@@ -13,18 +14,25 @@ const TextButton = React.forwardRef(
   ({ onPress, children, variant, tokens, accessibilityRole = 'button', ...linkProps }, ref) => {
     const getTokens = useThemeTokensCallback('Link', tokens, variant)
     return (
-      <LinkBase
-        onPress={onPress}
-        accessibilityRole={accessibilityRole}
-        tokens={getTokens}
-        ref={ref}
-        {...linkProps}
-      >
-        {children}
-      </LinkBase>
+      <View style={styles.textButton}>
+        <LinkBase
+          onPress={onPress}
+          accessibilityRole={accessibilityRole}
+          tokens={getTokens}
+          ref={ref}
+          {...linkProps}
+        >
+          {children}
+        </LinkBase>
+      </View>
     )
   }
 )
+const styles = StyleSheet.create({
+  textButton: {
+    flex: 1
+  }
+})
 TextButton.displayName = 'TextButton'
 
 TextButton.propTypes = {

package/src/List/List.jsx

@@ -41,20 +41,25 @@ const List = React.forwardRef(
       return child
     })
 
-    return (
+    const content = (
       <View
-        ref={ref}
         style={styles.list}
         accessibilityRole={accessibilityRole}
+        ref={ref}
         {...selectProps(rest)}
       >
         {items}
       </View>
     )
+
+    return Platform.OS === 'web' ? <div style={styles.container}>{content}</div> : content
   }
 )
 
 const styles = StyleSheet.create({
+  container: {
+    display: 'block'
+  },
   list: {
     flex: 1,
     flexShrink: 1

package/src/List/ListItemContent.jsx

@@ -14,11 +14,11 @@ export const tokenTypes = {
 }
 
 const selectItemTextStyles = (
-  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemFontColor },
+  { itemFontWeight, itemFontSize, itemLineHeight, itemFontName, itemFontColor, itemTextColor },
   themeOptions
 ) =>
   applyTextStyles({
-    fontColor: itemFontColor,
+    fontColor: itemFontColor || itemTextColor,
     fontWeight: itemFontWeight,
     fontSize: itemFontSize,
     lineHeight: itemLineHeight,

package/src/Modal/ModalContent.jsx

@@ -133,11 +133,9 @@ const ModalContent = React.forwardRef(
               </Button>
             )}
             {hasCancelButton ? (
-              <View>
-                <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
-                  {cancelButtonText}
-                </CancelButton>
-              </View>
+              <CancelButton tokens={{ color: cancelButtonColor }} onPress={onCancel}>
+                {cancelButtonText}
+              </CancelButton>
             ) : null}
           </View>
         )}

package/src/Modal/WebModal.jsx

@@ -62,7 +62,8 @@ const staticStyles = StyleSheet.create({
     flexShrink: 1,
     flexBasis: 0,
     zIndex: 1000,
-    display: 'flex'
+    display: 'flex',
+    overflowY: 'auto'
   }
 })
 

package/src/Notification/Notification.jsx

@@ -61,14 +61,24 @@ const selectDismissIconProps = ({ dismissIconSize, dismissIconColor }) => ({
 
 const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   paddingLeft: dismissButtonGap,
-  placeContent: 'center'
+  placeContent: 'start'
 })
 
-const selectContentContainerStyle = (maxWidth) => ({
-  maxWidth: maxWidth || '100%'
+const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
+  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
+  paddingRight: themeTokens?.containerPaddingRight,
+  paddingLeft: themeTokens?.containerPaddingLeft
 })
 
-const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, dismissible) => {
+const getMediaQueryStyles = (
+  themeTokens,
+  themeOptions,
+  mediaIdsRef,
+  dismissible,
+  viewport,
+  system
+) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
       acc[vp] = selectContainerStyles({ ...viewportTokens })
@@ -80,7 +90,10 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
   const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles)
 
   const { ids: containerIds, styles: containerStyles } = StyleSheet.create({
-    container: { flexDirection: 'row', ...selectContainerMediaQueryStyles }
+    container: {
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      ...selectContainerMediaQueryStyles
+    }
   })
 
   const { ids: contentContainerIds, styles: contentContainerStyles } = StyleSheet.create({
@@ -89,11 +102,11 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
       flexShrink: 1,
       justifyContent: 'space-between',
       ...createMediaQueryStyles({
-        xs: { width: themeOptions?.contentMaxWidth.xs || '100%' },
-        md: { width: themeOptions?.contentMaxWidth.md || '100%' },
-        lg: { width: themeOptions?.contentMaxWidth.lg || '100%' },
-        sm: { width: themeOptions?.contentMaxWidth.sm || '100%' },
-        xl: { width: themeOptions?.contentMaxWidth.xl || '100%' }
+        xs: { width: themeOptions?.contentMaxWidth?.xs || '100%' },
+        md: { width: themeOptions?.contentMaxWidth?.md || '100%' },
+        lg: { width: themeOptions?.contentMaxWidth?.lg || '100%' },
+        sm: { width: themeOptions?.contentMaxWidth?.sm || '100%' },
+        xl: { width: themeOptions?.contentMaxWidth?.xl || '100%' }
       })
     }
   })
@@ -146,16 +159,20 @@ const getMediaQueryStyles = (themeTokens, themeOptions, viewport, mediaIdsRef, d
   }
 }
 
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
   containerStyles: {
-    container: { flexDirection: 'row', ...selectContainerStyles(themeTokens) }
+    container: {
+      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
+      ...selectContainerStyles(themeTokens)
+    }
   },
   contentContainerStyles: {
     contentContainer: {
+      flex: 1,
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(maxWidth)
+      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
     }
   },
   staticContentContainerStyles: {
@@ -260,16 +277,19 @@ const Notification = React.forwardRef(
       notificationComponentRef.current = getMediaQueryStyles(
         themeTokens,
         themeOptions,
-        viewport,
         mediaIdsRef,
-        dismissible
+        dismissible,
+        viewport,
+        system
       )
     } else {
       notificationComponentRef.current = getDefaultStyles(
         themeTokens,
         themeOptions,
         maxWidth,
-        dismissible
+        dismissible,
+        viewport,
+        system
       )
     }
 

package/src/Radio/Radio.jsx

@@ -173,6 +173,7 @@ const Radio = React.forwardRef(
         onKeyDown={handleKeyDown}
         onPress={handleChange}
         {...selectedProps}
+        style={staticStyles.removeOutline}
       >
         {({ focused: focus, hovered: hover, pressed }) => {
           const stateTokens = getTokens({ focus, hover, pressed })
@@ -278,5 +279,6 @@ export default Radio
 
 const staticStyles = StyleSheet.create({
   container: { flexDirection: 'row', alignItems: 'center' },
-  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' }
+  alignWithLabel: { alignSelf: 'flex-start', justifyContent: 'center' },
+  removeOutline: { outlineStyle: 'none' }
 })

package/src/Select/Picker.jsx

@@ -1,7 +1,9 @@
 import React from 'react'
 
 import PropTypes from 'prop-types'
-import { componentPropType } from '../utils'
+import { componentPropType, selectSystemProps, htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const Picker = React.forwardRef(
   (
@@ -22,6 +24,7 @@ const Picker = React.forwardRef(
     },
     ref
   ) => {
+    const selectedProps = selectProps(rest)
     const { accessibilityLabel, accessibilityDescribedBy, accessibilityInvalid } = rest
 
     return (
@@ -40,6 +43,7 @@ const Picker = React.forwardRef(
         aria-describedby={accessibilityDescribedBy}
         aria-invalid={accessibilityInvalid}
         data-testid={testID}
+        {...selectedProps}
       >
         {placeholder !== undefined && (
           <option value={placeholder.value} disabled hidden>
@@ -56,6 +60,7 @@ Picker.displayName = 'Picker'
 export default Picker
 
 Picker.propTypes = {
+  ...selectedSystemPropTypes,
   value: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

package/src/Select/Select.jsx

@@ -11,7 +11,8 @@ import {
   selectSystemProps,
   useInputValue,
   variantProp,
-  viewProps
+  viewProps,
+  htmlAttrs
 } from '../utils'
 import Picker from './Picker'
 import InputSupports from '../InputSupports'
@@ -21,7 +22,8 @@ import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   inputSupportsProps,
-  viewProps
+  viewProps,
+  htmlAttrs
 ])
 
 const selectInputStyles = (

package/src/Tabs/Tabs.jsx

@@ -124,6 +124,7 @@ const Tabs = React.forwardRef(
                 ref: itemRef,
                 LinkRouter: ItemLinkRouter = LinkRouter,
                 linkRouterProps: itemLinkRouterProps,
+                render,
                 ...itemRest
               },
               index
@@ -151,6 +152,7 @@ const Tabs = React.forwardRef(
                   accessibilityRole={accessibilityRole}
                   LinkRouter={ItemLinkRouter}
                   linkRouterProps={{ ...linkRouterProps, ...itemLinkRouterProps }}
+                  render={render}
                   {...itemProps}
                 >
                   {label}
@@ -178,7 +180,8 @@ Tabs.propTypes = {
       href: PropTypes.string,
       label: PropTypes.string,
       id: PropTypes.string,
-      ref: ABBPropTypes.ref()
+      ref: ABBPropTypes.ref(),
+      render: PropTypes.func
     })
   ),
   /**

package/src/Tabs/TabsItem.jsx

@@ -92,6 +92,7 @@ const TabsItem = React.forwardRef(
         : undefined,
       accessibilityState = accessibilityRole === 'tab' ? { selected } : undefined,
       id,
+      render,
       ...rawRest
     },
     ref
@@ -144,6 +145,8 @@ const TabsItem = React.forwardRef(
       // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
     }, [selected, index, itemPositions])
 
+    if (render) return render({ selected, handlePress })
+
     return (
       <Pressable
         ref={ref}
@@ -202,7 +205,8 @@ TabsItem.propTypes = {
   selected: PropTypes.bool,
   itemPositions: itemPositionsPropType,
   children: PropTypes.string,
-  id: PropTypes.string
+  id: PropTypes.string,
+  render: PropTypes.func
 }
 
 const staticStyles = StyleSheet.create({

package/src/index.js

@@ -1,4 +1,5 @@
 export { default as A11yText } from './A11yText'
+export { default as ActionCard } from './ActionCard'
 export { default as ActivityIndicator } from './ActivityIndicator'
 export { default as Autocomplete } from './Autocomplete'
 export { default as Box } from './Box'

package/src/utils/animation/useVerticalExpandAnimation.js

@@ -53,8 +53,8 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
 
   if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (Platform.OS === 'web') {
-      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
-      containerStyles.visibility = 'hidden'
+      // Without `display: 'none', descendents are focusable on web even when collapsed.
+      containerStyles.display = 'none'
     } else {
       // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
       // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
@@ -68,7 +68,7 @@ function useVerticalExpandAnimation({ containerHeight, isExpanded, tokens }) {
       // on web we can hide the contents until we have the container measured and avoid occasional jitter
       // this won't work on native platforms
       containerStyles.height = 0
-      containerStyles.visibility = 'hidden'
+      containerStyles.display = 'none'
     }
   } else if (Platform.OS === 'web') {
     const transitionDuration = isExpanded ? expandDuration : collapseDuration

package/src/utils/props/tokens.js

@@ -122,7 +122,7 @@ export const getTokensPropType =
  * For example, for a set of tokens used in a common style, or for a set of tokens required by
  * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
  *
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
+ * By default, requires an object with a complete set of tokens (allowing `null` and `undefined`).
  *
  * @param {string[]} componentTokenKeys - array of strings of token names
  * @param {object} [options]
@@ -142,7 +142,9 @@ export const getTokensSetPropType = (
           ? tokenValueType
           : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
             (props, propName, ...args) =>
-              props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)
+              props[propName] !== null &&
+              props[propName] !== undefined &&
+              tokenValueType.isRequired(props, propName, ...args)
       ])
     )
   )