From 48be57c8be74826b8d54fa690a6669746eb62e84 Mon Sep 17 00:00:00 2001 From: Pascal CESCON - Amoifr Date: Sat, 18 Apr 2026 16:43:38 +0200 Subject: [PATCH 1/4] [Toolkit][Shadcn] Add popover recipe --- src/Toolkit/CHANGELOG.md | 1 + .../popover/examples/Alignments.html.twig | 26 +++ .../shadcn/popover/examples/Basic.html.twig | 11 ++ .../shadcn/popover/examples/Demo.html.twig | 31 +++ .../shadcn/popover/examples/Form.html.twig | 23 +++ .../shadcn/popover/examples/RTL.html.twig | 97 ++++++++++ .../shadcn/popover/examples/Usage.html.twig | 8 + src/Toolkit/kits/shadcn/popover/manifest.json | 12 ++ .../templates/components/Popover.html.twig | 12 ++ .../components/Popover/Content.html.twig | 28 +++ .../components/Popover/Trigger.html.twig | 9 + ...er, code file Alignments.html.twig__1.html | 50 +++++ ...popover, code file Basic.html.twig__1.html | 27 +++ ... popover, code file Demo.html.twig__1.html | 67 +++++++ ...onent popover, code file Demo.html__1.html | 49 +++++ ... popover, code file Form.html.twig__1.html | 51 +++++ ...t popover, code file RTL.html.twig__1.html | 183 ++++++++++++++++++ ...nent popover, code file Usage.html__1.html | 18 ++ 18 files changed, 703 insertions(+) create mode 100644 src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/examples/Form.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/manifest.json create mode 100644 src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig create mode 100644 src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html create mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md index 5ba248f5890..89170fe567a 100644 --- a/src/Toolkit/CHANGELOG.md +++ b/src/Toolkit/CHANGELOG.md @@ -15,6 +15,7 @@ - [Shadcn] Add `collapsible` recipe - [Shadcn] Add `typography` recipe - [Shadcn] Add `toggle-group` recipe +- [Shadcn] Add `popover` recipe ## 2.35 diff --git a/src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig new file mode 100644 index 00000000000..d9440c57009 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig @@ -0,0 +1,26 @@ +
+ + + Start + + + Aligned to start + + + + + Center + + + Aligned to center + + + + + End + + + Aligned to end + + +
diff --git a/src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig new file mode 100644 index 00000000000..aeebc2598ef --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig @@ -0,0 +1,11 @@ + + + Open Popover + + +
+

Dimensions

+

Set the dimensions for the layer.

+
+ + diff --git a/src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig new file mode 100644 index 00000000000..0817444fef8 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig @@ -0,0 +1,31 @@ + + + Open Popover + + +
+
+

Dimensions

+

Set the dimensions for the layer.

+
+
+
+ Width + +
+
+ Max. width + +
+
+ Height + +
+
+ Max. height + +
+
+
+ + diff --git a/src/Toolkit/kits/shadcn/popover/examples/Form.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Form.html.twig new file mode 100644 index 00000000000..54626066d42 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/examples/Form.html.twig @@ -0,0 +1,23 @@ + + + Open Popover + + +
+
+

Dimensions

+

Set the dimensions for the layer.

