@telus-uds/components-base 3.12.2 → 3.14.0

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -42,10 +42,15 @@ const ExpandCollapseMiniControl = React.forwardRef(
         pressed
       }
     )
-    const { size, icon } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
-      expanded,
-      focus
-    })
+    const { fontSize, lineHeight, iconSize, icon } = useThemeTokens(
+      'ExpandCollapseMiniControl',
+      tokens,
+      variant,
+      {
+        expanded,
+        focus
+      }
+    )
 
     // Choose hover styles when any part of Control is hoverred
     const appearance = { ...variant, hover }
@@ -54,16 +59,39 @@ const ExpandCollapseMiniControl = React.forwardRef(
       const { hover: linkHover } = linkState || {}
       const isHovered = hover || linkHover
 
+      const iconBaselineOffset = 0
+      const hoverTranslateY = 4
+
+      // Calculate baseline alignment to vertically center icon with text
+      // This combines font and icon metrics with adjustments for visual balance
+      const fontBaseline = fontSize / hoverTranslateY // Quarter of font size - adjusts for text's visual center point
+      const iconBaseline = iconSize / hoverTranslateY // Quarter of icon size - adjusts for icon's visual center point
+      const staticOffset = hoverTranslateY // Fixed downward adjustment to fine-tune vertical alignment
+      const sizeCompensation = -Math.abs(iconSize - fontSize) // Compensates when icon and text sizes differ significantly
+
+      const baselineAlignment = fontBaseline + iconBaseline - staticOffset + sizeCompensation
+
       if (Platform.OS !== 'web') {
-        return { iconTranslateY: -1 }
+        // For native platforms, use baseline alignment with optional offset
+        return { iconTranslateY: baselineAlignment + iconBaselineOffset }
       }
 
       if (isHovered) {
-        // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
-        return { iconTranslateY: (expanded ? -1 : 1) * size }
+        // Apply animation offset to the baseline-aligned position
+        // When expanded: move icon UP (1.3 the hover distance for clear movement)
+        // When collapsed: move icon DOWN (single hover distance)
+        const hoverMovementDistance = 1.3
+        const animationOffset = expanded
+          ? -(hoverTranslateY * hoverMovementDistance)
+          : hoverTranslateY
+
+        return {
+          iconTranslateY: baselineAlignment + iconBaselineOffset + animationOffset
+        }
       }
 
-      return {}
+      // Default state uses baseline alignment with optional offset
+      return { iconTranslateY: baselineAlignment + iconBaselineOffset }
     }
 
     return (
@@ -73,7 +101,9 @@ const ExpandCollapseMiniControl = React.forwardRef(
         iconPosition={iconPosition}
         tokens={(linkState) => ({
           ...linkTokens,
-          ...getTokens(linkState)
+          ...getTokens(linkState),
+          iconSize,
+          blockLineHeight: lineHeight
         })}
         ref={ref}
         {...presentationOnly}

package/src/FlexGrid/FlexGrid.jsx

@@ -10,7 +10,8 @@ import {
   selectSystemProps,
   BaseView,
   StyleSheet,
-  createMediaQueryStyles
+  createMediaQueryStyles,
+  useResponsiveProp
 } from '../utils'
 import Row from './Row'
 import Col from './Col'
@@ -21,6 +22,54 @@ import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const CONTENT_MAX_WIDTH = 'max'
+const CONTENT_FULL_WIDTH = 'full'
+
+/**
+ * Resolves the maximum width for content based on the provided value and responsive width.
+ *
+ * @param {number|string|null|undefined} contentMinWidthValue - The minimum width value for the content.
+ *        Can be a number, a special string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, or null if full width is desired.
+ */
+const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
+  if (!contentMinWidthValue || contentMinWidthValue === CONTENT_FULL_WIDTH) {
+    return null
+  }
+
+  if (Number.isFinite(contentMinWidthValue)) {
+    return contentMinWidthValue
+  }
+
+  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth
+  }
+
+  return contentMinWidthValue
+}
+
+/**
+ * Calculates the maximum width for a given viewport based on limitWidth and contentMinWidth settings.
+ *
+ * @param {string} viewportKey - The viewport key ('xs', 'sm', 'md', 'lg', 'xl')
+ * @param {boolean} limitWidth - Whether to limit the width to viewport breakpoints
+ * @param {any} contentMinWidth - The contentMinWidth prop value
+ * @param {number|string|null} maxWidth - The resolved max width value
+ * @returns {number|string|null} The calculated maximum width for the viewport
+ */
+const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
+  if (limitWidth) {
+    return viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey)
+  }
+
+  if (contentMinWidth) {
+    return maxWidth
+  }
+
+  return viewportKey === 'xl' ? viewports.map.get('xl') : null
+}
+
 /**
  * A mobile-first flexbox grid.
  */
