feat: allow tooltip in fields

Checkbox, Feel, Textfield, TextArea, ToggleSwitch
bpmn-io · Jul 13, 2023 · 0d81580 · 0d81580
1 parent 92371f5
commit 0d81580
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 25 deletions.
diff --git a/src/components/entries/Checkbox.js b/src/components/entries/Checkbox.js
@@ -9,6 +9,7 @@ import {
 } from 'preact/hooks';
 
 import Description from './Description';
+import Tooltip from './Tooltip';
 
 function Checkbox(props) {
   const {
@@ -18,7 +19,8 @@ function Checkbox(props) {
     disabled,
     value = false,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
 
   const [ localValue, setLocalValue ] = useState(value);
@@ -55,7 +57,11 @@ function Checkbox(props) {
         onChange={ handleChange }
         checked={ localValue }
         disabled={ disabled } />
-      <label for={ prefixId(id) } class="bio-properties-panel-label">{ label }</label>
+      <label for={ prefixId(id) } class="bio-properties-panel-label">
+        <Tooltip value={ tooltip } labelId={ prefixId(id) }>
+          { label }
+        </Tooltip>
+      </label>
     </div>
   );
 }
@@ -83,7 +89,8 @@ export default function CheckboxEntry(props) {
     setValue,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
 
   const value = getValue(element);
@@ -100,7 +107,8 @@ export default function CheckboxEntry(props) {
         onChange={ setValue }
         onFocus={ onFocus }
         onBlur={ onBlur }
-        value={ value } />
+        value={ value }
+        tooltip={ tooltip } />
       { error && <div class="bio-properties-panel-error">{ error }</div> }
       <Description forId={ id } element={ element } value={ description } />
     </div>

diff --git a/src/components/entries/FEEL/Feel.js b/src/components/entries/FEEL/Feel.js
@@ -28,6 +28,7 @@ import FeelIcon from './FeelIcon';
 import { ToggleSwitch } from '../ToggleSwitch';
 
 import { NumberField } from '../NumberField';
+import Tooltip from '../Tooltip';
 
 const noop = () => { };
 
@@ -43,7 +44,8 @@ function FeelTextfield(props) {
     disabled = false,
     variables,
     tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    OptionalComponent = OptionalFeelInput,
+    tooltip
   } = props;
 
   const [ localValue, _setLocalValue ] = useState(value);
@@ -112,6 +114,7 @@ function FeelTextfield(props) {
     }
   };
 
+
   const handleLint = useStaticCallback(lint => {
 
     if (!(lint && lint.length)) {
@@ -186,14 +189,15 @@ function FeelTextfield(props) {
       { 'feel-active': feelActive }
     ) }>
       <label for={ prefixId(id) } class="bio-properties-panel-label" onClick={ () => setFocus() }>
-        {label}
+        <Tooltip value={ tooltip } labelId={ prefixId(id) }>
+          {label}
+        </Tooltip>
         <FeelIcon
           label={ label }
           feel={ feel }
           onClick={ handleFeelToggle }
           active={ feelActive }></FeelIcon>
       </label>
-
       <div class="bio-properties-panel-feel-container" ref={ containerRef }>
         <FeelIndicator
           active={ feelActive }
@@ -486,7 +490,8 @@ export default function FeelEntry(props) {
     example,
     variables,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
 
   const [ validationError, setValidationError ] = useState(null);
@@ -552,7 +557,8 @@ export default function FeelEntry(props) {
         value={ value }
         variables={ variables }
         tooltipContainer={ tooltipContainer }
-        OptionalComponent={ props.OptionalComponent } />
+        OptionalComponent={ props.OptionalComponent }
+        tooltip={ tooltip } />
       {error && <div class="bio-properties-panel-error">{error}</div>}
       <Description forId={ id } element={ element } value={ description } />
     </div>

diff --git a/src/components/entries/Select.js b/src/components/entries/Select.js
@@ -13,6 +13,7 @@ import {
 } from 'preact/hooks';
 
 import Description from './Description';
+import Tooltip from './Tooltip';
 
 /**
  * @typedef { { value: string, label: string, disabled: boolean, children: { value: string, label: string, disabled: boolean } } } Option
@@ -41,7 +42,8 @@ function Select(props) {
     value = '',
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
 
   const ref = useShowEntryEvent(id);
@@ -68,7 +70,9 @@ function Select(props) {
   return (
     <div class="bio-properties-panel-select">
       <label for={ prefixId(id) } class="bio-properties-panel-label">
-        {label}
+        <Tooltip value={ tooltip } labelId={ prefixId(id) }>
+          {label}
+        </Tooltip>
       </label>
       <select
         ref={ ref }
@@ -135,7 +139,8 @@ export default function SelectEntry(props) {
     disabled,
     onFocus,
     onBlur,
-    validate
+    validate,
+    tooltip
   } = props;
 
   const options = getOptions(element);
@@ -182,7 +187,8 @@ export default function SelectEntry(props) {
         onFocus={ onFocus }
         onBlur={ onBlur }
         options={ options }
-        disabled={ disabled } />
+        disabled={ disabled }
+        tooltip={ tooltip } />
       { error && <div class="bio-properties-panel-error">{ error }</div> }
       <Description forId={ id } element={ element } value={ description } />
     </div>

diff --git a/src/components/entries/TextArea.js b/src/components/entries/TextArea.js
@@ -15,6 +15,7 @@ import {
 } from '../../hooks';
 
 import { isFunction } from 'min-dash';
+import Tooltip from './Tooltip';
 
 function resizeToContents(element) {
   element.style.height = 'auto';
@@ -37,7 +38,8 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
-    rows = autoResize ? 1 : 2
+    rows = autoResize ? 1 : 2,
+    tooltip
   } = props;
 
   const [ localValue, setLocalValue ] = useState(value);
@@ -71,7 +73,9 @@ function TextArea(props) {
   return (
     <div class="bio-properties-panel-textarea">
       <label for={ prefixId(id) } class="bio-properties-panel-label">
-        { label }
+        <Tooltip value={ tooltip } labelId={ prefixId(id) }>
+          { label }
+        </Tooltip>
       </label>
       <textarea
         ref={ ref }
@@ -126,7 +130,8 @@ export default function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
-    autoResize
+    autoResize,
+    tooltip
   } = props;
 
   const globalError = useError(id);
@@ -176,7 +181,8 @@ export default function TextAreaEntry(props) {
         debounce={ debounce }
         monospace={ monospace }
         disabled={ disabled }
-        autoResize={ autoResize } />
+        autoResize={ autoResize }
+        tooltip={ tooltip } />
       { error && <div class="bio-properties-panel-error">{ error }</div> }
       <Description forId={ id } element={ element } value={ description } />
     </div>

diff --git a/src/components/entries/TextField.js b/src/components/entries/TextField.js
@@ -1,8 +1,10 @@
 import Description from './Description';
+import Tooltip from './Tooltip';
 
 import {
   useEffect,
   useMemo,
+  useRef,
   useState
 } from 'preact/hooks';
 
@@ -25,12 +27,14 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
-    value = ''
+    value = '',
+    tooltip
   } = props;
 
   const [ localValue, setLocalValue ] = useState(value || '');
 
   const ref = useShowEntryEvent(id);
+  const labelRef = useRef(null);
 
   const handleInputCallback = useMemo(() => {
     return debounce(({ target }) => onInput(target.value.length ? target.value : undefined));
@@ -52,7 +56,9 @@ function Textfield(props) {
   return (
     <div class="bio-properties-panel-textfield">
       <label for={ prefixId(id) } class="bio-properties-panel-label">
-        { label }
+        <Tooltip value={ tooltip } refElement={ labelRef } labelId={ prefixId(id) }>
+          { label }
+        </Tooltip>
       </label>
       <input
         ref={ ref }
@@ -83,6 +89,7 @@ function Textfield(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {String} props.tooltip
  * @param {Function} props.validate
  */
 export default function TextfieldEntry(props) {
@@ -97,7 +104,8 @@ export default function TextfieldEntry(props) {
     setValue,
     validate,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
 
   const globalError = useError(id);
@@ -144,7 +152,8 @@ export default function TextfieldEntry(props) {
         onInput={ onInput }
         onFocus={ onFocus }
         onBlur={ onBlur }
-        value={ value } />
+        value={ value }
+        tooltip={ tooltip } />
       { error && <div class="bio-properties-panel-error">{ error }</div> }
       <Description forId={ id } element={ element } value={ description } />
     </div>

diff --git a/src/components/entries/ToggleSwitch.js b/src/components/entries/ToggleSwitch.js
@@ -6,6 +6,7 @@ import {
 } from 'preact/hooks';
 
 import classNames from 'classnames';
+import Tooltip from './Tooltip';
 
 export function ToggleSwitch(props) {
   const {
@@ -17,7 +18,8 @@ export function ToggleSwitch(props) {
     inline,
     onFocus,
     onBlur,
-    inputRef
+    inputRef,
+    tooltip
   } = props;
 
   const [ localValue, setLocalValue ] = useState(value);
@@ -46,7 +48,9 @@ export function ToggleSwitch(props) {
     ) }>
       <label class="bio-properties-panel-label"
         for={ prefixId(id) }>
-        { label }
+        <Tooltip value={ tooltip } labelId={ prefixId(id) }>
+          { label }
+        </Tooltip>
       </label>
       <div class="bio-properties-panel-field-wrapper">
         <label class="bio-properties-panel-toggle-switch__switcher">
@@ -92,7 +96,8 @@ export default function ToggleSwitchEntry(props) {
     getValue,
     setValue,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
 
   const value = getValue(element);
@@ -106,7 +111,8 @@ export default function ToggleSwitchEntry(props) {
         onFocus={ onFocus }
         onBlur={ onBlur }
         switcherLabel={ switcherLabel }
-        inline={ inline } />
+        inline={ inline }
+        tooltip={ tooltip } />
       <Description forId={ id } element={ element } value={ description } />
     </div>
   );