Skip to content

[Toolkit][Shadcn] Update Alert CSS class, add Alert:Action component #3318

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.

Sign up for GitHub

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

Merged
Kocal merged 1 commit into from
Jan 31, 2026
Merged

[Toolkit][Shadcn] Update Alert CSS class, add Alert:Action component #3318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/Toolkit/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,15 @@

- [Shadcn] Add `accordion` recipe
- [Shadcn] Add `tooltip` recipe
- [Shadcn] Rework templates of `alert` recipe
- [Shadcn] Rework templates of `avatar` recipe
- [Shadcn] Rework templates of `badge` recipe
- [Shadcn] Rework templates of `button` recipe
- [Shadcn] Rework templates of `card` recipe
- [Shadcn] Rework templates of `input-group` recipe
- [Shadcn] Rework templates of `table` recipe
- [Shadcn] Rework templates of `textarea` recipe
- [Shadcn] Add `Alert:Action` component

## 2.29.0

Expand Down
11 changes: 11 additions & 0 deletions src/Toolkit/kits/shadcn/alert/examples/Action.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<twig:Alert class="max-w-md">
<twig:Alert:Title>Dark mode is now available</twig:Alert:Title>
<twig:Alert:Description>
Enable it under your profile settings to get started.
</twig:Alert:Description>
<twig:Alert:Action>
<twig:Button size="xs" variant="default">
Enable
</twig:Button>
</twig:Alert:Action>
</twig:Alert>
7 changes: 7 additions & 0 deletions src/Toolkit/kits/shadcn/alert/examples/Basic.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<twig:Alert class="max-w-md">
<twig:ux:icon name="lucide:circle-check" />
<twig:Alert:Title>Account updated successfully</twig:Alert:Title>
<twig:Alert:Description>
Your profile information has been saved. Changes will be reflected immediately.
</twig:Alert:Description>
</twig:Alert>
7 changes: 7 additions & 0 deletions src/Toolkit/kits/shadcn/alert/examples/Custom Colors.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<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">
<twig:ux:icon name="lucide:triangle-alert" />
<twig:Alert:Title>Your subscription will expire in 3 days.</twig:Alert:Title>
<twig:Alert:Description>
Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
</twig:Alert:Description>
</twig:Alert>
27 changes: 8 additions & 19 deletions src/Toolkit/kits/shadcn/alert/examples/Demo.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,16 @@
<div class="grid w-full max-w-xl items-start gap-4">
<twig:Alert>
<twig:ux:icon name="tabler:circle-check" class="h-4 w-4" />
<twig:Alert:Title>Success! Your changes have been saved</twig:Alert:Title>
<twig:Alert class="max-w-md">
<twig:ux:icon name="lucide:circle-check" />
<twig:Alert:Title>Payment successful</twig:Alert:Title>
<twig:Alert:Description>
This is an alert with icon, title and description.
Your payment of $29.99 has been processed. A receipt has been sent to your email address.
</twig:Alert:Description>
</twig:Alert>
<twig:Alert>
<twig:ux:icon name="tabler:trash" class="h-4 w-4" />
<twig:Alert:Title>
This Alert has a title and an icon. No description.
</twig:Alert:Title>
</twig:Alert>
<twig:Alert variant="destructive">
<twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
<twig:Alert:Title>Unable to process your payment.</twig:Alert:Title>
<twig:Alert class="max-w-md">
<twig:ux:icon name="lucide:circle-alert" />
<twig:Alert:Title>New feature available</twig:Alert:Title>
<twig:Alert:Description>
<p>Please verify your billing information and try again.</p>
<ul class="list-inside list-disc text-sm">
<li>Check your card details</li>
<li>Ensure sufficient funds</li>
<li>Verify billing address</li>
</ul>
We've added dark mode support. You can enable it in your account settings.
</twig:Alert:Description>
</twig:Alert>
</div>
7 changes: 7 additions & 0 deletions src/Toolkit/kits/shadcn/alert/examples/Destructive.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<twig:Alert variant="destructive" class="max-w-md">
<twig:ux:icon name="lucide:circle-alert" />
<twig:Alert:Title>Payment failed</twig:Alert:Title>
<twig:Alert:Description>
Your payment could not be processed. Please check your payment method and try again.
</twig:Alert:Description>
</twig:Alert>
5 changes: 4 additions & 1 deletion src/Toolkit/kits/shadcn/alert/examples/Usage.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<twig:Alert class="max-w-lg">
<twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
<twig:ux:icon name="lucide:circle-alert" />
<twig:Alert:Title>Heads up!</twig:Alert:Title>
<twig:Alert:Description>
You can add components to your app using the cli.
</twig:Alert:Description>
<twig:Alert:Action>
<twig:Button variant="outline">Enable</twig:Button>
</twig:Alert:Action>
</twig:Alert>
9 changes: 5 additions & 4 deletions src/Toolkit/kits/shadcn/alert/templates/components/Alert.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,19 @@
{# @block content The default block #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
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',
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",
variants: {
variant: {
default: 'bg-background text-foreground',
destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
default: 'bg-card text-card-foreground',
destructive: 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
},
},
) -%}

