From 90c2451521956b78e7bf3278652112907ac64b21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Tue, 14 May 2024 11:33:49 +0200
Subject: [PATCH] BREAKING CHANGE(web-twig): ID prop is required for all Form
 components #DS-885

---
 packages/web-twig/DEPRECATIONS-v3.md             | 16 ----------------
 .../Resources/components/Checkbox/Checkbox.twig  |  7 +------
 .../__tests__/__fixtures__/checkboxDefault.twig  | 10 +++++-----
 .../__snapshots__/checkboxDefault.twig.snap.html | 14 ++++++--------
 .../src/Resources/components/Radio/Radio.twig    |  2 +-
 .../src/Resources/components/Select/Select.twig  |  2 +-
 6 files changed, 14 insertions(+), 37 deletions(-)

diff --git a/packages/web-twig/DEPRECATIONS-v3.md b/packages/web-twig/DEPRECATIONS-v3.md
index cd3ed48510..4dd7c68913 100644
--- a/packages/web-twig/DEPRECATIONS-v3.md
+++ b/packages/web-twig/DEPRECATIONS-v3.md
@@ -8,22 +8,6 @@ Following deprecations will be removed in version 3 of the _spirit-web-twig_ pac
 
 ## Deprecations
 
-### Required `id` Prop For Form Components
-
-The `id` prop will be required for all form components.
-
-Related components:
-
-- `Checkbox`
-- `HelperText`
-- `Radio`
-- `Select`
-- `ValidationText`
-
-#### Migration Guide
-
-Add `id` prop to the form components.
-
 ### Dropdown `id` Prop
 
 The `id` prop will be mandatory for the `Dropdown` component.
diff --git a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
index 96103840db..15b7c12aaa 100644
--- a/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
+++ b/packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig
@@ -1,7 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _helperText = props.helperText | default(null) -%}
-{%- set _id = props.id | default(null) -%}
+{%- set _id = props.id -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isChecked = props.isChecked | default(false) -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
@@ -44,11 +44,6 @@
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 {%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
 
-{# Deprecations #}
-{% if not _id %}
-    {% deprecated 'Checkbox: The "id" property will be required starting from the next major version.' %}
-{% endif %}
-
 <label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
         {{ inputProps(props, _allowedInputAttributes, _inputProps) }}
diff --git a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig
index efd59c286c..055a80377e 100644
--- a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig
+++ b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig
@@ -2,27 +2,27 @@
 
 <!-- Render with minimum props -->
 <Checkbox
-    id="example-id"
+    id="example-id-min"
     label="Example label"
 />
 
 <!-- Render checked -->
 <Checkbox
-    id="example-id"
+    id="example-id-checked"
     isChecked
     label="Example label"
 />
 
 <!-- Render with helper text -->
 <Checkbox
-    id="example-id"
+    id="example-id-helper"
     label="Example label"
     helperText="Example helper text"
 />
 
 <!-- Render with hidden label -->
 <Checkbox
-    id="example-id"
+    id="example-id-hidden"
     isLabelHidden
     label="Example label"
 />
@@ -31,7 +31,7 @@
 {% set inputProps = { "data-validate": "true" } %}
 <Checkbox
     helperText="Example helper text"
-    id="example-id"
+    id="example-id-all"
     inputProps={ inputProps }
     isChecked
     isDisabled
diff --git a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
index cdd2990938..8db82384da 100644
--- a/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html
@@ -7,17 +7,15 @@
   <body>
     <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">
+     <label for="example-id-min" class="Checkbox"><input type="checkbox" id="example-id-min" 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 for="example-id-checked" class="Checkbox"><input type="checkbox" id="example-id-checked" 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-helper" class="Checkbox"><input type="checkbox" id="example-id-helper" 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-hidden" class="Checkbox"><input type="checkbox" id="example-id-hidden" 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
+     <label for="example-id-all" class="Checkbox Checkbox--disabled Checkbox--item Checkbox--danger"><input data-validate="true" type="checkbox" id="example-id-all" 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/packages/web-twig/src/Resources/components/Radio/Radio.twig b/packages/web-twig/src/Resources/components/Radio/Radio.twig
index 7b6256cda7..678997a26f 100644
--- a/packages/web-twig/src/Resources/components/Radio/Radio.twig
+++ b/packages/web-twig/src/Resources/components/Radio/Radio.twig
@@ -1,6 +1,6 @@
 {# API #}
 {%- set _autocomplete = props.autocomplete | default(null) -%}
-{%- set _id = props.id | default(null) -%}
+{%- set _id = props.id -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isChecked = props.isChecked | default(false) -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
diff --git a/packages/web-twig/src/Resources/components/Select/Select.twig b/packages/web-twig/src/Resources/components/Select/Select.twig
index e3cafa3d09..47adfe6712 100644
--- a/packages/web-twig/src/Resources/components/Select/Select.twig
+++ b/packages/web-twig/src/Resources/components/Select/Select.twig
@@ -1,7 +1,7 @@
 {# API #}
 {%- set props = props | default([]) -%}
 {%- set _helperText = props.helperText | default(null) -%}
-{%- set _id = props.id | default(null) -%}
+{%- set _id = props.id -%}
 {%- set _inputProps = props.inputProps | default([]) -%}
 {%- set _isDisabled = props.isDisabled | default(false) -%}
 {%- set _isFluid = props.isFluid | default(false) -%}