Skip to content

Commit 2c239d9

Browse files
KocalKocal
committed
Merge branch '2.x' into 3.x
* 2.x: bug #3197 [Toolkit][Badge] Remove hover style to clearly distinguish from Button (Tassilo Gröper) [Toolkit][Kdb] Add new component kdb from shadcn ui
2 parents 2b865ba + 08097bc commit 2c239d9

12 files changed

+159
-7
lines changed

‎src/Toolkit/kits/shadcn/badge/templates/components/Badge.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
66
variants: {
77
variant: {
8-
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
9-
secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
10-
destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
8+
default: 'border-transparent bg-primary text-primary-foreground',
9+
secondary: 'border-transparent bg-secondary text-secondary-foreground',
10+
destructive: 'border-transparent bg-destructive text-destructive-foreground',
1111
outline: 'text-foreground',
1212
},
1313
},

‎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 badge, code 1__1.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@
66
<twig:Badge>Badge</twig:Badge>
77
```
88
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
9-
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">Badge</div>
9+
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground">Badge</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@
88
</twig:Badge>
99
```
1010
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
11-
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">Badge
11+
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground">Badge
1212
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@
88
</twig:Badge>
99
```
1010
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
11-
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80">Badge
11+
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground">Badge
1212
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</twig:Badge>
1010
```
1111
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
12-
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
12+
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground">
1313
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="mr-1 h-3 w-3" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path></svg>
1414
Verified
1515
</div>

‎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>

0 commit comments

Comments
 (0)