@telus-uds/components-base 3.23.0 → 3.25.0

package/src/Card/CardBase.jsx

@@ -6,9 +6,18 @@ import { applyShadowToken } from '../ThemeProvider'
 import { getTokensPropType, responsiveProps, useResponsiveProp, formatImageSource } from '../utils'
 import { a11yProps, viewProps, selectSystemProps } from '../utils/props'
 import backgroundImageStylesMap from './backgroundImageStylesMap'
+import FlexGrid from '../FlexGrid/FlexGrid'
+import FlexGridRow from '../FlexGrid/Row'
+import FlexGridCol from '../FlexGrid/Col'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const GRID_COLUMNS = 12
+
+const isOverlayColor = (color) => {
+  return color && typeof color === 'string' && color.startsWith('rgba(')
+}
+
 const setBackgroundImage = ({
   src,
   alt,
@@ -22,12 +31,10 @@ const setBackgroundImage = ({
   const borderWidth = cardStyle?.borderWidth || 0
   const adjustedBorderRadius = Math.max(0, borderRadius - borderWidth)
 
-  // For contain mode with position and align, use CSS background properties for web
   if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
     const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`
 
     if (Platform.OS === 'web') {
-      // Create background position based on position and align
       let backgroundPosition
 
       switch (positionKey) {
@@ -77,7 +84,7 @@ const setBackgroundImage = ({
         </View>
       )
     }
-    // For React Native, apply positioning styles with full dimensions
+
     const positionStyles = backgroundImageStylesMap[positionKey] || {}
 
     return (
@@ -95,7 +102,6 @@ const setBackgroundImage = ({
     )
   }
 
-  // Use ImageBackground for all other resize modes and React Native
   return (
     <ImageBackground
       source={src}
@@ -121,6 +127,10 @@ export const selectStyles = ({
   paddingLeft,
   paddingRight,
   paddingTop,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
   minWidth,
   shadow,
   backgroundGradient,
@@ -128,9 +138,27 @@ export const selectStyles = ({
   maxHeight,
   overflowY
 }) => {
+  const hasGradient = (gradient || backgroundGradient) && Platform.OS === 'web'
+
+  let backgroundImageValue = null
+
+  if (hasGradient) {
+    const gradientObj = gradient || backgroundGradient
+    const gradientString = `linear-gradient(${gradientObj.angle}deg, ${gradientObj.stops[0].color}, ${gradientObj.stops[1].color})`
+    const shouldApplyOverlay =
+      (gradient || (backgroundGradient && backgroundColor && backgroundColor !== 'transparent')) &&
+      isOverlayColor(backgroundColor)
+
+    backgroundImageValue = shouldApplyOverlay
+      ? `linear-gradient(${backgroundColor}, ${backgroundColor}), ${gradientString}`
+      : gradientString
+  }
+
+  const boxShadowColor = isOverlayColor(backgroundColor) ? backgroundColor : 'white'
+
   return {
     flex,
-    backgroundColor,
+    backgroundColor: hasGradient ? 'transparent' : backgroundColor,
     borderColor,
     borderRadius,
     borderWidth,
@@ -138,19 +166,23 @@ export const selectStyles = ({
     paddingLeft,
     paddingRight,
     paddingTop,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
     minWidth,
     ...applyShadowToken(shadow),
     ...(gradient && Platform.OS === 'web'
       ? {
-          backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+          backgroundImage: backgroundImageValue,
           backgroundOrigin: `border-box`,
-          boxShadow: `inset 0 1000px white`,
+          boxShadow: `inset 0 1000px ${boxShadowColor}`,
           border: `${borderWidth}px solid transparent`
         }
       : {}),
     ...(backgroundGradient && Platform.OS === 'web'
       ? {
-          backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+          backgroundImage: backgroundImageValue
         }
       : {}),
     ...(Platform.OS === 'web' ? { maxHeight, overflowY } : {})
@@ -162,8 +194,8 @@ export const selectStyles = ({
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 const CardBase = React.forwardRef(
-  ({ children, tokens, dataSet, backgroundImage, ...rest }, ref) => {
-    const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens)
+  ({ children, tokens, dataSet, backgroundImage, fullBleedContent, cardState, ...rest }, ref) => {
+    const cardStyle = selectStyles(typeof tokens === 'function' ? tokens(cardState) : tokens)
     const props = selectProps(rest)
 
     let content = children
@@ -174,12 +206,16 @@ const CardBase = React.forwardRef(
     const backgroundImageAlign = useResponsiveProp(align)
     const imageSourceViewport = formatImageSource(useResponsiveProp(src))
 
+    const {
+      content: fullBleedImageContent,
+      position: fullBleedContentPosition,
+      imgCol
+    } = fullBleedContent || {}
+    const fullBleedPosition = useResponsiveProp(fullBleedContentPosition, 'bottom')
+
     if (backgroundImage && src) {
-      // When there's a background image, separate the padding from the container style
-      // so the image can fill the entire container without padding interference
       const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
 
-      // Only create padding wrapper if there's actually padding defined
       const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
       const paddedContent = hasPadding ? (
         <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
@@ -204,6 +240,53 @@ const CardBase = React.forwardRef(
       )
     }
 
+    if (fullBleedContent && fullBleedImageContent) {
+      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = cardStyle
+      const imageColumns = imgCol || { xs: GRID_COLUMNS }
+
+      const textColumns = {}
+      Object.keys(imageColumns).forEach((breakpoint) => {
+        textColumns[breakpoint] = GRID_COLUMNS - (imageColumns[breakpoint] || GRID_COLUMNS)
+      })
+
+      const imageFirst = fullBleedPosition === 'top' || fullBleedPosition === 'left'
+
+      const imageColContent = (
+        <FlexGridCol {...imageColumns} style={staticStyles.fullBleedImageCol}>
+          {fullBleedImageContent}
+        </FlexGridCol>
+      )
+
+      const textColContent = (
+        <FlexGridCol
+          {...textColumns}
+          style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}
+        >
+          {children}
+        </FlexGridCol>
+      )
+
+      return (
+        <View style={containerStyle} dataSet={dataSet} ref={ref} {...props}>
+          <FlexGrid>
+            <FlexGridRow>
+              {imageFirst ? (
+                <>
+                  {imageColContent}
+                  {textColContent}
+                </>
+              ) : (
+                <>
+                  {textColContent}
+                  {imageColContent}
+                </>
+              )}
+            </FlexGridRow>
+          </FlexGrid>
+        </View>
+      )
+    }
+
     return (
       <View style={cardStyle} dataSet={dataSet} ref={ref} {...props}>
         {content}
@@ -213,6 +296,18 @@ const CardBase = React.forwardRef(
 )
 CardBase.displayName = 'CardBase'
 
+export const fullBleedContentPropTypes = PropTypes.shape({
+  content: PropTypes.node.isRequired,
+  alt: PropTypes.string,
+  position: responsiveProps.getTypeOptionallyByViewport(
+    PropTypes.oneOf(['bottom', 'left', 'right', 'top'])
+  ),
+  align: responsiveProps.getTypeOptionallyByViewport(
+    PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
+  ),
+  imgCol: PropTypes.object
+})
+
 const staticStyles = StyleSheet.create({
   imageBackground: { width: '100%', height: '100%' },
   contentOverlay: {
@@ -231,6 +326,9 @@ const staticStyles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
     height: '100%'
+  },
+  fullBleedImageCol: {
+    padding: 0
   }
 })
 
@@ -255,7 +353,8 @@ CardBase.propTypes = {
     align: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['start', 'end', 'center', 'stretch'])
     )
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 }
 
 export default CardBase

package/src/Card/PressableCardBase.jsx

@@ -18,7 +18,7 @@ import {
   viewProps,
   withLinkRouter
 } from '../utils'
-import CardBase from './CardBase'
+import CardBase, { fullBleedContentPropTypes } from './CardBase'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
@@ -37,6 +37,10 @@ const tokenKeys = [
   'paddingLeft',
   'paddingRight',
   'paddingTop',
+  'marginTop',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
   'minWidth',
   'shadow',
   'contentAlignItems',
@@ -81,6 +85,7 @@ const PressableCardBase = React.forwardRef(
       hrefAttrs,
       dataSet,
       backgroundImage,
+      fullBleedContent,
       accessibilityRole = href ? 'link' : undefined,
       ...rawRest
     },
@@ -159,13 +164,14 @@ const PressableCardBase = React.forwardRef(
               setFocused(false)
               setPressed(false)
             }}
-            style={{ ...staticStyles.linkContainer, textDecoration: 'none' }}
+            style={staticStyles.linkContainer}
             {...(hrefAttrs || {})}
             role={accessibilityRole}
           >
             <CardBase
               tokens={getCardTokens({ pressed, focused, hovered })}
               backgroundImage={backgroundImage}
+              fullBleedContent={fullBleedContent}
             >
               {typeof children === 'function'
                 ? children(getCardState({ pressed, focused, hovered }))
@@ -188,7 +194,11 @@ const PressableCardBase = React.forwardRef(
         {...selectProps({ ...rest, accessibilityRole })}
       >
         {(pressableState) => (
-          <CardBase tokens={getCardTokens(pressableState)} backgroundImage={backgroundImage}>
+          <CardBase
+            tokens={getCardTokens(pressableState)}
+            backgroundImage={backgroundImage}
+            fullBleedContent={fullBleedContent}
+          >
             {typeof children === 'function' ? children(getCardState(pressableState)) : children}
           </CardBase>
         )}
@@ -206,7 +216,8 @@ const staticStyles = StyleSheet.create({
     flex: 1,
     display: 'flex',
     alignItems: 'stretch',
-    justifyContent: 'flex-start'
+    justifyContent: 'flex-start',
+    textDecorationLine: 'none'
   }
 })
 
@@ -234,7 +245,8 @@ PressableCardBase.propTypes = {
       PropTypes.oneOf(['start', 'end', 'center', 'stretch']),
       PropTypes.object
     ])
-  })
+  }),
+  fullBleedContent: fullBleedContentPropTypes
 }
 
 export default withLinkRouter(PressableCardBase)

package/src/Carousel/Carousel.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View, Animated, PanResponder, StyleSheet, Platform, Dimensions } from 'react-native'
 import PropTypes from 'prop-types'
-import { useThemeTokens } from '../ThemeProvider'
+import { useThemeTokens, useTheme } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 import {
   getTokensPropType,
@@ -13,7 +13,9 @@ import {
   viewProps,
   useCopy,
   unpackFragment,
-  isTouchDevice
+  isTouchDevice,
+  useResponsiveProp,
+  resolveContentMaxWidth
 } from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
@@ -252,11 +254,18 @@ const selectRootContainerStyles = (enableHero, viewport) => {
   return {}
 }
 
-const selectMainContainerStyles = (enableHero, viewport) => {
+const selectMainContainerStyles = (enableHero, viewport, maxWidth) => {
   if (enableHero && viewport === 'xl' && Platform.OS === 'web') {
     return {
       width: '100%',
-      maxWidth: 1200
+      maxWidth: maxWidth || 1200
+    }
+  }
+  if (maxWidth !== null && maxWidth !== undefined) {
+    return {
+      maxWidth,
+      alignSelf: 'center',
+      width: '100%'
     }
   }
   return {}
@@ -402,6 +411,7 @@ const Carousel = React.forwardRef(
       loopDuration = transitionDuration,
       autoPlay = false,
       enablePeeking = false,
+      contentMaxWidth,
       ...rest
     },
     ref
@@ -409,6 +419,11 @@ const Carousel = React.forwardRef(
     let childrenArray = unpackFragment(children)
     const isTransitioningRef = React.useRef(false)
     const viewport = useViewport()
+    const { themeOptions } = useTheme()
+
+    const contentMaxWidthValue = useResponsiveProp(contentMaxWidth)
+    const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const maxWidth = resolveContentMaxWidth(contentMaxWidthValue, responsiveWidth)
     const totalItems = getTotalItems(enableDisplayMultipleItemsPerSlide, childrenArray, viewport)
     const autoPlayFeatureEnabled =
       autoPlay && slideDuration > 0 && transitionDuration > 0 && totalItems > 1
@@ -1031,7 +1046,7 @@ const Carousel = React.forwardRef(
 
     return (
       <View style={selectRootContainerStyles(enableHero, viewport)}>
-        <View style={selectMainContainerStyles(enableHero, viewport)}>
+        <View style={selectMainContainerStyles(enableHero, viewport, maxWidth)}>
           <CarouselProvider
             activeIndex={activeIndex}
             goTo={goTo}
@@ -1463,7 +1478,24 @@ Carousel.propTypes = {
    * If set to `true`, the Carousel will show multiple slides at once
    * - Default value is `false`
    */
-  enableDisplayMultipleItemsPerSlide: PropTypes.bool
+  enableDisplayMultipleItemsPerSlide: PropTypes.bool,
+  /**
+   * The maximum width of the content in the Carousel.
+   * 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>
+   */
+  contentMaxWidth: 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])
+  })
 }
 
 Carousel.Item = CarouselItem

package/src/FlexGrid/FlexGrid.jsx

@@ -13,6 +13,7 @@ import {
   createMediaQueryStyles,
   useResponsiveProp
 } from '../utils'
+import resolveContentMaxWidth from '../utils/resolveContentMaxWidth'
 import Row from './Row'
 import Col from './Col'
 import GutterContext from './providers/GutterContext'
@@ -22,43 +23,16 @@ 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.
+ * Calculates the maximum width for a given viewport based on limitWidth and contentMaxWidth 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 {any} contentWidthProp - The contentMaxWidth (or 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) => {
+const getMaxWidthForViewport = (viewportKey, limitWidth, contentWidthProp, maxWidth) => {
   if (limitWidth) {
     if (viewportKey === 'xs') {
       return null
@@ -66,7 +40,7 @@ const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWid
     return viewports.map.get(viewportKey)
   }
 
-  if (contentMinWidth) {
+  if (contentWidthProp) {
     return maxWidth
   }
 
@@ -92,6 +66,7 @@ const FlexGrid = React.forwardRef(
       accessibilityRole,
       children,
       dataSet,
+      contentMaxWidth,
       contentMinWidth,
       ...rest
     },
@@ -107,29 +82,31 @@ const FlexGrid = React.forwardRef(
     let flexgridStyles
     let mediaIds
 
-    const contentMinWidthValue = useResponsiveProp(contentMinWidth)
+    // Support both contentMaxWidth and deprecated contentMinWidth for backwards compatibility
+    const contentWidthProp = contentMaxWidth || contentMinWidth
+    const contentWidthValue = useResponsiveProp(contentWidthProp)
     const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
-    const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth)
+    const maxWidth = resolveContentMaxWidth(contentWidthValue, responsiveWidth)
 
     const stylesByViewport = {
       xs: {
-        maxWidth: getMaxWidthForViewport('xs', limitWidth, contentMinWidth, maxWidth),
+        maxWidth: getMaxWidthForViewport('xs', limitWidth, contentWidthProp, maxWidth),
         flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
       },
       sm: {
-        maxWidth: getMaxWidthForViewport('sm', limitWidth, contentMinWidth, maxWidth),
+        maxWidth: getMaxWidthForViewport('sm', limitWidth, contentWidthProp, maxWidth),
         flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
       },
       md: {
-        maxWidth: getMaxWidthForViewport('md', limitWidth, contentMinWidth, maxWidth),
+        maxWidth: getMaxWidthForViewport('md', limitWidth, contentWidthProp, maxWidth),
         flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
       },
       lg: {
-        maxWidth: getMaxWidthForViewport('lg', limitWidth, contentMinWidth, maxWidth),
+        maxWidth: getMaxWidthForViewport('lg', limitWidth, contentWidthProp, maxWidth),
         flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
       },
       xl: {
-        maxWidth: getMaxWidthForViewport('xl', limitWidth, contentMinWidth, maxWidth),
+        maxWidth: getMaxWidthForViewport('xl', limitWidth, contentWidthProp, maxWidth),
         flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
       }
     }
@@ -223,7 +200,7 @@ FlexGrid.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * The minimum width of the content in the FlexGrid.
+   * The maximum 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>
@@ -232,6 +209,20 @@ FlexGrid.propTypes = {
    * - `lg`: 'max' | 'full' | <number>
    * - `xl`: 'max' | 'full' | <number>
    */
+  contentMaxWidth: 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])
+  }),
+  /**
+   * @deprecated Use `contentMaxWidth` instead. This prop will be removed in a future version.
+   *
+   * 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.
+   */
   contentMinWidth: PropTypes.shape({
     xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
     lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),

package/src/HorizontalScroll/HorizontalScroll.jsx

@@ -8,6 +8,7 @@ import {
   getTokensSetPropType,
   selectSystemProps,
   selectTokens,
+  variantProp,
   viewProps
 } from '../utils'
 import ScrollViewEnd from './ScrollViewEnd'
@@ -38,7 +39,7 @@ const selectBorderStyles = (borderBottomWidth, borderBottomColor) => ({
  * @TODO revisit `ScrollButton` after IconButton is stable.
  */
 const HorizontalScroll = React.forwardRef(
-  ({ ScrollButton, tokens, itemPositions, children, ...rest }, ref) => {
+  ({ ScrollButton, tokens, itemPositions, variant, children, ...rest }, ref) => {
     const {
       nextIcon,
       previousIcon,
@@ -74,8 +75,9 @@ const HorizontalScroll = React.forwardRef(
     }
 
     const scrollMax = Math.max(0, contentWidth - containerWidth)
-    const showNextButton = scrollOffset < scrollMax
-    const showPreviousButton = scrollOffset > 0
+    const hideNavigationButtons = variant?.hideNavigationButtons || false
+    const showNextButton = scrollOffset < scrollMax && !hideNavigationButtons
+    const showPreviousButton = scrollOffset > 0 && !hideNavigationButtons
 
     const scrollRef = React.useRef(null)
     const scrollTo = (targetX) => {
@@ -173,6 +175,7 @@ HorizontalScroll.propTypes = {
   itemPositions: itemPositionsPropType,
   ScrollButton: PropTypes.elementType,
   tokens: getTokensSetPropType(tokenKeys, { allowFunction: true }),
+  variant: variantProp.propType,
   children: PropTypes.node
 }
 

package/src/Icon/Icon.jsx

@@ -14,6 +14,7 @@ const Icon = React.forwardRef(
       tokens,
       scalesWithText = false,
       style = {},
+      testID,
       dataSet
     },
     ref
@@ -45,6 +46,7 @@ const Icon = React.forwardRef(
     const getIconContentForMobile = () => {
       return (
         <View
+          testID={testID}
           style={{
             backgroundColor: themeTokens.backgroundColor,
             borderRadius: themeTokens.borderRadius,
@@ -58,6 +60,7 @@ const Icon = React.forwardRef(
 
     return Platform.OS === 'web' ? (
       <View
+        testID={testID}
         ref={ref}
         // eslint-disable-next-line react-native/no-inline-styles
         style={{

package/src/IconButton/IconButton.jsx

@@ -136,6 +136,7 @@ const IconButton = React.forwardRef(
       hrefAttrs,
       testID,
       accessibilityRole = href ? 'link' : 'button',
+      inactive = false,
       ...rawRest
     },
     ref
@@ -149,9 +150,10 @@ const IconButton = React.forwardRef(
       linkProps.handleHref({ href, onPress })({ nativeEvent: { target: ref?.current?.id } })
     }
 
-    const getTokens = useThemeTokensCallback('IconButton', tokens, variant)
+    const mergedVariant = inactive ? { ...variant, inactive: true } : variant
+    const getTokens = useThemeTokensCallback('IconButton', tokens, mergedVariant)
     const getOuterStyle = (pressableState) =>
-      selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password))
+      selectOuterStyle(getTokens(resolvePressableState(pressableState), mergedVariant.password))
 
     return (
       <Pressable
@@ -162,16 +164,17 @@ const IconButton = React.forwardRef(
         style={getOuterStyle}
         {...selectedProps}
         testID={testID}
+        disabled={inactive}
       >
         {(pressableState) => {
           const themeTokens = getTokens(resolvePressableState(pressableState))
           return (
-            <View style={selectInnerStyle(themeTokens, variant.password)}>
+            <View style={selectInnerStyle(themeTokens, mergedVariant.password)}>
               <Icon
                 icon={IconComponent || themeTokens.icon}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
-                variant={variant}
+                variant={mergedVariant}
               />
             </View>
           )
@@ -206,7 +209,11 @@ IconButton.propTypes = {
   /**
    * Function to execute when the `Iconbutton` is pressed
    */
-  onPress: PropTypes.func
+  onPress: PropTypes.func,
+  /**
+   * When true, applies the inactive variant styling
+   */
+  inactive: PropTypes.bool
 }
 
 const staticStyles = StyleSheet.create({