@telus-uds/components-base 1.11.0 → 1.13.0

package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, useRef } from 'react'
+import { View } from 'react-native'
+
+import PropTypes from 'prop-types'
+import StackView from '../../StackView'
+
+import { useCarousel } from '../CarouselContext'
+import CarouselTabsPanelItem from './CarouselTabsPanelItem'
+
+const CarouselTabsPanel = forwardRef(({ items }, ref) => {
+  const { activeIndex, goTo } = useCarousel()
+  const nextFocusRef = useRef()
+  const firstTabRef = useRef()
+
+  // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+  const dividerVariant = { decorative: true }
+
+  const lastTabSelected = activeIndex === items.length - 1
+
+  return (
+    <>
+      <View
+        focusable
+        accessible
+        onFocus={(event) => {
+          // When user forward-tabs into this section, focus the next tab; if they backwards-tab
+          // (shift-tab) back into the carousel content, don't interfere.
+          const previousWebFocus = event.relatedTarget
+          if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus()
+        }}
+      />
+      <StackView direction="row" space={3} divider={{ variant: dividerVariant }} ref={ref}>
+        {items.map(({ title, onPress, ...panelItemProps }, index) => {
+          const selected = index === activeIndex
+          const isNext = index === activeIndex + 1
+
+          // Selected item should be always unfocusable and unpressable
+          const handlePress = selected
+            ? undefined
+            : (event) => {
+                if (typeof onPress === 'function') onPress(event, index)
+                goTo(index)
+              }
+
+          return (
+            <CarouselTabsPanelItem
+              ref={(isNext && nextFocusRef) || (index === 0 && firstTabRef) || null}
+              key={title}
+              title={title}
+              selected={selected}
+              onPress={handlePress}
+              {...panelItemProps}
+            />
+          )
+        })}
+      </StackView>
+      {/* TODO: integrate with skiplink, replace this with focusing skiplink target */}
+      <View focusable accessible ref={lastTabSelected ? nextFocusRef : null} />
+    </>
+  )
+})
+CarouselTabsPanel.displayName = 'CarouselTabsPanel'
+CarouselTabsPanel.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {}))
+}
+
+export default CarouselTabsPanel

package/src/Carousel/CarouselTabs/CarouselTabsPanelItem.jsx

@@ -0,0 +1,119 @@
+import React, { forwardRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Text, Platform } from 'react-native'
+
+import { applyTextStyles, useThemeTokensCallback } from '../../ThemeProvider'
+import {
+  selectSystemProps,
+  a11yProps,
+  pressProps,
+  viewProps,
+  textProps,
+  getTokensPropType,
+  variantProp,
+  resolvePressableState
+} from '../../utils'
+
+const [selectPressProps, pressPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps])
+const [selectTextProps, textPropTypes] = selectSystemProps([textProps])
+
+const selectContainerStyles = ({
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom = 0,
+  borderBottomColor,
+  borderBottomWidth = 0,
+  borderBottomStyle,
+  flex,
+  alignItems,
+  justifyContent
+}) => ({
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingBottom: paddingBottom - borderBottomWidth,
+  borderBottomColor,
+  borderBottomWidth,
+  borderBottomStyle,
+  flex,
+  alignItems,
+  justifyContent,
+  ...Platform.select({
+    // Removes the default browser :focus outline
+    web: { outline: 'none' }
+  })
+})
+
+const selectTextStyles = ({
+  fontSize,
+  fontScaleCap,
+  lineHeight,
+  letterSpacing,
+  fontWeight,
+  fontName,
+  color
+}) =>
+  applyTextStyles({
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  })
+
+const CarouselTabsPanelItem = forwardRef(
+  ({ title, selected, inactive, variant, tokens, accessibilityRole = 'tab', ...rest }, ref) => {
+    // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
+    // Don't allow disabled to be set while focus is true else focus state gets locked `true`
+    // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
+    const [isFocused, setIsFocused] = useState(false)
+    const disabled = (inactive || selected) && !isFocused
+
+    const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant)
+    const resolveTokens = (pressState) => getTokens(resolvePressableState(pressState, { selected }))
+
+    const getContainerStyle = (pressState) => selectContainerStyles(resolveTokens(pressState))
+
+    const getTextStyle = (pressState) => selectTextStyles(resolveTokens(pressState))
+
+    const { onPress, ...selectedPressProps } = selectPressProps(rest)
+    const handleKeyDown = (event) => {
+      // Allow using the spacebar for navigation
+      if (event?.key === ' ') onPress(event)
+    }
+
+    return (
+      <Pressable
+        onPress={onPress}
+        style={getContainerStyle}
+        accessibilityRole={accessibilityRole}
+        ref={ref}
+        onKeyDown={handleKeyDown}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        disabled={disabled}
+        {...selectedPressProps}
+      >
+        {(pressState) => (
+          <Text style={getTextStyle(pressState)} {...selectTextProps(rest)}>
+            {title}
+          </Text>
+        )}
+      </Pressable>
+    )
+  }
+)
+CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem'
+CarouselTabsPanelItem.propTypes = {
+  ...pressPropTypes,
+  ...textPropTypes,
+  title: PropTypes.string.isRequired,
+  selected: PropTypes.bool,
+  tokens: getTokensPropType('CarouselTabsPanelItem'),
+  variant: variantProp.propType
+}
+
+export default CarouselTabsPanelItem

