Symfony UX 2.35 Released

Smart HTML Attribute Merging in Twig Components

Contributed by Hugo Alliaume in #3408

When spreading multiple attribute sets onto a Twig component, conflicting keys would silently overwrite each other. This was especially problematic with Stimulus data-action attributes: if a button needed to trigger both a Dialog and a Tooltip, only the last data-action survived.

ComponentAttributes now supports the AttributeValueInterface introduced in twig/html-extra 3.24. Combined with the html_attr_type and html_attr_merge Twig filters, you can declare how attribute values should be merged. For example, using the sst (space-separated tokens) strategy:

1
2
3
4
5
6
7
8
9
10
11
12
13

{# Both data-action values will be concatenated #}
{%- set dialog_attrs = {
    'data-action': 'click->dialog#open'|html_attr_type('sst'),
} -%}
{%- set tooltip_attrs = {
    'data-action':
        'mouseenter->tooltip#show mouseleave->tooltip#hide'
        |html_attr_type('sst'),
} -%}

<twig:Button {{ ...{}|html_attr_merge(dialog_attrs, tooltip_attrs) }}>
    Edit Profile
</twig:Button>

The rendered data-action will contain all three Stimulus descriptors instead of only the last set.

Toolkit Triggers Now Merge Attributes Correctly

Contributed by Hugo Alliaume in #3409

Building on the new attribute merging support, the Shadcn Dialog, AlertDialog and Tooltip trigger components now use html_attr_type('sst') for their data-action attributes. This means you can nest a Button inside both a Dialog trigger and a Tooltip trigger, and all Stimulus actions will be preserved automatically:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<twig:Dialog id="edit_profile">
    <twig:Dialog:Trigger>
        <twig:Tooltip id="tooltip_edit">
            <twig:Tooltip:Trigger>
                <twig:Button
                    variant="outline"
                    {{ ...dialog_trigger_attrs
                        |html_attr_merge(tooltip_trigger_attrs)
                    }}
                >
                    Edit Profile
                </twig:Button>
            </twig:Tooltip:Trigger>
            <twig:Tooltip:Content>
                <p>Click to edit your profile</p>
            </twig:Tooltip:Content>
        </twig:Tooltip>
    </twig:Dialog:Trigger>
    {# ... #}
</twig:Dialog>

Autocomplete: New reset_on_focus Option

Contributed by Zairig Imad in #3422

By default, Tom Select caches the results fetched via AJAX. When a user searches, selects an option, then clears the selection and refocuses the field, the dropdown still shows the stale search results instead of the full default list.

The new reset_on_focus option clears the cached options and refetches the default list every time the field receives focus:

1
2
3
4
5

// src/Form/OrderType.php
$builder->add('customer', AutocompleteChoiceType::class, [
    'autocomplete_url' => '/api/customers',
    'reset_on_focus' => true,
]);

Flowbite 4.0 Kit for Toolkit

Contributed by Dubois Callens Gregoire in #3368

A new flowbite-4 kit joins the existing Shadcn kit in Symfony UX Toolkit. This first batch includes the Alert, Badge and ButtonGroup components, styled with Flowbite 4.0 and Tailwind CSS.

Toggle Component for the Shadcn Kit

Contributed by Zairig Imad in #3421

The Shadcn kit gains a new Toggle component with variant (default or outline), size (sm, default, lg) and pressed props:

1
2
3

<twig:Toggle variant="outline" pressed>
    <twig:ux:icon name="lucide:bold" />
</twig:Toggle>

Svelte Package Deprecated

Contributed by Hugo Alliaume in #3444

The symfony/ux-svelte package is now deprecated and will be removed in Symfony UX 3.0. Usage numbers have been declining steadily, and the Svelte ecosystem makes deep Symfony integration difficult compared to other frontend frameworks. If you are currently using UX Svelte, consider migrating to UX React, UX Vue, or Twig Components.

Easier JS Dependency Installation for UX Native

Contributed by Hugo Alliaume in #3414

UX Native now ships an assets/ directory with a package.json, allowing Symfony Flex to automatically register the @hotwired/hotwire-native-bridge JavaScript dependency in your package.json or importmap.php. Previously, the Maker command tried to check for the dependency at runtime, but the check was broken. This fix makes the installation seamless.

Full Changelog

• #3444 [Svelte] Deprecate the package (@Kocal)
• #3422 [Autocomplete] Add option clear_on_focus (@zairigimad)
• #3368 [Toolkit][Flowbite] Add kit Flowbite 4.0 base (@DcgRG)
• #3421 [Toolkit][Shadcn] Add Toggle (@zairigimad)
• #3407 [Chartjs][Icons][Map][Notify][React][Svelte][Toolkit][Turbo][TwigComponent][Vue][Native] Allow Symfony UX 3.x packages (@Kocal)
• #3414 [Native] Introduce assets/ to ease installation of @hotwired/hotwire-native-bridge JS dependency (@Kocal)
• #3409 [Toolkit] Embrace html_attr_type from twig/html-extra:^3.24 to correctly merge trigger's attributes (@Kocal)
• #3408 [TwigComponent] Add support for AttributeValueInterface from twig/html-extra:^3.24.0 in ComponentAttributes (@Kocal)