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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.10.1-beta.1",
+  "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,19 +19,21 @@ 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
 }) => {
   const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -39,7 +41,7 @@ const Tooltip = ({
   const themeValues = createThemeValues(
     themeContext,
     fallbackValues,
-    TOOLTIP_THEME_SOURCE
+    "Tooltip"
   );
 
   const { top, right, bottom, left } = contentPosition;
@@ -81,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 (
@@ -102,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; } 
         `}
       />
     );
@@ -153,7 +165,11 @@ const Tooltip = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(themeValues.borderColor, arrowDirection, "8px")};
+            ${arrowBorder(
+              arrowColor || themeValues.borderColor,
+              arrowDirection,
+              "8px"
+            )};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};
@@ -166,4 +182,4 @@ const Tooltip = ({
   );
 };
 
-export default Tooltip;
+export default themeComponent(Tooltip, "Tooltip", fallbackValues);

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

@@ -196,8 +196,9 @@ export const WithChildren = {
 export const RichTooltipContent = {
   args: {
     tooltipID: "tooltip-node-content",
-    contentBackgroundColor: "#ffffff",
+    contentExtraStyles: "background-color: #000000; color: #ffffff;",
     triggerText: "Rich content",
+    arrowColor: "black",
     contentPosition: {
       top: "-126px",
       right: "auto",

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,