[Toolkit][Shadcn] Add examples for combined *Dialog and Tooltip triggers

Related to https://github.com/symfony/ux/pull/3409
This commit is contained in:
Hugo Alliaume
2026-03-23 22:14:32 +01:00
parent ae24196d02
commit 2f3869eefd
4 changed files with 71 additions and 56 deletions

View File

@@ -63,12 +63,12 @@
"tales-from-a-dev/twig-tailwind-extra": "^1.0",
"tempest/highlight": "^2.11.2",
"twbs/bootstrap": "^5.3.3",
"twig/extra-bundle": "^3.22",
"twig/html-extra": "^3.22",
"twig/intl-extra": "^3.22",
"twig/markdown-extra": "^3.22",
"twig/string-extra": "^3.22",
"twig/twig": "^3.22"
"twig/extra-bundle": "^3.24",
"twig/html-extra": "^3.24",
"twig/intl-extra": "^3.24",
"twig/markdown-extra": "^3.24",
"twig/string-extra": "^3.24",
"twig/twig": "^3.24"
},
"require-dev": {
"kocal/phpstan-symfony-ux": "^1.1",
@@ -124,7 +124,8 @@
"preferred-install": {
"*": "dist"
},
"sort-packages": true
"sort-packages": true,
"bump-after-update": true
},
"extra": {
"symfony": {

101
composer.lock generated
View File

@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "bb86f3da0386aecb435b535921fef74a",
"content-hash": "48e0ac0defd8739764f564cfb817a119",
"packages": [
{
"name": "composer/semver",
@@ -8390,12 +8390,12 @@
"source": {
"type": "git",
"url": "https://github.com/symfony/ux-toolkit.git",
"reference": "ee284e0f6eba1fcf88aeb33f04948420fe6dd4f1"
"reference": "5175d712ba8a7aee2093640d714df879a2452e53"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/ux-toolkit/zipball/ee284e0f6eba1fcf88aeb33f04948420fe6dd4f1",
"reference": "ee284e0f6eba1fcf88aeb33f04948420fe6dd4f1",
"url": "https://api.github.com/repos/symfony/ux-toolkit/zipball/5175d712ba8a7aee2093640d714df879a2452e53",
"reference": "5175d712ba8a7aee2093640d714df879a2452e53",
"shasum": ""
},
"require": {
@@ -8417,8 +8417,8 @@
"symfony/stopwatch": "^6.4|^7.0|^8.0",
"symfony/ux-icons": "^2.18",
"tales-from-a-dev/twig-tailwind-extra": "^1.0.0",
"twig/extra-bundle": "^3.19|^4.0",
"twig/html-extra": "^3.19",
"twig/extra-bundle": "^3.24|^4.0",
"twig/html-extra": "^3.24",
"zenstruck/console-test": "^1.7"
},
"default-branch": true,
@@ -8491,7 +8491,7 @@
"type": "tidelift"
}
],
"time": "2026-03-15T19:08:45+00:00"
"time": "2026-03-23T21:15:37+00:00"
},
{
"name": "symfony/ux-translator",
@@ -8685,12 +8685,12 @@
"source": {
"type": "git",
"url": "https://github.com/symfony/ux-twig-component.git",
"reference": "0a300088327d1b766733fdcd81ae4a77852d6177"
"reference": "e2e686be45fb365b9b6271dc5223e8993928c056"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/0a300088327d1b766733fdcd81ae4a77852d6177",
"reference": "0a300088327d1b766733fdcd81ae4a77852d6177",
"url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/e2e686be45fb365b9b6271dc5223e8993928c056",
"reference": "e2e686be45fb365b9b6271dc5223e8993928c056",
"shasum": ""
},
"require": {
@@ -8712,7 +8712,9 @@
"symfony/phpunit-bridge": "^6.0|^7.0|^8.0",
"symfony/stimulus-bundle": "^2.9.1",
"symfony/twig-bundle": "^5.4|^6.0|^7.0|^8.0",
"symfony/webpack-encore-bundle": "^1.15|^2.3.0"
"symfony/webpack-encore-bundle": "^1.15|^2.3.0",
"twig/extra-bundle": "^3.10.3",
"twig/html-extra": "^3.10.3"
},
"default-branch": true,
"type": "symfony-bundle",
@@ -8765,7 +8767,7 @@
"type": "tidelift"
}
],
"time": "2025-12-25T09:25:01+00:00"
"time": "2026-03-23T12:55:11+00:00"
},
{
"name": "symfony/ux-typed",
@@ -9737,16 +9739,16 @@
},
{
"name": "twig/extra-bundle",
"version": "v3.22.2",
"version": "v3.24.0",
"source": {
"type": "git",
"url": "https://github.com/twigphp/twig-extra-bundle.git",
"reference": "09de9be7f6c0d19ede7b5a1dbfcfb2e9d1e0ea9e"
"reference": "6a621fcb1f28aa9ea7b34a99047ae0cdf5b834c9"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/twig-extra-bundle/zipball/09de9be7f6c0d19ede7b5a1dbfcfb2e9d1e0ea9e",
"reference": "09de9be7f6c0d19ede7b5a1dbfcfb2e9d1e0ea9e",
"url": "https://api.github.com/repos/twigphp/twig-extra-bundle/zipball/6a621fcb1f28aa9ea7b34a99047ae0cdf5b834c9",
"reference": "6a621fcb1f28aa9ea7b34a99047ae0cdf5b834c9",
"shasum": ""
},
"require": {
@@ -9795,7 +9797,7 @@
"twig"
],
"support": {
"source": "https://github.com/twigphp/twig-extra-bundle/tree/v3.22.2"
"source": "https://github.com/twigphp/twig-extra-bundle/tree/v3.24.0"
},
"funding": [
{
@@ -9807,20 +9809,20 @@
"type": "tidelift"
}
],
"time": "2025-12-05T08:51:53+00:00"
"time": "2026-02-07T08:07:38+00:00"
},
{
"name": "twig/html-extra",
"version": "v3.22.1",
"version": "v3.24.0",
"source": {
"type": "git",
"url": "https://github.com/twigphp/html-extra.git",
"reference": "d56d33315bce2b19ed815f8feedce85448736568"
"reference": "313900fb98b371b006a55b1a29241a192634be13"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/html-extra/zipball/d56d33315bce2b19ed815f8feedce85448736568",
"reference": "d56d33315bce2b19ed815f8feedce85448736568",
"url": "https://api.github.com/repos/twigphp/html-extra/zipball/313900fb98b371b006a55b1a29241a192634be13",
"reference": "313900fb98b371b006a55b1a29241a192634be13",
"shasum": ""
},
"require": {
@@ -9863,7 +9865,7 @@
"twig"
],
"support": {
"source": "https://github.com/twigphp/html-extra/tree/v3.22.1"
"source": "https://github.com/twigphp/html-extra/tree/v3.24.0"
},
"funding": [
{
@@ -9875,20 +9877,20 @@
"type": "tidelift"
}
],
"time": "2025-11-02T11:00:49+00:00"
"time": "2026-03-17T07:24:08+00:00"
},
{
"name": "twig/intl-extra",
"version": "v3.22.1",
"version": "v3.24.0",
"source": {
"type": "git",
"url": "https://github.com/twigphp/intl-extra.git",
"reference": "93ac31e53cdd3f2e541f42690cd0c54ca8138ab1"
"reference": "32f15a38d45a8d0ec11bc8a3d97d3ac2a261499f"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/intl-extra/zipball/93ac31e53cdd3f2e541f42690cd0c54ca8138ab1",
"reference": "93ac31e53cdd3f2e541f42690cd0c54ca8138ab1",
"url": "https://api.github.com/repos/twigphp/intl-extra/zipball/32f15a38d45a8d0ec11bc8a3d97d3ac2a261499f",
"reference": "32f15a38d45a8d0ec11bc8a3d97d3ac2a261499f",
"shasum": ""
},
"require": {
@@ -9927,7 +9929,7 @@
"twig"
],
"support": {
"source": "https://github.com/twigphp/intl-extra/tree/v3.22.1"
"source": "https://github.com/twigphp/intl-extra/tree/v3.24.0"
},
"funding": [
{
@@ -9939,20 +9941,20 @@
"type": "tidelift"
}
],
"time": "2025-11-02T11:00:49+00:00"
"time": "2026-01-17T13:57:47+00:00"
},
{
"name": "twig/markdown-extra",
"version": "v3.22.0",
"version": "v3.24.0",
"source": {
"type": "git",
"url": "https://github.com/twigphp/markdown-extra.git",
"reference": "fb6f952082e3a7d62a75c8be2c8c47242d3925fb"
"reference": "67a11120356e034a5bbc70c5b9b9a4d0f31ca06e"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/markdown-extra/zipball/fb6f952082e3a7d62a75c8be2c8c47242d3925fb",
"reference": "fb6f952082e3a7d62a75c8be2c8c47242d3925fb",
"url": "https://api.github.com/repos/twigphp/markdown-extra/zipball/67a11120356e034a5bbc70c5b9b9a4d0f31ca06e",
"reference": "67a11120356e034a5bbc70c5b9b9a4d0f31ca06e",
"shasum": ""
},
"require": {
@@ -9999,7 +10001,7 @@
"twig"
],
"support": {
"source": "https://github.com/twigphp/markdown-extra/tree/v3.22.0"
"source": "https://github.com/twigphp/markdown-extra/tree/v3.24.0"
},
"funding": [
{
@@ -10011,20 +10013,20 @@
"type": "tidelift"
}
],
"time": "2025-09-15T05:57:37+00:00"
"time": "2026-02-07T08:07:38+00:00"
},
{
"name": "twig/string-extra",
"version": "v3.22.1",
"version": "v3.24.0",
"source": {
"type": "git",
"url": "https://github.com/twigphp/string-extra.git",
"reference": "d5f16e0bec548bc96cce255b5f43d90492b8ce13"
"reference": "6ec8f2e8ca9b2193221a02cb599dc92c36384368"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/string-extra/zipball/d5f16e0bec548bc96cce255b5f43d90492b8ce13",
"reference": "d5f16e0bec548bc96cce255b5f43d90492b8ce13",
"url": "https://api.github.com/repos/twigphp/string-extra/zipball/6ec8f2e8ca9b2193221a02cb599dc92c36384368",
"reference": "6ec8f2e8ca9b2193221a02cb599dc92c36384368",
"shasum": ""
},
"require": {
@@ -10066,7 +10068,7 @@
"unicode"
],
"support": {
"source": "https://github.com/twigphp/string-extra/tree/v3.22.1"
"source": "https://github.com/twigphp/string-extra/tree/v3.24.0"
},
"funding": [
{
@@ -10078,20 +10080,20 @@
"type": "tidelift"
}
],
"time": "2025-11-02T11:00:49+00:00"
"time": "2025-12-02T14:45:16+00:00"
},
{
"name": "twig/twig",
"version": "v3.22.2",
"version": "v3.24.0",
"source": {
"type": "git",
"url": "https://github.com/twigphp/Twig.git",
"reference": "946ddeafa3c9f4ce279d1f34051af041db0e16f2"
"reference": "a6769aefb305efef849dc25c9fd1653358c148f0"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/twigphp/Twig/zipball/946ddeafa3c9f4ce279d1f34051af041db0e16f2",
"reference": "946ddeafa3c9f4ce279d1f34051af041db0e16f2",
"url": "https://api.github.com/repos/twigphp/Twig/zipball/a6769aefb305efef849dc25c9fd1653358c148f0",
"reference": "a6769aefb305efef849dc25c9fd1653358c148f0",
"shasum": ""
},
"require": {
@@ -10101,7 +10103,8 @@
"symfony/polyfill-mbstring": "^1.3"
},
"require-dev": {
"phpstan/phpstan": "^2.0",
"php-cs-fixer/shim": "^3.0@stable",
"phpstan/phpstan": "^2.0@stable",
"psr/container": "^1.0|^2.0",
"symfony/phpunit-bridge": "^5.4.9|^6.4|^7.0"
},
@@ -10145,7 +10148,7 @@
],
"support": {
"issues": "https://github.com/twigphp/Twig/issues",
"source": "https://github.com/twigphp/Twig/tree/v3.22.2"
"source": "https://github.com/twigphp/Twig/tree/v3.24.0"
},
"funding": [
{
@@ -10157,7 +10160,7 @@
"type": "tidelift"
}
],
"time": "2025-12-14T11:28:47+00:00"
"time": "2026-03-17T21:31:11+00:00"
}
],
"packages-dev": [

View File

@@ -11,4 +11,10 @@
{% block examples %}
### Opened by default
{{ toolkit_code_example(kit_id.value, component.name, 'Opened by default', {height: '400px'}) }}
### With Tooltip
Combining `Dialog` with `Tooltip` requires merging their `*_trigger_attrs` attributes using the [`html_attr_merge`](https://twig.symfony.com/doc/3.x/filters/html_attr_merge.html) Twig filter, available in `twig/html-extra:^3.24`.
{{ toolkit_code_example(kit_id.value, component.name, 'With Tooltip', {height: '400px'}) }}
{% endblock %}

View File

@@ -14,4 +14,9 @@
### Custom close button
{{ toolkit_code_example(kit_id.value, component.name, 'Custom close button', {height: '400px'}) }}
### With Tooltip
Combining `Dialog` with `Tooltip` requires merging their `*_trigger_attrs` attributes using the [`html_attr_merge`](https://twig.symfony.com/doc/3.x/filters/html_attr_merge.html) Twig filter, available in `twig/html-extra:^3.24`.
{{ toolkit_code_example(kit_id.value, component.name, 'With Tooltip', {height: '400px'}) }}
{% endblock %}