fix(context-pad): add title to remove button

Related to https://github.com/camunda/team-hto/issues/387
bpmn-io · Nov 2, 2023 · acb01b3 · acb01b3
1 parent 3be4ad3
commit acb01b3
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -82,6 +82,7 @@ function Element(props) {
   const eventBus = useService('eventBus'),
         formEditor = useService('formEditor'),
         formFieldRegistry = useService('formFieldRegistry'),
+        formFields = useService('formFields'),
         modeling = useService('modeling'),
         selection = useService('selection');
 
@@ -187,7 +188,7 @@ function Element(props) {
       <ContextPad>
         {
           selection.isSelected(field) && field.type !== 'default'
-            ? <button class="fjs-context-pad-item" onClick={ onRemove }><DeleteIcon /></button>
+            ? <button title={ getRemoveButtonTitle(field, formFields) } class="fjs-context-pad-item" onClick={ onRemove }><DeleteIcon /></button>
             : null
         }
       </ContextPad>
@@ -579,4 +580,14 @@ function findPaletteEntry(type, formFields) {
 
 function defaultPropertiesPanel(propertiesPanelConfig) {
   return !(propertiesPanelConfig && propertiesPanelConfig.parent);
+}
+
+function getRemoveButtonTitle(formField, formFields) {
+  const entry = findPaletteEntry(formField.type, formFields);
+
+  if (!entry) {
+    return 'Remove form field';
+  }
+
+  return `Remove ${entry.label}`;
 }