Skip to content

Commit 08097bc

Browse files
KocalKocal
committed
feature #3198 [Toolkit][Kdb] Add new component kdb from shadcn ui (Tassilo Gröper)
This PR was merged into the 2.x branch. Discussion ---------- [Toolkit][Kdb] Add new component kdb from shadcn ui | Q | A | -------------- | --- | Bug fix? | no | New feature? | no | Deprecations? | no | Documentation? | no | Issues | Fix #... | License | MIT Adding new kdb component from https://ui.shadcn.com/docs/components/kbd Commits ------- 49d3eb2 [Toolkit][Kdb] Add new component kdb from shadcn ui
2 parents 0de38f6 + 49d3eb2 commit 08097bc

7 files changed

+152
-0
lines changed

‎src/Toolkit/kits/shadcn/kbd/EXAMPLES.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<div class="flex flex-col items-center gap-4">
7+
<twig:KbdGroup>
8+
<twig:Kbd>⌘</twig:Kbd>
9+
<twig:Kbd>⇧</twig:Kbd>
10+
<twig:Kbd>⌥</twig:Kbd>
11+
<twig:Kbd>⌃</twig:Kbd>
12+
</twig:KbdGroup>
13+
<twig:KbdGroup>
14+
<twig:Kbd>Ctrl</twig:Kbd>
15+
<span>+</span>
16+
<twig:Kbd>B</twig:Kbd>
17+
</twig:KbdGroup>
18+
</div>
19+
```
20+
21+
## Group
22+
23+
Use the `KbdGroup` component to group keyboard keys together.
24+
25+
```twig {"preview":true}
26+
<div class="flex flex-col items-center gap-4">
27+
<p class="text-muted-foreground text-sm">
28+
Use
29+
<twig:KbdGroup>
30+
<twig:Kbd>Ctrl + B</twig:Kbd>
31+
<twig:Kbd>Ctrl + K</twig:Kbd>
32+
</twig:KbdGroup>
33+
to open the command palette
34+
</p>
35+
</div>
36+
```
37+
38+
## Button
39+
40+
Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.
41+
42+
```twig {"preview":true}
43+
<div class="flex flex-wrap items-center gap-4">
44+
<twig:Button size="sm" class="pr-2">
45+
Accept <twig:Kbd>⏎</twig:Kbd>
46+
</twig:Button>
47+
<twig:Button variant="outline" size="sm" class="pr-2">
48+
Cancel <twig:Kbd>Esc</twig:Kbd>
49+
</twig:Button>
50+
</div>
51+
```

‎src/Toolkit/kits/shadcn/kbd/manifest.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"$schema": "../../../schema-kit-recipe-v1.json",
3+
"type": "component",
4+
"name": "Kbd",
5+
"description": "Used to display textual user input from keyboard.",
6+
"copy-files": {
7+
"templates/": "templates/"
8+
},
9+
"dependencies": {
10+
"composer": ["tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
11+
}
12+
}

‎src/Toolkit/kits/shadcn/kbd/templates/components/Kbd.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{# @block content The default block #}
2+
<kbd
3+
class="{{ ('bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10' ~ attributes.render('class'))|tailwind_merge }}"
4+
{{ attributes }}
5+
>
6+
{%- block content %}{% endblock -%}
7+
</kbd>

‎src/Toolkit/kits/shadcn/kbd/templates/components/KbdGroup.html.twig‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{# @block content The default block #}
2+
<kbd class="inline-flex items-center gap-1">
3+
{%- block content %}{% endblock -%}
4+
</kbd>

‎src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 1__1.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
- Kit: Shadcn UI
3+
- Component: Kbd
4+
- Code:
5+
```twig
6+
<div class="flex flex-col items-center gap-4">
7+
<twig:KbdGroup>
8+
<twig:Kbd>⌘</twig:Kbd>
9+
<twig:Kbd>⇧</twig:Kbd>
10+
<twig:Kbd>⌥</twig:Kbd>
11+
<twig:Kbd>⌃</twig:Kbd>
12+
</twig:KbdGroup>
13+
<twig:KbdGroup>
14+
<twig:Kbd>Ctrl</twig:Kbd>
15+
<span>+</span>
16+
<twig:Kbd>B</twig:Kbd>
17+
</twig:KbdGroup>
18+
</div>
19+
```
20+
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
21+
<div class="flex flex-col items-center gap-4">
22+
<kbd class="inline-flex items-center gap-1"><kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#140;&#152;</kbd>
23+
<kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#135;&sect;</kbd>
24+
<kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#140;&yen;</kbd>
25+
<kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#140;&#131;</kbd>
26+
</kbd>
27+
<kbd class="inline-flex items-center gap-1"><kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Ctrl</kbd>
28+
<span>+</span>
29+
<kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">B</kbd>
30+
</kbd>
31+
</div>

‎src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 2__1.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!--
2+
- Kit: Shadcn UI
3+
- Component: Kbd
4+
- Code:
5+
```twig
6+
<div class="flex flex-col items-center gap-4">
7+
<p class="text-muted-foreground text-sm">
8+
Use
9+
<twig:KbdGroup>
10+
<twig:Kbd>Ctrl + B</twig:Kbd>
11+
<twig:Kbd>Ctrl + K</twig:Kbd>
12+
</twig:KbdGroup>
13+
to open the command palette
14+
</p>
15+
</div>
16+
```
17+
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
18+
<div class="flex flex-col items-center gap-4">
19+
<p class="text-muted-foreground text-sm">
20+
Use
21+
<kbd class="inline-flex items-center gap-1"><kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Ctrl + B</kbd>
22+
<kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Ctrl + K</kbd>
23+
</kbd>
24+
to open the command palette
25+
</p>
26+
</div>

‎src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component kbd, code 3__1.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!--
2+
- Kit: Shadcn UI
3+
- Component: Kbd
4+
- Code:
5+
```twig
6+
<div class="flex flex-wrap items-center gap-4">
7+
<twig:Button size="sm" class="pr-2">
8+
Accept <twig:Kbd>⏎</twig:Kbd>
9+
</twig:Button>
10+
<twig:Button variant="outline" size="sm" class="pr-2">
11+
Cancel <twig:Kbd>Esc</twig:Kbd>
12+
</twig:Button>
13+
</div>
14+
```
15+
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
16+
<div class="flex flex-wrap items-center gap-4">
17+
<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5 pr-2">Accept <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">&acirc;&#143;&#142;</kbd>
18+
</button>
19+
<button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 shrink-0 [&amp;_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 gap-1.5 px-3 has-[&gt;svg]:px-2.5 pr-2">Cancel <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [[data-slot=tooltip-content]_&amp;]:bg-background/20 [[data-slot=tooltip-content]_&amp;]:text-background dark:[[data-slot=tooltip-content]_&amp;]:bg-background/10">Esc</kbd>
20+
</button>
21+
</div>

0 commit comments

Comments
 (0)