-
-
Notifications
You must be signed in to change notification settings - Fork 415
[Toolkit][Shadcn] Add popover recipe #3487
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.
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
Open
Amoifr
wants to merge
4
commits into
symfony:3.x
Choose a base branch
from
Amoifr:feat/toolkit-shadcn-popover
base: 3.x
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
48be57c
[Toolkit][Shadcn] Add popover recipe
Amoifr 7ea85dc
[Toolkit][Shadcn] Move CHANGELOG entry to 3.1
Amoifr 45d736a
[Toolkit][Shadcn] Apply `_trigger_attrs` convention to popover
Amoifr 73f1640
[Toolkit][Shadcn] popover: drop unused group/popover marker class
Amoifr File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
src/Toolkit/kits/shadcn/popover/assets/controllers/popover_controller.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', ''); | ||
| } | ||
| } | ||
| } | ||
| } |
26 changes: 26 additions & 0 deletions
26
src/Toolkit/kits/shadcn/popover/examples/Alignments.html.twig
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <div class="flex gap-6"> | ||
| <twig:Popover name="alignments-demo"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Start</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content align="start" class="w-40"> | ||
| Aligned to start | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="alignments-demo"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Center</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content align="center" class="w-40"> | ||
| Aligned to center | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="alignments-demo"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>End</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content align="end" class="w-40"> | ||
| Aligned to end | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <twig:Popover> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>Open Popover</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content align="start"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">Dimensions</h4> | ||
| <p class="text-xs text-muted-foreground">Set the dimensions for the layer.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <twig:Popover> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>Open Popover</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content align="start" class="w-80"> | ||
| <div class="grid gap-4"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">Dimensions</h4> | ||
| <p class="text-xs text-muted-foreground">Set the dimensions for the layer.</p> | ||
| </div> | ||
| <div class="grid gap-2"> | ||
| <div class="grid grid-cols-3 items-center gap-4"> | ||
| <twig:Label for="demo-width">Width</twig:Label> | ||
| <input id="demo-width" class="col-span-2 h-8 rounded-md border px-2 text-sm" value="100%"> | ||
| </div> | ||
| <div class="grid grid-cols-3 items-center gap-4"> | ||
| <twig:Label for="demo-max-width">Max. width</twig:Label> | ||
| <input id="demo-max-width" class="col-span-2 h-8 rounded-md border px-2 text-sm" value="300px"> | ||
| </div> | ||
| <div class="grid grid-cols-3 items-center gap-4"> | ||
| <twig:Label for="demo-height">Height</twig:Label> | ||
| <input id="demo-height" class="col-span-2 h-8 rounded-md border px-2 text-sm" value="25px"> | ||
| </div> | ||
| <div class="grid grid-cols-3 items-center gap-4"> | ||
| <twig:Label for="demo-max-height">Max. height</twig:Label> | ||
| <input id="demo-max-height" class="col-span-2 h-8 rounded-md border px-2 text-sm" value="none"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <twig:Popover> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>Open Popover</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content align="start" class="w-64"> | ||
| <div class="grid gap-4"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">Dimensions</h4> | ||
| <p class="text-xs text-muted-foreground">Set the dimensions for the layer.</p> | ||
| </div> | ||
| <div class="grid gap-3"> | ||
| <div class="flex items-center gap-3"> | ||
| <twig:Label for="form-width" class="w-1/2">Width</twig:Label> | ||
| <input id="form-width" class="h-8 w-full rounded-md border px-2 text-sm" value="100%"> | ||
| </div> | ||
| <div class="flex items-center gap-3"> | ||
| <twig:Label for="form-height" class="w-1/2">Height</twig:Label> | ||
| <input id="form-height" class="h-8 w-full rounded-md border px-2 text-sm" value="25px"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <div class="flex flex-col items-center gap-12 py-12"> | ||
| {# Arabic #} | ||
| <div dir="rtl" class="flex flex-wrap justify-center gap-2"> | ||
| <twig:Popover name="rtl-ar"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>يسار</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="left"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">الأبعاد</h4> | ||
| <p class="text-xs text-muted-foreground">تعيين الأبعاد للطبقة.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="rtl-ar"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>أعلى</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="top"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">الأبعاد</h4> | ||
| <p class="text-xs text-muted-foreground">تعيين الأبعاد للطبقة.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="rtl-ar"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>أسفل</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="bottom"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">الأبعاد</h4> | ||
| <p class="text-xs text-muted-foreground">تعيين الأبعاد للطبقة.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="rtl-ar"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>يمين</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="right"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">الأبعاد</h4> | ||
| <p class="text-xs text-muted-foreground">تعيين الأبعاد للطبقة.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| </div> | ||
|
|
||
| {# Hebrew #} | ||
| <div dir="rtl" class="flex flex-wrap justify-center gap-2"> | ||
| <twig:Popover name="rtl-he"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>שמאל</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="left"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">מימדים</h4> | ||
| <p class="text-xs text-muted-foreground">הגדר את המימדים לשכבה.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="rtl-he"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>למעלה</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="top"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">מימדים</h4> | ||
| <p class="text-xs text-muted-foreground">הגדר את המימדים לשכבה.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="rtl-he"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>למטה</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="bottom"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">מימדים</h4> | ||
| <p class="text-xs text-muted-foreground">הגדר את המימדים לשכבה.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| <twig:Popover name="rtl-he"> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>ימין</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content side="right"> | ||
| <div class="space-y-1"> | ||
| <h4 class="text-sm font-medium leading-none">מימדים</h4> | ||
| <p class="text-xs text-muted-foreground">הגדר את המימדים לשכבה.</p> | ||
| </div> | ||
| </twig:Popover:Content> | ||
| </twig:Popover> | ||
| </div> | ||
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <twig:Popover> | ||
| <twig:Popover:Trigger> | ||
| <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>Open popover</twig:Button> | ||
| </twig:Popover:Trigger> | ||
| <twig:Popover:Content> | ||
| Popover content goes here. | ||
| </twig:Popover:Content> | ||
| </twig:Popover> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "$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": { | ||
| "assets/": "assets/", | ||
| "templates/": "templates/" | ||
| }, | ||
| "dependencies": { | ||
| "composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"] | ||
| } | ||
| } |
22 changes: 22 additions & 0 deletions
22
src/Toolkit/kits/shadcn/popover/templates/components/Popover.html.twig
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +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, open = false -%} | ||
| {%- set _popover_open = open -%} | ||
| <div | ||
| class="{{ ('relative inline-block ' ~ attributes.render('class'))|tailwind_merge }}" | ||
| {{ attributes.defaults({ | ||
| 'data-slot': 'popover', | ||
| 'data-controller': 'popover', | ||
| 'data-popover-open-value': open ? 'true' : 'false', | ||
| 'data-action': [ | ||
| 'popover:open@window->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 -%} | ||
| </div> |
32 changes: 32 additions & 0 deletions
32
src/Toolkit/kits/shadcn/popover/templates/components/Popover/Content.html.twig
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| {# @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 -%} | ||
| <div | ||
| role="dialog" | ||
| 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 -%} | ||
| </div> |
10 changes: 10 additions & 0 deletions
10
src/Toolkit/kits/shadcn/popover/templates/components/Popover/Trigger.html.twig
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| {# @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 -%} |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By doing this, you are forcing the user to use a button like as a trigger, this is not our philosophy.
Please check the existing
*Trigger.html.twig, they are nearly-empty templates that expose a Twig variable..._trigger_attrs, e.g. withAlertDialog/Trigger.html.twig:Usage:
It also means that you must not use
detailsandsummaryHTML elements.Thanks!