Fix(web-twig): Don't render the name attribute of Checkbox when e…

…mpty
lmc-eu · Apr 16, 2024 · cfece12 · cfece12
1 parent fe61e86
commit cfece12
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 6 deletions.
diff --git a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
@@ -33,6 +33,7 @@
 {# Attributes #}
 {%- set _checkedAttr = _isChecked ? 'checked' : null -%}
 {%- set _disabledAttr = _isDisabled ? 'disabled' : null -%}
+{%- set _nameAttr = _name ? 'name="' ~ _name | escape('html_attr') ~ '"' : null -%}
 {%- set _requiredAttr = _isRequired ? 'required' : null -%}
 {%- set _valueAttr = _value ? 'value=' ~ _value : null -%}
 
@@ -53,10 +54,10 @@
         {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
         type="checkbox"
         id="{{ _id }}"
-        name="{{ _name }}"
         class="{{ _inputClassName }}"
         {{ _checkedAttr }}
         {{ _disabledAttr }}
+        {{ _nameAttr | raw }}"
         {{ _requiredAttr }}
         {{ _valueAttr }} {# Intentionally without `raw` to prevent XSS. #}
     />

diff --git a/...es/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig b/...es/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig
@@ -1,3 +1,49 @@
-{% set inputProps = { "data-validate": "true" } %}
+<Checkbox />
+
+<!-- Render with minimum props -->
+<Checkbox
+    id="example-id"
+    label="Example label"
+/>
+
+<!-- Render checked -->
+<Checkbox
+    id="example-id"
+    isChecked
+    label="Example label"
+/>
 
-<Checkbox id="example" name="example" isRequired isChecked validationState="danger" validationText="validation failed" inputProps={ inputProps } />
+<!-- Render with helper text -->
+<Checkbox
+    id="example-id"
+    label="Example label"
+    helperText="Example helper text"
+/>
+
+<!-- Render with hidden label -->
+<Checkbox
+    id="example-id"
+    isLabelHidden
+    label="Example label"
+/>
+
+<!-- Render with all props -->
+{% set inputProps = { "data-validate": "true" } %}
+<Checkbox
+    helperText="Example helper text"
+    id="example-id"
+    inputProps={ inputProps }
+    isChecked
+    isDisabled
+    isItem
+    isLabelHidden
+    isRequired
+    label="Example label"
+    name="example-name"
+    UNSAFE_helperText="UNSAFE helper text"
+    UNSAFE_label="UNSAFE label"
+    UNSAFE_validationState="UNSAFE validation state"
+    validationState="danger"
+    validationText="Example validation text"
+    value="example value"
+/>
diff --git a/.../src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html b/.../src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
@@ -5,6 +5,19 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Checkbox Checkbox--danger"><input data-validate="true" type="checkbox" id="example" name="example" class="Checkbox__input" checked required=""> <span class="Checkbox__text"> <span class="Checkbox__validationText">validation failed</span></span></label>
+    <label for="" class="Checkbox"><input type="checkbox" id="" class="Checkbox__input"></label> 
+    <!-- Render with minimum props -->
+     <label for="example-id" class="Checkbox"><input type="checkbox" id="example-id" class="Checkbox__input">
+    <span class="Checkbox__text"><span class="Checkbox__label">Example label</span></span></label> 
+    <!-- Render checked -->
+     <label for="example-id" class="Checkbox"><input type="checkbox" id="example-id" class="Checkbox__input" checked> <span class="Checkbox__text"><span class="Checkbox__label">Example label</span></span></label> 
+    <!-- Render with helper text -->
+     <label for="example-id" class="Checkbox"><input type="checkbox" id="example-id" class="Checkbox__input">
+    <span class="Checkbox__text"><span class="Checkbox__label">Example label</span> <span class="Checkbox__helperText">Example helper text</span></span></label> <!-- Render with hidden label -->
+     <label for="example-id" class="Checkbox"><input type="checkbox" id="example-id" class="Checkbox__input">
+    <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden">Example
+    label</span></span></label> <!-- Render with all props -->
+     <label for="example-id" class="Checkbox Checkbox--disabled Checkbox--item Checkbox--danger"><input data-validate="true" type="checkbox" id="example-id" class="Checkbox__input" checked disabled name="example-name" required="" value=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--hidden Checkbox__label--required">UNSAFE label</span> <span class="Checkbox__helperText">UNSAFE helper text</span> <span class="Checkbox__validationText">Example validation
+    text</span></span></label>
   </body>
 </html>
diff --git a/.../Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html b/.../Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefaultPure.twig.snap.html
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Checkbox Checkbox--danger"><input type="checkbox" id="example" name="example" class="Checkbox__input" required=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--required">some label</span> <span class="Checkbox__validationText">validation
+    <label for="example" class="Checkbox Checkbox--danger"><input type="checkbox" id="example" class="Checkbox__input" name="example" required=""> <span class="Checkbox__text"><span class="Checkbox__label Checkbox__label--required">some label</span> <span class="Checkbox__validationText">validation
     failed</span></span></label>
   </body>
 </html>
diff --git a/...wig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html b/...wig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxItem.twig.snap.html
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="Checkbox Checkbox--item"><input type="checkbox" id="example" name="example" class="Checkbox__input"> <span class="Checkbox__text"><span class="Checkbox__label">item</span> <span class="Checkbox__helperText">helperText</span></span></label>
+    <label for="example" class="Checkbox Checkbox--item"><input type="checkbox" id="example" class="Checkbox__input" name="example"> <span class="Checkbox__text"><span class="Checkbox__label">item</span> <span class="Checkbox__helperText">helperText</span></span></label>
   </body>
 </html>