@telus-uds/components-base 1.18.1 → 1.19.0

package/src/Tags/Tags.jsx

@@ -30,39 +30,49 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   viewProps
 ])
 
-const selectIconTextTokens = ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconSize,
-  iconColor,
-  iconBackground,
-  iconBorderRadius,
-  iconAlignSelf,
-  iconPadding,
-  iconTranslateX,
-  iconTranslateY
-}) => ({
-  icon,
-  iconPosition,
-  iconSpace,
-  iconWrapperStyle: {
-    backgroundColor: iconBackground,
-    borderRadius: iconBorderRadius,
-    alignSelf: iconAlignSelf,
-    padding: iconPadding,
-    ...Platform.select({
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      web: { transition: 'color 200ms, background 200ms' }
-    })
+const separateIconTextTokens = (
+  {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY,
+    ...rest
   },
-  iconTokens: {
-    size: iconSize,
-    color: iconColor,
-    translateX: iconTranslateX,
-    translateY: iconTranslateY
-  }
-})
+  returnRest
+) =>
+  returnRest
+    ? rest
+    : {
+        icon,
+        iconPosition,
+        iconSpace,
+        iconWrapperStyle: {
+          backgroundColor: iconBackground,
+          borderRadius: iconBorderRadius,
+          alignSelf: iconAlignSelf,
+          padding: iconPadding,
+          ...Platform.select({
+            // TODO: https://github.com/telus/universal-design-system/issues/487
+            web: { transition: 'color 200ms, background 200ms' }
+          })
+        },
+        iconTokens: {
+          size: iconSize,
+          color: iconColor,
+          translateX: iconTranslateX,
+          translateY: iconTranslateY
+        }
+      }
+
+const selectIconTextTokens = (tokens) => separateIconTextTokens(tokens, false)
+const selectNonIconTextTokens = (tokens) => separateIconTextTokens(tokens, true)
 
 const Tags = forwardRef(
   (
@@ -87,7 +97,10 @@ const Tags = forwardRef(
     const { direction, space } = themeTokens
 
     const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant)
-    const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
+
+    const getButtonTokens = (buttonState) =>
+      // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+      selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)))
 
     const { currentValues, toggleOneValue } = useMultipleInputValues({
       initialValues,

package/src/TextInput/TextInputBase.jsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, useEffect, useState } from 'react'
-import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
-
 import PropTypes from 'prop-types'
+import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
+import StackView from '../StackView'
 import {
   a11yProps,
   getTokensPropType,
@@ -10,6 +10,7 @@ import {
   textInputHandlerProps,
   textInputProps,
   useInputValue,
+  useSpacingScale,
   variantProp,
   viewProps
 } from '../utils'
@@ -116,27 +117,35 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({
   color: iconColor
 })
 
-const selectIconContainerStyles = ({ paddingRight, paddingBottom }) => ({
-  paddingRight,
+const selectIconContainerStyles = (
+  { buttonSize, buttonsGapSize, paddingRight, paddingBottom },
+  buttonCount
+) => ({
+  paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
   paddingBottom
 })
 
+const selectButtonsContainerStyle = ({ buttonsPaddingRight }) => ({
+  paddingRight: buttonsPaddingRight
+})
+
 const TextInputBase = forwardRef(
   (
     {
-      value,
+      buttons = [],
       height,
-      initialValue,
       inactive,
-      readOnly,
+      initialValue,
+      onBlur,
       onChange,
       onChangeText,
       onFocus,
-      onBlur,
-      onMouseOver,
       onMouseOut,
+      onMouseOver,
       pattern,
+      readOnly,
       tokens,
+      value,
       variant = {},
       ...rest
     },
@@ -188,7 +197,7 @@ const TextInputBase = forwardRef(
 
     const themeTokens = useThemeTokens('TextInput', tokens, variant, states)
 
-    const { icon: IconComponent } = themeTokens
+    const { icon: IconComponent, buttonsGap } = themeTokens
 
     const inputProps = {
       ...selectProps(rest),
@@ -204,6 +213,9 @@ const TextInputBase = forwardRef(
       value: isControlled ? currentValue : undefined
     }
 
+    // Get the actual gap value for the current viewport
+    const buttonsGapSize = useSpacingScale(buttonsGap)
+
     const { themeOptions } = useTheme()
     const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, themeOptions, inactive)
 
@@ -213,11 +225,21 @@ const TextInputBase = forwardRef(
         {IconComponent && (
           <View
             pointerEvents="none" // avoid hijacking input press events
-            style={[staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]}
+            style={[
+              staticStyles.iconContainer,
+              selectIconContainerStyles({ ...themeTokens, buttonsGapSize }, buttons?.length)
+            ]}
           >
             <IconComponent {...selectIconTokens(themeTokens)} />
           </View>
         )}
+        {buttons?.length > 0 && (
+          <View style={[staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)]}>
+            <StackView direction="row" space={buttonsGap}>
+              {buttons}
+            </StackView>
+          </View>
+        )}
       </View>
     )
   }
@@ -226,24 +248,32 @@ TextInputBase.displayName = 'TextInputBase'
 
 TextInputBase.propTypes = {
   ...selectedSystemPropTypes,
-  value: PropTypes.string,
+  buttons: PropTypes.arrayOf(PropTypes.node),
   height: PropTypes.number,
-  initialValue: PropTypes.string,
   inactive: PropTypes.bool,
-  readOnly: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onChangeText: PropTypes.func,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
+  value: PropTypes.string,
   variant: variantProp.propType
 }
 
 export default TextInputBase
 
 const staticStyles = StyleSheet.create({
+  buttonsContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
   iconContainer: {
     position: 'absolute',
     right: 0,

package/src/index.js

@@ -29,6 +29,7 @@ export { default as Radio } from './Radio'
 export * from './Radio'
 export { default as RadioCard } from './RadioCard'
 export * from './RadioCard'
+export { default as Responsive } from './Responsive'
 export { default as Search } from './Search'
 export { default as Select } from './Select'
 export { default as SideNav } from './SideNav'