Skip to content

[Toolkit] Embrace html_attr_type from twig/html-extra:^3.24 to correctly merge trigger's attributes #3409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Kocal merged 1 commit into from
Mar 23, 2026
Merged

[Toolkit] Embrace html_attr_type from twig/html-extra:^3.24 to correctly merge trigger's attributes #3409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/Toolkit/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# CHANGELOG

## 2.35.0

- [Shadcn] Use `html_attr_type` filter from `twig/html-extra:^3.24` for composable trigger attributes
- [Shadcn] Rename `trigger_attrs` to `alert_dialog_trigger_attrs` in `AlertDialog:Trigger`
- [Shadcn] Rename `trigger_attrs` to `dialog_trigger_attrs` in `Dialog:Trigger`
- [Shadcn] Rename `close_attrs` to `dialog_close_attrs` in `Dialog:Close`
- [Shadcn] Rename `trigger_attrs` to `tooltip_trigger_attrs` in `Tooltip:Trigger`

## 2.33.0

- [Shadcn] Add `accordion` recipe
Expand Down
4 changes: 2 additions & 2 deletions src/Toolkit/composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@
},
"require-dev": {
"symfony/finder": "^6.4|^7.0|^8.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",
"symfony/http-client": "^6.4|^7.0|^8.0",
"symfony/stopwatch": "^6.4|^7.0|^8.0",
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/alert-dialog/examples/Demo.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:AlertDialog id="delete_account">
<twig:AlertDialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
<twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
</twig:AlertDialog:Trigger>
<twig:AlertDialog:Content>
<twig:AlertDialog:Header>
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/alert-dialog/examples/Opened by default.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:AlertDialog id="delete_account" open>
<twig:AlertDialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
<twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
</twig:AlertDialog:Trigger>
<twig:AlertDialog:Content>
<twig:AlertDialog:Header>
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/alert-dialog/examples/Usage.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:AlertDialog id="delete_account">
<twig:AlertDialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
<twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
</twig:AlertDialog:Trigger>
<twig:AlertDialog:Content>
<twig:AlertDialog:Header>
Expand Down
27 changes: 27 additions & 0 deletions src/Toolkit/kits/shadcn/alert-dialog/examples/With Tooltip.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<twig:AlertDialog id="delete_account_with_tooltip">
<twig:AlertDialog:Trigger>
<twig:Tooltip id="tooltip-alert-dialog">
<twig:Tooltip:Trigger>
<twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs|html_attr_merge(tooltip_trigger_attrs) }}>
Delete Account
</twig:Button>
</twig:Tooltip:Trigger>
<twig:Tooltip:Content>
<p>This will permanently delete your account</p>
</twig:Tooltip:Content>
</twig:Tooltip>
</twig:AlertDialog:Trigger>
<twig:AlertDialog:Content>
<twig:AlertDialog:Header>
<twig:AlertDialog:Title>Are you absolutely sure?</twig:AlertDialog:Title>
<twig:AlertDialog:Description>
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
</twig:AlertDialog:Description>
</twig:AlertDialog:Header>
<twig:AlertDialog:Footer>
<twig:AlertDialog:Cancel>Cancel</twig:AlertDialog:Cancel>
<twig:AlertDialog:Action>Continue</twig:AlertDialog:Action>
</twig:AlertDialog:Footer>
</twig:AlertDialog:Content>
</twig:AlertDialog>
7 changes: 6 additions & 1 deletion src/Toolkit/kits/shadcn/alert-dialog/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
},
"dependencies": {
"recipe": ["button"],
"composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
"composer": [
"twig/extra-bundle",
"twig/html-extra:^3.24.0",
"tales-from-a-dev/twig-tailwind-extra:^1.0.0",
"symfony/ux-twig-component:^2.35"
]
}
}
4 changes: 2 additions & 2 deletions src/Toolkit/kits/shadcn/alert-dialog/templates/components/AlertDialog/Trigger.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{# @block content The trigger element (e.g., a `Button`) that opens the dialog when clicked #}
{%- set trigger_attrs = {
'data-action': 'click->alert-dialog#open',
{%- set alert_dialog_trigger_attrs = {
'data-action': 'click->alert-dialog#open'|html_attr_type('sst'),
'data-alert-dialog-target': 'trigger',
'aria-haspopup': 'dialog',
'aria-expanded': 'false',
Expand Down
4 changes: 2 additions & 2 deletions src/Toolkit/kits/shadcn/dialog/examples/Custom close button.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Dialog id="share_link">
<twig:Dialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Share</twig:Button>
<twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Share</twig:Button>
</twig:Dialog:Trigger>
<twig:Dialog:Content class="sm:max-w-md">
<twig:Dialog:Header>
Expand All @@ -17,7 +17,7 @@
</div>
<twig:Dialog:Footer class="sm:justify-start">
<twig:Dialog:Close>
<twig:Button type="button" variant="secondary" {{ ...close_attrs }}>
<twig:Button type="button" variant="secondary" {{ ...dialog_close_attrs }}>
Close
</twig:Button>
</twig:Dialog:Close>
Expand Down
4 changes: 2 additions & 2 deletions src/Toolkit/kits/shadcn/dialog/examples/Demo.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Dialog id="delete_account">
<twig:Dialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Open Dialog</twig:Button>
<twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
</twig:Dialog:Trigger>
<twig:Dialog:Content class="sm:max-w-[425px]">
<twig:Dialog:Header>
Expand All @@ -21,7 +21,7 @@
</div>
<twig:Dialog:Footer>
<twig:Dialog:Close>
<twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
<twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
</twig:Dialog:Close>
<twig:Button type="submit">Save changes</twig:Button>
</twig:Dialog:Footer>
Expand Down
4 changes: 2 additions & 2 deletions src/Toolkit/kits/shadcn/dialog/examples/Opened by default.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Dialog id="delete_account" open>
<twig:Dialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Open Dialog</twig:Button>
<twig:Button variant="outline" {{ ...dialog_trigger_attrs }}>Open Dialog</twig:Button>
</twig:Dialog:Trigger>
<twig:Dialog:Content class="sm:max-w-[425px]">
<twig:Dialog:Header>
Expand All @@ -21,7 +21,7 @@
</div>
<twig:Dialog:Footer>
<twig:Dialog:Close>
<twig:Button variant="outline" {{ ...close_attrs }}>Cancel</twig:Button>
<twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
</twig:Dialog:Close>
<twig:Button type="submit">Save changes</twig:Button>
</twig:Dialog:Footer>
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/dialog/examples/Usage.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Dialog id="delete_account">
<twig:Dialog:Trigger>
<twig:Button {{ ...trigger_attrs }}>Open</twig:Button>
<twig:Button {{ ...dialog_trigger_attrs }}>Open</twig:Button>
</twig:Dialog:Trigger>
<twig:Dialog:Content>
<twig:Dialog:Header>
Expand Down
38 changes: 38 additions & 0 deletions src/Toolkit/kits/shadcn/dialog/examples/With Tooltip.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<twig:Dialog id="delete_account">
<twig:Dialog:Trigger>
<twig:Tooltip id="tooltip-alert-dialog">
<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>A super useful tooltip</p>
</twig:Tooltip:Content>
</twig:Tooltip>
</twig:Dialog:Trigger>
<twig:Dialog:Content class="sm:max-w-[425px]">
<twig:Dialog:Header>
<twig:Dialog:Title>Edit profile</twig:Dialog:Title>
<twig:Dialog:Description>
Make changes to your profile here. Click save when you&apos;re done.
</twig:Dialog:Description>
</twig:Dialog:Header>
<div class="grid gap-4">
<div class="grid gap-3">
<twig:Label for="name">Name</twig:Label>
<twig:Input id="name" name="name" value="Pedro Duarte" />
</div>
<div class="grid gap-3">
<twig:Label for="username">Username</twig:Label>
<twig:Input id="username" name="username" value="@peduarte" />
</div>
</div>
<twig:Dialog:Footer>
<twig:Dialog:Close>
<twig:Button variant="outline" {{ ...dialog_close_attrs }}>Cancel</twig:Button>
</twig:Dialog:Close>
<twig:Button type="submit">Save changes</twig:Button>
</twig:Dialog:Footer>
</twig:Dialog:Content>
</twig:Dialog>
5 changes: 3 additions & 2 deletions src/Toolkit/kits/shadcn/dialog/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@
"composer": [
"symfony/ux-icons",
"twig/extra-bundle",
"twig/html-extra:^3.12.0",
"tales-from-a-dev/twig-tailwind-extra:^1.0.0"
"twig/html-extra:^3.24.0",
"tales-from-a-dev/twig-tailwind-extra:^1.0.0",
"symfony/ux-twig-component:^2.35"
]
}
}
4 changes: 2 additions & 2 deletions src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Close.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{# @block content The close trigger element (e.g., a `Button`) that closes the dialog when clicked #}
{%- set close_attrs = {
'data-action': 'click->dialog#close',
{%- set dialog_close_attrs = {
'data-action': 'click->dialog#close'|html_attr_type('sst'),
} -%}
{%- block content %}{% endblock -%}
4 changes: 2 additions & 2 deletions src/Toolkit/kits/shadcn/dialog/templates/components/Dialog/Trigger.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{# @block content The trigger element (e.g., a `Button`) that opens the dialog when clicked #}
{%- set trigger_attrs = {
'data-action': 'click->dialog#open',
{%- set dialog_trigger_attrs = {
'data-action': 'click->dialog#open'|html_attr_type('sst'),
'data-dialog-target': 'trigger',
'aria-haspopup': 'dialog',
} -%}
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/tooltip/examples/Demo.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Tooltip id="tooltip-demo">
<twig:Tooltip:Trigger>
<twig:Button {{ ...trigger_attrs }} variant="outline">Hover</twig:Button>
<twig:Button {{ ...tooltip_trigger_attrs }} variant="outline">Hover</twig:Button>
</twig:Tooltip:Trigger>
<twig:Tooltip:Content>
<p>Add to library</p>
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/tooltip/examples/Disabled Button.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Tooltip id="tooltip-disabled-button">
<twig:Tooltip:Trigger>
<twig:Button {{ ...trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
<twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" disabled>Disabled</twig:Button>
</twig:Tooltip:Trigger>
<twig:Tooltip:Content>
<p>This feature is currently unavailable</p>
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/tooltip/examples/Side.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{% for side in ['left', 'top', 'bottom', 'right'] %}
<twig:Tooltip id="tooltip-side-{{ side }}">
<twig:Tooltip:Trigger>
<twig:Button {{ ...trigger_attrs }} variant="outline" class="w-fit">
<twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" class="w-fit">
{{ side|capitalize }}
</twig:Button>
</twig:Tooltip:Trigger>
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/tooltip/examples/Usage.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Tooltip id="my-tooltip">
<twig:Tooltip:Trigger>
<twig:Button {{ ...trigger_attrs }}>Hover</twig:Button>
<twig:Button {{ ...tooltip_trigger_attrs }}>Hover</twig:Button>
</twig:Tooltip:Trigger>
<twig:Tooltip:Content>
<p>Add to library</p>
Expand Down
2 changes: 1 addition & 1 deletion src/Toolkit/kits/shadcn/tooltip/examples/With Keyboard Shortcut.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<twig:Tooltip id="tooltip-with-keyboard-shortcut">
<twig:Tooltip:Trigger>
<twig:Button {{ ...trigger_attrs }} variant="outline" size="icon-sm">
<twig:Button {{ ...tooltip_trigger_attrs }} variant="outline" size="icon-sm">
<twig:ux:icon name="lucide:save" />
</twig:Button>
</twig:Tooltip:Trigger>
Expand Down
7 changes: 6 additions & 1 deletion src/Toolkit/kits/shadcn/tooltip/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@
"templates/": "templates/"
},
"dependencies": {
"composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
"composer": [
"twig/extra-bundle",
"twig/html-extra:^3.24.0",
"tales-from-a-dev/twig-tailwind-extra:^1.0.0",
"symfony/ux-twig-component:^2.35"
]
}
}
4 changes: 2 additions & 2 deletions src/Toolkit/kits/shadcn/tooltip/templates/components/Tooltip/Trigger.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{# @block content The element that triggers the tooltip on hover/focus #}
{%- set trigger_attrs = {
{%- set tooltip_trigger_attrs = {
id: _tooltip_trigger_id,
'aria-describedby': _tooltip_content_id,
'data-slot': 'tooltip-trigger',
'data-tooltip-target': 'trigger',
'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide',
'data-action': 'mouseenter->tooltip#show mouseleave->tooltip#hide focus->tooltip#show blur->tooltip#hide'|html_attr_type('sst'),
} -%}
{%- block content %}{% endblock -%}
2 changes: 1 addition & 1 deletion ...ntRendering with data set Kit shadcn, component alert-dialog, code file Demo.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
```twig
<twig:AlertDialog id="delete_account">
<twig:AlertDialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
<twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
</twig:AlertDialog:Trigger>
<twig:AlertDialog:Content>
<twig:AlertDialog:Header>
Expand Down
2 changes: 1 addition & 1 deletion ...ith data set Kit shadcn, component alert-dialog, code file Opened by default.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
```twig
<twig:AlertDialog id="delete_account" open>
<twig:AlertDialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
<twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
</twig:AlertDialog:Trigger>
<twig:AlertDialog:Content>
<twig:AlertDialog:Header>
Expand Down
2 changes: 1 addition & 1 deletion ...tRendering with data set Kit shadcn, component alert-dialog, code file Usage.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
```twig
<twig:AlertDialog id="delete_account">
<twig:AlertDialog:Trigger>
<twig:Button variant="outline" {{ ...trigger_attrs }}>Show Dialog</twig:Button>
<twig:Button variant="outline" {{ ...alert_dialog_trigger_attrs }}>Show Dialog</twig:Button>
</twig:AlertDialog:Trigger>
<twig:AlertDialog:Content>
<twig:AlertDialog:Header>
Expand Down
Loading
Loading