@telus-uds/components-base 2.3.0 → 2.4.0

package/src/Notification/Notification.jsx

@@ -247,10 +247,16 @@ const Notification = React.forwardRef(
     const viewport = useViewport()
     const getCopy = useCopy({ dictionary, copy })
 
+    // TODO: Remove this once the system style variant is deprecated
+    const isSystemEnabled = system || variant?.style?.includes('system')
+
     const { themeOptions } = useTheme()
     const { enableMediaQueryStyleSheet } = themeOptions
     const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
-    const themeTokens = useTokens('Notification', tokens, variant, { system, viewport })
+    const themeTokens = useTokens('Notification', tokens, variant, {
+      system: isSystemEnabled,
+      viewport
+    })
     const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
 
     const notificationComponentRef = React.useRef({
@@ -281,7 +287,7 @@ const Notification = React.forwardRef(
         mediaIdsRef,
         dismissible,
         viewport,
-        system
+        isSystemEnabled
       )
     } else {
       notificationComponentRef.current = getDefaultStyles(
@@ -290,7 +296,7 @@ const Notification = React.forwardRef(
         maxWidth,
         dismissible,
         viewport,
-        system
+        isSystemEnabled
       )
     }
 

package/src/Search/Search.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, Platform } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
@@ -20,6 +20,7 @@ import TextInputBase from '../TextInput/TextInputBase'
 import ButtonBase from '../Button/ButtonBase'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
+import Icon from '../Icon'
 
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([
   a11yProps,
@@ -44,10 +45,25 @@ const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
 
   return { ...selectTokens('TextInput', searchTokens), paddingRight: paddingWithButtons }
 }
-const selectButtonTokens = (tokens) => selectTokens('Button', tokens)
+const selectButtonTokens = (tokens) => selectTokens('SearchButton', tokens)
 
 const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size: iconSize })
 
+const selectBorderTokens = ({ borderWidth, mobileBorderWidth, ...tokens }) => ({
+  borderWidth: Platform.OS === 'web' ? borderWidth : mobileBorderWidth,
+  ...tokens
+})
+
+const modifyButtonTokens = (tokens) => {
+  const modifiedTokens = { ...tokens }
+
+  if (Platform.OS !== 'web') {
+    modifiedTokens.backgroundColor = tokens.mobileBackgroundColor
+  }
+
+  return modifiedTokens
+}
+
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
  * Use `Search` to feature autocomplete interactions.
@@ -77,6 +93,7 @@ const Search = React.forwardRef(
       tokens,
       variant,
       nativeSubmitBtnID,
+      searchIconPosition = 'right',
       dataSet,
       ...rest
     },
@@ -137,9 +154,9 @@ const Search = React.forwardRef(
           testID={testID}
           {...selectInputProps(rest)}
           ref={ref}
-          tokens={(appearances) =>
+          tokens={(pressableStates) =>
             selectInputTokens({
-              searchTokens: getThemeTokens(appearances),
+              searchTokens: selectBorderTokens(getThemeTokens(pressableStates)),
               buttonTokens,
               buttonsGapSize,
               isEmpty
@@ -155,6 +172,7 @@ const Search = React.forwardRef(
           onSubmitEditing={handleSubmit}
           onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
+          direction={searchIconPosition}
           buttons={[
             ClearButtonIcon && !isEmpty && (
               <ButtonBase
@@ -163,32 +181,42 @@ const Search = React.forwardRef(
                 inactive={inactive}
                 key="clear"
                 onPress={handleClear}
-                tokens={(appearances) => selectButtonTokens(getButtonTokens(appearances))}
+                tokens={(pressableStates) =>
+                  modifyButtonTokens(selectButtonTokens(getButtonTokens(pressableStates)))
+                }
               >
                 {(buttonState) => (
                   <ClearButtonIcon {...selectIconTokens(getButtonTokens(buttonState))} />
                 )}
               </ButtonBase>
             ),
-            SubmitButtonIcon && (
-              <ButtonBase
-                accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
-                accessibilityRole="button"
-                inactive={inactive}
-                key="submit"
-                onPress={handleSubmit}
-                tokens={(buttonState) =>
-                  selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
-                }
-                nativeID={nativeSubmitBtnID}
-              >
-                {(buttonState) => (
-                  <SubmitButtonIcon
-                    {...selectIconTokens(getButtonTokens({ ...buttonState, priority: 'high' }))}
-                  />
-                )}
-              </ButtonBase>
-            )
+            SubmitButtonIcon &&
+              (searchIconPosition === 'right' ? (
+                <ButtonBase
+                  accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
+                  accessibilityRole="button"
+                  inactive={inactive}
+                  key="submit-right"
+                  onPress={handleSubmit}
+                  tokens={(buttonState) =>
+                    selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
+                  }
+                  nativeID={nativeSubmitBtnID}
+                >
+                  {(buttonState) => (
+                    <SubmitButtonIcon
+                      {...selectIconTokens(getButtonTokens({ ...buttonState, priority: 'high' }))}
+                    />
+                  )}
+                </ButtonBase>
+              ) : (
+                <Icon
+                  icon={SubmitButtonIcon}
+                  key="submitIcon"
+                  testID="iconLeft"
+                  tokens={{ color: themeTokens.iconLeftColor, size: themeTokens.iconLeftSize }}
+                />
+              ))
           ]}
         />
       </View>

package/src/Select/Picker.native.jsx

@@ -7,9 +7,11 @@ import { a11yProps, componentPropType } from '../utils'
 import Group from './Group'
 
 import {
-  ANDROID_HEIGHT_OFFSET,
   ANDROID_HORIZONTAL_PADDING_OFFSET,
-  ANDROID_DEFAULT_PADDING
+  ANDROID_DEFAULT_PADDING,
+  ALLOW_FONT_SCALING,
+  ADJUSTS_FONT_SIZE_TO_FIT,
+  MAX_FONT_SIZE_MULTIPLIER
 } from './constants'
 
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
@@ -36,8 +38,7 @@ const selectAndroidContainerStyles = ({
       ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET
       : ANDROID_DEFAULT_PADDING,
   paddingBottom: ANDROID_DEFAULT_PADDING,
-  paddingTop: ANDROID_DEFAULT_PADDING,
-  height: rest.height + ANDROID_HEIGHT_OFFSET
+  paddingTop: ANDROID_DEFAULT_PADDING
 })
 
 const Picker = React.forwardRef(
@@ -85,6 +86,11 @@ const Picker = React.forwardRef(
           inputAndroid: selectAndroidInputStyles(style)
         }}
         placeholder={placeholder !== undefined ? placeholder : {}}
+        textInputProps={{
+          allowFontScaling: ALLOW_FONT_SCALING,
+          adjustFontSizeToFit: ADJUSTS_FONT_SIZE_TO_FIT,
+          maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER
+        }}
       />
     )
 

package/src/Select/constants.js

@@ -1,5 +1,8 @@
 // Because Android
 export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5
-export const ANDROID_HEIGHT_OFFSET = 12
 export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8
 export const ANDROID_DEFAULT_PADDING = 0
+
+export const ALLOW_FONT_SCALING = true
+export const ADJUSTS_FONT_SIZE_TO_FIT = true
+export const MAX_FONT_SIZE_MULTIPLIER = 3

package/src/TextInput/TextArea.jsx

@@ -70,7 +70,6 @@ const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
 
   const inputProps = {
     ...selectedProps,
-    variant: { ...variant, validation: supportsProps.validation },
     multiline: true,
     onContentSizeChange: onHeightChange,
     height: inputHeight,
@@ -78,10 +77,18 @@ const TextArea = React.forwardRef(({ tokens, variant = {}, ...rest }, ref) => {
   }
 
   return (
-    <InputSupports {...supportsProps}>
-      {({ inputId, ...props }) => (
-        <TextInputBase ref={ref} {...inputProps} nativeID={inputId} {...props} />
-      )}
+    <InputSupports {...supportsProps} inputValue={selectedProps?.value}>
+      {({ inputId, ...props }) => {
+        return (
+          <TextInputBase
+            ref={ref}
+            nativeID={inputId}
+            {...props}
+            {...inputProps}
+            variant={{ ...variant, validation: props.validation }}
+          />
+        )
+      }}
     </InputSupports>
   )
 })

package/src/TextInput/TextInput.jsx

@@ -47,16 +47,23 @@ const TextInput = React.forwardRef(({ tokens, nativeID, variant = {}, ...rest },
 
   const inputProps = {
     ...selectedProps,
-    tokens,
-    variant: { ...variant, validation: supportsProps.validation }
+    tokens
   }
 
   return (
     <>
-      <InputSupports nativeID={nativeID} {...supportsProps}>
-        {({ inputId, ...propsFromInputSupports }) => (
-          <TextInputBase ref={ref} nativeID={inputId} {...propsFromInputSupports} {...inputProps} />
-        )}
+      <InputSupports nativeID={nativeID} {...supportsProps} inputValue={selectedProps?.value}>
+        {({ inputId, ...propsFromInputSupports }) => {
+          return (
+            <TextInputBase
+              ref={ref}
+              nativeID={inputId}
+              {...propsFromInputSupports}
+              {...inputProps}
+              variant={{ ...variant, validation: propsFromInputSupports.validation }}
+            />
+          )
+        }}
       </InputSupports>
       {rest.children}
     </>

package/src/TextInput/TextInputBase.jsx

@@ -53,7 +53,10 @@ const selectInputStyles = (
   buttonCount = 0,
   buttonSize = 0,
   buttonsGapSize = 0,
-  isPassword
+  isPassword,
+  iconLeftWidth,
+  iconLeftGap,
+  direction
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -85,6 +88,16 @@ const selectInputStyles = (
     }
   })
 
+  const getPaddingLeft = () => {
+    if (type === 'card') {
+      return offsetBorder(paddingLeft + 34)
+    }
+    if (direction === 'left') {
+      return offsetBorder(iconLeftWidth + iconLeftGap + staticStyles.iconLeftContainer.paddingLeft)
+    }
+    return offsetBorder(paddingLeft)
+  }
+
   const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize
   const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing)
   const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight
@@ -96,7 +109,7 @@ const selectInputStyles = (
     borderWidth,
     borderColor,
     borderRadius,
-    paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
+    paddingLeft: getPaddingLeft(),
     paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
@@ -136,12 +149,14 @@ const selectIconContainerStyles = (
   paddingBottom
 })
 
-const selectLeftIconContainerStyles = ({ leftIconPaddingBottom }) => ({
-  // not tokenizing paddingLeft as it remains same across brands for now
-  paddingLeft: 10,
+const selectIconCardLeftContainerStyles = ({ leftIconPaddingBottom }) => ({
   paddingBottom: leftIconPaddingBottom
 })
 
+const selectIconLeftContainerStyles = ({ iconLeftPaddingBottom }) => ({
+  paddingBottom: iconLeftPaddingBottom
+})
+
 const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
   paddingRight: buttonsPaddingRight
 })
@@ -189,12 +204,14 @@ const TextInputBase = React.forwardRef(
       variant = {},
       type,
       onKeyPress,
+      direction,
       ...rest
     },
     ref
   ) => {
     const [isFocused, setIsFocused] = React.useState(false)
     const [showPassword, setShowPassword] = React.useState(false)
+
     const handleFocus = (event) => {
       setIsFocused(true)
       if (typeof onFocus === 'function') onFocus(event)
@@ -273,11 +290,17 @@ const TextInputBase = React.forwardRef(
       defaultCreditIcon,
       amexIcon,
       visaIcon,
-      masterCardIcon
+      masterCardIcon,
+      iconLeftGap
     } = themeTokens
     const buttonsGapSize = useSpacingScale(buttonsGap)
     const getCopy = useCopy({ dictionary, copy })
-    const textInputButtons = buttons
+    const textInputButtons =
+      direction === 'left'
+        ? buttons.filter((button) => button && button.key !== 'submitIcon')
+        : buttons
+    const submitIcon =
+      direction === 'left' ? buttons.find((button) => button && button.key === 'submitIcon') : null
 
     if (onClear && isDirty) {
       textInputButtons?.unshift(
@@ -323,6 +346,7 @@ const TextInputBase = React.forwardRef(
     }
 
     const { themeOptions } = useTheme()
+    const iconLeftWidth = submitIcon ? submitIcon.props.tokens.size ?? 0 : 0
     const nativeInputStyle = selectInputStyles(
       { ...themeTokens, height },
       themeOptions,
@@ -331,15 +355,30 @@ const TextInputBase = React.forwardRef(
       buttons?.length,
       themeTokens.buttonSize,
       buttonsGapSize,
-      isPassword
+      isPassword,
+      iconLeftWidth,
+      iconLeftGap,
+      direction
     )
 
+    const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive
+
     return (
       <View style={selectOuterBorderStyles(themeTokens)}>
+        {shouldShowSubmitIcon && (
+          <View
+            style={[staticStyles.iconLeftContainer, selectIconLeftContainerStyles(themeTokens)]}
+          >
+            {submitIcon}
+          </View>
+        )}
         {type === 'card' && (
           <View
             pointerEvents="none"
-            style={[staticStyles.leftIconContainer, selectLeftIconContainerStyles(themeTokens)]}
+            style={[
+              staticStyles.iconCardLeftContainer,
+              selectIconCardLeftContainerStyles(themeTokens)
+            ]}
           >
             {getIcon(currentValue, { defaultCreditIcon, amexIcon, visaIcon, masterCardIcon })}
           </View>
@@ -424,7 +463,15 @@ const staticStyles = StyleSheet.create({
     right: 0,
     bottom: 0
   },
-  leftIconContainer: {
+  iconCardLeftContainer: {
+    paddingLeft: 10,
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: 1
+  },
+  iconLeftContainer: {
+    paddingLeft: 10,
     position: 'absolute',
     left: 0,
     bottom: 0,

package/src/utils/props/inputSupportsProps.js

@@ -38,7 +38,15 @@ export default {
     /**
      * Use to visually mark an input as valid or invalid.
      */
-    validation: PropTypes.oneOf(['error', 'success'])
+    validation: PropTypes.oneOf(['error', 'success']),
+    /**
+     * The text value from an input field.
+     */
+    inputValue: PropTypes.string,
+    /**
+     * Max number of characters allowed id an input text.
+     */
+    maxCharacterAllowed: PropTypes.number
   },
   select: ({
     copy,
@@ -49,7 +57,9 @@ export default {
     feedbackTokens,
     feedbackProps,
     tooltip,
-    validation
+    validation,
+    inputValue,
+    maxCharacterAllowed
   }) => ({
     supportsProps: {
       copy,
@@ -60,7 +70,9 @@ export default {
       feedbackTokens,
       feedbackProps,
       tooltip,
-      validation
+      validation,
+      inputValue,
+      maxCharacterAllowed
     }
   })
 }