feat: implement spacer component

packages/form-js-editor/assets/form-js-editor-base.css

@@ -639,6 +639,10 @@
   margin-right: 2px;
 }
 
+.fjs-editor-container .fjs-form-field-spacer {
+  min-height: 30px;
+}
+
 /**
  * Custom Dragula Styles
  */

packages/form-js-editor/src/features/properties-panel/PropertiesPanelHeaderProvider.js

@@ -15,6 +15,7 @@ const labelsByType = {
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
+  spacer: 'SPACER',
   taglist: 'TAGLIST',
   text: 'TEXT VIEW',
   textfield: 'TEXT FIELD',

packages/form-js-editor/src/features/properties-panel/entries/SpacerEntry.js

@@ -0,0 +1,67 @@
+import { NumberFieldEntry, isNumberFieldEntryEdited } from '@bpmn-io/properties-panel';
+
+import { get } from 'min-dash';
+import { useService } from '../hooks';
+
+export default function SpacerEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const {
+    type
+  } = field;
+
+  if (type !== 'spacer') {
+    return [];
+  }
+
+  const entries = [];
+
+  entries.push({
+    id: id + '-height',
+    component: SpacerHeight,
+    isEdited: isNumberFieldEntryEdited,
+    editField,
+    field
+  });
+
+  return entries;
+}
+
+function SpacerHeight(props) {
+
+  const {
+    editField,
+    field,
+    id
+  } = props;
+
+  const debounce = useService('debounce');
+
+  const getValue = (e) => get(field, [ 'height' ]);
+
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+
+    editField(field, [ 'height' ], value);
+  };
+
+  return NumberFieldEntry({
+    debounce,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: (value) => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}

packages/form-js-editor/src/features/properties-panel/entries/index.js

@@ -9,6 +9,7 @@ export { default as KeyEntry } from './KeyEntry';
 export { default as LabelEntry } from './LabelEntry';
 export { default as ImageSourceEntry } from './ImageSourceEntry';
 export { default as TextEntry } from './TextEntry';
+export { default as SpacerEntry } from './SpacerEntry';
 export { default as NumberEntries } from './NumberEntries';
 export { default as NumberSerializationEntry } from './NumberSerializationEntry';
 export { default as DateTimeEntry } from './DateTimeEntry';

packages/form-js-editor/src/features/properties-panel/groups/GeneralGroup.js

@@ -11,6 +11,7 @@ import {
   ReadonlyEntry,
   SelectEntries,
   TextEntry,
+  SpacerEntry,
   NumberEntries,
   DateTimeEntry
 } from '../entries';
@@ -27,6 +28,7 @@ export default function GeneralGroup(field, editField, getService) {
     ...ActionEntry({ field, editField }),
     ...DateTimeEntry({ field, editField }),
     ...TextEntry({ field, editField, getService }),
+    ...SpacerEntry({ field, editField }),
     ...NumberEntries({ field, editField }),
     ...ImageSourceEntry({ field, editField }),
     ...AltTextEntry({ field, editField }),

packages/form-js-editor/src/render/components/editor-form-fields/EditorSpacer.js

@@ -0,0 +1,19 @@
+import { Spacer } from '@bpmn-io/form-js-viewer';
+import { editorFormFieldClasses } from '../Util';
+import { iconsByType } from '../icons';
+
+const type = 'spacer';
+
+export default function EditorSpacer(props) {
+  const { field } = props;
+  const { height = 50 } = field;
+  const SpacerIcon = iconsByType(type);
+
+  return (
+    <div class={ editorFormFieldClasses(type) } style={ { height } }>
+      <SpacerIcon viewBox="0 0 54 54" />
+    </div>
+  );
+}
+
+EditorSpacer.config = Spacer.config;

packages/form-js-editor/src/render/components/editor-form-fields/index.js

@@ -1,5 +1,7 @@
 import EditorText from './EditorText';
+import EditorSpacer from './EditorSpacer';
 
 export const editorFormFields = [
-  EditorText
+  EditorText,
+  EditorSpacer
 ];

packages/form-js-editor/test/spec/FormEditor.spec.js

@@ -73,7 +73,7 @@ describe('FormEditor', function() {
     });
 
     // then
-    expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(16);
+    expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(17);
   });
 
 
@@ -114,7 +114,7 @@ describe('FormEditor', function() {
     });
 
     // then
-    expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(16);
+    expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(17);
   });
 
 
@@ -137,7 +137,7 @@ describe('FormEditor', function() {
     container.querySelector('.fjs-container').classList.add('fjs-no-theme');
 
     // then
-    expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(16);
+    expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(17);
   });
 
 
@@ -192,7 +192,7 @@ describe('FormEditor', function() {
       await formEditor.importSchema(schema);
 
       // then
-      expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(16);
+      expect(formEditor.get('formFieldRegistry').getAll()).to.have.length(17);
     });
 
 