package/src/Carousel/CarouselTabs/index.js

@@ -0,0 +1,3 @@
+import CarouselTabs from './CarouselTabs'
+
+export default CarouselTabs

package/src/Carousel/CarouselThumbnail.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, Image } from 'react-native'
+import { useCarousel } from './CarouselContext'
+
+/**
+ * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
+  const { activeIndex, itemLabel, totalItems, getCopyWithPlaceholders, goTo, themeTokens } =
+    useCarousel()
+  const thumbnailTitle =
+    alt ??
+    getCopyWithPlaceholders('stepTrackerLabel')
+      .replace(/%\{itemLabel\}/g, itemLabel)
+      .replace(/%\{stepNumber\}/g, index)
+      .replace(/%\{stepCount\}/g, totalItems)
+  const handlePress = () => goTo(index)
+  const handleKeyDown = (event) => {
+    // Allow using the spacebar for navigation
+    if (event?.key === ' ') goTo(index)
+  }
+  const {
+    thumbnailBorderColor,
+    thumbnailBorderRadius,
+    thumbnailBorderWidth,
+    thumbnailMargin,
+    thumbnailPadding,
+    thumbnailSelectedBorderColor,
+    thumbnailSelectedBorderWidth,
+    thumbnailSize
+  } = themeTokens
+  const styles = {
+    pressable: {
+      borderColor: thumbnailBorderColor,
+      borderRadius: thumbnailBorderRadius,
+      borderWidth: thumbnailBorderWidth,
+      margin: thumbnailMargin,
+      padding: thumbnailPadding
+    },
+    image: {
+      height: thumbnailSize,
+      width: thumbnailSize
+    },
+    selected: {
+      borderColor: thumbnailSelectedBorderColor,
+      borderWidth: thumbnailSelectedBorderWidth,
+      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+    }
+  }
+
+  return (
+    <Pressable
+      key={src}
+      onKeyDown={handleKeyDown}
+      onPress={handlePress}
+      style={[styles.pressable, index === activeIndex && styles.selected]}
+    >
+      <Image
+        accessibilityIgnoresInvertColors
+        accessibilityLabel={accessibilityLabel ?? alt}
+        source={src}
+        style={styles.image}
+        title={thumbnailTitle}
+      />
+    </Pressable>
+  )
+}
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: PropTypes.string,
+  alt: PropTypes.string,
+  index: PropTypes.number,
+  src: PropTypes.string
+}
+
+export default CarouselThumbnail

package/src/Carousel/CarouselThumbnailNavigation.jsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+import { useCarousel } from './CarouselContext'
+import CarouselThumbnail from './CarouselThumbnail'
+import { StackWrap } from '../StackView'
+
+const CarouselThumbnailNavigation = forwardRef(({ thumbnails = [] }, ref) => {
+  const { totalItems, themeTokens } = useCarousel()
+  if (thumbnails.length !== totalItems) {
+    throw new Error('Thumbnail set provided does not match the number of slides in the carousel')
+  }
+  const { thumbnailContainerPaddingTop, thumbnailMargin } = themeTokens
+  const stackWrapTokens = {
+    justifyContent: 'flex-start'
+  }
+  const containerStyles = {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
+  }
+
+  return (
+    <View style={containerStyles}>
+      <StackWrap direction="row" tokens={stackWrapTokens} ref={ref}>
+        {thumbnails.map(({ accessibilityLabel, alt, src }, index) => (
+          <CarouselThumbnail
+            accessibilityLabel={accessibilityLabel}
+            alt={alt}
+            index={index}
+            key={src}
+            src={src}
+          />
+        ))}
+      </StackWrap>
+    </View>
+  )
+})
+CarouselThumbnailNavigation.displayName = 'CarouselThumbnailNavigation'
+CarouselThumbnailNavigation.propTypes = {
+  /**
+   * An array of objects containing information on the thumbnail images.
+   */
+  thumbnails: PropTypes.arrayOf(
+    PropTypes.shape({
+      accessibilityLabel: PropTypes.string,
+      alt: PropTypes.string,
+      src: PropTypes.string
+    })
+  ).isRequired
+}
+
+export default CarouselThumbnailNavigation

