feat: support placeholders on String and Text properties

package.json

@@ -61,7 +61,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@bpmn-io/element-templates-validator": "^2.0.1",
+    "@bpmn-io/element-templates-validator": "^2.1.0",
     "@bpmn-io/extract-process-variables": "^0.8.0",
     "bpmnlint": "^10.0.0",
     "classnames": "^2.3.1",
@@ -77,7 +77,7 @@
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@bpmn-io/element-template-chooser": "^1.0.0",
     "@bpmn-io/element-template-icon-renderer": "^0.5.2",
-    "@bpmn-io/properties-panel": "^3.18.2",
+    "@bpmn-io/properties-panel": "^3.20.0",
     "@bpmn-io/variable-resolver": "^1.2.2",
     "@camunda/linting": "^3.12.0",
     "@rollup/plugin-alias": "^5.1.0",

src/cloud-element-templates/properties-panel/properties/custom-properties/FeelProperty.js

@@ -16,6 +16,7 @@ export function FeelProperty(props) {
     editable,
     label,
     feel,
+    placeholder,
     tooltip
   } = property;
 
@@ -35,6 +36,7 @@ export function FeelProperty(props) {
     id,
     label,
     feel,
+    placeholder,
     description: PropertyDescription({ description }),
     setValue: propertySetter(bpmnFactory, commandStack, element, property),
     validate: propertyValidator(translate, property),

src/cloud-element-templates/properties-panel/properties/custom-properties/FeelTextAreaProperty.js

@@ -19,6 +19,7 @@ export function FeelTextAreaProperty(props) {
     editable,
     label,
     feel,
+    placeholder,
     tooltip
   } = property;
 
@@ -38,6 +39,7 @@ export function FeelTextAreaProperty(props) {
     id,
     label,
     feel,
+    placeholder,
     description: PropertyDescription({ description }),
     setValue: propertySetter(bpmnFactory, commandStack, element, property),
     validate: propertyValidator(translate, property),

src/cloud-element-templates/properties-panel/properties/custom-properties/StringProperty.js

@@ -16,6 +16,7 @@ export function StringProperty(props) {
     editable,
     label,
     feel,
+    placeholder,
     tooltip
   } = property;
 
@@ -31,6 +32,7 @@ export function StringProperty(props) {
     id,
     label,
     feel,
+    placeholder,
     description: PropertyDescription({ description }),
     setValue: propertySetter(bpmnFactory, commandStack, element, property),
     validate: propertyValidator(translate, property),

src/cloud-element-templates/properties-panel/properties/custom-properties/TextAreaProperty.js

@@ -21,6 +21,7 @@ export function TextAreaProperty(props) {
     label,
     feel,
     language,
+    placeholder,
     tooltip
   } = property;
 
@@ -35,6 +36,7 @@ export function TextAreaProperty(props) {
     id,
     label,
     feel,
+    placeholder,
     monospace: !!language,
     autoResize: true,
     description: PropertyDescription({ description }),

src/element-templates/properties-panel/properties/CustomProperties.js

@@ -332,7 +332,8 @@ function StringProperty(props) {
   const {
     description,
     editable,
-    label
+    label,
+    placeholder
   } = property;
 
   const bpmnFactory = useService('bpmnFactory'),
@@ -345,6 +346,7 @@ function StringProperty(props) {
     element,
     getValue: propertyGetter(element, property, scope),
     id,
+    placeholder,
     label: label ? translate(label) : label,
     description: PropertyDescription({ description }),
     setValue: propertySetter(bpmnFactory, commandStack, element, property, scope),
@@ -364,7 +366,8 @@ function TextAreaProperty(props) {
   const {
     description,
     editable,
-    label
+    label,
+    placeholder
   } = property;
 
   const bpmnFactory = useService('bpmnFactory'),
@@ -376,6 +379,7 @@ function TextAreaProperty(props) {
     debounce,
     element,
     id,
+    placeholder,
     label: label ? translate(label) : label,
     description: PropertyDescription({ description }),
     getValue: propertyGetter(element, property, scope),

test/spec/cloud-element-templates/fixtures/placeholder.json

@@ -0,0 +1,45 @@
+[
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "Placeholder",
+    "id": "placeholder",
+    "appliesTo": [
+      "bpmn:Task"
+    ],
+    "properties": [
+      {
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "Text",
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-2-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "String",
+        "feel": "required",
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "Text",
+        "feel": "required",
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      }
+    ]
+  }
+]

test/spec/cloud-element-templates/properties/CustomProperties.placeholder.bpmn

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:zeebe="http://camunda.org/schema/zeebe/1.0" id="Definitions_00cqa19" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.23.0">
+  <bpmn:process id="Process_1" isExecutable="true">
+    <bpmn:task id="Task_1" name="Placeholder" zeebe:modelerTemplate="placeholder" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
+        <dc:Bounds x="160" y="80" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/cloud-element-templates/properties/CustomProperties.placeholder.json

@@ -0,0 +1,45 @@
+[
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "Placeholder",
+    "id": "placeholder",
+    "appliesTo": [
+      "bpmn:Task"
+    ],
+    "properties": [
+      {
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "Text",
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-2-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "String",
+        "feel": "required",
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "Text",
+        "feel": "required",
+        "binding": {
+          "type": "zeebe:input",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      }
+    ]
+  }
+]

test/spec/cloud-element-templates/properties/CustomProperties.spec.js

@@ -70,6 +70,9 @@ import groupsElementTemplates from './CustomProperties.groups.json';
 import textLanguageDiagramXML from './CustomProperties.text-language.bpmn';
 import textLanguageElementTemplates from './CustomProperties.text-language.json';
 
+import placeholderDiagramXML from './CustomProperties.placeholder.bpmn';
+import placeholderElementTemplates from './CustomProperties.placeholder.json';
+
 
 describe('provider/cloud-element-templates - CustomProperties', function() {
 
@@ -2153,6 +2156,80 @@ describe('provider/cloud-element-templates - CustomProperties', function() {
 
   });
 
+
+  describe('placeholder', function() {
+
+    beforeEach(bootstrapPropertiesPanel(placeholderDiagramXML, {
+      container,
+      debounceInput: false,
+      elementTemplates: placeholderElementTemplates,
+      moddleExtensions: {
+        zeebe: zeebeModdlePackage
+      },
+      modules: [
+        BpmnPropertiesPanel,
+        coreModule,
+        elementTemplatesModule,
+        modelingModule
+      ]
+    }));
+
+
+    it('should display placeholder (String)', async function() {
+
+      // given
+      await expectSelected('Task_1');
+
+      // when
+      const entry = findEntry('custom-entry-placeholder-0', container),
+            input = findInput('text', entry);
+
+      // then
+      expect(input.placeholder).to.eql('Placeholder');
+    });
+
+
+    it('should display placeholder (Text)', async function() {
+
+      // given
+      await expectSelected('Task_1');
+
+      // when
+      const entry = findEntry('custom-entry-placeholder-1', container),
+            input = findTextarea(entry);
+
+      // then
+      expect(input.placeholder).to.eql('Placeholder');
+    });
+
+
+    it('should display placeholder (FEEL, String)', async function() {
+
+      // given
+      await expectSelected('Task_1');
+
+      // when
+      const entry = findEntry('custom-entry-placeholder-2', container),
+            input = domQuery('.bio-properties-panel-input', entry);
+
+      // then
+      expect(input.textContent).to.eql('Placeholder');
+    });
+
+
+    it('should display placeholder (FEEL, Text)', async function() {
+
+      // given
+      await expectSelected('Task_1');
+
+      // when
+      const entry = findEntry('custom-entry-placeholder-3', container),
+            input = domQuery('.bio-properties-panel-input', entry);
+
+      // then
+      expect(input.textContent).to.eql('Placeholder');
+    });
+  });
 });
 
 

test/spec/element-templates/fixtures/placeholder.json

@@ -0,0 +1,27 @@
+[
+  {
+    "$schema": "https://unpkg.com/@camunda/zeebe-element-templates-json-schema/resources/schema.json",
+    "name": "Placeholder",
+    "id": "placeholder",
+    "appliesTo": [
+      "bpmn:Task"
+    ],
+    "properties": [
+      {
+        "binding": {
+          "type": "camunda:property",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "Text",
+        "binding": {
+          "type": "camunda:property",
+          "name": "input-2-target"
+        },
+        "placeholder": "Placeholder"
+      }
+    ]
+  }
+]

test/spec/element-templates/properties/CustomProperties.placeholder.bpmn

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_00cqa19" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.23.0">
+  <bpmn:process id="Process_1" isExecutable="true">
+    <bpmn:task id="Task_1" name="Placeholder" camunda:modelerTemplate="placeholder" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
+        <dc:Bounds x="160" y="80" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/element-templates/properties/CustomProperties.placeholder.json

@@ -0,0 +1,27 @@
+[
+  {
+    "$schema": "https://unpkg.com/@camunda/element-templates-json-schema/resources/schema.json",
+    "name": "Placeholder",
+    "id": "placeholder",
+    "appliesTo": [
+      "bpmn:Task"
+    ],
+    "properties": [
+      {
+        "binding": {
+          "type": "camunda:field",
+          "name": "input-1-target"
+        },
+        "placeholder": "Placeholder"
+      },
+      {
+        "type": "Text",
+        "binding": {
+          "type": "camunda:field",
+          "name": "input-2-target"
+        },
+        "placeholder": "Placeholder"
+      }
+    ]
+  }
+]