diff --git a/package.json b/package.json index 32494ece2..56f1cc28d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@mirrorstack-ai/web-ui-kit", "packageManager": "pnpm@10.29.3", - "version": "0.6.0", + "version": "0.6.1", "main": "./dist/index.js", "types": "./dist/index.d.ts", "exports": { diff --git a/src/components/ui/feedback/alert/Alert.stories.tsx b/src/components/ui/feedback/alert/Alert.stories.tsx index 6c2b8c990..99668ff4a 100644 --- a/src/components/ui/feedback/alert/Alert.stories.tsx +++ b/src/components/ui/feedback/alert/Alert.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Alert, type AlertVariant } from "./Alert"; +import { Button } from "@/components/ui/actions/button/Button"; const meta: Meta = { title: "UI/Feedback/Alert", @@ -50,6 +51,19 @@ export const Dismissible: Story = { }, }; +export const WithAction: Story = { + args: { + variant: "warning", + title: "Update available", + children: "Version 1.4.0 is ready to install.", + action: ( + + ), + }, +}; + export const WithCustomIcon: Story = { args: { variant: "primary", diff --git a/src/components/ui/feedback/alert/Alert.test.tsx b/src/components/ui/feedback/alert/Alert.test.tsx index 56a3a442b..b777ff814 100644 --- a/src/components/ui/feedback/alert/Alert.test.tsx +++ b/src/components/ui/feedback/alert/Alert.test.tsx @@ -42,6 +42,15 @@ describe("Alert", () => { expect(screen.queryByLabelText("Dismiss")).not.toBeInTheDocument(); }); + it("renders the action node when provided", () => { + render( + Update}> + Version 1.4.0 is ready. + , + ); + expect(screen.getByRole("button", { name: "Update" })).toBeInTheDocument(); + }); + it("applies custom className", () => { render( diff --git a/src/components/ui/feedback/alert/Alert.tsx b/src/components/ui/feedback/alert/Alert.tsx index 91decd26b..42215a476 100644 --- a/src/components/ui/feedback/alert/Alert.tsx +++ b/src/components/ui/feedback/alert/Alert.tsx @@ -7,7 +7,7 @@ import { IconButton } from "@/components/ui/actions/icon-button/IconButton"; export const meta: ComponentMeta = { name: "Alert", description: - "Dismissible inline alert banner with error/success/warning/primary/secondary variants", + "Dismissible inline alert banner with error/success/warning/primary/secondary variants and an optional trailing action slot", }; export type AlertVariant = @@ -30,6 +30,9 @@ export interface AlertProps { /** Hide the leading icon entirely. Useful when the alert sits inside a * dialog or section that already conveys severity. */ hideIcon?: boolean; + /** Optional trailing action (e.g. a Button), vertically centered against the + * whole banner. Sits before the dismiss control when both are present. */ + action?: ReactNode; } const variantStyles: Record = { @@ -57,6 +60,7 @@ export function Alert({ icon, iconSize, hideIcon, + action, }: AlertProps) { return (
{title}}
{children}
+ {action &&
{action}
} {onDismiss && (