@telus-uds/components-web 4.13.0 → 4.14.0

package/CHANGELOG.md

@@ -1,9 +1,32 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 21 Oct 2025 14:46:26 GMT and should not be manually modified.
+This log was last generated on Wed, 19 Nov 2025 05:51:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 4.14.0
+
+Wed, 19 Nov 2025 05:51:40 GMT
+
+### Minor changes
+
+- `IconButton`: add new actions (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v3.23.0
+- Bump @telus-uds/system-theme-tokens to v4.16.0
+
+### Patches
+
+- `Table`: fix token override (guillermo.peitzner@telus.com)
+
+## 4.13.1
+
+Wed, 29 Oct 2025 07:40:46 GMT
+
+### Patches
+
+- `Interactive Card`: extra spacing fixed in interactive Cards when padding tokens are set to none (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v3.22.0
+
 ## 4.13.0
 
 Tue, 21 Oct 2025 14:46:26 GMT

package/lib/cjs/IconButton/IconButton.js

@@ -38,7 +38,7 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     })
   );
 });
-const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand'];
+const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand', 'menu', 'cart', 'profile'];
 IconButton.displayName = 'IconButton';
 const propsWithoutIcon = _ref2 => {
   let {

package/lib/cjs/Table/Cell.js

@@ -41,13 +41,17 @@ const sharedStyles = /*#__PURE__*/(0, _styledComponents.css)(["", ""], _ref2 =>
     cellBackground,
     cellStickyShadow,
     stickyBackgroundColor,
+    cellBottomLeftBorderRadius,
+    cellBottomRightBorderRadius,
+    cellTopLeftBorderRadius,
+    cellTopRightBorderRadius,
     type
   } = _ref2;
-  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+  return (0, _styledComponents.css)(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;border-bottom-left-radius:", "px;border-bottom-right-radius:", "px;border-top-left-radius:", "px;border-top-right-radius:", "px;"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
-  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth);
+  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth, cellBottomLeftBorderRadius, cellBottomRightBorderRadius, cellTopLeftBorderRadius, cellTopRightBorderRadius);
 });
 const createStyledCell = htmlElement => _styledComponents.default[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
@@ -99,6 +103,10 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cellBorderWidth,
     cellBorderColor,
     cellBorderTopWidth,
+    cellTopLeftBorderRadius,
+    cellTopRightBorderRadius,
+    cellBottomLeftBorderRadius,
+    cellBottomRightBorderRadius,
     fontName,
     fontWeight,
     fontSize,
@@ -125,6 +133,10 @@ const Cell = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
     cellBorderWidth,
     cellBorderColor,
     cellBorderTopWidth,
+    cellTopLeftBorderRadius,
+    cellTopRightBorderRadius,
+    cellBottomLeftBorderRadius,
+    cellBottomRightBorderRadius,
     stickyBackgroundColor,
     cellBoxShadowColor,
     display,

package/lib/cjs/Table/Header.js

@@ -6,16 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
 var _Row = _interopRequireDefault(require("./Row"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    children
+    children,
+    tokens
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
     ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+      tokens: tokens,
       children: _react.default.Children.map(children, child =>
       /*#__PURE__*/
       // TO DO: pass type as a variant instead of prop
@@ -27,6 +30,7 @@ const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Header.displayName = 'Header';
 Header.propTypes = {
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  tokens: (0, _componentsBase.getTokensPropType)('Table')
 };
 var _default = exports.default = Header;

package/lib/cjs/Table/SubHeading.js

@@ -6,15 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
 var _Row = _interopRequireDefault(require("./Row"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
-    children
+    children,
+    tokens
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
     ref: ref,
+    tokens: tokens,
     children: _react.default.Children.map(children, child =>
     /*#__PURE__*/
     // TO DO: pass type as a variant instead of prop
@@ -25,6 +28,7 @@ const Header = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 Header.displayName = 'Header';
 Header.propTypes = {
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  tokens: (0, _componentsBase.getTokensPropType)('Table')
 };
 var _default = exports.default = Header;

package/lib/esm/IconButton/IconButton.js

@@ -31,7 +31,7 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })
   );
 });
-const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand'];
+const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand', 'menu', 'cart', 'profile'];
 IconButton.displayName = 'IconButton';
 const propsWithoutIcon = _ref2 => {
   let {

package/lib/esm/Table/Cell.js

@@ -32,13 +32,17 @@ const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
     cellBackground,
     cellStickyShadow,
     stickyBackgroundColor,
+    cellBottomLeftBorderRadius,
+    cellBottomRightBorderRadius,
+    cellTopLeftBorderRadius,
+    cellTopRightBorderRadius,
     type
   } = _ref2;
-  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", ";border-top-width:", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";border-style:", ";border-color:", ";border-width:", "px;border-top-width:", "px;border-bottom-left-radius:", "px;border-bottom-right-radius:", "px;border-top-left-radius:", "px;border-top-right-radius:", "px;"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
     type,
     cellStickyShadow,
     stickyBackgroundColor
-  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth);
+  }), cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none', cellBorderColor, cellBorderWidth, cellBorderTopWidth || cellBorderWidth, cellBottomLeftBorderRadius, cellBottomRightBorderRadius, cellTopLeftBorderRadius, cellTopRightBorderRadius);
 });
 const createStyledCell = htmlElement => styled[htmlElement].withConfig({
   displayName: "Cell__createStyledCell",
@@ -90,6 +94,10 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cellBorderWidth,
     cellBorderColor,
     cellBorderTopWidth,
+    cellTopLeftBorderRadius,
+    cellTopRightBorderRadius,
+    cellBottomLeftBorderRadius,
+    cellBottomRightBorderRadius,
     fontName,
     fontWeight,
     fontSize,
@@ -116,6 +124,10 @@ const Cell = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     cellBorderWidth,
     cellBorderColor,
     cellBorderTopWidth,
+    cellTopLeftBorderRadius,
+    cellTopRightBorderRadius,
+    cellBottomLeftBorderRadius,
+    cellBottomRightBorderRadius,
     stickyBackgroundColor,
     cellBoxShadowColor,
     display,

package/lib/esm/Table/Header.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getTokensPropType } from '@telus-uds/components-base';
 import Row from './Row';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    children
+    children,
+    tokens
   } = _ref;
   return /*#__PURE__*/_jsx("thead", {
     ref: ref,
     children: /*#__PURE__*/_jsx(Row, {
+      tokens: tokens,
       children: React.Children.map(children, child =>
       /*#__PURE__*/
       // TO DO: pass type as a variant instead of prop
@@ -20,6 +23,7 @@ const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Header.displayName = 'Header';
 Header.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  tokens: getTokensPropType('Table')
 };
 export default Header;

package/lib/esm/Table/SubHeading.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { getTokensPropType } from '@telus-uds/components-base';
 import Row from './Row';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
-    children
+    children,
+    tokens
   } = _ref;
   return /*#__PURE__*/_jsx(Row, {
     ref: ref,
+    tokens: tokens,
     children: React.Children.map(children, child =>
     /*#__PURE__*/
     // TO DO: pass type as a variant instead of prop
@@ -18,6 +21,7 @@ const Header = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 Header.displayName = 'Header';
 Header.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  tokens: getTokensPropType('Table')
 };
 export default Header;

package/package.json

@@ -5,9 +5,9 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "^3.21.0",
+    "@telus-uds/components-base": "^3.23.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.15.1",
+    "@telus-uds/system-theme-tokens": "^4.16.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -82,5 +82,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "4.13.0"
+  "version": "4.14.0"
 }

package/src/IconButton/IconButton.jsx

@@ -35,7 +35,10 @@ const multiBrandIconNames = [
   'moveDown',
   'moveLeft',
   'moveRight',
-  'expand'
+  'expand',
+  'menu',
+  'cart',
+  'profile'
 ]
 
 IconButton.displayName = 'IconButton'

package/src/Table/Cell.jsx

@@ -46,6 +46,10 @@ const sharedStyles = css`
     cellBackground,
     cellStickyShadow,
     stickyBackgroundColor,
+    cellBottomLeftBorderRadius,
+    cellBottomRightBorderRadius,
+    cellTopLeftBorderRadius,
+    cellTopRightBorderRadius,
     type
   }) => css`
     text-align: ${align};
@@ -55,8 +59,12 @@ const sharedStyles = css`
     ${isSticky && stickyStyles({ type, cellStickyShadow, stickyBackgroundColor })};
     border-style: ${cellBorderWidth || cellBorderTopWidth ? 'solid' : 'none'};
     border-color: ${cellBorderColor};
-    border-width: ${cellBorderWidth};
-    border-top-width: ${cellBorderTopWidth || cellBorderWidth};
+    border-width: ${cellBorderWidth}px;
+    border-top-width: ${cellBorderTopWidth || cellBorderWidth}px;
+    border-bottom-left-radius: ${cellBottomLeftBorderRadius}px;
+    border-bottom-right-radius: ${cellBottomRightBorderRadius}px;
+    border-top-left-radius: ${cellTopLeftBorderRadius}px;
+    border-top-right-radius: ${cellTopRightBorderRadius}px;
   `}
 `
 const createStyledCell = (htmlElement) => styled[htmlElement]`
@@ -98,6 +106,10 @@ const Cell = React.forwardRef(
       cellBorderWidth,
       cellBorderColor,
       cellBorderTopWidth,
+      cellTopLeftBorderRadius,
+      cellTopRightBorderRadius,
+      cellBottomLeftBorderRadius,
+      cellBottomRightBorderRadius,
       fontName,
       fontWeight,
       fontSize,
@@ -120,6 +132,10 @@ const Cell = React.forwardRef(
       cellBorderWidth,
       cellBorderColor,
       cellBorderTopWidth,
+      cellTopLeftBorderRadius,
+      cellTopRightBorderRadius,
+      cellBottomLeftBorderRadius,
+      cellBottomRightBorderRadius,
       stickyBackgroundColor,
       cellBoxShadowColor,
       display,

package/src/Table/Header.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getTokensPropType } from '@telus-uds/components-base'
 import Row from './Row'
 
-const Header = React.forwardRef(({ children }, ref) => {
+const Header = React.forwardRef(({ children, tokens }, ref) => {
   return (
     <thead ref={ref}>
-      <Row>
+      <Row tokens={tokens}>
         {React.Children.map(children, (child) =>
           // TO DO: pass type as a variant instead of prop
           React.cloneElement(child, { type: 'heading' })
@@ -18,7 +19,8 @@ const Header = React.forwardRef(({ children }, ref) => {
 Header.displayName = 'Header'
 
 Header.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  tokens: getTokensPropType('Table')
 }
 
 export default Header

package/src/Table/SubHeading.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getTokensPropType } from '@telus-uds/components-base'
 import Row from './Row'
 
-const Header = React.forwardRef(({ children }, ref) => {
+const Header = React.forwardRef(({ children, tokens }, ref) => {
   return (
-    <Row ref={ref}>
+    <Row ref={ref} tokens={tokens}>
       {React.Children.map(children, (child) =>
         // TO DO: pass type as a variant instead of prop
         React.cloneElement(child, { type: 'subHeading' })
@@ -16,7 +17,8 @@ const Header = React.forwardRef(({ children }, ref) => {
 Header.displayName = 'Header'
 
 Header.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  tokens: getTokensPropType('Table')
 }
 
 export default Header