@handled-ai/design-system 0.18.38 → 0.18.40

package/src/components/__tests__/draft-feedback-inline.test.tsx

@@ -0,0 +1,72 @@
+/**
+ * Tests for DraftFeedbackInline.
+ *
+ * Covers:
+ *  - Clicking the up thumb activates the positive state (monochrome bg-muted)
+ *  - Clicking the down thumb activates the negative state (restrained red)
+ *  - Thumb icons render outline-only (never fill="currentColor")
+ *  - initialDirection="down" renders the down state pre-selected
+ *  - initialDirection="up" renders the up state pre-selected
+ */
+
+import { describe, it, expect } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { DraftFeedbackInline } from "../draft-feedback-inline"
+
+describe("DraftFeedbackInline", () => {
+  it("renders idle with no expanded feedback area", () => {
+    render(<DraftFeedbackInline />)
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+    expect(screen.queryByText("What needs improvement?")).toBeNull()
+  })
+
+  it("activates the positive state with monochrome tokens when up is clicked", () => {
+    const { container } = render(<DraftFeedbackInline />)
+    const buttons = container.querySelectorAll("button")
+    const upButton = buttons[0] as HTMLButtonElement
+    fireEvent.click(upButton)
+
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+    expect(upButton.className).toContain("bg-muted")
+    expect(upButton.className).toContain("text-foreground")
+    expect(upButton.className).not.toContain("emerald")
+  })
+
+  it("activates the negative state with restrained red when down is clicked", () => {
+    const { container } = render(<DraftFeedbackInline />)
+    const buttons = container.querySelectorAll("button")
+    const downButton = buttons[1] as HTMLButtonElement
+    fireEvent.click(downButton)
+
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(downButton.className).toContain("bg-muted")
+    expect(downButton.className).toContain("text-foreground")
+    expect(downButton.className).not.toContain("bg-red")
+  })
+
+  it("renders thumb icons outline-only (never fill=currentColor)", () => {
+    const { container } = render(<DraftFeedbackInline />)
+    const buttons = container.querySelectorAll("button")
+    // Activate up so the icon would be "filled" under the old behavior.
+    fireEvent.click(buttons[0] as HTMLButtonElement)
+
+    const svgs = container.querySelectorAll("svg")
+    svgs.forEach((svg) => {
+      expect(svg.getAttribute("fill")).not.toBe("currentColor")
+    })
+  })
+
+  it("renders the down state pre-selected with initialDirection='down'", () => {
+    render(<DraftFeedbackInline initialDirection="down" />)
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+  })
+
+  it("renders the up state pre-selected with initialDirection='up'", () => {
+    render(<DraftFeedbackInline initialDirection="up" />)
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+    expect(screen.queryByText("What needs improvement?")).toBeNull()
+  })
+})

package/src/components/__tests__/email-recipient-field.test.tsx

@@ -1,11 +1,16 @@
 import { describe, it, expect, vi, afterEach } from "vitest"
 import React from "react"