@@ -929,15 +929,15 @@ describe('FormEditor', function() {
       // assume
       const formFieldRegistry = formEditor.get('formFieldRegistry');
 
-      expect(formFieldRegistry.getAll()).to.have.length(16);
+      expect(formFieldRegistry.getAll()).to.have.length(17);
 
       // when
       startDragging(container);
       moveDragging(container);
       endDragging(container);
 
       // then
-      expect(formFieldRegistry.getAll()).to.have.length(17);
+      expect(formFieldRegistry.getAll()).to.have.length(18);
 
       const selection = formEditor.get('selection');
 

packages/form-js-editor/test/spec/features/palette/Palette.spec.js

@@ -44,7 +44,7 @@ describe('palette', function() {
     const result = createPalette({ container });
 
     // then
-    expect(result.container.querySelectorAll('.fjs-palette-field')).to.have.length(12);
+    expect(result.container.querySelectorAll('.fjs-palette-field')).to.have.length(13);
 
     expectEntries(result.container, PALETTE_ENTRIES);
   });

packages/form-js-editor/test/spec/features/properties-panel/PropertiesPanel.spec.js

@@ -2370,6 +2370,35 @@ describe('properties panel', function() {
     });
 
 
+    describe('spacer', function() {
+
+      it('entries', function() {
+
+        // given
+        const field = schema.components.find(({ type }) => type === 'spacer');
+
+        const result = createPropertiesPanel({
+          container,
+          field
+        });
+
+        // then
+        expectGroups(result.container, [
+          'General',
+          'Condition',
+          'Layout',
+          'Custom properties'
+        ]);
+
+        expectGroupEntries(result.container, 'General', [
+          'Height'
+        ]);
+
+      });
+
+    });
+
+
     describe('textfield', function() {
 
       it('entries', function() {

packages/form-js-editor/test/spec/form.json

@@ -180,6 +180,11 @@
       "alt": "The bpmn.io logo",
       "type": "image"
     },
+    {
+      "id": "Spacer_1",
+      "type": "spacer",
+      "height":60
+    },
     {
       "id": "Button_1",
       "action": "submit",

packages/form-js-editor/test/spec/import/Importer.spec.js

@@ -30,7 +30,7 @@ describe('Importer', function() {
     // then
     expect(warnings).to.be.empty;
 
-    expect(formFieldRegistry.getAll()).to.have.length(16);
+    expect(formFieldRegistry.getAll()).to.have.length(17);
   }));
 
 
@@ -40,7 +40,7 @@ describe('Importer', function() {
     await formEditor.importSchema(schema);
 
     // assume
-    expect(formFieldRegistry.getAll()).to.have.length(16);
+    expect(formFieldRegistry.getAll()).to.have.length(17);
 
     // when
     const result = await formEditor.importSchema(other);

packages/form-js-viewer/assets/form-js-base.css

@@ -370,6 +370,13 @@
   margin: auto;
 }
 
+.fjs-container .fjs-form-field-spacer {
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .fjs-container .fjs-input[type='text'],
 .fjs-container .fjs-input[type='email'],
 .fjs-container .fjs-input[type='tel'],

packages/form-js-viewer/src/index.js

@@ -5,7 +5,7 @@ export * from './render';
 export * from './util';
 export * from './features';
 
-const schemaVersion = 9;
+const schemaVersion = 10;
 
 export {
   Form,

packages/form-js-viewer/src/render/components/form-fields/Spacer.js

@@ -0,0 +1,23 @@
+import { formFieldClasses } from '../Util';
+
+const type = 'spacer';
+
+export default function Spacer(props) {
+  const { field } = props;
+  const { height = 60 } = field;
+
+  return (
+    <div class={ formFieldClasses(type) } style={ { height: height } } />
+  );
+}
+
+Spacer.config = {
+  type,
+  keyed: false,
+  label: 'Spacer',
+  group: 'presentation',
+  create: (options = {}) => ({
+    height: 60,
+    ...options
+  })
+};

packages/form-js-viewer/src/render/components/icons/index.js

@@ -8,6 +8,7 @@ import ColumnsIcon from './Group.svg';
 import NumberIcon from './Number.svg';
 import RadioIcon from './Radio.svg';
 import SelectIcon from './Select.svg';
+import SpacerIcon from './Spacer.svg';
 import TextIcon from './Text.svg';
 import TextfieldIcon from './Textfield.svg';
 import TextareaIcon from './Textarea.svg';
@@ -24,6 +25,7 @@ export const iconsByType = (type) => {
     number: NumberIcon,
     radio: RadioIcon,
     select: SelectIcon,
+    spacer: SpacerIcon,
     taglist: TaglistIcon,
     text: TextIcon,
     textfield: TextfieldIcon,

packages/form-js-viewer/src/render/components/index.js

@@ -8,6 +8,7 @@ import Image from './form-fields/Image';
 import Numberfield from './form-fields/Number';
 import Radio from './form-fields/Radio';
 import Select from './form-fields/Select';
+import Spacer from './form-fields/Spacer';
 import Taglist from './form-fields/Taglist';
 import Text from './form-fields/Text';
 import Textfield from './form-fields/Textfield';
@@ -24,6 +25,7 @@ export {
   Numberfield,
   Radio,
   Select,
+  Spacer,
   Taglist,
   Text,
   Textfield,
@@ -40,6 +42,7 @@ export const formFields = [
   Datetime,
   Radio,
   Select,
+  Spacer,
   Taglist,
   Text,
   Textfield,