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

packages/form-js-editor/src/render/components/FormEditor.js

@@ -82,6 +82,7 @@
   const eventBus = useService('eventBus'),
         formEditor = useService('formEditor'),
         formFieldRegistry = useService('formFieldRegistry'),
+        formFields = useService('formFields'),
         modeling = useService('modeling'),
         selection = useService('selection');
 
@@ -114,7 +115,7 @@
     eventBus.on('selection.changed', scrollIntoView);
 
     return () => eventBus.off('selection.changed', scrollIntoView);
   }, [ id ]);
 
   useLayoutEffect(() => {
     if (selection.isSelected(field)) {
@@ -187,7 +188,7 @@
       <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>
@@ -326,7 +327,7 @@
     return () => {
       eventBus.off('selection.changed', handleSelectionChanged);
     };
   }, [ schema, selection ]);
 
   const [ drake, setDrake ] = useState(null);
 
@@ -404,7 +405,7 @@
 
     // keep deprecated event to ensure backward compatibility
     eventBus.fire('formEditor.rendered');
   }, []);
 
   const [ hoveredId, setHoveredId ] = useState(null);
 
@@ -565,7 +566,7 @@
     drake.on('cloned', handleCloned);
 
     return () => drake.off('cloned', handleCloned);
   }, [ drake ]);
 
   return null;
 }
@@ -579,4 +580,14 @@
 
 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}`;
 }