-import { render, screen, fireEvent, cleanup } from "@testing-library/react"
+import { render, screen, fireEvent, cleanup, within } from "@testing-library/react"
 
 import {
   EmailRecipientField,
   type RecipientChip,
 } from "../email-recipient-field"
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "../dialog"
 import type { SuggestedContact } from "../suggested-actions"
 
 afterEach(() => {
@@ -253,4 +258,114 @@ describe("EmailRecipientField", () => {
     expect(noEmailRow.className).toContain("pointer-events-none")
     expect(noEmailRow.textContent).toContain("No email")
   })
+
+  it("autofocuses the search input when the picker opens", () => {
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={contacts}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    const search = screen.getByPlaceholderText("Search contacts...")
+    expect(document.activeElement).toBe(search)
+  })
+
+  it("accepts typing in the search box and filters the list", () => {
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={contacts}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    const search = screen.getByPlaceholderText("Search contacts...") as HTMLInputElement
+
+    fireEvent.change(search, { target: { value: "Bea" } })
+    expect(search.value).toBe("Bea")
+    expect(screen.getByText("Bea Buyer")).toBeTruthy()
+    expect(screen.queryByText("Alex Admin")).toBeNull()
+  })
+
+  it("adds a typed email from the picker search box on Enter", () => {
+    const onChange = vi.fn()
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={onChange}
+        showPicker
+        contacts={contacts}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    const search = screen.getByPlaceholderText("Search contacts...")
+
+    fireEvent.change(search, { target: { value: "typed@example.com" } })
+    fireEvent.keyDown(search, { key: "Enter" })
+
+    expect(onChange).toHaveBeenCalledWith([
+      { id: "typed@example.com", email: "typed@example.com", name: "", confirmed: false },
+    ])
+  })
+
+  it("shows a clear empty state when there are no contacts", () => {
+    render(
+      <EmailRecipientField
+        label="To"
+        recipients={[]}
+        onRecipientsChange={vi.fn()}
+        showPicker
+        contacts={[]}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    expect(screen.getByText("No contacts for this account")).toBeTruthy()
+    // The empty state guides the user to type an address instead of looking broken.
+    expect(
+      screen.getByText(/Type an email address above and press Enter/),
+    ).toBeTruthy()
+  })
+
+  it("remains typeable when rendered inside a modal Dialog (WIT-800 focus trap)", () => {
+    // Reproduces the staging bug: the picker used to render via
+    // createPortal(document.body), outside the Dialog's FocusScope, so the
+    // search input could not hold focus. The Radix Popover rebuild keeps the
+    // input inside its own (parent-pausing) focus scope.
+    render(
+      <Dialog open>
+        <DialogContent aria-describedby={undefined}>
+          <DialogTitle>Compose</DialogTitle>
+          <EmailRecipientField
+            label="To"
+            recipients={[]}
+            onRecipientsChange={vi.fn()}
+            showPicker
+            contacts={contacts}
+          />
+        </DialogContent>
+      </Dialog>,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /Contacts/ }))
+    const search = screen.getByPlaceholderText("Search contacts...") as HTMLInputElement
+
+    search.focus()
+    expect(document.activeElement).toBe(search)
+
+    fireEvent.change(search, { target: { value: "Alex" } })
+    expect(search.value).toBe("Alex")
+    const listbox = screen.getByRole("listbox")
+    expect(within(listbox).getByText("Alex Admin")).toBeTruthy()
+  })
 })

package/src/components/__tests__/related-record-action-card.test.tsx