<div
class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
data-slot="alert"
role="alert"
class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
Expand Down
8 changes: 8 additions & 0 deletions src/Toolkit/kits/shadcn/alert/templates/components/Alert/Action.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{# @block content The default block #}
<div
data-slot="alert-action"
class="{{ 'absolute top-2 right-2 ' ~ attributes.render('class')|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</div>
7 changes: 4 additions & 3 deletions src/Toolkit/kits/shadcn/alert/templates/components/Alert/Description.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{# @block content The default block #}
<p
class="{{ 'text-sm [&_p]:leading-relaxed ' ~ attributes.render('class')|tailwind_merge }}"
<div
data-slot="alert-description"
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 }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</p>
</div>
7 changes: 4 additions & 3 deletions src/Toolkit/kits/shadcn/alert/templates/components/Alert/Title.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{# @block content The default block #}
<h5
class="{{ 'mb-1 font-medium leading-none tracking-tight ' ~ attributes.render('class')|tailwind_merge }}"
<div
data-slot="alert-title"
class="{{ 'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3 ' ~ attributes.render('class')|tailwind_merge }}"
{{ attributes }}
>
{%- block content %}{% endblock -%}
</h5>
</div>
28 changes: 15 additions & 13 deletions src/Toolkit/kits/shadcn/button/templates/components/Button.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
{# @prop variant 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The variant, default to `default` #}
{# @prop size 'default'|'sm'|'lg'|'icon'|'icon-sm'|'icon-lg' The size, default to `default` #}
{# @prop size 'default'|'xs'|'sm'|'lg'|'icon'|'icon-xs'|'icon-sm'|'icon-lg' The size, default to `default` #}
{# @prop as 'button' The HTML tag to use, default to `button` #}
{# @block content The default block #}
{%- props variant = 'default', size = 'default', as = 'button' -%}
{%- set style = html_cva(
base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_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",
base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
icon: 'size-9',
'icon-sm': 'size-8',
'icon-lg': 'size-10',
default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
icon: 'size-8',
'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
'icon-lg': 'size-9',
},
},
) -%}
Expand Down
27 changes: 27 additions & 0 deletions ...mponentRendering with data set Kit shadcn, component alert, code file Action.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!--
- Kit: Shadcn UI
- Component: Alert
- Code:
```twig
<twig:Alert class="max-w-md">
<twig:Alert:Title>Dark mode is now available</twig:Alert:Title>
<twig:Alert:Description>
Enable it under your profile settings to get started.
</twig:Alert:Description>
<twig:Alert:Action>
<twig:Button size="xs" variant="default">
Enable
</twig:Button>
</twig:Alert:Action>
</twig:Alert>
```
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
<div data-slot="alert" role="alert" class="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-[&gt;svg]:grid-cols-[auto_1fr] has-[&gt;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 bg-card text-card-foreground max-w-md">
<div data-slot="alert-title" class="font-medium group-has-[&gt;svg]/alert:col-start-2 [&amp;_a]:hover:text-foreground [&amp;_a]:underline [&amp;_a]:underline-offset-3 ">Dark mode is now available</div>
<div data-slot="alert-description" class="text-muted-foreground text-sm text-balance md:text-pretty [&amp;_p:not(:last-child)]:mb-4 [&amp;_a]:hover:text-foreground [&amp;_a]:underline [&amp;_a]:underline-offset-3 ">Enable it under your profile settings to get started.
</div>
<div data-slot="alert-action" class="absolute top-2 right-2 ">
<button data-slot="button" class="focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border border-transparent bg-clip-padding font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none shrink-0 [&amp;_svg]:shrink-0 outline-none group/button select-none bg-primary text-primary-foreground [a]:hover:bg-primary/80 h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&amp;_svg:not([class*='size-'])]:size-3">Enable
</button>
</div>
</div>
20 changes: 20 additions & 0 deletions ...omponentRendering with data set Kit shadcn, component alert, code file Basic.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!--
- Kit: Shadcn UI
- Component: Alert
- Code:
```twig
<twig:Alert class="max-w-md">
<twig:ux:icon name="lucide:circle-check" />
<twig:Alert:Title>Account updated successfully</twig:Alert:Title>
<twig:Alert:Description>
Your profile information has been saved. Changes will be reflected immediately.
</twig:Alert:Description>
</twig:Alert>
```
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
<div data-slot="alert" role="alert" class="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-[&gt;svg]:grid-cols-[auto_1fr] has-[&gt;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 bg-card text-card-foreground max-w-md">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="m9 12l2 2l4-4"></path></g></svg>
<div data-slot="alert-title" class="font-medium group-has-[&gt;svg]/alert:col-start-2 [&amp;_a]:hover:text-foreground [&amp;_a]:underline [&amp;_a]:underline-offset-3 ">Account updated successfully</div>
<div data-slot="alert-description" class="text-muted-foreground text-sm text-balance md:text-pretty [&amp;_p:not(:last-child)]:mb-4 [&amp;_a]:hover:text-foreground [&amp;_a]:underline [&amp;_a]:underline-offset-3 ">Your profile information has been saved. Changes will be reflected immediately.
</div>
</div>
20 changes: 20 additions & 0 deletions ...Rendering with data set Kit shadcn, component alert, code file Custom Colors.html__1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!--
- Kit: Shadcn UI
- Component: Alert
- Code:
```twig
<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">
<twig:ux:icon name="lucide:triangle-alert" />
<twig:Alert:Title>Your subscription will expire in 3 days.</twig:Alert:Title>
<twig:Alert:Description>
Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
</twig:Alert:Description>
</twig:Alert>
```
- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
<div data-slot="alert" role="alert" class="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-[&gt;svg]:grid-cols-[auto_1fr] has-[&gt;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 max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"></path></svg>
<div data-slot="alert-title" class="font-medium group-has-[&gt;svg]/alert:col-start-2 [&amp;_a]:hover:text-foreground [&amp;_a]:underline [&amp;_a]:underline-offset-3 ">Your subscription will expire in 3 days.</div>
<div data-slot="alert-description" class="text-muted-foreground text-sm text-balance md:text-pretty [&amp;_p:not(:last-child)]:mb-4 [&amp;_a]:hover:text-foreground [&amp;_a]:underline [&amp;_a]:underline-offset-3 ">Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
</div>
</div>
Loading
Loading