@conduction/components 2.1.11 → 2.1.12

package/README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.12: Added ToolTip max-width and break-word
   - 2.1.11: Added CreateKeyValue component disabled state on delete buttons
   - 2.1.10: PrimaryTopNav overflow scroll removed from desktop
   - 2.1.8 & 2.1.9: PrimaryTopNav will always show subItems on mobile

package/lib/components/toolTip/ToolTip.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ReactTooltip from "react-tooltip";
 import * as styles from "./ToolTip.module.css";
 export const ToolTip = ({ children, layoutClassName, tooltip }) => {
-    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { "data-tip": tooltip, className: layoutClassName && layoutClassName, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid" })] }));
+    return (_jsxs("div", { className: styles.wrapper, children: [_jsx("div", { "data-tip": tooltip, className: layoutClassName && layoutClassName, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid", className: styles.tooltip })] }));
 };
 export { ReactTooltip };

package/lib/components/toolTip/ToolTip.module.css

@@ -1,4 +1,13 @@
+:root {
+  --conduction-tooltip-max-width: 500px;
+}
+
 .wrapper {
   display: inline-block;
   position: relative;
 }
+
+.tooltip {
+  max-width: var(--conduction-tooltip-max-width);
+  word-break: break-word;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/toolTip/ToolTip.module.css

@@ -1,4 +1,13 @@
+:root {
+  --conduction-tooltip-max-width: 500px;
+}
+
 .wrapper {
   display: inline-block;
   position: relative;
 }
+
+.tooltip {
+  max-width: var(--conduction-tooltip-max-width);
+  word-break: break-word;
+}

package/src/components/toolTip/ToolTip.tsx

@@ -16,7 +16,7 @@ export const ToolTip: React.FC<ToolTipProps> = ({ children, layoutClassName, too
         {children}
       </div>
 
-      <ReactTooltip place={"top"} type={"dark"} effect={"solid"} />
+      <ReactTooltip place={"top"} type={"dark"} effect={"solid"} className={styles.tooltip} />
     </div>
   );
 };