@@ -0,0 +1,123 @@
+import "@testing-library/jest-dom/vitest"
+
+import React from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { BRAND_ICONS } from "../../lib/icons"
+import { RelatedRecordActionCard } from "../related-record-action-card"
+
+describe("RelatedRecordActionCard", () => {
+  it("renders an enabled href as a link with pointer affordance", () => {
+    render(
+      <RelatedRecordActionCard
+        kind="account"
+        label="Open account"
+        subtitle="Acme Corp"
+        href="/accounts/acme"
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card.tagName).toBe("A")
+    expect(card).toHaveAttribute("href", "/accounts/acme")
+    expect(card.className).toContain("cursor-pointer")
+    expect(card.className).toContain("hover:bg-muted/50")
+    expect(card.className).toContain("hover:border-border/80")
+    expect(card.className).toContain("focus-visible:ring-2")
+    expect(card.className).toContain("active:text-primary")
+    expect(screen.getByText("Acme Corp")).toBeInTheDocument()
+  })
+
+  it("renders an enabled onClick action as a button and invokes the callback", () => {
+    const onClick = vi.fn()
+
+    render(
+      <RelatedRecordActionCard
+        kind="case"
+        label="Open case"
+        onClick={onClick}
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByRole("button", { name: /open case/i })
+
+    expect(card.tagName).toBe("BUTTON")
+    expect(card).toHaveAttribute("type", "button")
+    expect(card.className).toContain("cursor-pointer")
+
+    fireEvent.click(card)
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it("renders a disabled card when disabledReason is present", () => {
+    render(
+      <RelatedRecordActionCard
+        kind="opportunity"
+        label="Open opportunity"
+        disabledReason="Connect Salesforce to view this opportunity."
+        href="/opportunities/1"
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card.tagName).toBe("DIV")
+    expect(card).toHaveAttribute("aria-disabled", "true")
+    expect(card.className).toContain("cursor-not-allowed")
+    expect(card.className).toContain("text-muted-foreground")
+    expect(card.className).not.toContain("cursor-pointer")
+    expect(card.className).not.toContain("hover:bg-muted/50")
+    expect(screen.getByText("Connect Salesforce to view this opportunity.")).toBeInTheDocument()
+  })
+
+  it("renders a disabled card when no action is available", () => {
+    render(<RelatedRecordActionCard kind="generic" label="Unavailable record" testId="record-card" />)
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card.tagName).toBe("DIV")
+    expect(card).toHaveAttribute("aria-disabled", "true")
+    expect(card.className).toContain("cursor-not-allowed")
+  })
+
+  it("sets external link attributes and exposes an accessible external-link cue", () => {
+    const { container } = render(
+      <RelatedRecordActionCard
+        kind="salesforce"
+        label="Open in Salesforce"
+        href="https://example.salesforce.com/001"
+        external
+        testId="record-card"
+      />
+    )
+
+    const card = screen.getByTestId("record-card")
+
+    expect(card).toHaveAttribute("target", "_blank")
+    expect(card).toHaveAttribute("rel", "noopener noreferrer")
+    expect(screen.getByText("opens in a new tab")).toHaveClass("sr-only")
+    expect(container.querySelector('[data-slot="related-record-action-card-external-icon"]')).not.toBeNull()
+  })
+
+  it("renders the Salesforce brand icon when icon is salesforce", () => {
+    const { container } = render(
+      <RelatedRecordActionCard
+        kind="generic"
+        label="Salesforce record"
+        href="https://example.salesforce.com/001"
+        icon="salesforce"
+      />
+    )
+
+    const icon = container.querySelector('[data-slot="related-record-action-card-icon"] img')
+
+    expect(icon).toHaveAttribute("src", BRAND_ICONS.salesforce)
+    expect(icon).toHaveAttribute("alt", "Salesforce")
+  })
+})

package/src/components/__tests__/suggested-actions-feedback-header.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * Tests for the SuggestedActions card header thumbs (feedback direction).
+ *
+ * Covers:
+ *  - Clicking up opens the feedback panel with direction "up"
+ *  - Clicking down opens the feedback panel with direction "down"
+ *  - Clicking the same direction again closes the panel
+ *  - Switching direction remounts DraftFeedbackInline (panel stays open, content switches)
+ */
+
+import { describe, it, expect } from "vitest"
+import React from "react"
+import { render, screen, fireEvent } from "@testing-library/react"
+import { SuggestedActions } from "../suggested-actions"
+import type { SuggestedAction } from "../suggested-actions"
+
+const action: SuggestedAction = {
+  id: 1,
+  type: "email",
+  label: "Send follow-up email",
+  status: "pending",
+  content: "<p>Hello there.</p>",
+}
+
+// The header thumbs are the only buttons that wrap a thumbs-up/down SVG and
+// live in the card header. We resolve them by locating the lucide icon class.
+function getHeaderThumbs(container: HTMLElement) {
+  const up = container.querySelector("button .lucide-thumbs-up")?.closest("button")
+  const down = container.querySelector("button .lucide-thumbs-down")?.closest("button")
+  return { up: up as HTMLButtonElement, down: down as HTMLButtonElement }
+}
+
+describe("SuggestedActions header thumbs", () => {
+  it("does not show the feedback panel initially", () => {
+    render(<SuggestedActions actions={[action]} />)
+    expect(screen.queryByText("How's this draft?")).toBeNull()
+  })
+
+  it("opens the feedback panel with direction up when up is clicked", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { up } = getHeaderThumbs(container)
+    fireEvent.click(up)
+
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+    expect(screen.queryByText("What needs improvement?")).toBeNull()
+    expect(up.className).toContain("bg-muted")
+    expect(up.className).toContain("text-foreground")
+  })
+
+  it("opens the feedback panel with direction down when down is clicked", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { down } = getHeaderThumbs(container)
+    fireEvent.click(down)
+
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+    expect(down.className).toContain("bg-muted")
+    expect(down.className).toContain("text-foreground")
+  })
+
+  it("closes the panel when the same direction is clicked again", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { up } = getHeaderThumbs(container)
+    fireEvent.click(up)
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+
+    fireEvent.click(up)
+    expect(screen.queryByText("How's this draft?")).toBeNull()
+  })
+
+  it("switches direction (remounts DraftFeedbackInline) while keeping the panel open", () => {
+    const { container } = render(<SuggestedActions actions={[action]} />)
+    const { up, down } = getHeaderThumbs(container)
+
+    fireEvent.click(up)
+    expect(screen.getByText("What worked well?")).toBeTruthy()
+
+    fireEvent.click(down)
+    // Panel still open, but now showing the negative (down) variant.
+    expect(screen.getByText("How's this draft?")).toBeTruthy()
+    expect(screen.getByText("What needs improvement?")).toBeTruthy()
+    expect(screen.queryByText("What worked well?")).toBeNull()
+  })
+})

