From 4b7eb7e47538c962123b2de6b1e20ffe19b072fb Mon Sep 17 00:00:00 2001
From: Valentin Serra <valentin.serra@camunda.com>
Date: Thu, 7 Mar 2024 08:51:12 +0100
Subject: [PATCH] fix: display groups with no outline with a dashed outline in
 the editor

Closes #1084
---
 packages/form-js-editor/assets/form-js-editor-base.css    | 7 +++++++
 .../form-js-editor/src/render/components/FormEditor.js    | 8 +++++---
 2 files changed, 12 insertions(+), 3 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 eff77e379..ac9080d55 100644
--- a/packages/form-js-editor/assets/form-js-editor-base.css
+++ b/packages/form-js-editor/assets/form-js-editor-base.css
@@ -263,14 +263,21 @@
   border-color: var(--color-borders-group);
 }
 
+.fjs-editor-container .fjs-children .fjs-element.fjs-dashed-outlined {
+  border-color: var(--color-borders-group);
+  border-style: dashed;
+}
+
 .fjs-editor-container .fjs-children .fjs-element.fjs-editor-selected {
   border-color: var(--color-children-selected-border) !important;
   background-color: var(--color-children-selected-background);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-children .fjs-element:hover.fjs-editor-hovered,
 .fjs-editor-container .fjs-children .fjs-element:focus {
   border-color: var(--color-children-hover-border);
+  border-style: solid;
 }
 
 .fjs-editor-container .fjs-layout-column:first-child > .fjs-element[data-field-type="group"],
diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
index 8161dd952..c059fd588 100644
--- a/packages/form-js-editor/src/render/components/FormEditor.js
+++ b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -172,8 +172,10 @@ function Element(props) {
       classes.push('fjs-editor-selected');
     }
 
-    if (showOutline) {
-      classes.push('fjs-outlined');
+    const grouplike = [ 'group', 'dynamiclist' ].includes(type);
+
+    if (grouplike) {
+      classes.push(showOutline ? 'fjs-outlined' : 'fjs-dashed-outlined');
     }
 
     if (hovered) {
@@ -182,7 +184,7 @@ function Element(props) {
 
     return classes.join(' ');
 
-  }, [ hovered, isSelected, props.class, showOutline ]);
+  }, [ hovered, isSelected, props.class, showOutline, type ]);
 
   const onRemove = (event) => {
     event.stopPropagation();