@telus-uds/components-base 3.12.1 → 3.13.0

package/lib/esm/InputSupports/InputSupports.js

@@ -116,7 +116,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/lib/esm/Notification/Notification.js

@@ -9,6 +9,7 @@ import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { useViewport } from '../ViewportProvider';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CONTENT_MAX_WIDTH = 'max';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = tokens => ({
   ...tokens
@@ -63,13 +64,13 @@ const selectDismissButtonContainerStyles = _ref4 => {
     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
 });
-const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system) => {
+const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, system, useContentMaxWidth) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
     let [vp, viewportTokens] = _ref5;
     acc[vp] = {
@@ -92,7 +93,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
   const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce((acc, _ref6) => {
     let [vp, viewportTokens] = _ref6;
     acc[vp] = {
-      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+      ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp, useContentMaxWidth),
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
@@ -169,7 +170,7 @@ const getMediaQueryStyles = (themeTokens, themeOptions, maxWidth, mediaIdsRef, d
     selectDismissIconPropsStyles
   };
 };
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system, useContentMaxWidth) => ({
   containerStyles: {
     container: {
       flexDirection: 'column',
@@ -181,7 +182,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'
       })
@@ -280,6 +281,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     tokens,
     variant,
     onDismiss,
+    contentMinWidth,
     ...rest
   } = _ref7;
   const [isDismissed, setIsDismissed] = React.useState(false);
@@ -302,6 +304,7 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     system: isSystemEnabled,
     viewport
   });
+  const useContentMaxWidth = useResponsiveProp(contentMinWidth) === CONTENT_MAX_WIDTH;
   const maxWidth = useResponsiveProp(themeOptions?.contentMaxWidth, viewports.map.get(viewports.xl));
   const notificationComponentRef = React.useRef({
     containerStyles: {},
@@ -324,9 +327,9 @@ const Notification = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
     selectDismissIconPropsIds: {}
   });
   if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, maxWidth, mediaIdsRef, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled);
