@telus-uds/components-base 1.90.0 → 1.91.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 26 Jul 2024 21:17:56 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Aug 2024 06:26:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.91.0
+
+Mon, 12 Aug 2024 06:26:58 GMT
+
+### Minor changes
+
+- OrderedList: add itemTextColor token and pass tokens down to children (jacqui.koroll@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.61.0
+
+### Patches
+
+- `TextInputBase`: Update padding logic for TextInput component based on icon and buttons presence (jaime.tuyuc@telus.com)
+
 ## 1.90.0
 
-Fri, 26 Jul 2024 21:17:56 GMT
+Fri, 26 Jul 2024 21:24:32 GMT
 
 ### Minor changes
 

package/lib/OrderedList/Item.js

@@ -21,13 +21,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return (0, _ThemeProvider.applyTextStyles)({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -41,10 +42,11 @@ const selectItemCounterStyles = _ref2 => {
     itemFontName,
     itemLineHeight,
     themeOptions,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
-    color: itemColor,
+    color: itemColor || itemTextColor,
     width: itemBulletContainerWidth,
     textAlign: itemBulletTextAlign,
     ...(0, _ThemeProvider.applyTextStyles)({
@@ -82,7 +84,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };

package/lib/OrderedList/OrderedList.js

@@ -17,29 +17,36 @@ const OrderedList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = _react.default.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      var _child$props;
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/_react.default.cloneElement(child, {
         index: start + i,
         isLastChild,
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
       }
-      return [addVariantToProps(children, 0, true)];
+      return [addVariantAndTokensToProps(children, 0, true)];
     }
     return children;
-  }, [children, variant, start]);
+  }, [children, variant, start, tokens]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_OrderedListBase.default, {
     ref: ref,
     ...selectProps(rest),
@@ -56,7 +63,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  variant: _utils.variantProp.propType
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('OrderedList')
 };
 OrderedList.displayName = 'OrderedList';
 OrderedList.Item = _Item.default;

package/lib/TextInput/TextInputBase.js

@@ -19,7 +19,7 @@ var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
-const selectInputStyles = (_ref, themeOptions, inactive, type) => {
+const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
     color,
@@ -35,12 +35,15 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
     height
   } = _ref;
+  let buttonCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  let isPassword = arguments.length > 7 ? arguments[7] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -67,7 +70,10 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     }
   });
 
-  const paddingWithIcon = iconSize + paddingRight;
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
+  const paddingWithIcon = buttonSize + adjustedPaddingRight;
   return {
     backgroundColor,
     color,
@@ -75,7 +81,7 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -343,7 +349,7 @@ const TextInputBase = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectOuterBorderStyles(themeTokens),
     children: [type === 'card' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib-module/OrderedList/Item.js

@@ -15,13 +15,14 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemFontSize,
     itemLineHeight,
     itemFontName,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref;
   return applyTextStyles({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   });
@@ -35,10 +36,11 @@ const selectItemCounterStyles = _ref2 => {
     itemFontName,
     itemLineHeight,
     themeOptions,
-    itemColor
+    itemColor,
+    itemTextColor
   } = _ref2;
   return {
-    color: itemColor,
+    color: itemColor || itemTextColor,
     width: itemBulletContainerWidth,
     textAlign: itemBulletTextAlign,
     ...applyTextStyles({
@@ -76,7 +78,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor,
+    color: themeTokens.itemColor || themeTokens.itemTextColor,
     fontName: themeTokens.headerFontName,
     fontWeight: themeTokens.headerFontWeight
   };

package/lib-module/OrderedList/OrderedList.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils';
+import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils';
 import OrderedListBase from './OrderedListBase';
 import Item from './Item';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -10,29 +10,36 @@ const OrderedList = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     start = 1,
     variant = {},
+    tokens = {},
     ...rest
   } = _ref;
+  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
   const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      var _child$props;
+    const addVariantAndTokensToProps = (child, i, isLastChild) => {
+      var _child$props, _child$props2;
       const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
+      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
       return /*#__PURE__*/React.cloneElement(child, {
         index: start + i,
         isLastChild,
         variant: {
           ...existingChildVariants,
           ...variant
+        },
+        tokens: {
+          ...existingChildTokens,
+          ...tokens
         }
       });
     };
-    if (variant) {
+    if (variant || tokens) {
       if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1));
+        return children.map((child, i) => addVariantAndTokensToProps(child, i, i === children.length - 1));
       }
-      return [addVariantToProps(children, 0, true)];
+      return [addVariantAndTokensToProps(children, 0, true)];
     }
     return children;
-  }, [children, variant, start]);
+  }, [children, variant, start, tokens]);
   return /*#__PURE__*/_jsx(OrderedListBase, {
     ref: ref,
     ...selectProps(rest),
@@ -49,7 +56,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 };
 OrderedList.displayName = 'OrderedList';
 OrderedList.Item = Item;

package/lib-module/TextInput/TextInputBase.js

@@ -13,7 +13,7 @@ import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
-const selectInputStyles = (_ref, themeOptions, inactive, type) => {
+const selectInputStyles = function (_ref, themeOptions, inactive, type) {
   let {
     backgroundColor,
     color,
@@ -29,12 +29,15 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
     height
   } = _ref;
+  let buttonCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  let buttonSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  let buttonsGapSize = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
+  let isPassword = arguments.length > 7 ? arguments[7] : undefined;
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -61,7 +64,10 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     }
   });
 
