@telus-uds/components-base 1.59.1 → 1.60.0

package/src/Tooltip/Tooltip.jsx

@@ -82,7 +82,10 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
+  (
+    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = useState(false)
     const arrowRef = useRef()
 
@@ -157,7 +160,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}

package/src/Tooltip/Tooltip.native.jsx

@@ -108,7 +108,10 @@ const defaultControl = (pressableState, variant) => (
  * - Tooltips may also be useful when vertical space is an issue.
  */
 const Tooltip = forwardRef(
-  ({ children, content, position = 'auto', copy = 'en', tokens, variant, ...rest }, ref) => {
+  (
+    { children, content, position = 'auto', copy = 'en', tokens, variant, inline = false, ...rest },
+    ref
+  ) => {
     const [isOpen, setIsOpen] = useState(false)
 
     const controlRef = useRef()
@@ -217,7 +220,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}

package/src/Tooltip/shared.js

@@ -20,6 +20,10 @@ const propTypes = {
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
   position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
+  /**
+   * Display tooltip icon button as an inline element.
+   */
+  inline: PropTypes.bool,
   tokens: getTokensPropType('Tooltip'),
   variant: variantProp.propType
 }