From cec6adaae39d6aaf77bd2c0749766eeda3c19ab6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20=C4=8Curda?= <jakub.curda@almacareer.com>
Date: Fri, 10 May 2024 13:57:00 +0200
Subject: [PATCH] BREAKING CHANGE(web-twig): Add mandatory id prop for Dropdown
 component #DS-1190

---
 .../web-twig/src/Resources/components/Dropdown/Dropdown.twig | 5 ++++-
 .../Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
index 95bda1f3ff..cd7ccdcfa3 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
+++ b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
@@ -3,6 +3,7 @@
 {%- set _fullWidthMode = props.fullWidthMode | default(null)  -%}
 {%- set _elementType = props.elementType | default('div') -%}
 {%- set _placement = props.placement | default('bottom-start') -%}
+{%- set _id = props.id -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Dropdown' -%}
@@ -10,11 +11,12 @@
 {# Attributes #}
 {%- set _dataFullWidthModeAttr = _fullWidthMode ? 'data-spirit-fullwidthmode="' ~ _fullWidthMode | escape('html_attr') ~ '"' : null -%}
 {%- set _dataPlacementAttr = _placement ? 'data-spirit-placement="' ~ _placement | escape('html_attr') ~ '"' : null -%}
+{%- set _idAttr = _id ? 'id="' ~ _id | escape('html_attr') ~ '"' : null -%}
 
 {# Miscellaneous #}
 {%- set _styleProps = useStyleProps(props) -%}
 {%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
-{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-placement']) -%}
+{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['data-spirit-placement', 'id']) -%}
 
 <{{ _elementType }}
     {{ mainProps(_mainPropsWithoutReservedAttributes) }}
@@ -22,6 +24,7 @@
     {{ classProp(_classNames) }}
     {{ _dataFullWidthModeAttr | raw }}
     {{ _dataPlacementAttr | raw }}
+    {{ _idAttr | raw }}
 >
     {%- block content %}{% endblock -%}
 </{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
index 7a2cbb30e1..0f0fef1e16 100644
--- a/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html
@@ -10,7 +10,7 @@
     </div>
     <!-- Render with all props -->
 
-    <aside id="my-dropdown" class="Dropdown" data-spirit-fullwidthmode="mobile-only" data-spirit-placement="top-end">
+    <aside class="Dropdown" data-spirit-fullwidthmode="mobile-only" data-spirit-placement="top-end" id="my-dropdown">
       content
     </aside>
   </body>