From 404a75041564f074f1caac955c4aab6cff190703 Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Thu, 11 Jan 2024 13:49:56 +0100
Subject: [PATCH] fix: improve text prompts of empty group components

Closes #965
---
 .../assets/form-js-editor-base.css            |  9 +++++-
 .../src/render/components/FormEditor.js       | 28 +++++++++++++------
 2 files changed, 27 insertions(+), 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
index 704f9528d..9a05e0f65 100644
--- 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
index 3948f0d9c..90dadea0e 100644
--- 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;