feat: support placeholders on String and Text properties

Closes #92 deps: update to `@bpmn-io/properties-panel@3.19.0` deps: update to `@bpmn-io/element-templates-validator@2.1.0`
bpmn-io · May 29, 2024 · 41612f9 · 41612f9
1 parent dfc3a83
commit 41612f9
Show file tree

Hide file tree

Showing 10 changed files with 221 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.19.0",
     "@bpmn-io/variable-resolver": "^1.2.2",
     "@camunda/linting": "^3.12.0",
     "@rollup/plugin-alias": "^5.1.0",

diff --git a/src/cloud-element-templates/properties-panel/properties/custom-properties/FeelProperty.js b/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),

diff --git a/...d-element-templates/properties-panel/properties/custom-properties/FeelTextAreaProperty.js b/...d-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),

diff --git a/src/cloud-element-templates/properties-panel/properties/custom-properties/StringProperty.js b/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),

diff --git a/...cloud-element-templates/properties-panel/properties/custom-properties/TextAreaProperty.js b/...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 }),

diff --git a/test/spec/cloud-element-templates/fixtures/placeholder.json b/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"
+      }
+    ]
+  }
+]
diff --git a/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.bpmn b/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>
diff --git a/test/spec/cloud-element-templates/properties/CustomProperties.placeholder.json b/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"
+      }
+    ]
+  }
+]