@telus-uds/components-base 1.45.0 → 1.47.0

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Sat, 27 May 2023 00:37:34 GMT and should not be manually modified.
+This log was last generated on Fri, 02 Jun 2023 00:27:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.47.0
+
+Fri, 02 Jun 2023 00:27:36 GMT
+
+### Minor changes
+
+- Override Search tokens with inactive variant if inactive is true (wlsdud194@hotmail.com)
+- New variants added for the typography component (35577399+JoshHC@users.noreply.github.com)
+- ExpandCollapse theme changes (akshay.pandey1@telus.com)
+- `Box`: Introduce new `border` related tokens (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-theme-tokens to v2.29.0
+
+### Patches
+
+- Remove unnecessary ChevronLink changes ("textLineHeight") (kyle.king2@telus.com)
+
+## 1.46.0
+
+Tue, 30 May 2023 02:46:46 GMT
+
+### Minor changes
+
+- Standardized RadioCardGroup (wlsdud194@hotmail.com)
+- Button outer width is no longer set to 0 if token width = 0 (wlsdud194@hotmail.com)
+- fix:list overflowing (samuraix221@hotmail.com)
+
 ## 1.45.0
 
-Sat, 27 May 2023 00:37:34 GMT
+Sat, 27 May 2023 00:44:50 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -290,7 +290,13 @@
       },
       "Box": {
         "backgroundColor": "color",
-        "gradient": "gradient"
+        "gradient": "gradient",
+        "borderWidth": "border",
+        "borderColor": "color",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius"
       },
       "Button": {
         "borderColor": "color",
@@ -499,7 +505,6 @@
       },
       "ChevronLink": {
         "fontSize": "fontSize",
-        "textLineHeight": "lineHeight",
         "color": "color",
         "outerBorderColor": "color",
         "leftIcon": "icon",
@@ -594,7 +599,21 @@
       },
       "ExpandCollapseMiniControl": {
         "size": "size",
-        "icon": "icon"
+        "icon": "icon",
+        "iconColor": "color",
+        "iconSize": "size",
+        "iconGap": "size",
+        "iconPaddingTop": "size",
+        "iconPosition": "position",
+        "verticalAlign": "verticalAlign",
+        "justifyContent": "flexJustifyContent",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "borderWidth": "border",
+        "borderColor": "color",
+        "backgroundColor": "color"
       },
       "ExpandCollapsePanel": {
         "expandDuration": "duration",
@@ -608,7 +627,21 @@
         "borderRadius": "radius",
         "borderWidth": "border",
         "expandDividerColor": "color",
-        "expanddDividerWidth": "size"
+        "expandDividerWidth": "size"
+      },
+      "ExpandCollapseMiniPanel": {
+        "expandDuration": "duration",
+        "collapseDuration": "duration",
+        "contentPaddingLeft": "size",
+        "contentPaddingRight": "size",
+        "contentPaddingTop": "size",
+        "contentPaddingBottom": "size",
+        "marginBottom": "size",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "expandDividerColor": "color",
+        "expandDividerWidth": "size"
       },
       "Feedback": {
         "backgroundColor": "color",
@@ -3327,6 +3360,13 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
+            "isMiniExpandCollapse": {
+              "defaultValue": {
+                "value": "false",
+                "computed": false
+              },
+              "required": false
+            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -3363,7 +3403,7 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expanddDividerWidth": "size"
+                  "expandDividerWidth": "size"
                 }
               },
               "required": false,
@@ -3711,7 +3751,13 @@
               "name": "custom",
               "raw": {
                 "backgroundColor": "color",
-                "gradient": "gradient"
+                "gradient": "gradient",
+                "borderWidth": "border",
+                "borderColor": "color",
+                "borderTopLeftRadius": "radius",
+                "borderTopRightRadius": "radius",
+                "borderBottomLeftRadius": "radius",
+                "borderBottomRightRadius": "radius"
               }
             },
             "required": false,
@@ -4259,6 +4305,13 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
+            "isMiniExpandCollapse": {
+              "defaultValue": {
+                "value": "false",
+                "computed": false
+              },
+              "required": false
+            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -4295,7 +4348,7 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expanddDividerWidth": "size"
+                  "expandDividerWidth": "size"
                 }
               },
               "required": false,
