@telus-uds/components-base 2.0.0 → 2.0.2

package/src/ThemeProvider/ThemeProvider.jsx

@@ -1,12 +1,12 @@
-import React, { createContext, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { validateThemeTokensVersion } from './utils'
 import responsiveProps from '../utils/props/responsiveProps'
 
 export const uninitialisedError = new Error('Theme context used outside of ThemeProvider')
 
-export const ThemeContext = createContext(uninitialisedError)
-export const ThemeSetterContext = createContext(uninitialisedError)
+export const ThemeContext = React.createContext(uninitialisedError)
+export const ThemeSetterContext = React.createContext(uninitialisedError)
 
 // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
 // This should change in future major releases to become "opt-in" legacy support.
@@ -16,11 +16,18 @@ const defaultThemeOptions = {
   // TODO: switch `forceZIndex` to be false by default in the next major version
   forceZIndex: true,
   // TODO: switch `enableHelmetSSR` to be false by default in the next major version
-  enableHelmetSSR: true
+  enableHelmetSSR: true,
+  enableMediaQueryStyleSheet: false
 }
 
 const ThemeProvider = ({ children, defaultTheme, themeOptions = {} }) => {
-  const [theme, setTheme] = useState(defaultTheme)
+  const [theme, setTheme] = React.useState(defaultTheme)
+
+  React.useEffect(() => {
+    if (theme.metadata.name !== defaultTheme.metadata.name) {
+      setTheme(defaultTheme)
+    }
+  }, [theme.metadata.name, defaultTheme])
 
   const appliedThemeOptions = { ...defaultThemeOptions, ...themeOptions }
 
@@ -42,7 +49,8 @@ ThemeProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: PropTypes.shape({
     metadata: PropTypes.shape({
-      themeTokensVersion: PropTypes.string.isRequired
+      themeTokensVersion: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
     }).isRequired
   }).isRequired,
   /**
@@ -58,12 +66,14 @@ ThemeProvider.propTypes = {
    * - `enableHelmetSSR`: on Web SSR, allows React Helmet to run during server-side rendering. This should be
    *   disabled unless a web app has been specifically configured to stop React Helmet accumulating
    *   instances (which may cause a memory leak). See React Helmet's docs: https://github.com/nfl/react-helmet
+   * - `enableMediaQueryStyleSheet`: enables the use of Media Query StyleSheet.
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
     forceZIndex: PropTypes.bool,
     enableHelmetSSR: PropTypes.bool,
-    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
+    contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number),
+    enableMediaQueryStyleSheet: PropTypes.bool
   })
 }
 

package/src/ThemeProvider/index.js

@@ -2,6 +2,7 @@ import ThemeProvider from './ThemeProvider'
 
 export { default as useTheme } from './useTheme'
 export { default as useSetTheme } from './useSetTheme'
+export { default as useResponsiveThemeTokens } from './useResponsiveThemeTokens'
 export * from './useThemeTokens'
 
 export * from './utils'

package/src/ThemeProvider/useResponsiveThemeTokens.js

@@ -0,0 +1,85 @@
+import { viewports } from '@telus-uds/system-constants'
+import useTheme from './useTheme'
+import { getComponentTheme, mergeAppearances, resolveThemeTokens } from './utils'
+
+const getResponsiveThemeTokens = (
+  { rules = [], tokens: defaultThemeTokens = {} },
+  tokensProp,
+  variants = {},
+  states
+) => {
+  const appearances = mergeAppearances(variants, states)
+
+  const tokensByViewport = Object.fromEntries(
+    viewports.keys.map((viewport) => [viewport, { ...defaultThemeTokens }])
+  )
+
+  // Go through each rule and collect them for the corresponding viewport if they apply
+  rules.forEach((rule) => {
+    if (doesRuleApply(rule, appearances)) {
+      // If the rule does not have a viewport specified, we collect it in all viewports
+      let targetViewports = rule.if.viewport || viewports.keys
+      if (!Array.isArray(targetViewports)) {
+        targetViewports = [targetViewports]
+      }
+      targetViewports.forEach((viewport) => {
+        tokensByViewport[viewport] = { ...tokensByViewport[viewport], ...rule.tokens }
+      })
+    }
+  })
+
+  Object.keys(tokensByViewport).forEach((viewport) => {
+    tokensByViewport[viewport] = resolveThemeTokens(
+      tokensByViewport[viewport],
+      appearances,
+      tokensProp
+    )
+  })
+
+  return tokensByViewport
+}
+
+const doesRuleApply = (rule, appearances) =>
+  Object.entries(rule.if).every((condition) => doesConditionApply(condition, appearances))
+
+const doesConditionApply = ([key, value], appearances) => {
+  if (key === 'viewport') {
+    return true
+  }
+  // use null rather than undefined so we can serialise the value in themes
+  const appearanceValue = appearances[key] ?? null
+  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue
+}
+
+/**
+ * @typedef {import('../utils/props/tokens.js').TokensSet} TokensSet
+ * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
+ * @typedef {import('../utils/props/variantProp').AppearanceSet} AppearanceSet
+ *
+ * Returns a complete set of tokens for a component for each viewport based on which of the
+ * component's theme rules apply to the current set of theme appearances.
+ * Pass the returned output to createMediaQueryStyles to generate media query styles for use inside
+ * the media query stylesheet from './utils/ssr-media-query'.
+ *
+ * @typedef {Object} ResponsiveObject
+ * @property {TokensSet} xs
+ * @property {TokensSet} sm
+ * @property {TokensSet} md
+ * @property {TokensSet} lg
+ * @property {TokensSet} xl
+ *
+ * @param { string } componentName
+ * @param { TokensProp } tokens
+ * @param { AppearanceSet } variants
+ * @param { AppearanceSet } states
+ * @returns { ResponsiveObject }
+ */
+
+const useResponsiveThemeTokens = (componentName, tokens = {}, variants = {}, states = {}) => {
+  const theme = useTheme()
+  const componentTheme = getComponentTheme(theme, componentName)
+  const themeTokens = getResponsiveThemeTokens(componentTheme, tokens, variants, states)
+  return themeTokens
+}
+
+export default useResponsiveThemeTokens

package/src/ThemeProvider/utils/styles.js

@@ -8,6 +8,7 @@ import { fontBasePixels } from '@telus-uds/system-constants'
 
 // Make design tokens fit React Native's text styles' specific requirements and quirks
 export function applyTextStyles({
+  fontColor,
   fontSize,
   fontScaleCap,
   lineHeight,
@@ -51,6 +52,10 @@ export function applyTextStyles({
     styles.fontWeight = Platform.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight
   }
 
+  if (fontColor) {
+    styles.color = fontColor
+  }
+
   // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
   // Do while implementing advanced typography e.g. paragraph etc
   // https://github.com/telus/universal-design-system/issues/89
@@ -142,6 +147,13 @@ export function verticalAlignRow(verticalAlign, reverse = false) {
   }
 }
 
+const calculateBorderRadius = (borderRadius, outerBorderGap, outerBorderWidth) => {
+  if (borderRadius) {
+    return borderRadius + outerBorderGap + outerBorderWidth
+  }
+
+  return null
+}
 /**
  * Use on an outer container to create an outer border with an optional gap around it
  * that matches the border radius of any inner border.
@@ -150,11 +162,31 @@ export const applyOuterBorder = ({
   outerBorderColor,
   outerBorderWidth = 0,
   outerBorderGap = 0,
-  borderRadius = 0
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius
 }) => ({
   margin: 0 - outerBorderWidth - outerBorderGap,
   padding: outerBorderGap,
-  borderRadius: borderRadius + outerBorderGap + outerBorderWidth,
+  borderRadius: calculateBorderRadius(borderRadius, outerBorderGap, outerBorderWidth),
+  borderTopLeftRadius: calculateBorderRadius(borderTopLeftRadius, outerBorderGap, outerBorderWidth),
+  borderTopRightRadius: calculateBorderRadius(
+    borderTopRightRadius,
+    outerBorderGap,
+    outerBorderWidth
+  ),
+  borderBottomLeftRadius: calculateBorderRadius(
+    borderBottomLeftRadius,
+    outerBorderGap,
+    outerBorderWidth
+  ),
+  borderBottomRightRadius: calculateBorderRadius(
+    borderBottomRightRadius,
+    outerBorderGap,
+    outerBorderWidth
+  ),
   borderWidth: outerBorderWidth,
   borderColor: outerBorderColor
 })

package/src/Timeline/Timeline.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-import { View } from 'react-native'
+import React from 'react'
+import { Platform, View } from 'react-native'
 
 import { useThemeTokens } from '../ThemeProvider'
 import {
@@ -23,10 +23,10 @@ const selectDotStyles = ({ dotWidth, timelineColor, dotBorderWidth, dotColor })
   borderColor: timelineColor
 })
 
-const selectConnectorStyles = ({ timelineColor, connectorHeight, connectorWidth }) => ({
+const selectConnectorStyles = ({ timelineConnectorColor, connectorHeight, connectorWidth }) => ({
   width: connectorWidth,
   height: connectorHeight,
-  backgroundColor: timelineColor
+  backgroundColor: timelineConnectorColor
 })
 
 const selectTimelineContainerStyle = ({ timelineContainerDirection }) => ({
@@ -76,7 +76,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## A11y guidelines
  * Timeline link supports all the common a11y props.
  */
-const Timeline = forwardRef(
+const Timeline = React.forwardRef(
   (
     { tokens, variant = {}, children, accessibilityLabel, tag = 'ul', childrenTag = 'li', ...rest },
     ref
@@ -93,8 +93,12 @@ const Timeline = forwardRef(
     return (
       <View {...containerProps} ref={ref} style={selectTimelineContainerStyle(themeTokens)}>
         {children.map((child, index) => {
+          const accessibilityRole = Platform.OS !== 'android' ? 'listitem' : undefined
           const childrenProps = {
-            ...getA11yPropsFromHtmlTag(childrenTag, child?.props?.accessibilityRole || 'listitem')
+            ...getA11yPropsFromHtmlTag(
+              childrenTag,
+              child?.props?.accessibilityRole || accessibilityRole
+            )
           }
 
           return (

package/src/ToggleSwitch/ToggleSwitch.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Platform, StyleSheet, View } from 'react-native'
 
@@ -28,10 +28,12 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 
 // We need to drop the icon before passing it to the `ButtonBase`, because it's
 // being handled separately in this case
-const selectButtonTokens = ({ icon: _, ...tokens }) =>
+const selectButtonTokens = ({ icon: _, ...tokens }, { trackHeight, outerBorderGapButton }) =>
   selectTokens('Button', {
     ...tokens,
     // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    outerBorderGap: outerBorderGapButton,
+    height: trackHeight,
     width: null
   })
 
@@ -41,6 +43,11 @@ const selectIconTokens = ({ iconSize, iconColor }) => ({
   color: iconColor
 })
 
+const selectTrackSwitchStyles = ({ switchSize, width, trackHeight }) => ({
+  width,
+  height: Math.max(switchSize, trackHeight)
+})
+
 const selectTrackStyles = ({ trackBorderWidth, trackBorderColor, trackBorderRadius, width }) => ({
   borderWidth: trackBorderWidth,
   borderColor: trackBorderColor,
@@ -56,6 +63,7 @@ const selectSwitchStyles = ({
   switchBorderRadius,
   switchShadow
 }) => ({
+  position: 'absolute',
   width: switchSize,
   height: switchSize,
   backgroundColor: switchColor,
@@ -84,7 +92,7 @@ const selectLabelTokens = ({
   lineHeight: labelLineHeight
 })
 
-const ToggleSwitch = forwardRef(
+const ToggleSwitch = React.forwardRef(
   (
     {
       copy = 'en',
@@ -113,12 +121,12 @@ const ToggleSwitch = forwardRef(
     })
 
     const handlePress = (event) => setValue(!currentValue, event)
-    const getButtonTokens = (buttonState) => selectButtonTokens(getTokens(buttonState))
+    const getButtonTokens = (buttonState) =>
+      selectButtonTokens(getTokens(buttonState), getTokens(themeTokens))
     const uniqueId = useUniqueId('toggleSwitch')
     const inputId = id ?? uniqueId
-
     return (
-      <StackView space={2} direction="row">
+      <StackView space={themeTokens.space} direction="row" tokens={{ alignItems: 'center' }}>
         {Boolean(label) && (
           <View style={[selectLabelStyles(themeTokens), staticStyles.containText]}>
             <InputLabel
@@ -148,17 +156,22 @@ const ToggleSwitch = forwardRef(
             const switchStyles = selectSwitchStyles(stateTokens)
             const trackStyles = selectTrackStyles(stateTokens)
             const iconTokens = selectIconTokens(stateTokens)
-
+            const trackSwitchStyles = selectTrackSwitchStyles(stateTokens)
+            const { switchSize, trackHeight, width, trackBorderWidth } = stateTokens
             // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
             // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-            const slideStart = 0
-            const slideEnd =
-              stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2
+            // Two different translates depending on the switchSize and trackSize relationship.
+            const isSwitchTallerThanTrack = switchSize >= trackHeight
+            const slideStart = isSwitchTallerThanTrack ? 0 : trackBorderWidth
+            const slideEnd = isSwitchTallerThanTrack
+              ? width - switchSize
+              : width - switchSize - trackBorderWidth
             const switchOffset = buttonState.selected ? slideEnd : slideStart
             const switchPositionStyle = { transform: [{ translateX: switchOffset }] }
 
             return (
-              <View style={[staticStyles.track, trackStyles]}>
+              <View nativeID="trackSwitch" style={[trackSwitchStyles, staticStyles.trackSwitch]}>
+                <View style={[staticStyles.track, trackStyles]} />
                 <View style={[staticStyles.switch, switchStyles, switchPositionStyle]}>
                   {IconComponent && <IconComponent {...iconTokens} />}
                 </View>
@@ -225,6 +238,10 @@ const staticStyles = StyleSheet.create({
   },
   containText: {
     flexShrink: 1
+  },
+  trackSwitch: {
+    flexDirection: 'row',
+    alignItems: 'center'
   }
 })
 

package/src/ToggleSwitch/ToggleSwitchGroup.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import ABBPropTypes from 'airbnb-prop-types'
 import { Platform } from 'react-native'
@@ -25,7 +25,7 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([
   focusHandlerProps,
   viewProps
 ])
-const ToggleSwitchGroup = forwardRef(
+const ToggleSwitchGroup = React.forwardRef(
   (
     {
       copy = 'en',

package/src/Tooltip/Tooltip.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import propTypes from './shared'
 import { useFloating, arrow, offset, shift, flip, autoPlacement } from '../utils/floating-ui'
@@ -81,12 +81,26 @@ const defaultControl = (pressableState, variant) => (
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = useState(false)
-    const arrowRef = useRef()
+const Tooltip = React.forwardRef(
+  (
+    {
+      children,
+      content,
+      position = 'auto',
+      copy = 'en',
+      onPress = () => {},
+      tokens,
+      variant,
+      inline = false,
+      nativeID,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const arrowRef = React.useRef()
 
-    const [tooltipDimensions, setTooltipDimensions] = useState(null)
+    const [tooltipDimensions, setTooltipDimensions] = React.useState(null)
 
     const positions = {
       auto: undefined, // Auto needs to specifically bet set to undefined
@@ -115,7 +129,10 @@ const Tooltip = forwardRef(
     const getCopy = useCopy({ dictionary, copy })
     const themeTokens = useThemeTokens('Tooltip', tokens, variant)
 
-    const toggleIsOpen = () => setIsOpen(!isOpen)
+    const toggleIsOpen = () => {
+      onPress()
+      setIsOpen(!isOpen)
+    }
     const close = () => setIsOpen(false)
 
     const getPressableState = ({ pressed, hovered, focused }) => ({
@@ -144,7 +161,7 @@ const Tooltip = forwardRef(
       }
     }
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (!isOpen) {
         setTooltipDimensions(null)
       }
@@ -157,7 +174,18 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)} ref={ref}>
+      <View
+        style={[
+          staticStyles.container,
+          Platform.select({
+            web: {
+              display: inline ? 'inline-block' : 'flex'
+            }
+          })
+        ]}
+        {...selectProps(rest)}
+        ref={ref}
+      >
         <Pressable
           onPress={toggleIsOpen}
           ref={reference}
@@ -166,6 +194,7 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
             ? (pressableState) => control(getPressableState(pressableState), variant)

package/src/Tooltip/Tooltip.native.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React from 'react'
 import { Dimensions, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
 import propTypes from './shared'
 
@@ -61,12 +61,18 @@ const selectArrowStyles = (
     },
     left: {
       right: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top:
+        tooltipHeight <= 45
+          ? tooltipHeight / 2 - horizontalOffset
+          : tooltipHeight - (tooltipHeight - 10),
       transform: [{ rotateZ: '-45deg' }]
     },
     right: {
       left: verticalOffset,
-      top: tooltipHeight / 2 - horizontalOffset,
+      top:
+        tooltipHeight <= 45
+          ? tooltipHeight / 2 - horizontalOffset
+          : tooltipHeight - (tooltipHeight - 10),
       transform: [{ rotateZ: '135deg' }]
     }
   }
@@ -82,8 +88,8 @@ const selectArrowStyles = (
 }
 
 const selectTextStyles = (tokens) => applyTextStyles(selectTokens('Typography', tokens))
-const defaultControl = (pressableState, variant) => (
-  <TooltipButton pressableState={pressableState} variant={variant} />
+const defaultControl = (pressableState, variant, tokens) => (
+  <TooltipButton pressableState={pressableState} variant={variant} tokens={tokens} />
 )
 
 /**
@@ -101,22 +107,38 @@ const defaultControl = (pressableState, variant) => (
  * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
  * - Tooltips may also be useful when vertical space is an issue.
  */
-const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
-    const [isOpen, setIsOpen] = useState(false)
+const Tooltip = React.forwardRef(
+  (
+    {
+      children,
+      content,
+      position = 'auto',
+      copy = 'en',
+      onPress = () => {},
+      tokens,
+      variant,
+      inline = false,
+      nativeID,
+      activateOnHover = false,
+      tooltipButtonTokens,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(false)
 
-    const controlRef = useRef()
-    const [controlLayout, setControlLayout] = useState(null)
-    const [tooltipDimensions, setTooltipDimensions] = useState(null)
-    const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'))
-    const [tooltipPosition, setTooltipPosition] = useState(null)
+    const controlRef = React.useRef()
+    const [controlLayout, setControlLayout] = React.useState(null)
+    const [tooltipDimensions, setTooltipDimensions] = React.useState(null)
+    const [windowDimensions, setWindowDimensions] = React.useState(Dimensions.get('window'))
+    const [tooltipPosition, setTooltipPosition] = React.useState(null)
 
     const getCopy = useCopy({ dictionary, copy })
     const themeTokens = useThemeTokens('Tooltip', tokens, variant)
 
     const { arrowWidth, arrowOffset } = themeTokens
 
-    useEffect(() => {
+    React.useEffect(() => {
       const subscription = Dimensions.addEventListener('change', ({ window }) => {
         setWindowDimensions(window)
       })
@@ -124,7 +146,10 @@ const Tooltip = forwardRef(
       return () => subscription?.remove()
     })
 
-    const toggleIsOpen = () => setIsOpen(!isOpen)
+    const toggleIsOpen = () => {
+      onPress()
+      setIsOpen(!isOpen)
+    }
     const close = () => setIsOpen(false)
 
     const getPressableState = ({ pressed, hovered, focused }) => ({
@@ -153,7 +178,7 @@ const Tooltip = forwardRef(
       }
     }
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (isOpen) {
         controlRef.current.measureInWindow((x, y, width, height) => {
           setControlLayout({ x, y, width, height })
@@ -165,11 +190,11 @@ const Tooltip = forwardRef(
       }
     }, [isOpen])
 
-    useEffect(() => {
+    React.useEffect(() => {
       setIsOpen(false)
     }, [windowDimensions])
 
-    useEffect(() => {
+    React.useEffect(() => {
       if (
         (tooltipPosition !== null && !tooltipPosition?.isNormalized) ||
         !isOpen ||
@@ -204,6 +229,31 @@ const Tooltip = forwardRef(
       tooltipPosition
     ])
 
+    React.useEffect(() => {
+      if (Platform.OS !== 'web') {
+        return undefined
+      }
+
+      const handleHover = (event) => {
+        if (activateOnHover) {
+          const isInsideControl = controlRef.current && controlRef.current.contains(event.target)
+          if (isInsideControl) {
+            if (!isOpen) {
+              setIsOpen(!isOpen)
+            }
+          } else {
+            close()
+          }
+        }
+      }
+
+      document.addEventListener('mouseover', handleHover, { capture: true })
+
+      return () => {
+        document.removeEventListener('mouseover', handleHover, { capture: true })
+      }
+    }, [controlLayout, activateOnHover, isOpen, onPress])
+
     const control = children !== undefined ? children : defaultControl
     const pressableStyles =
       control === defaultControl ? Platform.select({ web: { outline: 'none' } }) : undefined
@@ -211,7 +261,17 @@ const Tooltip = forwardRef(
       control === defaultControl ? { top: 10, bottom: 10, left: 10, right: 10 } : undefined
 
     return (
-      <View style={staticStyles.container} {...selectProps(rest)}>
+      <View
+        style={[
+          staticStyles.container,
+          Platform.select({
+            web: {
+              display: inline ? 'inline-block' : 'flex'
+            }
+          })
+        ]}
+        {...selectProps(rest)}
+      >
         <Pressable
           onPress={toggleIsOpen}
           ref={controlRef}
@@ -220,9 +280,11 @@ const Tooltip = forwardRef(
           hitSlop={pressableHitSlop}
           accessibilityLabel={getCopy('a11yText')}
           accessibilityRole="button"
+          nativeID={nativeID}
         >
           {typeof control === 'function'
-            ? (pressableState) => control(getPressableState(pressableState), variant)
+            ? (pressableState) =>
+                control(getPressableState(pressableState), variant, tooltipButtonTokens)
             : control}
         </Pressable>
         {isOpen && (