BREAKING CHANGE(web-twig): ID prop is required for all Form component…

…s #DS-885
lmc-eu · May 20, 2024 · 90c2451 · 90c2451
1 parent 8e4ab60
commit 90c2451
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 37 deletions.
diff --git 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
@@ -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/...es/web-twig/src/Resources/components/Checkbox/__tests__/__fixtures__/checkboxDefault.twig b/...es/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/.../src/Resources/components/Checkbox/__tests__/__snapshots__/checkboxDefault.twig.snap.html b/.../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
@@ -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
@@ -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) -%}