Refactor(web-twig): Wrap ValidationText list in div

lmc-eu · Nov 25, 2024 · c5c083e · c5c083e
1 parent 4486006
commit c5c083e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 34 deletions.
diff --git a/packages/web-twig/src/Resources/components/Field/ValidationText.twig b/packages/web-twig/src/Resources/components/Field/ValidationText.twig
@@ -12,11 +12,13 @@
 
 {% if _validationState and _validationText and not _unsafeValidationText %}
     {%- if _validationText is iterable -%}
-        <ul class="{{ _className }}" {{ _idAttr | raw }}>
-            {% for _validationTextItem in _validationText %}
-                <li>{{ _validationTextItem }}</li>
-            {% endfor %}
-        </ul>
+        <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
+            <ul>
+                {% for _validationTextItem in _validationText %}
+                    <li>{{ _validationTextItem }}</li>
+                {% endfor %}
+            </ul>
+        </{{ _elementType }}>
     {% else %}
         <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
             {{ _validationText }}
@@ -25,11 +27,13 @@
 {% endif %}
 {% if _validationState and _unsafeValidationText %}
     {%- if _unsafeValidationText is iterable -%}
-        <ul class="{{ _className }}" {{ _idAttr | raw }}>
-            {% for _validationTextItem in _unsafeValidationText %}
-                <li>{{ _validationTextItem | raw }}</li>
-            {% endfor %}
-        </ul>
+        <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
+            <ul>
+                {% for _validationTextItem in _unsafeValidationText %}
+                    <li>{{ _validationTextItem | raw }}</li>
+                {% endfor %}
+            </ul>
+        </{{ _elementType }}>
     {% else %}
         <{{ _elementType }} class="{{ _className }}" {{ _idAttr | raw }}>
             {{ _unsafeValidationText | raw }}

diff --git a/...twig/src/Resources/components/Field/__tests__/__snapshots__/validationText.twig.snap.html b/...twig/src/Resources/components/Field/__tests__/__snapshots__/validationText.twig.snap.html
@@ -10,13 +10,15 @@
     </div>
     <!-- Render with iterable validation text -->
 
-    <ul class="myClass">
-      <li>Validation text 1
-      </li>
+    <div class="myClass">
+      <ul>
+        <li>Validation text 1
+        </li>
 
-      <li>Validation text 2
-      </li>
-    </ul>
+        <li>Validation text 2
+        </li>
+      </ul>
+    </div>
     <!-- Render with all props -->
      <span class="myClass" id="validation-text-all-props"><span>Unsafe validation text</span></span>
   </body>

diff --git a/.../Resources/components/Select/__tests__/__snapshots__/selectValidationState.twig.snap.html b/.../Resources/components/Select/__tests__/__snapshots__/selectValidationState.twig.snap.html
@@ -78,13 +78,15 @@
         </div>
       </div>
 
-      <ul class="Select__validationText" id="select-danger-validation-text">
-        <li>Danger validation text
-        </li>
+      <div class="Select__validationText" id="select-danger-validation-text">
+        <ul>
+          <li>Danger validation text
+          </li>
 
-        <li>Second danger validation text
-        </li>
-      </ul>
+          <li>Second danger validation text
+          </li>
+        </ul>
+      </div>
     </div>
   </body>
 </html>
diff --git a/...s/components/TextArea/__tests__/__snapshots__/textAreaWithMultilineMessage.twig.snap.html b/...s/components/TextArea/__tests__/__snapshots__/textAreaWithMultilineMessage.twig.snap.html
@@ -9,13 +9,15 @@
       <label for="example" class="TextArea__label">TextArea</label> 
 
       <textarea id="example" name="" class="TextArea__input" aria-describedby="example-validation-text"></textarea>
-      <ul class="TextArea__validationText" id="example-validation-text">
-        <li>Danger validation text
-        </li>
+      <div class="TextArea__validationText" id="example-validation-text">
+        <ul>
+          <li>Danger validation text
+          </li>
 
-        <li>Second danger validation text
-        </li>
-      </ul>
+          <li>Second danger validation text
+          </li>
+        </ul>
+      </div>
     </div>
   </body>
 </html>
diff --git a/...components/TextField/__tests__/__snapshots__/textFieldWithMultilineMessage.twig.snap.html b/...components/TextField/__tests__/__snapshots__/textFieldWithMultilineMessage.twig.snap.html
@@ -7,13 +7,15 @@
   <body>
     <div class="TextField TextField--danger">
       <label for="example" class="TextField__label">Text field</label> <input type="text" id="example" name="example" class="TextField__input" aria-describedby="example-validation-text">
-      <ul class="TextField__validationText" id="example-validation-text">
-        <li>Danger validation text
-        </li>
+      <div class="TextField__validationText" id="example-validation-text">
+        <ul>
+          <li>Danger validation text
+          </li>
 
-        <li>Second danger validation text
-        </li>
-      </ul>
+          <li>Second danger validation text
+          </li>
+        </ul>
+      </div>
     </div>
   </body>
 </html>