@@ -13183,7 +13236,6 @@
               "name": "custom",
               "raw": {
                 "fontSize": "fontSize",
-                "textLineHeight": "lineHeight",
                 "color": "color",
                 "outerBorderColor": "color",
                 "leftIcon": "icon",

package/lib/Box/Box.js

@@ -33,28 +33,41 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = tokens => {
-  let styles = {
-    backgroundColor: tokens.backgroundColor
+const selectBoxStyles = _ref => {
+  let {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  } = _ref;
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   };
 
-  if (tokens.gradient) {
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens;
-    styles = { ...styles,
-      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
-    };
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient;
+    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`;
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
 
   paddings.forEach(side => {
-    if (tokens[side]) {
-      styles[side] = tokens[side];
+    if (rest[side]) {
+      styles[side] = rest[side];
     }
   });
   return styles;
@@ -126,7 +139,7 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     space,
     horizontal = space,
@@ -145,7 +158,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     testID,
     dataSet,
     ...rest
-  } = _ref;
+  } = _ref2;
   const props = {
     accessibilityRole,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),

package/lib/Button/ButtonBase.js

@@ -81,7 +81,7 @@ const selectOuterSizeStyles = _ref3 => {
   });
   const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
 
-  if (typeof width === 'number' || typeof height === 'number') {
+  if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
     return sizeStyles;

package/lib/ExpandCollapse/Control.js

@@ -84,9 +84,10 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     tokens,
     accessibilityRole = 'button',
     variant,
+    isMiniExpandCollapse = false,
     ...rest
   } = _ref3;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,

package/lib/ExpandCollapse/Panel.js

@@ -70,6 +70,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     children,
     tokens,
     variant,
+    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -80,7 +81,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       expanded: isExpanded
     }
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -116,11 +117,12 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
+      isMiniExpandCollapse: isMiniExpandCollapse,
       children: control
     }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: {
         borderTopColor: themeTokens.expandDividerColor,
-        borderTopWidth: themeTokens.expanddDividerWidth,
+        borderTopWidth: themeTokens.expandDividerWidth,
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }

package/lib/Link/ChevronLink.js

@@ -46,7 +46,6 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       rightIcon,
       iconDisplace,
       height,
-      textLineHeight,
       fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
@@ -54,7 +53,6 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     return { ...linkTokens,
       height,
       blockFontSize: tokens.fontSize ?? fontSize,
-      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib/Link/LinkBase.js

@@ -63,13 +63,11 @@ const selectOuterBorderStyles = _ref => {
 const selectTextStyles = _ref2 => {
   let {
     color,
-    textLineHeight,
     blockFontSize
   } = _ref2;
   return {
     color,
     ...(0, _ThemeProvider.applyTextStyles)({
-      lineHeight: textLineHeight,
       blockFontSize
     }),
     ..._Platform.default.select({

package/lib/List/List.js

@@ -68,6 +68,10 @@ const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
+    style: {
+      flexShrink: 1,
+      flex: 1
+    },
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: items

package/lib/Search/Search.js

@@ -108,7 +108,10 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     initialValue,
     onChange
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, variant);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, {
+    inactive,
+    ...variant
+  });
   const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Search', tokens, variant);
   const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('SearchButton', tokens, variant); // TODO: support overriding the a11y props using a custom dictionary

package/lib-module/Box/Box.js

@@ -13,28 +13,41 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = tokens => {
-  let styles = {
-    backgroundColor: tokens.backgroundColor
+const selectBoxStyles = _ref => {
+  let {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  } = _ref;
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   };
 
-  if (tokens.gradient) {
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens;
-    styles = { ...styles,
-      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
-    };
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient;
+    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`;
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
 
   paddings.forEach(side => {
-    if (tokens[side]) {
-      styles[side] = tokens[side];
+    if (rest[side]) {
+      styles[side] = rest[side];
     }
   });
   return styles;
@@ -106,7 +119,7 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     space,
     horizontal = space,
@@ -125,7 +138,7 @@ const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
     testID,
     dataSet,
     ...rest
-  } = _ref;
+  } = _ref2;
   const props = {
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),

package/lib-module/Button/ButtonBase.js

@@ -57,7 +57,7 @@ const selectOuterSizeStyles = _ref3 => {
   });
   const sizeStyles = {}; // Apply width/height tokens: number === pixels, string === explicit units e.g. %
 
-  if (typeof width === 'number' || typeof height === 'number') {
+  if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
     return sizeStyles;

package/lib-module/ExpandCollapse/Control.js

@@ -66,9 +66,10 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     tokens,
     accessibilityRole = 'button',
     variant,
+    isMiniExpandCollapse = false,
     ...rest
   } = _ref3;
-  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
+  const getTokens = useThemeTokensCallback(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,

package/lib-module/ExpandCollapse/Panel.js

@@ -48,6 +48,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     children,
     tokens,
     variant,
+    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -58,7 +59,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       expanded: isExpanded
     }
   });
