diff --git a/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx b/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx
index c111a8c8d0..c004efe965 100644
--- a/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx
+++ b/packages/react/src/sds/ai/F0HILActionConfirmation/F0HILActionConfirmation.tsx
@@ -1,35 +1,31 @@
-import { F0Button } from "@/components/F0Button"
-import Check from "@/icons/app/Check"
+import { F0CardRow } from "@/components/F0Card"
import { F0HILActionConfirmationProps } from "./types"
export const F0HILActionConfirmation = ({
text,
+ description,
+ avatar,
confirmationText,
onConfirm,
cancelText,
onCancel,
+ stackAt = "sm",
}: F0HILActionConfirmationProps) => {
return (
-
- {text &&
{text}
}
-
-
-
-
-
+
)
}
diff --git a/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx b/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx
index 9b1ce2dc65..0dd32b83fa 100644
--- a/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx
+++ b/packages/react/src/sds/ai/F0HILActionConfirmation/__stories__/F0HILActionConfirmation.stories.tsx
@@ -1,15 +1,31 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
+import image from "@storybook-static/avatars/person04.jpg"
+
import { F0HILActionConfirmation } from ".."
const meta = {
title: "AI/F0HILActionConfirmation",
component: F0HILActionConfirmation,
parameters: {
- layout: "centered",
+ layout: "padded",
+ docs: {
+ description: {
+ component:
+ "An inline human-in-the-loop approve/reject row built on `F0CardRow`'s confirm/reject variant: the prompt sits on the left as the row title (with an optional avatar and description) and icon-only ✓ (confirm) / ✗ (reject) buttons pin to the trailing edge.",
+ },
+ },
},
tags: ["autodocs"],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
args: {
+ text: "Send the follow-up email to the candidate?",
confirmationText: "Confirm",
onConfirm: () => {},
cancelText: "Cancel",
@@ -18,23 +34,38 @@ const meta = {
argTypes: {
text: {
control: "text",
- description: "Optional descriptive text shown above the action buttons",
+ description: "The prompt shown as the row title.",
+ },
+ description: {
+ control: "text",
+ description: "Optional secondary line shown beneath the title.",
+ },
+ avatar: {
+ control: "object",
+ description: "Optional avatar rendered on the left of the row.",
+ },
+ stackAt: {
+ control: "select",
+ options: ["sm", "md", "lg", "never"],
+ description:
+ "Container width at which the ✓/✗ actions drop onto their own line.",
+ table: { defaultValue: { summary: "sm" } },
},
confirmationText: {
control: "text",
- description: "Text displayed on the confirmation button",
+ description: "Accessible label and tooltip for the confirm (✓) button.",
},
onConfirm: {
action: "confirmed",
- description: "Callback fired when the confirmation button is clicked",
+ description: "Callback fired when the confirm button is clicked",
},
cancelText: {
control: "text",
- description: "Text displayed on the cancel button",
+ description: "Accessible label and tooltip for the reject (✗) button.",
},
onCancel: {
action: "cancelled",
- description: "Callback fired when the cancel button is clicked",
+ description: "Callback fired when the reject button is clicked",
},
},
} satisfies Meta
@@ -44,15 +75,32 @@ type Story = StoryObj
export const Default: Story = {
args: {
+ text: "Send the follow-up email to the candidate?",
confirmationText: "Confirm",
cancelText: "Cancel",
},
}
-export const WithDescriptiveText: Story = {
+export const WithDescription: Story = {
args: {
- text: "Are you sure you want to proceed with this action?",
- confirmationText: "Yes, proceed",
- cancelText: "No, cancel",
+ text: "Approve 3 days off",
+ description: "Requested by Jane Cooper · Jun 10–12",
+ confirmationText: "Approve",
+ cancelText: "Reject",
+ },
+}
+
+export const WithAvatar: Story = {
+ args: {
+ avatar: {
+ type: "person",
+ firstName: "Jane",
+ lastName: "Cooper",
+ src: image,
+ },
+ text: "Jane Cooper",
+ description: "Requested 3 days off",
+ confirmationText: "Approve",
+ cancelText: "Reject",
},
}
diff --git a/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts b/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts
index 5250e98c5b..95199bd681 100644
--- a/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts
+++ b/packages/react/src/sds/ai/F0HILActionConfirmation/types.ts
@@ -1,25 +1,48 @@
+import type { F0CardRowProps } from "@/components/F0Card"
+
/**
- * Props for the F0HILActionConfirmation component
+ * Props for the F0HILActionConfirmation component.
+ *
+ * Renders an inline approve/reject row built on `F0CardRow`'s confirm/reject
+ * variant: the prompt as the row title, with icon-only ✓ (confirm) and ✗
+ * (reject) buttons at the trailing edge.
*/
export type F0HILActionConfirmationProps = {
/**
- * Optional descriptive text shown above the action buttons
+ * The prompt shown as the row title (e.g. the action awaiting confirmation).
+ * Required — a confirmation without a prompt has no meaning.
*/
- text?: string
+ text: string
/**
- * Text displayed on the confirmation button
+ * Optional secondary line shown beneath the title (single line, truncated).
+ */
+ description?: F0CardRowProps["description"]
+ /**
+ * Optional avatar rendered on the left of the row. Accepts any avatar type in
+ * the system (person, company, team, file, icon, emoji, …).
+ */
+ avatar?: F0CardRowProps["avatar"]
+ /**
+ * Container width at which the ✓/✗ actions drop onto their own line instead of
+ * staying inline. Prevents the buttons from overlapping the prompt in narrow
+ * containers. Set to `"never"` to keep them inline at every width.
+ * @default "sm"
+ */
+ stackAt?: F0CardRowProps["stackAt"]
+ /**
+ * Accessible label and tooltip for the confirm (✓) button.
*/
confirmationText: string
/**
- * Callback fired when the confirmation button is clicked
+ * Callback fired when the confirm button is clicked.
*/
onConfirm: () => void
/**
- * Text displayed on the cancel button
+ * Accessible label and tooltip for the reject (✗) button.
*/
cancelText: string
/**
- * Callback fired when the cancel button is clicked
+ * Callback fired when the reject button is clicked.
*/
onCancel: () => void
}