+
+
+
+ Width + +
+
+ Height + +
+
+
+ + diff --git a/src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig b/src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig new file mode 100644 index 00000000000..29871e1401b --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig @@ -0,0 +1,97 @@ +
+ {# Arabic #} +
+ + + يسار + + +
+

الأبعاد

+

تعيين الأبعاد للطبقة.

+
+ + + + + أعلى + + +
+

الأبعاد

+

تعيين الأبعاد للطبقة.

+
+ + + + + أسفل + + +
+

الأبعاد

+

تعيين الأبعاد للطبقة.

+
+ + + + + يمين + + +
+

الأبعاد

+

تعيين الأبعاد للطبقة.

+
+ + +
+ + {# Hebrew #} +
+ + + שמאל + + +
+

מימדים

+

הגדר את המימדים לשכבה.

+
+ + + + + למעלה + + +
+

מימדים

+

הגדר את המימדים לשכבה.

+
+ + + + + למטה + + +
+

מימדים

+

הגדר את המימדים לשכבה.

+
+ + + + + ימין + + +
+

מימדים

+

הגדר את המימדים לשכבה.

+
+ + +
+
diff --git a/src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig new file mode 100644 index 00000000000..112f78eaa66 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig @@ -0,0 +1,8 @@ + + + Open popover + + + Popover content goes here. + + diff --git a/src/Toolkit/kits/shadcn/popover/manifest.json b/src/Toolkit/kits/shadcn/popover/manifest.json new file mode 100644 index 00000000000..f1ce7a0fe9e --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/manifest.json @@ -0,0 +1,12 @@ +{ + "$schema": "../../../schema-kit-recipe-v1.json", + "type": "component", + "name": "Popover", + "description": "A click-triggered popup that displays rich content, anchored to its trigger.", + "copy-files": { + "templates/": "templates/" + }, + "dependencies": { + "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] + } +} diff --git a/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig b/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig new file mode 100644 index 00000000000..9a804e6dfa0 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig @@ -0,0 +1,12 @@ +{# @prop name string Group name — popovers sharing the same `name` are mutually exclusive (only one open at a time). #} +{# @block content A `Popover:Trigger` and a `Popover:Content` #} +{%- props name = null -%} +
+ {%- block content %}{% endblock -%} +
diff --git a/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig new file mode 100644 index 00000000000..2a308625737 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig @@ -0,0 +1,28 @@ +{# @prop side 'top'|'right'|'bottom'|'left' Which side of the trigger the content appears on. Defaults to `bottom` #} +{# @prop align 'start'|'center'|'end' Alignment along the cross axis. Defaults to `center` #} +{# @block content The content revealed when the popover is open #} +{%- props side = 'bottom', align = 'center' -%} +{%- set _is_horizontal = side in ['left', 'right'] -%} +{%- set _pos = { + top: 'bottom-full mb-2', + bottom: 'top-full mt-2', + left: 'right-full top-1/2 -translate-y-1/2 mr-2', + right: 'left-full top-1/2 -translate-y-1/2 ml-2', +}[side] -%} +{%- if not _is_horizontal -%} + {%- if align == 'start' -%}{%- set _pos = _pos ~ ' start-0' -%} + {%- elseif align == 'center' -%}{%- set _pos = _pos ~ ' start-1/2 -translate-x-1/2 rtl:translate-x-1/2' -%} + {%- else -%}{%- set _pos = _pos ~ ' end-0' -%} + {%- endif -%} +{%- endif -%} + diff --git a/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig new file mode 100644 index 00000000000..4834d56f5d1 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig @@ -0,0 +1,9 @@ +{# @block content The clickable trigger #} + + {%- block content %}{% endblock -%} + diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html new file mode 100644 index 00000000000..1c379b93bc4 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html @@ -0,0 +1,50 @@ + +
+
Start + + +
+
Center + + +
+
End + + +
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html new file mode 100644 index 00000000000..f03ba705a69 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html @@ -0,0 +1,27 @@ + +
Open Popover + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html new file mode 100644 index 00000000000..dbb0c62cd3d --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html @@ -0,0 +1,67 @@ + +
Open Popover + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html new file mode 100644 index 00000000000..5033e7a68d7 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html @@ -0,0 +1,49 @@ + +
Dimensions +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html new file mode 100644 index 00000000000..e7a18fd00a3 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html @@ -0,0 +1,51 @@ + +
Open Popover + + +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html new file mode 100644 index 00000000000..058eaeb91ea --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html @@ -0,0 +1,183 @@ + +
+
+
يسار + + +
+
أعلى + + +
+
أسفل + + +
+
يمين + + +
+
+ +
+
שמאל + + +
+
למעלה + + +
+
למטה + + +
+
ימין + + +
+
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html new file mode 100644 index 00000000000..a9a41f1eeb6 --- /dev/null +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html @@ -0,0 +1,18 @@ + +
Open popover +
\ No newline at end of file From 7ea85dcd5a3b29f7514d8078e63d1c2a3516453f Mon Sep 17 00:00:00 2001 From: Pascal CESCON - Amoifr Date: Thu, 23 Apr 2026 07:46:27 +0200 Subject: [PATCH 2/4] [Toolkit][Shadcn] Move CHANGELOG entry to 3.1 --- src/Toolkit/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Toolkit/CHANGELOG.md b/src/Toolkit/CHANGELOG.md index 89170fe567a..5306a502856 100644 --- a/src/Toolkit/CHANGELOG.md +++ b/src/Toolkit/CHANGELOG.md @@ -5,6 +5,7 @@ - [Flowbite] Add `avatar` recipe - [Flowbite] Add `dropdown` recipe - [Shadcn] Add `hover-card` recipe +- [Shadcn] Add `popover` recipe - [Shadcn] Add `resizable` recipe ## 3.0.0 @@ -15,7 +16,6 @@ - [Shadcn] Add `collapsible` recipe - [Shadcn] Add `typography` recipe - [Shadcn] Add `toggle-group` recipe -- [Shadcn] Add `popover` recipe ## 2.35 From 45d736aa4d7b06bcf7448cfcba6c2b744959547a Mon Sep 17 00:00:00 2001 From: Pascal CESCON - Amoifr Date: Thu, 23 Apr 2026 13:10:42 +0200 Subject: [PATCH 3/4] [Toolkit][Shadcn] Apply `_trigger_attrs` convention to popover Follow up on the review feedback on #3487: the Trigger template should not enforce a specific HTML element but expose a Twig variable with the needed attributes so the consumer can pick their own element (button, link, span...). Since the previous implementation relied on native `
`/`` to handle open/close, replace it with a `
` backed by a new `popover_controller.js` Stimulus controller that handles toggle, outside click, escape and mutual exclusion by `name`. Also drop two orphan snapshots (`Demo.html__1.html`, `Usage.html__1.html`) shipped by mistake and no longer generated by the test suite. --- .../assets/controllers/popover_controller.js | 80 ++++++++++++++++ .../popover/examples/Alignments.html.twig | 12 +-- .../shadcn/popover/examples/Basic.html.twig | 4 +- .../shadcn/popover/examples/Demo.html.twig | 4 +- .../shadcn/popover/examples/Form.html.twig | 4 +- .../shadcn/popover/examples/RTL.html.twig | 32 +++---- .../shadcn/popover/examples/Usage.html.twig | 4 +- src/Toolkit/kits/shadcn/popover/manifest.json | 1 + .../templates/components/Popover.html.twig | 18 +++- .../components/Popover/Content.html.twig | 4 + .../components/Popover/Trigger.html.twig | 19 ++-- ...er, code file Alignments.html.twig__1.html | 36 +++---- ...popover, code file Basic.html.twig__1.html | 12 +-- ... popover, code file Demo.html.twig__1.html | 12 +-- ...onent popover, code file Demo.html__1.html | 49 ---------- ... popover, code file Form.html.twig__1.html | 12 +-- ...t popover, code file RTL.html.twig__1.html | 96 +++++++++---------- ...nent popover, code file Usage.html__1.html | 18 ---- 18 files changed, 223 insertions(+), 194 deletions(-) create mode 100644 src/Toolkit/kits/shadcn/popover/assets/controllers/popover_controller.js delete mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html delete mode 100644 src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html diff --git a/src/Toolkit/kits/shadcn/popover/assets/controllers/popover_controller.js b/src/Toolkit/kits/shadcn/popover/assets/controllers/popover_controller.js new file mode 100644 index 00000000000..fbb78f43ba1 --- /dev/null +++ b/src/Toolkit/kits/shadcn/popover/assets/controllers/popover_controller.js @@ -0,0 +1,80 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static targets = ['trigger', 'content']; + + static values = { + open: { type: Boolean, default: false }, + name: { type: String, default: '' }, + }; + + connect() { + this.updateState(); + } + + toggle(event) { + event?.preventDefault(); + this.openValue = !this.openValue; + } + + close() { + this.openValue = false; + } + + openValueChanged() { + this.updateState(); + + if (this.openValue && this.nameValue) { + window.dispatchEvent(new CustomEvent('popover:open', { + detail: { name: this.nameValue, source: this.element }, + })); + } + } + + handleGroupOpen(event) { + if (!this.nameValue || !this.openValue) { + return; + } + if (event.detail.name !== this.nameValue || event.detail.source === this.element) { + return; + } + this.openValue = false; + } + + handleOutsideClick(event) { + if (!this.openValue || this.element.contains(event.target)) { + return; + } + this.openValue = false; + } + + handleEscape(event) { + if (!this.openValue || event.key !== 'Escape') { + return; + } + this.openValue = false; + this.triggerTargets[0]?.focus(); + } + + updateState() { + const open = this.openValue; + const state = open ? 'open' : 'closed'; + + this.element.dataset.state = state; + + for (const trigger of this.triggerTargets) { + trigger.setAttribute('aria-expanded', String(open)); + trigger.dataset.state = state; + } + + for (const content of this.contentTargets) { + content.dataset.state = state; + content.setAttribute('aria-hidden', String(!open)); + if (open) { + content.removeAttribute('hidden'); + } else { + content.setAttribute('hidden', ''); + } + } + } +} diff --git a/src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig index d9440c57009..47943fdcf79 100644 --- a/src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig +++ b/src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig @@ -1,23 +1,23 @@
- - Start + + Start Aligned to start - - Center + + Center Aligned to center - - End + + End Aligned to end diff --git a/src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig index aeebc2598ef..ea7475323fa 100644 --- a/src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig +++ b/src/Toolkit/kits/shadcn/popover/examples/Basic.html.twig @@ -1,6 +1,6 @@ - - Open Popover + + Open Popover
diff --git a/src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig index 0817444fef8..7b106ae7f89 100644 --- a/src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig +++ b/src/Toolkit/kits/shadcn/popover/examples/Demo.html.twig @@ -1,6 +1,6 @@ - - Open Popover + + Open Popover
diff --git a/src/Toolkit/kits/shadcn/popover/examples/Form.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Form.html.twig index 54626066d42..ebbff568849 100644 --- a/src/Toolkit/kits/shadcn/popover/examples/Form.html.twig +++ b/src/Toolkit/kits/shadcn/popover/examples/Form.html.twig @@ -1,6 +1,6 @@ - - Open Popover + + Open Popover
diff --git a/src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig b/src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig index 29871e1401b..0994ccab395 100644 --- a/src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig +++ b/src/Toolkit/kits/shadcn/popover/examples/RTL.html.twig @@ -2,8 +2,8 @@ {# Arabic #}
- - يسار + + يسار
@@ -13,8 +13,8 @@ - - أعلى + + أعلى
@@ -24,8 +24,8 @@ - - أسفل + + أسفل
@@ -35,8 +35,8 @@ - - يمين + + يمين
@@ -50,8 +50,8 @@ {# Hebrew #}
- - שמאל + + שמאל
@@ -61,8 +61,8 @@ - - למעלה + + למעלה
@@ -72,8 +72,8 @@ - - למטה + + למטה
@@ -83,8 +83,8 @@ - - ימין + + ימין
diff --git a/src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig b/src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig index 112f78eaa66..87298fae8af 100644 --- a/src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig +++ b/src/Toolkit/kits/shadcn/popover/examples/Usage.html.twig @@ -1,6 +1,6 @@ - - Open popover + + Open popover Popover content goes here. diff --git a/src/Toolkit/kits/shadcn/popover/manifest.json b/src/Toolkit/kits/shadcn/popover/manifest.json index f1ce7a0fe9e..927bc9317ce 100644 --- a/src/Toolkit/kits/shadcn/popover/manifest.json +++ b/src/Toolkit/kits/shadcn/popover/manifest.json @@ -4,6 +4,7 @@ "name": "Popover", "description": "A click-triggered popup that displays rich content, anchored to its trigger.", "copy-files": { + "assets/": "assets/", "templates/": "templates/" }, "dependencies": { diff --git a/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig b/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig index 9a804e6dfa0..1f3d8091ad7 100644 --- a/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig +++ b/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig @@ -1,12 +1,22 @@ {# @prop name string Group name — popovers sharing the same `name` are mutually exclusive (only one open at a time). #} +{# @prop open boolean Whether the popover is open on initial render. Defaults to `false` #} {# @block content A `Popover:Trigger` and a `Popover:Content` #} -{%- props name = null -%} -
popover#handleGroupOpen', + 'click@window->popover#handleOutsideClick', + 'keydown.esc@window->popover#handleEscape', + ]|join(' ')|html_attr_type('sst'), + 'data-state': open ? 'open' : 'closed', + ...(name ? {'data-popover-name-value': name} : {}), }) }} > {%- block content %}{% endblock -%} -
+
diff --git a/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig index 2a308625737..ee9361147ad 100644 --- a/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig +++ b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig @@ -20,8 +20,12 @@ class="{{ ('absolute z-50 w-72 rounded-md border bg-popover p-4 text-sm text-popover-foreground shadow-md outline-none ' ~ _pos ~ ' ' ~ attributes.render('class'))|tailwind_merge }}" {{ attributes.defaults({ 'data-slot': 'popover-content', + 'data-popover-target': 'content', 'data-side': side, 'data-align': align, + 'aria-hidden': not _popover_open ? 'true' : 'false', + 'data-state': _popover_open ? 'open' : 'closed', + ...(not _popover_open ? {hidden: ''} : {}), }) }} > {%- block content %}{% endblock -%} diff --git a/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig index 4834d56f5d1..420f6396f19 100644 --- a/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig +++ b/src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig @@ -1,9 +1,10 @@ -{# @block content The clickable trigger #} - - {%- block content %}{% endblock -%} - +{# @block content The clickable trigger (e.g., a `Button`) that opens the popover #} +{%- set popover_trigger_attrs = { + 'data-slot': 'popover-trigger', + 'data-popover-target': 'trigger', + 'data-action': 'click->popover#toggle'|html_attr_type('sst'), + 'aria-haspopup': 'dialog', + 'aria-expanded': _popover_open ? 'true' : 'false', + 'data-state': _popover_open ? 'open' : 'closed', +} -%} +{%- block content %}{% endblock -%} diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html index 1c379b93bc4..16d33a93317 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Alignments.html.twig__1.html @@ -5,24 +5,24 @@ ```twig
- - Start + + Start Aligned to start - - Center + + Center Aligned to center - - End + + End Aligned to end @@ -32,19 +32,19 @@ ``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-
Start - -
-
Center - - +
+ + -
-
End - - +
+ + -
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html index f03ba705a69..d2235791697 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html @@ -4,8 +4,8 @@ - Code: ```twig - - Open Popover + + Open Popover
@@ -16,12 +16,12 @@

Dimensions

``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
Open Popover - -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html index dbb0c62cd3d..0280f6e0ace 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html.twig__1.html @@ -4,8 +4,8 @@ - Code: ```twig - - Open Popover + + Open Popover
@@ -36,9 +36,9 @@

Dimensions

``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
Open Popover - -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html deleted file mode 100644 index 5033e7a68d7..00000000000 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Demo.html__1.html +++ /dev/null @@ -1,49 +0,0 @@ - -
Dimensions -
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html index e7a18fd00a3..8322440c81e 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Form.html.twig__1.html @@ -4,8 +4,8 @@ - Code: ```twig - - Open Popover + + Open Popover
@@ -28,9 +28,9 @@

Dimensions

``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
Open Popover - -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html index 058eaeb91ea..dc3150a635a 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file RTL.html.twig__1.html @@ -7,8 +7,8 @@ {# Arabic #}
- - يسار + + يسار
@@ -18,8 +18,8 @@

الأبعاد

- - أعلى + + أعلى
@@ -29,8 +29,8 @@

الأبعاد

- - أسفل + + أسفل
@@ -40,8 +40,8 @@

الأبعاد

- - يمين + + يمين
@@ -55,8 +55,8 @@

الأبعاد

{# Hebrew #}
- - שמאל + + שמאל
@@ -66,8 +66,8 @@

מימדים

- - למעלה + + למעלה
@@ -77,8 +77,8 @@

מימדים

- - למטה + + למטה
@@ -88,8 +88,8 @@

מימדים

- - ימין + + ימין
@@ -104,80 +104,80 @@

מימדים

- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
-
يسار - -
-
أعلى - - +
+ + -
-
أسفل - - +
+ + -
-
يمين - - +
+ + -
+
-
שמאל - -
-
למעלה - - +
+ + -
-
למטה - - +
+ + -
-
ימין - - +
+ + -
+
\ No newline at end of file diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html deleted file mode 100644 index a9a41f1eeb6..00000000000 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Usage.html__1.html +++ /dev/null @@ -1,18 +0,0 @@ - -
Open popover -
\ No newline at end of file From 73f1640fe520d7eccd4dc110fbacabea6dfb3981 Mon Sep 17 00:00:00 2001 From: Pascal CESCON - Amoifr Date: Mon, 27 Apr 2026 11:05:21 +0200 Subject: [PATCH 4/4] [Toolkit][Shadcn] popover: drop unused group/popover marker class --- .../templates/components/Popover.html.twig | 2 +- ...pover, code file Alignments.html.twig__1.html | 6 +++--- ...nt popover, code file Basic.html.twig__1.html | 2 +- ...ent popover, code file Demo.html.twig__1.html | 2 +- ...ent popover, code file Form.html.twig__1.html | 2 +- ...nent popover, code file RTL.html.twig__1.html | 16 ++++++++-------- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig b/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig index 1f3d8091ad7..03ccb0ae36a 100644 --- a/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig +++ b/src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig @@ -4,7 +4,7 @@ {%- props name = null, open = false -%} {%- set _popover_open = open -%}
-
+
-
+
-
+
diff --git a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html index d2235791697..1e8f19e45c9 100644 --- a/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html +++ b/src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component popover, code file Basic.html.twig__1.html @@ -16,7 +16,7 @@

Dimensions

``` - Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): --> -
+