Skip to content

Commit 2b93d90

Browse files
IzumiSyIzumiSy
committed
feat(alert): add warning and info variants to match badge variant set
1 parent d0a6f65 commit 2b93d90

4 files changed

Lines changed: 49 additions & 5 deletions

File tree

‎examples/nextjs-app/src/modules/pages/primitives-demo.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,12 +156,20 @@ export const primitiveComponentsDemoResource = defineResource({
156156
<Alert.Title>Success</Alert.Title>
157157
<Alert.Description>Operation completed successfully.</Alert.Description>
158158
</Alert.Root>
159+
<Alert.Root variant="warning">
160+
<Alert.Title>Warning</Alert.Title>
161+
<Alert.Description>Please review before proceeding.</Alert.Description>
162+
</Alert.Root>
159163
<Alert.Root variant="error">
160164
<Alert.Title>Error</Alert.Title>
161165
<Alert.Description>Something went wrong. Please try again.</Alert.Description>
162166
</Alert.Root>
167+
<Alert.Root variant="info">
168+
<Alert.Title>Info</Alert.Title>
169+
<Alert.Description>Here is some useful information.</Alert.Description>
170+
</Alert.Root>
163171
<Alert.Root variant="neutral">
164-
<Alert.Title>Information</Alert.Title>
172+
<Alert.Title>Neutral</Alert.Title>
165173
<Alert.Description>This is a neutral informational message.</Alert.Description>
166174
</Alert.Root>
167175
</div>

‎packages/core/__snapshots__/src__components__alert.test.tsx.snap‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ exports[`Alert > snapshots > default variant 1`] = `"<div data-slot="alert" role
44

55
exports[`Alert > snapshots > error variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-destructive/10 astw:text-destructive astw:border-destructive/20 *:data-[slot=alert-description]:astw:text-destructive/80"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Error</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">Something went wrong</div></div>"`;
66

7-
exports[`Alert > snapshots > neutral variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-secondary astw:text-secondary-foreground astw:border-border *:data-[slot=alert-description]:astw:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Info</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">Note this</div></div>"`;
7+
exports[`Alert > snapshots > info variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-blue-500/10 astw:text-blue-700 astw:border-blue-500/20 dark:astw:text-blue-400 *:data-[slot=alert-description]:astw:text-blue-700/80 dark:*:data-[slot=alert-description]:astw:text-blue-400/80"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Info</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">FYI</div></div>"`;
8+
9+
exports[`Alert > snapshots > neutral variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-secondary astw:text-secondary-foreground astw:border-border *:data-[slot=alert-description]:astw:text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Neutral</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">Note this</div></div>"`;
810

911
exports[`Alert > snapshots > success variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-green-500/10 astw:text-green-700 astw:border-green-500/20 dark:astw:text-green-400 *:data-[slot=alert-description]:astw:text-green-700/80 dark:*:data-[slot=alert-description]:astw:text-green-400/80"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335"></path><path d="m9 11 3 3L22 4"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Success</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">Operation completed</div></div>"`;
12+
13+
exports[`Alert > snapshots > warning variant 1`] = `"<div data-slot="alert" role="alert" class="astw:relative astw:w-full astw:rounded-lg astw:border astw:px-4 astw:py-3 astw:text-sm astw:grid astw:grid-cols-[calc(var(--spacing)*4.5)_1fr] astw:gap-x-3 astw:gap-y-0.5 astw:items-start astw:[&amp;>svg]:size-[17.5px] astw:[&amp;>svg]:self-center astw:[&amp;>svg]:shrink-0 astw:[&amp;>svg]:text-current astw:bg-yellow-500/10 astw:text-yellow-700 astw:border-yellow-500/20 dark:astw:text-yellow-500 *:data-[slot=alert-description]:astw:text-yellow-700/80 dark:*:data-[slot=alert-description]:astw:text-yellow-500/80"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg><div data-slot="alert-title" class="astw:col-start-2 astw:line-clamp-1 astw:min-h-4 astw:font-medium astw:tracking-tight">Warning</div><div data-slot="alert-description" class="astw:col-start-2 astw:grid astw:justify-items-start astw:gap-1 astw:text-sm [&amp;_p]:astw:leading-relaxed">Be careful</div></div>"`;

‎packages/core/src/components/alert.test.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,30 @@ describe("Alert", () => {
3838
expect(container.innerHTML).toMatchSnapshot();
3939
});
4040

41+
it("warning variant", () => {
42+
const { container } = render(
43+
<Alert.Root variant="warning">
44+
<Alert.Title>Warning</Alert.Title>
45+
<Alert.Description>Be careful</Alert.Description>
46+
</Alert.Root>,
47+
);
48+
expect(container.innerHTML).toMatchSnapshot();
49+
});
50+
51+
it("info variant", () => {
52+
const { container } = render(
53+
<Alert.Root variant="info">
54+
<Alert.Title>Info</Alert.Title>
55+
<Alert.Description>FYI</Alert.Description>
56+
</Alert.Root>,
57+
);
58+
expect(container.innerHTML).toMatchSnapshot();
59+
});
60+
4161
it("neutral variant", () => {
4262
const { container } = render(
4363
<Alert.Root variant="neutral">
44-
<Alert.Title>Info</Alert.Title>
64+
<Alert.Title>Neutral</Alert.Title>
4565
<Alert.Description>Note this</Alert.Description>
4666
</Alert.Root>,
4767
);

‎packages/core/src/components/alert.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import * as React from "react";
22
import { cva, type VariantProps } from "class-variance-authority";
3-
import { AlertCircleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from "lucide-react";
3+
import {
4+
AlertCircleIcon,
5+
AlertTriangleIcon,
6+
CheckCircleIcon,
7+
InfoIcon,
8+
MessageCircleIcon,
9+
XCircleIcon,
10+
} from "lucide-react";
411
import { cn } from "../lib/utils";
512

613
const alertVariants = cva(
@@ -12,8 +19,11 @@ const alertVariants = cva(
1219
"astw:bg-primary/10 astw:text-primary astw:border-primary/20 *:data-[slot=alert-description]:astw:text-primary/80",
1320
success:
1421
"astw:bg-green-500/10 astw:text-green-700 astw:border-green-500/20 dark:astw:text-green-400 *:data-[slot=alert-description]:astw:text-green-700/80 dark:*:data-[slot=alert-description]:astw:text-green-400/80",
22+
warning:
23+
"astw:bg-yellow-500/10 astw:text-yellow-700 astw:border-yellow-500/20 dark:astw:text-yellow-500 *:data-[slot=alert-description]:astw:text-yellow-700/80 dark:*:data-[slot=alert-description]:astw:text-yellow-500/80",
1524
error:
1625
"astw:bg-destructive/10 astw:text-destructive astw:border-destructive/20 *:data-[slot=alert-description]:astw:text-destructive/80",
26+
info: "astw:bg-blue-500/10 astw:text-blue-700 astw:border-blue-500/20 dark:astw:text-blue-400 *:data-[slot=alert-description]:astw:text-blue-700/80 dark:*:data-[slot=alert-description]:astw:text-blue-400/80",
1727
neutral:
1828
"astw:bg-secondary astw:text-secondary-foreground astw:border-border *:data-[slot=alert-description]:astw:text-muted-foreground",
1929
},
@@ -30,8 +40,10 @@ const variantIcons: Record<
3040
> = {
3141
default: AlertCircleIcon,
3242
success: CheckCircleIcon,
43+
warning: AlertTriangleIcon,
3344
error: XCircleIcon,
34-
neutral: InfoIcon,
45+
info: InfoIcon,
46+
neutral: MessageCircleIcon,
3547
};
3648

3749
type RootProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants>;

0 commit comments

Comments
 (0)