package/src/Carousel/dictionary.js

@@ -4,13 +4,15 @@ export default {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '%{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: 'Skip %{title}'
   },
   fr: {
     // TODO: French translations here
     carouselLabel: '(fr) %{stepCount} items',
     iconButtonLabel: '(fr) Show %{itemLabel} %{targetStep} of %{stepCount}',
     stepLabel: '(fr) %{itemLabel} %{stepNumber}',
-    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}'
+    stepTrackerLabel: '(fr) %{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: '(fr) Skip %{title}'
   }
 }

package/src/Carousel/index.js

@@ -1,2 +1,3 @@
 export * from './CarouselContext'
 export { default as Carousel } from './Carousel'
+export { default as CarouselTabs } from './CarouselTabs'

package/src/Checkbox/Checkbox.jsx

@@ -6,7 +6,12 @@ import CheckboxInput from './CheckboxInput'
 import CheckboxLabel from '../InputLabel/LabelContent'
 import Feedback from '../Feedback'
 import StackView from '../StackView'
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider'
+import {
+  applyShadowToken,
+  applyTextStyles,
+  useTheme,
+  useThemeTokensCallback
+} from '../ThemeProvider'
 import {
   a11yProps,
   focusHandlerProps,
@@ -54,21 +59,18 @@ const selectInputStyles = (
     }
   })
 })
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => ({
+const selectLabelStyles = (
+  { labelColor, labelFontName, labelFontSize, labelFontWeight, labelMarginLeft, labelLineHeight },
+  themeOptions
+) => ({
   marginLeft: labelMarginLeft,
   ...applyTextStyles({
     color: labelColor,
     fontName: labelFontName,
     fontWeight: labelFontWeight,
     fontSize: labelFontSize,
-    lineHeight: labelLineHeight
+    lineHeight: labelLineHeight,
+    themeOptions
   })
 })
 const selectIconTokens = ({ icon, iconColor, iconSize }) => ({
@@ -172,6 +174,7 @@ const Checkbox = forwardRef(
     }
     const uniqueId = useUniqueId('checkbox')
     const inputId = id ?? uniqueId
+    const { themeOptions } = useTheme()
 
     return (
       <View style={staticStyles.wrapper} ref={ref}>
@@ -187,7 +190,7 @@ const Checkbox = forwardRef(
             {({ focused: focus, hovered: hover, pressed }) => {
               const { icon: IconComponent, ...stateTokens } = getTokens({ focus, hover, pressed })
               const iconTokens = selectIconTokens(stateTokens)
-              const labelStyles = selectLabelStyles(stateTokens)
+              const labelStyles = selectLabelStyles(stateTokens, themeOptions)
               const alignWithLabel = label
                 ? [staticStyles.alignWithLabel, { height: labelStyles.lineHeight }]
                 : null

package/src/Checkbox/CheckboxGroup.jsx

@@ -61,7 +61,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
  * @example
  * ```jsx
  * <CheckboxGroup
- *   initialCheckedId="check1"
+ *   initialCheckedIds="check1"
  *   items={[
  *     { label: 'Checkbox 1', id: 'check1' },
  *     { label: 'Checkbox 2', id: 'check2' },
@@ -82,6 +82,8 @@ const CheckboxGroup = forwardRef(
       legend,
       tooltip,
       hint,
+      hintPosition = 'inline',
+
       validation,
       feedback,
       initialCheckedIds,
@@ -145,6 +147,7 @@ const CheckboxGroup = forwardRef(
         legend={legend}
         tooltip={tooltip}
         hint={hint}
+        hintPosition={hintPosition}
         space={fieldSpace}
         feedback={feedback}
         inactive={inactive}
@@ -192,6 +195,10 @@ CheckboxGroup.propTypes = {
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */

package/src/Feedback/Feedback.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -17,10 +17,16 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectStyles = (tokens) => selectTokens('Feedback', tokens)
 
-const selectTitleTextStyles = ({ titleFontSize, ...tokens }) =>
-  applyTextStyles(selectTokens('Typography', { ...tokens, fontSize: titleFontSize }))
-const selectContentTextStyles = ({ contentFontSize, ...tokens }) =>
-  applyTextStyles(selectTokens('Typography', { ...tokens, fontSize: contentFontSize }))
+const selectTitleTextStyles = ({ titleFontSize, ...tokens }, themeOptions) =>
+  applyTextStyles({
+    ...selectTokens('Typography', { ...tokens, fontSize: titleFontSize, themeOptions }),
+    themeOptions
+  })
+const selectContentTextStyles = ({ contentFontSize, ...tokens }, themeOptions) =>
+  applyTextStyles({
+    ...selectTokens('Typography', { ...tokens, fontSize: contentFontSize }),
+    themeOptions
+  })
 
 const selectIconTokens = ({ iconSize, iconColor }) => ({
   size: iconSize,
@@ -56,8 +62,9 @@ const Feedback = forwardRef(
 
     const { icon: IconComponent } = themeTokens
 
-    const titleTextStyles = selectTitleTextStyles(themeTokens)
-    const contentTextStyles = selectContentTextStyles(themeTokens)
+    const { themeOptions } = useTheme()
+    const titleTextStyles = selectTitleTextStyles(themeTokens, themeOptions)
+    const contentTextStyles = selectContentTextStyles(themeTokens, themeOptions)
 
     const content =
       typeof children === 'string' ? <Text style={contentTextStyles}>{children}</Text> : children

package/src/Icon/IconText.jsx

@@ -39,6 +39,7 @@ const IconText = forwardRef(
 IconText.displayName = 'IconText'
 
 IconText.propTypes = {
+  /* eslint-disable react/no-unused-prop-types */ // eslint is having hard time seeing these props through forwardRef
   /**
    * Amount of space to separate the text content and icon. Uses the themes's spacing scale
    * (see useSpacingScale for more info).
@@ -63,6 +64,7 @@ IconText.propTypes = {
    * `<Typography>` component, or a component that renders `<Text>`.
    */
   children: PropTypes.node
+  /* eslint-enable react/no-unused-prop-types */
 }
 
 export default IconText

package/src/InputLabel/InputLabel.jsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import PropTypes from 'prop-types'
 
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider'
+import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider'
 import {
   a11yProps,
   getTokensPropType,
@@ -17,21 +17,20 @@ import Tooltip from '../Tooltip'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectLabelStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
+const selectLabelStyles = (tokens, themeOptions) =>
+  applyTextStyles({ ...selectTokens('Typography', tokens), themeOptions })
 
-const selectHintStyles = ({
-  hintColor,
-  hintFontName,
-  hintFontSize,
-  hintFontWeight,
-  hintLineHeight
-}) =>
+const selectHintStyles = (
+  { hintColor, hintFontName, hintFontSize, hintFontWeight, hintLineHeight },
+  themeOptions
+) =>
   applyTextStyles({
     color: hintColor,
     fontName: hintFontName,
     fontSize: hintFontSize,
     fontWeight: hintFontWeight,
-    lineHeight: hintLineHeight
+    lineHeight: hintLineHeight,
+    themeOptions
   })
 
 const selectGapStyles = ({ gap }) => ({ marginRight: gap })
@@ -57,12 +56,14 @@ const InputLabel = forwardRef(
     const hasTooltip = tooltip !== undefined
     const isHintInline = hintPosition === 'inline'
 
+    const { themeOptions } = useTheme()
+
     return (
       <>
         <View ref={ref} style={staticStyles.container} {...selectProps(rest)}>
           <Text
             style={[
-              selectLabelStyles(themeTokens),
+              selectLabelStyles(themeTokens, themeOptions),
               selectGapStyles(themeTokens),
               staticStyles.label
             ]}
@@ -72,7 +73,7 @@ const InputLabel = forwardRef(
           {hint && isHintInline && (
             <Text
               style={[
-                selectHintStyles(themeTokens),
+                selectHintStyles(themeTokens, themeOptions),
                 hasTooltip && selectGapStyles(themeTokens),
                 staticStyles.label
               ]}

package/src/Link/InlinePressable.jsx

@@ -9,17 +9,15 @@ import { Pressable, StyleSheet } from 'react-native'
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
  *
- * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
- *
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = forwardRef(({ children, style, inline = false, ...props }, ref) => (
+const InlinePressable = forwardRef(({ children, style, ...props }, ref) => (
   <Pressable
     ref={ref}
     style={(pressState) => [
-      staticStyles[inline ? 'inline' : 'inlineFlex'],
+      staticStyles.inline,
       typeof style === 'function' ? style(pressState) : style
     ]}
     {...props}
@@ -31,11 +29,7 @@ InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({
   inline: {
-    // Stop Pressable defaulting to (block) flex
     display: 'inline'
-  },
-  inlineFlex: {
-    display: 'inline-flex'
   }
 })
 

package/src/Link/LinkBase.jsx

@@ -15,18 +15,15 @@ import { resolvePressableTokens } from '../utils/pressability'
 import { withLinkRouter } from '../utils'
 
 import InlinePressable from './InlinePressable'
-import { applyTextStyles, applyOuterBorder } from '../ThemeProvider'
+import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider'
 import { IconText, iconComponentPropTypes } from '../Icon'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps])
 
-const selectOuterBorderStyles = ({
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBorderOutline
-}) =>
+const selectOuterBorderStyles = (
+  { outerBorderColor, outerBorderWidth, outerBorderGap, borderRadius, outerBorderOutline },
+  hasIcon
+) =>
   // A view wrapper with a border on native messes up inline text alignment
   // so for now make focus styles strictly web-only
   Platform.OS === 'web'
@@ -41,7 +38,7 @@ const selectOuterBorderStyles = ({
         }),
         // Stops focus ring stretching horizontally if parent has display: block
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-        display: 'inline-flex'
+        display: hasIcon ? 'inline-flex' : 'inline' // Stop Pressable defaulting to (block) flex
       }
     : {}
 
@@ -55,12 +52,16 @@ const selectTextStyles = ({ color }) => ({
   })
 })
 
-const selectBlockStyles = ({ blockFontWeight, blockFontSize, blockLineHeight, blockFontName }) =>
+const selectBlockStyles = (
+  { blockFontWeight, blockFontSize, blockLineHeight, blockFontName },
+  themeOptions
+) =>
   applyTextStyles({
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
     lineHeight: blockLineHeight,
-    fontName: blockFontName
+    fontName: blockFontName,
+    themeOptions
   })
 
 const selectDecorationStyles = ({ color, textLine, textLineStyle }) => ({
@@ -138,21 +139,17 @@ const LinkBase = forwardRef(
     // On web, this makes focus rings wrap only the link, not the entire block
     const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft
 
+    const { themeOptions } = useTheme()
+
     return (
       <InlinePressable
         {...selectedProps}
-        inline={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
-          const outerBorderStyles = selectOuterBorderStyles(themeTokens)
+          const outerBorderStyles = selectOuterBorderStyles(themeTokens, hasIcon)
           const decorationStyles = selectDecorationStyles(themeTokens)
-          return [
-            outerBorderStyles,
-            blockLeftStyle,
-            decorationStyles,
-            hasIcon && staticStyles.rowContainer
-          ]
+          return [outerBorderStyles, blockLeftStyle, decorationStyles, staticStyles.rowContainer]
         }}
       >
         {(linkState) => {
@@ -162,7 +159,7 @@ const LinkBase = forwardRef(
 
           // 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)
+          const blockTextStyles = selectBlockStyles(themeTokens, themeOptions)
 
           const IconComponent = icon || themeTokens.icon
           const { iconSpace } = themeTokens