BREAKING CHANGE(web-twig): Add mandatory id prop for Dropdown compone…

…nt #DS-1190
lmc-eu · May 14, 2024 · cec6ada · cec6ada
1 parent 5bf5151
commit cec6ada
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig b/packages/web-twig/src/Resources/components/Dropdown/Dropdown.twig
@@ -3,25 +3,28 @@
 {%- 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' -%}
 
 {# 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) }}
     {{ styleProp(_styleProps) }}
     {{ classProp(_classNames) }}
     {{ _dataFullWidthModeAttr | raw }}
     {{ _dataPlacementAttr | raw }}
+    {{ _idAttr | raw }}
 >
     {%- block content %}{% endblock -%}
 </{{ _elementType }}>
diff --git a/...eb-twig/src/Resources/components/Dropdown/__tests__/__snapshots__/dropdown.twig.snap.html b/...eb-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>