-  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = useThemeTokens(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -94,11 +95,12 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
+      isMiniExpandCollapse: isMiniExpandCollapse,
       children: control
     }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: {
         borderTopColor: themeTokens.expandDividerColor,
-        borderTopWidth: themeTokens.expanddDividerWidth,
+        borderTopWidth: themeTokens.expandDividerWidth,
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }

package/lib-module/Link/ChevronLink.js

@@ -28,7 +28,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
       rightIcon,
       iconDisplace,
       height,
-      textLineHeight,
       fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
@@ -36,7 +35,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     return { ...linkTokens,
       height,
       blockFontSize: tokens.fontSize ?? fontSize,
-      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib-module/Link/LinkBase.js

@@ -38,13 +38,11 @@ const selectOuterBorderStyles = _ref => {
 const selectTextStyles = _ref2 => {
   let {
     color,
-    textLineHeight,
     blockFontSize
   } = _ref2;
   return {
     color,
     ...applyTextStyles({
-      lineHeight: textLineHeight,
       blockFontSize
     }),
     ...Platform.select({

package/lib-module/List/List.js

@@ -47,6 +47,10 @@ const List = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
+    style: {
+      flexShrink: 1,
+      flex: 1
+    },
     accessibilityRole: accessibilityRole,
     ...selectProps(rest),
     children: items

package/lib-module/Search/Search.js

@@ -85,7 +85,10 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
     initialValue,
     onChange
   });
-  const themeTokens = useThemeTokens('Search', tokens, variant);
+  const themeTokens = useThemeTokens('Search', tokens, {
+    inactive,
+    ...variant
+  });
   const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
   const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
   const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant); // TODO: support overriding the a11y props using a custom dictionary

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.28.0",
+    "@telus-uds/system-theme-tokens": "^2.29.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.45.0"
+  "version": "1.47.0"
 }

package/src/Box/Box.jsx

@@ -23,26 +23,39 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = (tokens) => {
-  let styles = { backgroundColor: tokens.backgroundColor }
-  if (tokens.gradient) {
+const selectBoxStyles = ({
+  backgroundColor,
+  gradient,
+  borderWidth,
+  borderColor,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  ...rest
+}) => {
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
+  }
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens
-    styles = {
-      ...styles,
-      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
-    }
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient
+    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
   // Only set on styles if token provided because we spread this object after the spacing scale values
   paddings.forEach((side) => {
-    if (tokens[side]) {
-      styles[side] = tokens[side]
+    if (rest[side]) {
+      styles[side] = rest[side]
     }
   })
   return styles

package/src/Button/ButtonBase.jsx

@@ -55,7 +55,7 @@ const selectOuterSizeStyles = ({ outerBorderGap, outerBorderWidth, width, height
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
   const sizeStyles = {}
   // Apply width/height tokens: number === pixels, string === explicit units e.g. %
-  if (typeof width === 'number' || typeof height === 'number') {
+  if ((typeof width === 'number' && width > 0) || (typeof height === 'number' && height > 0)) {
     sizeStyles.width = width ? width + outerBorderOffset * 2 : width
     sizeStyles.height = height ? height + outerBorderOffset * 2 : height
     return sizeStyles

package/src/ExpandCollapse/Control.jsx

@@ -52,10 +52,23 @@ function selectIconTokens(tokens) {
 
 const ExpandCollapseControl = forwardRef(
   (
-    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
+    {
+      onPress,
+      isExpanded,
+      children,
+      tokens,
+      accessibilityRole = 'button',
+      variant,
+      isMiniExpandCollapse = false,
+      ...rest
+    },
     ref
   ) => {
-    const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
+    const getTokens = useThemeTokensCallback(
+      isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl',
+      tokens,
+      variant
+    )
 
     const selectedProps = selectProps({
       accessibilityRole,

package/src/ExpandCollapse/Panel.jsx

@@ -51,6 +51,7 @@ const ExpandCollapsePanel = forwardRef(
       children,
       tokens,
       variant,
+      isMiniExpandCollapse = false,
       controlRef,
       ...rest
     },
@@ -67,9 +68,14 @@ const ExpandCollapsePanel = forwardRef(
       }
     })
 
-    const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
-      expanded: isExpanded
-    })
+    const themeTokens = useThemeTokens(
+      isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel',
+      tokens,
+      variant,
+      {
+        expanded: isExpanded
+      }
+    )
 
     const handleControlPress = (event) => {
       onToggle(panelId, event)
@@ -100,6 +106,7 @@ const ExpandCollapsePanel = forwardRef(
           variant={variant}
           onPress={handleControlPress}
           ref={controlRef}
+          isMiniExpandCollapse={isMiniExpandCollapse}
         >
           {control}
         </ExpandCollapseControl>
@@ -107,7 +114,7 @@ const ExpandCollapsePanel = forwardRef(
           <View
             style={{
               borderTopColor: themeTokens.expandDividerColor,
-              borderTopWidth: themeTokens.expanddDividerWidth,
+              borderTopWidth: themeTokens.expandDividerWidth,
               marginLeft: themeTokens.contentPaddingLeft,
               marginRight: themeTokens.contentPaddingRight
             }}

package/src/Link/ChevronLink.jsx

@@ -15,22 +15,15 @@ const ChevronLink = forwardRef(
   ({ direction = 'right', children, tokens = {}, variant, dataSet, ...linkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
-      const {
-        leftIcon,
-        rightIcon,
-        iconDisplace,
-        height,
-        textLineHeight,
-        fontSize,
-        ...otherTokens
-      } = getChevronTokens(linkState)
+      const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
+        getChevronTokens(linkState)
+
       const linkTokens = selectTokens('Link', otherTokens)
 
       return {
         ...linkTokens,
         height,
         blockFontSize: tokens.fontSize ?? fontSize,
-        textLineHeight,
         icon: direction === 'right' ? rightIcon : leftIcon,
         iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
       }

package/src/Link/LinkBase.jsx

@@ -42,10 +42,10 @@ const selectOuterBorderStyles = ({
       }
     : {}
 
-const selectTextStyles = ({ color, textLineHeight, blockFontSize }) => {
+const selectTextStyles = ({ color, blockFontSize }) => {
   return {
     color,
-    ...applyTextStyles({ lineHeight: textLineHeight, blockFontSize }),
+    ...applyTextStyles({ blockFontSize }),
     ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -168,7 +168,6 @@ const LinkBase = forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const textStyles = selectTextStyles(themeTokens)
           const iconTokens = selectIconTokens(themeTokens)
-
           // TODO: may need to apply some smarter text inheritance here if inline to avoid native
           // issues like double-application of line heights breaking align-items: baseline
           const blockTextStyles = selectBlockStyles(themeTokens, themeOptions)

package/src/List/List.jsx

@@ -42,7 +42,12 @@ const List = forwardRef(
     })
 
     return (
-      <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
+      <View
+        ref={ref}
+        style={{ flexShrink: 1, flex: 1 }}
+        accessibilityRole={accessibilityRole}
+        {...selectProps(rest)}
+      >
         {items}
       </View>
     )

package/src/Search/Search.jsx

@@ -81,9 +81,8 @@ const Search = forwardRef(
       onChange
     })
 
-    const themeTokens = useThemeTokens('Search', tokens, variant)
+    const themeTokens = useThemeTokens('Search', tokens, { inactive, ...variant })
     const buttonTokens = useThemeTokens('SearchButton', tokens, variant)
-
     const getThemeTokens = useThemeTokensCallback('Search', tokens, variant)
     const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant)