Fix(web-twig): Enable rendering Symfony Forms fields inside FieldGroup

lmc-eu · Feb 15, 2024 · 46e825b · 46e825b
1 parent 84ef862
commit 46e825b
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 16 deletions.
diff --git a/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig b/packages/web-twig/src/Resources/components/FieldGroup/FieldGroup.twig
@@ -64,11 +64,9 @@
             </div>
         {% endif %}
     {% endif %}
-    {% if block('content') is not empty %}
-        <div class="{{ _fieldsClassName }}">
-            {% block content %}{% endblock %}
-        </div>
-    {% endif %}
+    <div class="{{ _fieldsClassName }}">
+        {% block content %}{% endblock %}
+    </div>
     <HelperText
         className="{{ _helperTextClassName }}"
         id="{{ _helperTextId }}"

diff --git a/packages/web-twig/src/Resources/components/FieldGroup/README.md b/packages/web-twig/src/Resources/components/FieldGroup/README.md
@@ -14,6 +14,9 @@ validation messages for all fields in the group.
 ⚠️ **The FieldGroup component does not provide all necessary semantics and any styling to its child fields. It is up
 to the developer to configure the child fields correctly.**
 
+⚠️ Remember the FieldGroup component required to be used with content.
+Otherwise, it is useless. So if used dynamically, make sure to have removed the FieldGroup correctly if there is no content.
+
 👉 The FieldGroup component implements the `<fieldset>` HTML element. Read more about the advantages and limitations in
 the [`web` implementation][gh-web-field-group-html] of `FieldGroup`.
 

diff --git a/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__fixtures__/fieldGroup.twig b/packages/web-twig/src/Resources/components/FieldGroup/__tests__/__fixtures__/fieldGroup.twig
@@ -1,5 +1,3 @@
-<FieldGroup id="fieldGroup"></FieldGroup>
-
 <!-- Render with children -->
 <FieldGroup id="fieldGroupWithChildren">
     <div>Item 1</div>
@@ -12,20 +10,32 @@
     id="fieldGroupHiddenLabel"
     isLabelHidden
     label="Label"
-></FieldGroup>
+>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+</FieldGroup>
 
 <!-- Render in danger state -->
 <FieldGroup
     id="fieldGroupValidationDanger"
     validationState="danger"
-></FieldGroup>
+>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+</FieldGroup>
 
 <!-- Render with allowed HTML attributes -->
 <FieldGroup
     form="myFormId"
     id="fieldGroupWithAllowedHTMLAttributes"
     name="myFieldGroupName"
-></FieldGroup>
+>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+</FieldGroup>
 
 <!-- Render with UNSAFE props -->
 <FieldGroup
@@ -34,7 +44,11 @@
     UNSAFE_label="<span>UNSAFE label text</span>"
     UNSAFE_validationText="<span>UNSAFE validation text</span>"
     validationState="danger"
-/>
+>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+</FieldGroup>
 
 <!-- Render with all props -->
 <FieldGroup

diff --git a/...wig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html b/...wig/src/Resources/components/FieldGroup/__tests__/__snapshots__/fieldGroup.twig.snap.html
@@ -1,14 +1,10 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<!-- Render with children --><html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>
     </title>
   </head>
   <body>
-    <fieldset id="fieldGroup" class="FieldGroup">
-    </fieldset>
-    <!-- Render with children -->
-
     <fieldset id="fieldGroupWithChildren" class="FieldGroup">
       <div class="FieldGroup__fields">
         <div>
@@ -28,14 +24,53 @@
 
     <fieldset id="fieldGroupHiddenLabel" class="FieldGroup">
       <legend class="accessibility-hidden">Label</legend>
+      <div class="FieldGroup__fields">
+        <div>
+          Item 1
+        </div>
+
+        <div>
+          Item 2
+        </div>
+
+        <div>
+          Item 3
+        </div>
+      </div>
     </fieldset>
     <!-- Render in danger state -->
 
     <fieldset id="fieldGroupValidationDanger" class="FieldGroup FieldGroup--danger">
+      <div class="FieldGroup__fields">
+        <div>
+          Item 1
+        </div>
+
+        <div>
+          Item 2
+        </div>
+
+        <div>
+          Item 3
+        </div>
+      </div>
     </fieldset>
     <!-- Render with allowed HTML attributes -->
 
     <fieldset id="fieldGroupWithAllowedHTMLAttributes" form="myFormId" name="myFieldGroupName" class="FieldGroup">
+      <div class="FieldGroup__fields">
+        <div>
+          Item 1
+        </div>
+
+        <div>
+          Item 2
+        </div>
+
+        <div>
+          Item 3
+        </div>
+      </div>
     </fieldset>
     <!-- Render with UNSAFE props -->
 
@@ -45,6 +80,20 @@
         <span>UNSAFE label text</span>
       </div>
 
+      <div class="FieldGroup__fields">
+        <div>
+          Item 1
+        </div>
+
+        <div>
+          Item 2
+        </div>
+
+        <div>
+          Item 3
+        </div>
+      </div>
+
       <div class="FieldGroup__helperText" id="fieldGroupWithUnsafeProps__helperText">
         <span>UNSAFE helper text</span>
       </div>