Skip to content

Commit 334a9e5

Browse files
KocalKocal
committed
feature symfony#3318 [Toolkit][Shadcn] Update Alert CSS class, add Alert:Action component (ker0x)
This PR was merged into the 2.x branch. Discussion ---------- [Toolkit][Shadcn] Update Alert CSS class, add Alert:Action component | Q | A | -------------- | --- | Bug fix? | yes | New feature? | yes | Deprecations? | no | Documentation? | yes | Issues | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT This PR update the CSS class of the Alert component according to [official Shadcn documentation](https://ui.shadcn.com/docs/components/radix/alert). It also add `Alert:Action` component Commits ------- 541840d [Toolkit][Shadcn] Update Alert CSS class, add Alert:Action component
2 parents f2e9720 + 541840d commit 334a9e5

File tree

79 files changed

+318
-389
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+318
-389
lines changed

‎src/Toolkit/CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,15 @@
44

55
- [Shadcn] Add `accordion` recipe
66
- [Shadcn] Add `tooltip` recipe
7+
- [Shadcn] Rework templates of `alert` recipe
78
- [Shadcn] Rework templates of `avatar` recipe
89
- [Shadcn] Rework templates of `badge` recipe
10+
- [Shadcn] Rework templates of `button` recipe
911
- [Shadcn] Rework templates of `card` recipe
1012
- [Shadcn] Rework templates of `input-group` recipe
1113
- [Shadcn] Rework templates of `table` recipe
1214
- [Shadcn] Rework templates of `textarea` recipe
15+
- [Shadcn] Add `Alert:Action` component
1316

1417
## 2.29.0
1518

‎src/Toolkit/kits/shadcn/alert/examples/Action.html.twig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<twig:Alert class="max-w-md">
2+
<twig:Alert:Title>Dark mode is now available</twig:Alert:Title>
3+
<twig:Alert:Description>
4+
Enable it under your profile settings to get started.
5+
</twig:Alert:Description>
6+
<twig:Alert:Action>
7+
<twig:Button size="xs" variant="default">
8+
Enable
9+
</twig:Button>
10+
</twig:Alert:Action>
11+
</twig:Alert>

‎src/Toolkit/kits/shadcn/alert/examples/Basic.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<twig:Alert class="max-w-md">
2+
<twig:ux:icon name="lucide:circle-check" />
3+
<twig:Alert:Title>Account updated successfully</twig:Alert:Title>
4+
<twig:Alert:Description>
5+
Your profile information has been saved. Changes will be reflected immediately.
6+
</twig:Alert:Description>
7+
</twig:Alert>

‎src/Toolkit/kits/shadcn/alert/examples/Custom Colors.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<twig:Alert class="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
2+
<twig:ux:icon name="lucide:triangle-alert" />
3+
<twig:Alert:Title>Your subscription will expire in 3 days.</twig:Alert:Title>
4+
<twig:Alert:Description>
5+
Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
6+
</twig:Alert:Description>
7+
</twig:Alert>

‎src/Toolkit/kits/shadcn/alert/examples/Demo.html.twig‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,16 @@
11
<div class="grid w-full max-w-xl items-start gap-4">
2-
<twig:Alert>
3-
<twig:ux:icon name="tabler:circle-check" class="h-4 w-4" />
4-
<twig:Alert:Title>Success! Your changes have been saved</twig:Alert:Title>
2+
<twig:Alert class="max-w-md">
3+
<twig:ux:icon name="lucide:circle-check" />
4+
<twig:Alert:Title>Payment successful</twig:Alert:Title>
55
<twig:Alert:Description>
6-
This is an alert with icon, title and description.
6+
Your payment of $29.99 has been processed. A receipt has been sent to your email address.
77
</twig:Alert:Description>
88
</twig:Alert>
9-
<twig:Alert>
10-
<twig:ux:icon name="tabler:trash" class="h-4 w-4" />
11-
<twig:Alert:Title>
12-
This Alert has a title and an icon. No description.
13-
</twig:Alert:Title>
14-
</twig:Alert>
15-
<twig:Alert variant="destructive">
16-
<twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
17-
<twig:Alert:Title>Unable to process your payment.</twig:Alert:Title>
9+
<twig:Alert class="max-w-md">
10+
<twig:ux:icon name="lucide:circle-alert" />
11+
<twig:Alert:Title>New feature available</twig:Alert:Title>
1812
<twig:Alert:Description>
19-
<p>Please verify your billing information and try again.</p>
20-
<ul class="list-inside list-disc text-sm">
21-
<li>Check your card details</li>
22-
<li>Ensure sufficient funds</li>
23-
<li>Verify billing address</li>
24-
</ul>
13+
We've added dark mode support. You can enable it in your account settings.
2514
</twig:Alert:Description>
2615
</twig:Alert>
2716
</div>

‎src/Toolkit/kits/shadcn/alert/examples/Destructive.html.twig‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<twig:Alert variant="destructive" class="max-w-md">
2+
<twig:ux:icon name="lucide:circle-alert" />
3+
<twig:Alert:Title>Payment failed</twig:Alert:Title>
4+
<twig:Alert:Description>
5+
Your payment could not be processed. Please check your payment method and try again.
6+
</twig:Alert:Description>
7+
</twig:Alert>

‎src/Toolkit/kits/shadcn/alert/examples/Usage.html.twig‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<twig:Alert class="max-w-lg">
2-
<twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
2+
<twig:ux:icon name="lucide:circle-alert" />
33
<twig:Alert:Title>Heads up!</twig:Alert:Title>
44
<twig:Alert:Description>
55
You can add components to your app using the cli.
66
</twig:Alert:Description>
7+
<twig:Alert:Action>
8+
<twig:Button variant="outline">Enable</twig:Button>
9+
</twig:Alert:Action>
710
</twig:Alert>

‎src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
{# @block content The default block #}
33
{%- props variant = 'default' -%}
44
{%- set style = html_cva(
5-
base: 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
5+
base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
66
variants: {
77
variant: {
8-
default: 'bg-background text-foreground',
9-
destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
8+
default: 'bg-card text-card-foreground',
9+
destructive: 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
1010
},
1111
},
1212
) -%}
1313

1414
<div
15-
class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
15+
data-slot="alert"
1616
role="alert"
17+
class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
1718
{{ attributes }}
1819
>
1920
{%- block content %}{% endblock -%}

‎src/Toolkit/kits/shadcn/alert/templates/components/Alert/Action.html.twig‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{# @block content The default block #}
2+
<div
3+
data-slot="alert-action"
4+
class="{{ 'absolute top-2 right-2 ' ~ attributes.render('class')|tailwind_merge }}"
5+
{{ attributes }}
6+
>
7+
{%- block content %}{% endblock -%}
8+
</div>

‎src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{# @block content The default block #}
2-
<p
3-
class="{{ 'text-sm [&_p]:leading-relaxed ' ~ attributes.render('class')|tailwind_merge }}"
2+
<div
3+
data-slot="alert-description"
4+
class="{{ 'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 ' ~ attributes.render('class')|tailwind_merge }}"
45
{{ attributes }}
56
>
67
{%- block content %}{% endblock -%}
7-
</p>
8+
</div>

0 commit comments

Comments
 (0)