feat: change Header value input and Field Injection value input to te…

…xt areas (#1065)

deps: update @bpmn-io/properties-panel to 3.22.3

Related camunda/camunda-modeler#2982

package.json

@@ -61,7 +61,7 @@
     "@babel/plugin-transform-react-jsx": "^7.24.7",
     "@bpmn-io/element-template-chooser": "^1.0.0",
     "@bpmn-io/element-templates-icons-renderer": "^0.3.0",
-    "@bpmn-io/properties-panel": "^3.21.0",
+    "@bpmn-io/properties-panel": "^3.22.3",
     "@bpmn-io/variable-resolver": "^1.2.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",

src/provider/camunda-platform/properties/FieldInjection.js

@@ -1,4 +1,4 @@
-import { TextFieldEntry, SelectEntry } from '@bpmn-io/properties-panel';
+import { TextFieldEntry, SelectEntry, TextAreaEntry } from '@bpmn-io/properties-panel';
 
 import {
   useService
@@ -156,13 +156,14 @@ function ValueProperty(props) {
     return field.string || field.stringValue || field.expression;
   };
 
-  return TextFieldEntry({
+  return TextAreaEntry({
     element: field,
     id: idPrefix + '-value',
     label: translate('Value'),
     getValue,
     setValue,
-    debounce
+    debounce,
+    autoResize: true
   });
 }
 

src/provider/zeebe/properties/Header.js

@@ -1,4 +1,4 @@
-import { TextFieldEntry } from '@bpmn-io/properties-panel';
+import { TextFieldEntry, TextAreaEntry } from '@bpmn-io/properties-panel';
 
 import {
   useService
@@ -87,12 +87,13 @@ function ValueProperty(props) {
     return header.value;
   };
 
-  return TextFieldEntry({
+  return TextAreaEntry({
     element: header,
     id: idPrefix + '-value',
     label: translate('Value'),
     getValue,
     setValue,
-    debounce
+    debounce,
+    autoResize: true
   });
 }

test/spec/provider/camunda-platform/FieldInjectionProps.spec.js

@@ -78,7 +78,7 @@ describe('provider/camunda-platform - FieldInjectionProps', function() {
 
       // when
       const executionListenerGroup = domQuery('[data-group-id="group-CamundaPlatform__ExecutionListener"]', container);
-      const valueInputField = domQuery('input[name*="value"]', executionListenerGroup);
+      const valueInputField = domQuery('textarea[name*="value"]', executionListenerGroup);
 
       changeInput(valueInputField, 'newValue');
 

test/spec/provider/zeebe/Header.spec.js

@@ -155,7 +155,7 @@ describe('provider/bpmn - Header', function() {
 
         // when
         const headerGroup = getGroup(container, 'headers');
-        const valueInput = domQuery('input[name=ServiceTask_empty-header-0-value]', headerGroup);
+        const valueInput = domQuery('textarea[name=ServiceTask_empty-header-0-value]', headerGroup);
 
         // then
         expect(valueInput).to.not.exist;
@@ -173,7 +173,7 @@ describe('provider/bpmn - Header', function() {
 
       // when
       const headerGroup = getGroup(container, 'headers');
-      const valueInput = domQuery('input[name=ServiceTask_1-header-0-value]', headerGroup);
+      const valueInput = domQuery('textarea[name=ServiceTask_1-header-0-value]', headerGroup);
 
       // then
       expect(valueInput.value).to.eql(getHeader(serviceTask, 0).get('value'));
@@ -191,7 +191,7 @@ describe('provider/bpmn - Header', function() {
 
       // when
       const headerGroup = getGroup(container, 'headers');
-      const valueInput = domQuery('input[name=ServiceTask_1-header-0-value]', headerGroup);
+      const valueInput = domQuery('textarea[name=ServiceTask_1-header-0-value]', headerGroup);
       changeInput(valueInput, 'newValue');
 
       // then
@@ -209,7 +209,7 @@ describe('provider/bpmn - Header', function() {
         await act(() => {
           selection.select(serviceTask);
         });
-        const valueInput = domQuery('input[name=ServiceTask_1-header-0-value]', container);
+        const valueInput = domQuery('textarea[name=ServiceTask_1-header-0-value]', container);
         changeInput(valueInput, 'newValue');
 
         // when