@thecb/components 11.10.1-beta.2 → 11.11.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.10.1-beta.2",
+  "version": "11.11.0-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/form-layouts/FormInput.js

@@ -148,7 +148,7 @@ const FormInput = ({
     <Stack childGap="0.25rem">
       <Box padding="0">
         {helperModal ? (
-          <Cluster justify="space-between" align="center">
+          <Cluster justify="space-between" align="center" overflow>
             {labelDisplayOverride ? (
               labelDisplayOverride
             ) : (

package/src/components/molecules/tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { createThemeValues } from "../../../util/themeUtils";
+import { createThemeValues, themeComponent } from "../../../util/themeUtils";
 import { ThemeContext } from "styled-components";
 import Text from "../../atoms/text";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { noop, arrowBorder } from "../../../util/general";
-import { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
+import { fallbackValues } from "./Tooltip.theme";
 
 const Tooltip = ({
   tooltipID,
@@ -19,18 +19,19 @@ const Tooltip = ({
   minWidth = "250px",
   maxWidth = "100%",
   height = "auto",
+  arrowDirection = "down",
   contentPosition = {
-    top: "-110px",
+    top: "auto",
     right: "auto",
-    bottom: "auto",
-    left: "-225px"
+    bottom: "calc(100% + 8px)", // always sits above the trigger + 8px gap for arrow
+    left: "50%", // anchors to horizontal center of trigger
+    transform: "translateX(-50%)" // shifts left by half tooltip's own width → centered
   },
-  arrowDirection = "down",
   arrowPosition = {
     arrowTop: "auto",
-    arrowRight: "10px",
+    arrowRight: "auto",
     arrowBottom: "-8px",
-    arrowLeft: "auto"
+    arrowLeft: "calc(50% - 8px)" // centers the 0-width arrow element (16px wide border)
   },
   arrowColor
 }) => {
@@ -40,7 +41,7 @@ const Tooltip = ({
   const themeValues = createThemeValues(
     themeContext,
     fallbackValues,
-    TOOLTIP_THEME_SOURCE
+    "Tooltip"
   );
 
   const { top, right, bottom, left } = contentPosition;
@@ -82,12 +83,21 @@ const Tooltip = ({
 
   const renderTrigger = () => {
     if (hasCustomTrigger && children) {
-      return React.cloneElement(React.Children.only(children), {
-        "aria-describedby": tooltipID,
-        onFocus: () => handleToggleTooltip(true),
-        onBlur: () => handleToggleTooltip(false),
-        onKeyDown: handleKeyDown
-      });
+      return (
+        <Box
+          padding="0"
+          extraStyles="cursor: pointer;"
+          tabIndex="0"
+          role="button"
+          data-qa={`tooltip-trigger-${tooltipID}`}
+          aria-describedby={tooltipID}
+          onFocus={() => handleToggleTooltip(true)}
+          onBlur={() => handleToggleTooltip(false)}
+          onKeyDown={handleKeyDown}
+        >
+          {children}
+        </Box>
+      );
     }
 
     return (
@@ -103,9 +113,10 @@ const Tooltip = ({
         text={triggerText}
         extraStyles={`
           color: ${themeValues.linkColor};
-          &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
-          &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
-          button, span, &:hover span { text-decoration: none; }
+          cursor: pointer;
+          &:hover { color: ${themeValues.hoverColor}; text-decoration: none; }
+          &:active, &:focus { color: ${themeValues.activeColor}; text-decoration: none; }
+          button, span, &:hover span { text-decoration: none; } 
         `}
       />
     );
@@ -171,4 +182,4 @@ const Tooltip = ({
   );
 };
 
-export default Tooltip;
+export default themeComponent(Tooltip, "Tooltip", fallbackValues);

package/src/components/molecules/tooltip/Tooltip.theme.js

@@ -9,8 +9,6 @@ const activeColor = PEACOCK_BLUE;
 const linkColor = MATISSE_BLUE;
 const borderColor = "rgba(255, 255, 255, 0.85)";
 
-export const TOOLTIP_THEME_SOURCE = "Button";
-
 export const fallbackValues = {
   borderColor,
   linkColor,