fix: move dynamic options hint to tooltip

Closes #305
bpmn-io · Oct 11, 2023 · 5345997 · 5345997
1 parent a8e1bb4
commit 5345997
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/packages/form-js-editor/src/features/properties-panel/entries/InputKeyValuesSourceEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/InputKeyValuesSourceEntry.js
@@ -11,20 +11,10 @@ export default function InputKeyValuesSourceEntry(props) {
     id
   } = props;
 
-  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
-
-  const description = <div>
-    Define which input property to populate the values from.
-    <br /><br />The input property may be an array of simple values or alternatively follow this schema:
-    <pre><code>{schema}</code></pre>
-  </div>;
-
   return [
     {
       id: id + '-key',
       component: InputValuesKey,
-      label: 'Input values key',
-      description,
       isEdited: isTextFieldEntryEdited,
       editField,
       field,
@@ -36,15 +26,20 @@ function InputValuesKey(props) {
   const {
     editField,
     field,
-    id,
-    label,
-    description
+    id
   } = props;
 
   const debounce = useService('debounce');
 
   const path = VALUES_SOURCES_PATHS[VALUES_SOURCES.INPUT];
 
+  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
+
+  const tooltip = <div>
+    The input property may be an array of simple values or alternatively follow this schema:
+    <pre><code>{schema}</code></pre>
+  </div>;
+
   const getValue = () => get(field, path, '');
 
   const setValue = (value, error) => {
@@ -69,11 +64,12 @@ function InputValuesKey(props) {
 
   return TextFieldEntry({
     debounce,
-    description,
+    description: 'Define which input property to populate the values from',
+    tooltip,
     element: field,
     getValue,
     id,
-    label,
+    label: 'Input values key',
     setValue,
     validate
   });

diff --git a/packages/form-js-editor/src/features/properties-panel/entries/ValuesExpressionEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/ValuesExpressionEntry.js
@@ -15,7 +15,6 @@ export default function ValuesExpressionEntry(props) {
     {
       id: id + '-expression',
       component: ValuesExpression,
-      label: 'Values expression',
       isEdited: isFeelEntryEdited,
       editField,
       field
@@ -38,9 +37,8 @@ function ValuesExpression(props) {
 
   const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
 
-  const description = <div>
-    Define an expression to populate the options from.
-    <br /><br />The expression may result in an array of simple values or alternatively follow this schema:
+  const tooltip = <div>
+    The expression may result in an array of simple values or alternatively follow this schema:
     <pre><code>{schema}</code></pre>
   </div>;
 
@@ -50,7 +48,8 @@ function ValuesExpression(props) {
 
   return FeelEntry({
     debounce,
-    description,
+    description: 'Define an expression to populate the options from.',
+    tooltip,
     element: field,
     feel: 'required',
     getValue,