package/src/components/draft-feedback-inline.tsx

@@ -16,7 +16,7 @@ const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"]
 const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"]
 
 export interface DraftFeedbackInlineProps {
-  initialDirection?: 'up' | 'down' | null
+  initialDirection?: "up" | "down" | null
   onRegenerateRequest?: (pills: string[], detail: string) => void
   onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void
   onDiscardRequest?: (pills: string[], detail: string) => void
@@ -70,7 +70,7 @@ export function DraftFeedbackInline({
   if (noted) {
     return (
       <div className="flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200">
-        <Check className="w-3.5 h-3.5 text-emerald-500" />
+        <Check className="w-3.5 h-3.5 text-foreground" />
         <span className="text-xs text-muted-foreground">Feedback recorded</span>
       </div>
     )
@@ -88,7 +88,7 @@ export function DraftFeedbackInline({
   }
 
   return (
-    <div className="space-y-0">
+    <div className="space-y-2">
       <div className="flex items-center justify-between">
         <span className="text-sm text-foreground font-medium">How&apos;s this draft?</span>
         <div className="flex gap-1">
@@ -100,11 +100,11 @@ export function DraftFeedbackInline({
             }}
             className={`p-1.5 rounded transition-colors ${
               thumbState === "up"
-                ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400"
+                ? "bg-muted text-foreground"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
-            <ThumbsUp className="w-4 h-4" fill={thumbState === "up" ? "currentColor" : "none"} />
+            <ThumbsUp className="w-4 h-4" />
           </button>
           <button
             onClick={() => {
@@ -114,31 +114,31 @@ export function DraftFeedbackInline({
             }}
             className={`p-1.5 rounded transition-colors ${
               thumbState === "down"
-                ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400"
+                ? "bg-muted text-foreground"
                 : "hover:bg-muted text-muted-foreground hover:text-foreground"
             }`}
           >
-            <ThumbsDown className="w-4 h-4" fill={thumbState === "down" ? "currentColor" : "none"} />
+            <ThumbsDown className="w-4 h-4" />
           </button>
         </div>
       </div>
 
       {thumbState && (
-        <div className="pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200">
+        <div className="pt-2 space-y-2.5 animate-in fade-in slide-in-from-top-2 duration-200">
           <div>
             <span className="text-xs text-muted-foreground mb-2 block font-medium">
               {thumbState === "up" ? "What worked well?" : "What needs improvement?"}
             </span>
-            <div className="flex flex-wrap gap-1.5">
+            <div className="flex flex-wrap gap-2">
               {(thumbState === "up" ? positivePills : negativePills).map((pill) => (
                 <button
                   key={pill}
                   onClick={() => togglePill(pill)}
-                  className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${
+                  className={`px-3 py-1.5 rounded-full text-[11px] font-medium border transition-colors ${
                     selectedPills.includes(pill)
                       ? thumbState === "up"
-                        ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800"
-                        : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800"
+                        ? "bg-muted text-foreground border-border"
+                        : "bg-red-50 text-red-700 border-red-200 dark:bg-red-950/30 dark:text-red-300 dark:border-red-800"
                       : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"
                   }`}
                 >
@@ -155,7 +155,7 @@ export function DraftFeedbackInline({
             className="w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
           />
 
-          <div className="flex items-center gap-2 pt-1">
+          <div className="flex items-center gap-2.5 pt-2">
             {thumbState === "down" ? (
               <>
                 <button