mirror of
https://github.com/symfony/ux-twig-component.git
synced 2026-03-23 23:52:21 +01:00
Close https://github.com/twigphp/Twig/issues/4790, replace https://github.com/twigphp/Twig/pull/4791. This PR update `ComponentAttributes` to support `AttributeValueInterface` from Twig 3.24 with `html_attr_type` and HTML attributes merging strategy. This helps resolve situations where merging HTML attributes needs to be more sophisticated than a simple `array_merge`. For example in UX Toolkit, we have an issue where it's not possible to use a single `<twig:Button>` with `Dialog` and `Tooltip` triggers, both triggers define a `trigger_attrs` with some attributes that may conflict. Here a simplified version: ``` {%- set dialog_trigger_attrs = { 'data-action': 'click->dialog#open', } -%} {%- set tooltip_trigger_attrs = { 'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide', } -%} <twig:Button {{ ...dialog_trigger_attrs }} {{ ...tooltip_trigger_attrs }} /> ``` Here, only `data-action="mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide"` will be rendered, the value from `dialog_trigger_attrs` is purely ignored. By supporting the HTML attributes merging strategy introduced in Twig HTML Extra 3.24, we can use the new Twig filter `html_attr_type`: ```twig {%- set dialog_trigger_attrs = { 'data-action': 'click->dialog#open'|html_attr_type('sst'), } -%} {%- set tooltip_trigger_attrs = { 'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide'|html_attr_type('sst'), } -%} ``` Combined to `html_attr_merge` (that return an array where some values are an instance of `Twig\Extra\Html\HtmlAttr\AttributeValueInterface`), the following example will correctly render `data-action="click->dialog#open mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide"`: ```twig <twig:Button {{ ...{}|html_attr_merge(dialog_trigger_attrs, tooltip_trigger_attrs) }} /> ```