@telus-uds/components-base 1.18.1 → 1.19.1

package/src/Responsive/Responsive.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import { useResponsiveProp } from '../utils'
+
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+
+const Responsive = ({ min = 'xs', max, children }) => {
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = { [min]: children }
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max)
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null
+    if (maxPlusOne) byViewports[maxPlusOne] = null
+  }
+  return <>{useResponsiveProp(byViewports, null)}</>
+}
+
+Responsive.propTypes = {
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+}
+
+export default Responsive

package/src/Responsive/index.js

@@ -0,0 +1,3 @@
+import Responsive from './Responsive'
+
+export default Responsive

package/src/Search/Search.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { View } from 'react-native'
 
 import PropTypes from 'prop-types'
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
@@ -17,7 +17,6 @@ import {
 } from '../utils'
 import TextInputBase from '../TextInput/TextInputBase'
 import ButtonBase from '../Button/ButtonBase'
-import StackView from '../StackView'
 import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 
@@ -42,7 +41,6 @@ const selectInputTokens = ({ searchTokens, buttonTokens, buttonsGapSize }) => {
 }
 const selectButtonTokens = (tokens) => selectTokens('Button', tokens)
 
-const selectIconsContainerStyle = ({ paddingRight }) => ({ paddingRight })
 const selectIconTokens = ({ iconSize, iconColor }) => ({ color: iconColor, size: iconSize })
 
 /**
@@ -126,7 +124,7 @@ const Search = forwardRef(
     const { nativeID, testID, ...containerProps } = selectContainerProps(rest)
 
     return (
-      <View style={staticStyles.container} {...containerProps}>
+      <View {...containerProps}>
         <TextInputBase
           nativeID={nativeID}
           testID={testID}
@@ -150,28 +148,28 @@ const Search = forwardRef(
           onSubmitEditing={handleSubmit}
           onFocus={handleFocus}
           accessibilityLabel={a11yLabelText}
-        />
-        <View style={[staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)]}>
-          <StackView direction="row" space={buttonsGap}>
-            {ClearButtonIcon && !isEmpty && (
+          buttons={[
+            ClearButtonIcon && !isEmpty && (
               <ButtonBase
-                onPress={handleClear}
-                inactive={inactive}
-                accessibilityRole="button"
                 accessibilityLabel={getCopy('clearButtonAccessibilityLabel')}
+                accessibilityRole="button"
+                inactive={inactive}
+                key="clear"
+                onPress={handleClear}
                 tokens={(appearances) => selectButtonTokens(getButtonTokens(appearances))}
               >
                 {(buttonState) => (
                   <ClearButtonIcon {...selectIconTokens(getButtonTokens(buttonState))} />
                 )}
               </ButtonBase>
-            )}
-            {SubmitButtonIcon && (
+            ),
+            SubmitButtonIcon && (
               <ButtonBase
-                onPress={handleSubmit}
-                inactive={inactive}
-                accessibilityRole="button"
                 accessibilityLabel={getCopy('submitButtonAccessibilityLabel')}
+                accessibilityRole="button"
+                inactive={inactive}
+                key="submit"
+                onPress={handleSubmit}
                 tokens={(buttonState) =>
                   selectButtonTokens(getButtonTokens({ ...buttonState, priority: 'high' }))
                 }
@@ -182,9 +180,9 @@ const Search = forwardRef(
                   />
                 )}
               </ButtonBase>
-            )}
-          </StackView>
-        </View>
+            )
+          ]}
+        />
       </View>
     )
   }
@@ -248,16 +246,3 @@ Search.propTypes = {
 }
 
 export default Search
-
-const staticStyles = StyleSheet.create({
-  container: {
-    // No styles needed here except the View defaults (position: relative etc)
-  },
-  iconsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-})

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'