Refactor(web-twig): Mark the id prop in form fields as required sta…

…rting from next major version

As of now, some form field components require the `id` prop and some do not.

An ID is necessary to:

1. connect the input to its label,
2. connect the input the its helper texts and validation texts (coming soon).

Last but not least, a consistent approach to API is expected from all form field components.

packages/web-twig/src/Resources/components/Checkbox/Checkbox.twig

@@ -43,6 +43,11 @@
 {%- 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) }}

packages/web-twig/src/Resources/components/Radio/Radio.twig

@@ -39,6 +39,11 @@
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 {%- set _allowedInputAttributes = [ 'autocomplete' ] -%}
 
+{# Deprecations #}
+{% if not _id %}
+    {% deprecated 'Radio: The "id" property will be required starting from the next major version.' %}
+{% endif %}
+
 <label {{ _labelForAttr | raw }} {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
         {{ inputProps(props, _allowedInputAttributes, _inputProps) }}

packages/web-twig/src/Resources/components/Select/Select.twig

@@ -39,6 +39,11 @@
 {%- set _labelClassNames = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 
+{# Deprecations #}
+{% if not _id %}
+    {% deprecated 'Select: The "id" property will be required from the next major version.' %}
+{% endif %}
+
 <div {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <label for="{{ _id }}" {{ classProp(_labelClassNames) }}>
         {%- if _unsafeLabel %}{{ _unsafeLabel | raw }}{% else %}{{ _label }}{% endif -%}