@conduction/components 2.1.10 → 2.1.12

package/README.md

@@ -4,6 +4,8 @@
 
 - **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
   - 2.1.7: Add disabled placholders to all Select elements.

package/lib/components/formFields/createKeyValue/CreateKeyValue.js

@@ -27,5 +27,5 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled }) => {
     React.useEffect(() => {
         handleChange(keyValues);
     }, [keyValues]);
-    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { className: styles.tdDelete, children: _jsx(Button, { onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), children: "Delete" }) })] }, `${keyValue}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { className: styles.tdDelete, children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), children: "Delete" }) })] }, `${keyValue}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
 };

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.10",
+  "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/formFields/createKeyValue/CreateKeyValue.tsx

@@ -91,7 +91,10 @@ const KeyValueComponent: React.FC<CreateKeyValueComponentProps> = ({ defaultValu
                 <TableCell>{keyValue.key}</TableCell>
                 <TableCell>{keyValue.value}</TableCell>
                 <TableCell className={styles.tdDelete}>
-                  <Button onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}>
+                  <Button
+                    {...{ disabled }}
+                    onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}
+                  >
                     Delete
                   </Button>
                 </TableCell>

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>
   );
 };