fix: improve text prompts of empty group components

Closes #965
bpmn-io · Jan 16, 2024 · 404a750 · 404a750
1 parent 0f043bd
commit 404a750
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 10 deletions.
diff --git a/packages/form-js-editor/assets/form-js-editor-base.css b/packages/form-js-editor/assets/form-js-editor-base.css
@@ -341,12 +341,19 @@
   height: 80px;
   width: calc(100% - 4rem);
   position: absolute;
+  container-type: size;
 }
 
-.fjs-editor-container .fjs-empty-component span {
+.fjs-editor-container .fjs-empty-component .fjs-empty-component-text {
   color: var(--cds-text-disabled, var(--color-grey-225-10-55));
 }
 
+@container (width < 100px) {
+  .fjs-empty-component-text {
+    display: none;
+  }
+}
+
 .fjs-editor-container .fjs-empty-editor {
   display: flex;
   align-items: center;

diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -65,24 +65,34 @@ function ContextPad(props) {
   );
 }
 
-function Empty(props) {
-  if (props.field.type === 'default') {
-    return <div class="fjs-empty-editor">
+function EmptyGroup() {
+  return (
+    <div class="fjs-empty-component">
+      <span class="fjs-empty-component-text">Drag and drop components here.</span>
+    </div>
+  );
+}
+
+function EmptyForm() {
+  return (
+    <div class="fjs-empty-editor">
       <div class="fjs-empty-editor-card">
         <EmptyFormIcon />
         <h2>Build your form</h2>
         <span>Drag and drop components here to start designing.</span>
         <span>Use the preview window to test your form.</span>
       </div>
-    </div>;
-  }
+    </div>
+  );
+}
 
-  if (props.field.type === 'group') {
-    return <div class="fjs-empty-component"><span>Drag and drop components here.</span></div>;
+function Empty(props) {
+  if ([ 'group', 'dynamiclist' ].includes(props.field.type)) {
+    return <EmptyGroup />;
   }
 
-  if (props.field.type === 'dynamiclist') {
-    return <div class="fjs-empty-component"><span>Drag and drop components here <br /> to create a repeatable list item.</span></div>;
+  if (props.field.type === 'default') {
+    return <EmptyForm />;
   }
 
   return null;