@@ -28,7 +77,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const FlexGrid = React.forwardRef(
   (
     {
-      limitWidth = true,
+      limitWidth = false,
       gutter = true,
       outsideGutter = true,
       xsReverse,
@@ -40,6 +89,7 @@ const FlexGrid = React.forwardRef(
       accessibilityRole,
       children,
       dataSet,
+      contentMinWidth,
       ...rest
     },
     ref
@@ -47,30 +97,36 @@ const FlexGrid = React.forwardRef(
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
     const viewport = useViewport()
     const {
+      themeOptions,
       themeOptions: { enableMediaQueryStyleSheet }
     } = useTheme()
 
     let flexgridStyles
     let mediaIds
 
+    const contentMinWidthValue = useResponsiveProp(contentMinWidth)
+    const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth)
+
     const stylesByViewport = {
       xs: {
+        maxWidth: getMaxWidthForViewport('xs', limitWidth, contentMinWidth, maxWidth),
         flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
       },
       sm: {
-        maxWidth: limitWidth && viewports.map.get('sm'),
+        maxWidth: getMaxWidthForViewport('sm', limitWidth, contentMinWidth, maxWidth),
         flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
       },
       md: {
-        maxWidth: limitWidth && viewports.map.get('md'),
+        maxWidth: getMaxWidthForViewport('md', limitWidth, contentMinWidth, maxWidth),
         flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
       },
       lg: {
-        maxWidth: limitWidth && viewports.map.get('lg'),
+        maxWidth: getMaxWidthForViewport('lg', limitWidth, contentMinWidth, maxWidth),
         flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
       },
       xl: {
-        maxWidth: limitWidth && viewports.map.get('xl'),
+        maxWidth: getMaxWidthForViewport('xl', limitWidth, contentMinWidth, maxWidth),
         flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
       }
     }
@@ -162,7 +218,24 @@ FlexGrid.propTypes = {
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+   * The minimum width of the content in the FlexGrid.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
+  })
 }
 
 FlexGrid.Row = Row

package/src/Icon/Icon.jsx

@@ -38,7 +38,9 @@ const Icon = React.forwardRef(
           width: themeTokens.size + themeTokens.width * 2, // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
           height: themeTokens.size + themeTokens.width * 2
         }
-      : {}
+      : {
+          padding: themeTokens.padding
+        }
 
     const getIconContentForMobile = () => {
       if (Object.keys(paddingStyles).length) {

package/src/InputLabel/InputLabel.jsx

@@ -161,7 +161,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/src/InputSupports/InputSupports.jsx

@@ -121,7 +121,7 @@ InputSupports.propTypes = {
    * 1. `tooltip` as a string - The content of the tooltip.
    * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/src/Notification/Notification.jsx

@@ -26,6 +26,8 @@ import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 import { useViewport } from '../ViewportProvider'
 
+const CONTENT_MAX_WIDTH = 'max'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectContainerStyles = (tokens) => ({ ...tokens })
@@ -65,8 +67,14 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   placeContent: 'start'
 })
 
-const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
-  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
+const selectContentContainerStyle = (
+  themeTokens,
+  maxWidth,
+  system,
+  viewport,
+  useContentMaxWidth
+) => ({
+  maxWidth: system && (useContentMaxWidth || viewport === 'xl') ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -79,7 +87,8 @@ const getMediaQueryStyles = (
   mediaIdsRef,
   dismissible,
   viewport,
-  system
+  system,
+  useContentMaxWidth
 ) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
@@ -100,7 +109,7 @@ const getMediaQueryStyles = (
   const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
       acc[vp] = {
-        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp, useContentMaxWidth),
         flexDirection: 'row',
         flexShrink: 1,
         justifyContent: 'space-between',
@@ -169,7 +178,15 @@ const getMediaQueryStyles = (
   }
 }
 
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+const getDefaultStyles = (
+  themeTokens,
+  themeOptions,
+  maxWidth,
+  dismissible,
+  viewport,
+  system,
+  useContentMaxWidth
+) => ({
   containerStyles: {
     container: {
       flexDirection: 'column',
@@ -181,7 +198,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport, useContentMaxWidth),
       ...(system && { alignSelf: 'center' })
     }
   },
@@ -251,7 +268,20 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = React.forwardRef(
-  ({ children, system, dismissible, copy = 'en', tokens, variant, onDismiss, ...rest }, ref) => {
+  (
+    {
+      children,
+      system,
+      dismissible,
+      copy = 'en',
+      tokens,
+      variant,
+      onDismiss,
+      contentMinWidth,
+      ...rest
+    },
+    ref
+  ) => {
     const [isDismissed, setIsDismissed] = React.useState(false)
     const viewport = useViewport()
     const getCopy = useCopy({ dictionary, copy })
@@ -266,6 +296,7 @@ const Notification = React.forwardRef(
       system: isSystemEnabled,
       viewport
     })
+    const useContentMaxWidth = useResponsiveProp(contentMinWidth) === CONTENT_MAX_WIDTH
     const maxWidth = useResponsiveProp(
       themeOptions?.contentMaxWidth,
       viewports.map.get(viewports.xl)
@@ -300,7 +331,8 @@ const Notification = React.forwardRef(
         mediaIdsRef,
         dismissible,
         viewport,
-        isSystemEnabled
+        isSystemEnabled,
+        useContentMaxWidth
       )
     } else {
       notificationComponentRef.current = getDefaultStyles(
@@ -309,7 +341,8 @@ const Notification = React.forwardRef(
         maxWidth,
         dismissible,
         viewport,
-        isSystemEnabled
+        isSystemEnabled,
+        useContentMaxWidth
       )
     }
 
@@ -434,6 +467,22 @@ Notification.propTypes = {
    * Callback function called when the dismiss button is clicked
    */
   onDismiss: PropTypes.func,
+  /**
+   * The minimum width of the content in the Notification when using the system variant.
+   * This prop accepts responsive values for different viewports.
+   * - `xs`: 'max' | 'full'
+   * - `sm`: 'max' | 'full'
+   * - `md`: 'max' | 'full'
+   * - `lg`: 'max' | 'full'
+   * - `xl`: 'max' | 'full'
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOf(['max', 'full']),
+    lg: PropTypes.oneOf(['max', 'full']),
+    md: PropTypes.oneOf(['max', 'full']),
+    sm: PropTypes.oneOf(['max', 'full']),
+    xs: PropTypes.oneOf(['max', 'full'])
+  }),
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 }

package/src/Tabs/Tabs.jsx

@@ -12,6 +12,7 @@ import {
   selectSystemProps,
   useHash,
   useInputValue,
+  useResponsiveProp,
   variantProp,
   viewProps,
   withLinkRouter
@@ -21,6 +22,7 @@ import HorizontalScroll, {
   HorizontalScrollButton
 } from '../HorizontalScroll'
 import TabsItem from './TabsItem'
+import TabsDropdown from './TabsDropdown'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
@@ -58,6 +60,12 @@ const getStackViewTokens = (variant) => {
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
  *
+ * By default, Tabs always renders as horizontal scrolling tabs regardless of viewport.
+ * To enable dropdown mode, you must explicitly pass `variant={{ dropdown: true }}`.
+ * When dropdown is enabled, it will only render as a dropdown on mobile and tablet
+ * viewports (XS and SM). On larger viewports (MD, LG, XL), it will still render as
+ * horizontal tabs even with dropdown enabled.
+ *
  * If you are using Tabs to navigate to a new page (web-only) you should pass
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
@@ -102,6 +110,32 @@ const Tabs = React.forwardRef(
       getDefaultTabItemAccessibilityRole(parentAccessibilityRole)
     const stackViewTokens = getStackViewTokens(variant)
 
+    // Render dropdown only if explicitly requested via variant AND viewport is xs or sm
+    const isSmallViewport = useResponsiveProp(
+      { xs: true, sm: true, md: false, lg: false, xl: false },
+      false
+    )
+    const shouldRenderDropdown = variant?.dropdown === true && isSmallViewport
+
+    if (shouldRenderDropdown) {
+      return (
+        <TabsDropdown
+          ref={ref}
+          tokens={tokens}
+          itemTokens={itemTokens}
+          variant={variant}
+          value={currentValue}
+          onChange={setValue}
+          items={items}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
+          accessibilityRole={
+            parentAccessibilityRole === 'tablist' ? 'button' : parentAccessibilityRole
+          }
+          {...restProps}
+        />
+      )
+    }
     return (
       <HorizontalScroll
         ref={ref}
@@ -169,14 +203,14 @@ Tabs.displayName = 'Tabs'
 
 Tabs.propTypes = {
   ...selectedSystemPropTypes,
-  ...withLinkRouter.PropTypes,
+  ...withLinkRouter.propTypes,
   /**
    * Array of `TabsItem`s
    */
   items: PropTypes.arrayOf(
     PropTypes.shape({
       ...selectedItemPropTypes,
-      ...withLinkRouter.PropTypes,
+      ...withLinkRouter.propTypes,
       href: PropTypes.string,
       label: PropTypes.string,
       id: PropTypes.string,