+    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, isSystemEnabled, useContentMaxWidth);
   }
   if (isDismissed) {
     return null;
@@ -423,6 +426,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/lib/esm/utils/props/inputSupportsProps.js

@@ -37,7 +37,7 @@ export default {
      * 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/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.10.0",
+    "@telus-uds/system-theme-tokens": "^4.12.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.12.1",
+  "version": "3.13.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.10.0",
+    "@telus-uds/system-theme-tokens": "^4.12.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.12.1",
+  "version": "3.13.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonDropdown.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Platform, Text, View } from 'react-native'
+import { Platform, StyleSheet, Text, View } from 'react-native'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
 import ButtonBase from './ButtonBase'
-import { useThemeTokensCallback } from '../ThemeProvider'
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -13,9 +13,10 @@ import {
   useInputValue
 } from '../utils'
 import Icon from '../Icon'
-import { getStackedContent } from '../StackView'
 import { getPressHandlersWithArgs } from '../utils/pressability'
 
+const FULL_WIDTH_STYLE = 'full'
+
 const selectIconTokens = ({
   icon,
   iconPosition,
@@ -50,6 +51,44 @@ const selectIconTokens = ({
   }
 })
 
+const selectDescriptionTextStyles = (tokens) => ({
+  ...applyTextStyles({
+    fontName: tokens?.descriptionFontName,
+    fontSize: tokens?.descriptionFontSize,
+    fontWeight: tokens?.descriptionFontWeight,
+    fontColor: tokens?.color
+  }),
+  paddingBottom: tokens?.descriptionTextPaddingBottom
+})
+
+const selectLeadIconTokens = (tokens) => ({
+  color: tokens?.leadIconColor,
+  backgroundColor: tokens?.leadIconBackgroundColor,
+  size: tokens?.leadIconSize,
+  borderRadius: tokens?.leadIconBorderRadius,
+  padding: tokens?.leadIconPadding
+})
+
+const selectLeadIconContainerStyles = (tokens) => ({
+  paddingTop: tokens?.leadIconContainerPaddingTop,
+  paddingBottom: tokens?.leadIconContainerPaddingBottom,
+  paddingLeft: tokens?.leadIconContainerPaddingLeft,
+  paddingRight: tokens?.leadIconContainerPaddingRight
+})
+
+const selectTextContainerStyles = (tokens) => ({
+  paddingLeft: tokens?.textPaddingLeft,
+  paddingRight: tokens?.textPaddingRight
+})
+
+const selectStackedContentStyles = (tokens, iconPosition, isFullWidth) => ({
+  ...staticStyles.stackedContent,
+  gap: tokens?.iconSpace,
+  flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',
+  ...(Platform.OS === 'web' && { flex: 1 }),
+  ...(isFullWidth && { justifyContent: 'space-between', flex: 1 })
+})
+
 const ButtonDropdown = React.forwardRef(
   (
     {
@@ -63,10 +102,14 @@ const ButtonDropdown = React.forwardRef(
       readOnly = false,
       children = null,
       accessibilityRole = 'radio',
+      description,
+      singleOption,
       ...props
     },
     ref
   ) => {
+    const isFullWidth = variant?.width === FULL_WIDTH_STYLE
+
     const { currentValue: isOpen, setValue: setIsOpen } = useInputValue(
       {
         value,
@@ -85,7 +128,11 @@ const ButtonDropdown = React.forwardRef(
 
     const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState)
 
-    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+    const getButtonTokens = (buttonState) => ({
+      ...selectTokens('Button', getTokens(buttonState)),
+      iconSpace: props?.icon ? getTokens(buttonState)?.iconSpace : 0,
+      ...(isFullWidth && { width: 'full' })
+    })
 
     // Pass an object of relevant component state as first argument for any passed-in press handlers
     const pressHandlers = getPressHandlersWithArgs(props, [{ label, open: isOpen }])
@@ -103,7 +150,7 @@ const ButtonDropdown = React.forwardRef(
         {...pressHandlers}
         onPress={handlePress}
         tokens={getButtonTokens}
-        inactive={inactive}
+        inactive={singleOption || inactive}
         icon={() => null}
         accessibilityRole={accessibilityRole}
         {...props}
@@ -116,31 +163,50 @@ const ButtonDropdown = React.forwardRef(
           // - Token sets: https://github.com/telus/universal-design-system/issues/782
 
           const itemTokens = getTokens(buttonState)
+          const leadIcon = itemTokens?.leadIcon
 
           const {
             iconTokens,
             iconPosition,
-            iconSpace,
             iconWrapperStyle,
             icon: IconComponent
           } = selectIconTokens(itemTokens)
 
-          const iconContent = IconComponent ? (
-            <View style={iconWrapperStyle}>
-              <Icon icon={IconComponent} tokens={iconTokens} />
-            </View>
-          ) : null
+          const iconContent =
+            IconComponent && !singleOption ? (
+              <View style={iconWrapperStyle}>
+                <Icon icon={IconComponent} tokens={iconTokens} />
+              </View>
+            ) : null
 
           const childrenContent = () =>
             typeof children === 'function'
               ? children({ ...resolvePressableState(buttonState, extraState), textStyles })
               : children
 
-          const content = children ? childrenContent() : <Text style={textStyles}>{label}</Text>
+          const content = children ? (
+            childrenContent()
+          ) : (
+            <View style={staticStyles.contentContainer}>
+              {leadIcon && (
+                <View style={selectLeadIconContainerStyles(itemTokens)}>
+                  <Icon icon={leadIcon} tokens={selectLeadIconTokens(itemTokens)} />
+                </View>
+              )}
+              <View style={[staticStyles.textContainer, selectTextContainerStyles(itemTokens)]}>
+                <Text style={textStyles}>{label}</Text>
+                {description && (
+                  <Text style={selectDescriptionTextStyles(itemTokens)}>{description}</Text>
+                )}
+              </View>
+            </View>
+          )
 
-          return getStackedContent(
-            iconPosition === 'left' ? [iconContent, content] : [content, iconContent],
-            { space: iconSpace, direction: 'row' }
+          return (
+            <View style={selectStackedContentStyles(itemTokens, iconPosition, isFullWidth)}>
+              {iconContent}
+              {content}
+            </View>
           )
         }}
       </ButtonBase>
@@ -176,7 +242,34 @@ ButtonDropdown.propTypes = {
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */
-  accessibilityRole: PropTypes.string
+  accessibilityRole: PropTypes.string,
+  /**
+   * The description of ButtonDropdown.
+   */
+  description: PropTypes.string,
+  /**
+   * Use this prop to render the ButtonDropdown as display only without any interaction when there is only one option.
+   */
+  singleOption: PropTypes.bool
 }
 
+const staticStyles = StyleSheet.create({
+  textContainer: {
+    alignItems: 'flex-start',
+    flexShrink: 1,
+    ...(Platform.OS === 'web' && { flex: 1 })
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    alignItems: 'center',
+    ...(Platform.OS === 'web' && { flex: 1 }),
+    flexShrink: 1
+  },
+  stackedContent: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+})
+
 export default ButtonDropdown

package/src/Carousel/Carousel.jsx

@@ -27,6 +27,7 @@ import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem'
 import dictionary from './dictionary'
 import Box from '../Box'
 import {
+  ITEMS_PER_VIEWPORT_XS_SM,
   ITEMS_PER_VIEWPORT_MD,
   ITEMS_PER_VIEWPORT_LG_XL,
   DEFAULT_POSITION_OFFSET,
@@ -211,6 +212,31 @@ const getTotalItems = (enableDisplayMultipleItemsPerSlide, childrenArray, viewpo
   return childrenArray.length
 }
 
+/**
+ * Determines the maximum number of items that can be displayed per slide based on viewport
+ *
+ * @param {boolean} enableDisplayMultipleItemsPerSlide - Flag indicating whether multiple items per slide is enabled
+ * @param {string} viewport - The current viewport size ('xs', 'sm', 'md', 'lg', 'xl')
+ * @returns {number} The maximum number of items that can be displayed per slide
+ */
+const getMaximumItemsForSlide = (enableDisplayMultipleItemsPerSlide, viewport) => {
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        return ITEMS_PER_VIEWPORT_XS_SM
+      case 'md':
+        return ITEMS_PER_VIEWPORT_MD
+      case 'lg':
+      case 'xl':
+        return ITEMS_PER_VIEWPORT_LG_XL
+      default:
+        return ITEMS_PER_VIEWPORT_XS_SM
+    }
+  }
+  return ITEMS_PER_VIEWPORT_XS_SM
+}
+
 const selectRootContainerStyles = (enableHero, viewport) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
@@ -993,6 +1019,10 @@ const Carousel = React.forwardRef(
             firstFocusRef={firstFocusRef}
             refocus={refocus}
             width={containerLayout.width}
+            maximumItemsForSlide={getMaximumItemsForSlide(
+              enableDisplayMultipleItemsPerSlide,
+              viewport
+            )}
           >
             <View
               style={[

package/src/Carousel/CarouselContext.jsx

@@ -13,7 +13,8 @@ const CarouselProvider = ({
   refocus = false,
   themeTokens,
   totalItems,
-  width
+  width,
+  maximumItemsForSlide
 }) => {
   const value = React.useMemo(
     () => ({
@@ -24,9 +25,20 @@ const CarouselProvider = ({
       refocus,
       themeTokens,
       totalItems,
-      width
+      width,
+      maximumItemsForSlide
     }),
-    [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]
+    [
+      activeIndex,
+      goTo,
+      getCopyWithPlaceholders,
+      itemLabel,
+      refocus,
+      totalItems,
+      themeTokens,
+      width,
+      maximumItemsForSlide
+    ]
   )
   return <CarouselContext.Provider value={value}>{children}</CarouselContext.Provider>
 }
@@ -48,7 +60,8 @@ CarouselProvider.propTypes = {
   refocus: PropTypes.bool,
   themeTokens: getTokensPropType('Carousel'),
   totalItems: PropTypes.number.isRequired,
-  width: PropTypes.number.isRequired
+  width: PropTypes.number.isRequired,
+  maximumItemsForSlide: PropTypes.number
 }
 
 export { CarouselProvider, useCarousel }

package/src/Carousel/CarouselItem/CarouselItem.jsx

@@ -102,14 +102,28 @@ const CarouselItem = React.forwardRef(
     },
     ref
   ) => {
-    const { width, activeIndex } = useCarousel()
+    const { width, activeIndex, goTo, maximumItemsForSlide } = useCarousel()
 
     const selectedProps = selectProps({
       ...rest,
       ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
     })
 
-    const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps
+    const focusabilityProps =
+      activeIndex === elementIndex || enablePeeking ? {} : a11yProps.nonFocusableProps
+
+    const handleFocus = React.useCallback(
+      (event) => {
+        if (Platform.OS === 'web' && elementIndex >= maximumItemsForSlide * (activeIndex + 1)) {
+          goTo(activeIndex + 1)
+        }
+
+        if (rest.onFocus) {
+          rest.onFocus(event)
+        }
+      },
+      [elementIndex, activeIndex, goTo, maximumItemsForSlide, rest]
+    )
 
     return (
       <View
@@ -125,6 +139,7 @@ const CarouselItem = React.forwardRef(
         {...selectedProps}
         {...focusabilityProps}
         ref={ref}
+        onFocus={handleFocus}
       >
         {children}
       </View>

package/src/Carousel/Constants.js

@@ -1,3 +1,4 @@
+export const ITEMS_PER_VIEWPORT_XS_SM = 1
 export const ITEMS_PER_VIEWPORT_MD = 2
 export const ITEMS_PER_VIEWPORT_LG_XL = 3
 export const GAP_BETWEEN_ITEMS = 16

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -10,7 +10,8 @@ import {
   useMultipleInputValues,
   variantProp,
   viewProps,
-  contentfulProps
+  contentfulProps,
+  useUniqueId
 } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
@@ -36,6 +37,8 @@ function selectBorderStyles(tokens) {
  */
 const ExpandCollapse = React.forwardRef(
   ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, dataSet, ...rest }, ref) => {
+    const instanceId = useUniqueId('ExpandCollapse')
+
     const {
       currentValues: openIds,
       toggleOneValue: onToggle,
@@ -54,7 +57,7 @@ const ExpandCollapse = React.forwardRef(
       <View style={staticStyles.container} ref={ref} {...selectProps(rest)} dataSet={dataSet}>
         <View style={selectBorderStyles(themeTokens)}>
           {typeof children === 'function'
-            ? children({ openIds, onToggle, resetValues, setValues, unsetValues })
+            ? children({ openIds, onToggle, resetValues, setValues, unsetValues, instanceId })
             : children}
         </View>
       </View>

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ExpandCollapse from '../ExpandCollapse'
-import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils'
+import { getTokensPropType, selectSystemProps, contentfulProps, useUniqueId } from '../utils'
 import { variantProp } from '../utils/props'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
@@ -12,7 +12,7 @@ const ExpandCollapseMini = React.forwardRef(
     { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
     ref
   ) => {
-    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
+    const expandCollapeMiniPanelId = useUniqueId('ExpandCollapseMiniPanel')
     const handleChange = (openPanels, event) => {
       if (typeof onToggle === 'function') {
         const isOpen = openPanels.length > 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}