-  const paddingWithIcon = iconSize + paddingRight;
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize;
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing);
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight;
+  const paddingWithIcon = buttonSize + adjustedPaddingRight;
   return {
     backgroundColor,
     color,
@@ -69,7 +75,7 @@ const selectInputStyles = (_ref, themeOptions, inactive, type) => {
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -337,7 +343,7 @@ const TextInputBase = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   const nativeInputStyle = selectInputStyles({
     ...themeTokens,
     height
-  }, themeOptions, inactive, type);
+  }, themeOptions, inactive, type, buttons === null || buttons === void 0 ? void 0 : buttons.length, themeTokens.buttonSize, buttonsGapSize, isPassword);
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [type === 'card' && /*#__PURE__*/_jsx(View, {

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.60.0",
+    "@telus-uds/system-theme-tokens": "^2.61.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.90.0",
+  "version": "1.91.0",
   "types": "types/index.d.ts"
 }

package/src/OrderedList/Item.jsx

@@ -17,14 +17,14 @@ import ItemBase from './ItemBase'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
 
 const selectItemTextStyles = (
-  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor },
+  { itemFontHeight, itemFontSize, itemLineHeight, itemFontName, itemColor, itemTextColor },
   themeOptions
 ) =>
   applyTextStyles({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
-    color: itemColor,
+    color: itemColor || itemTextColor,
     themeOptions,
     lineHeight: itemLineHeight
   })
@@ -37,9 +37,10 @@ const selectItemCounterStyles = ({
   itemFontName,
   itemLineHeight,
   themeOptions,
-  itemColor
+  itemColor,
+  itemTextColor
 }) => ({
-  color: itemColor,
+  color: itemColor || itemTextColor,
   width: itemBulletContainerWidth,
   textAlign: itemBulletTextAlign,
   ...applyTextStyles({
@@ -63,7 +64,7 @@ const Item = React.forwardRef(
     const headingTokens = title && {
       lineHeight: themeTokens.itemLineHeight,
       fontSize: themeTokens.itemFontSize,
-      color: themeTokens.itemColor,
+      color: themeTokens.itemColor || themeTokens.itemTextColor,
       fontName: themeTokens.headerFontName,
       fontWeight: themeTokens.headerFontWeight
     }

package/src/OrderedList/OrderedList.jsx

@@ -1,39 +1,47 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { htmlAttrs, selectSystemProps, variantProp, viewProps } from '../utils'
+import { htmlAttrs, selectSystemProps, variantProp, viewProps, getTokensPropType } from '../utils'
 import OrderedListBase from './OrderedListBase'
 import Item from './Item'
 
 const [selectProps, selectedSystemPropsTypes] = selectSystemProps([htmlAttrs, viewProps])
 
-const OrderedList = React.forwardRef(({ children, start = 1, variant = {}, ...rest }, ref) => {
-  const childrenWithParentVariants = React.useMemo(() => {
-    const addVariantToProps = (child, i, isLastChild) => {
-      const existingChildVariants = child.props?.variant ?? {}
-      return React.cloneElement(child, {
-        index: start + i,
-        isLastChild,
-        variant: { ...existingChildVariants, ...variant }
-      })
-    }
-
-    if (variant) {
-      if (Array.isArray(children)) {
-        return children.map((child, i) => addVariantToProps(child, i, i === children.length - 1))
+const OrderedList = React.forwardRef(
+  ({ children, start = 1, variant = {}, tokens = {}, ...rest }, ref) => {
+    // Pass any variants and tokens "OrderedList" receives down to the individual list items.
+    const childrenWithParentVariants = React.useMemo(() => {
+      const addVariantAndTokensToProps = (child, i, isLastChild) => {
+        const existingChildVariants = child.props?.variant ?? {}
+        const existingChildTokens = child.props?.tokens ?? {}
+
+        return React.cloneElement(child, {
+          index: start + i,
+          isLastChild,
+          variant: { ...existingChildVariants, ...variant },
+          tokens: { ...existingChildTokens, ...tokens }
+        })
+      }
+
+      if (variant || tokens) {
+        if (Array.isArray(children)) {
+          return children.map((child, i) =>
+            addVariantAndTokensToProps(child, i, i === children.length - 1)
+          )
+        }
+        return [addVariantAndTokensToProps(children, 0, true)]
       }
-      return [addVariantToProps(children, 0, true)]
-    }
 
-    return children
-  }, [children, variant, start])
+      return children
+    }, [children, variant, start, tokens])
 
-  return (
-    <OrderedListBase ref={ref} {...selectProps(rest)}>
-      {childrenWithParentVariants}
-    </OrderedListBase>
-  )
-})
+    return (
+      <OrderedListBase ref={ref} {...selectProps(rest)}>
+        {childrenWithParentVariants}
+      </OrderedListBase>
+    )
+  }
+)
 
 OrderedList.propTypes = {
   ...selectedSystemPropsTypes,
@@ -45,7 +53,8 @@ OrderedList.propTypes = {
    * The position to start the list with.
    */
   start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  tokens: getTokensPropType('OrderedList')
 }
 
 OrderedList.displayName = 'OrderedList'

package/src/TextInput/TextInputBase.jsx

@@ -42,7 +42,6 @@ const selectInputStyles = (
     fontWeight,
     lineHeight,
     icon,
-    iconSize = 0,
     minLines,
     maxLines,
     width,
@@ -50,7 +49,11 @@ const selectInputStyles = (
   },
   themeOptions,
   inactive,
-  type
+  type,
+  buttonCount = 0,
+  buttonSize = 0,
+  buttonsGapSize = 0,
+  isPassword
 ) => {
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -82,7 +85,10 @@ const selectInputStyles = (
     }
   })
 
-  const paddingWithIcon = iconSize + paddingRight
+  const buttonSpacing = isPassword ? buttonsGapSize : -buttonsGapSize
+  const adjustedPaddingRight = paddingRight + (buttonCount ? 1 : 0) * (buttonSize + buttonSpacing)
+  const adjustedPaddingWithButtons = buttonCount > 1 ? paddingRight : adjustedPaddingRight
+  const paddingWithIcon = buttonSize + adjustedPaddingRight
 
   return {
     backgroundColor,
@@ -91,7 +97,7 @@ const selectInputStyles = (
     borderColor,
     borderRadius,
     paddingLeft: type === 'card' ? offsetBorder(paddingLeft + 34) : offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(adjustedPaddingWithButtons),
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     minHeight,
@@ -321,7 +327,11 @@ const TextInputBase = React.forwardRef(
       { ...themeTokens, height },
       themeOptions,
       inactive,
-      type
+      type,
+      buttons?.length,
+      themeTokens.buttonSize,
+      buttonsGapSize,
+      isPassword
     )
 
     return (