@handled-ai/design-system 0.18.10 → 0.18.12

package/src/prototype/__tests__/detail-view-title-slots.test.tsx

@@ -62,4 +62,19 @@ describe("DetailView title slots", () => {
 
     expect(screen.getByRole("button", { name: "Quick action" })).toBeTruthy()
   })
+  it("renders a full-width title action row without replacing title extra or metadata", () => {
+    renderDetailView({
+      renderTitleExtra: () => <span data-testid="title-extra">Compact extra</span>,
+      renderTitleActionRow: () => (
+        <button type="button">Full-width quick action</button>
+      ),
+      renderMetadataExtra: () => <span data-testid="metadata-extra">Owner: Lee</span>,
+    })
+
+    expect(screen.getByTestId("title-extra").textContent).toBe("Compact extra")
+    expect(screen.getByRole("button", { name: "Full-width quick action" })).toBeTruthy()
+    expect(screen.getByTestId("metadata-extra").textContent).toBe("Owner: Lee")
+    expect(screen.getByTestId("priority-popover-trigger")).toBeTruthy()
+  })
+
 })

package/src/prototype/prototype-config.ts

@@ -229,6 +229,8 @@ export interface InboxViewConfig {
   attentionCount?: number
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
+  /** Render a full-width action row below the detail title row. */
+  renderTitleActionRow?: (item: QueueItem) => React.ReactNode
   /** Render supporting content below the detail title. */
   renderTitleSubtext?: (item: QueueItem) => React.ReactNode
   /** Sort options for the inbox. When provided, a sort dropdown is rendered in the split view toolbar. */

package/src/prototype/prototype-inbox-view.tsx

@@ -141,6 +141,8 @@ export interface DetailViewProps {
   lastActivityTime?: string
   /** Render extra content inline with the detail title. */
   renderTitleExtra?: (item: QueueItem) => React.ReactNode
+  /** Render a full-width action row below the detail title row. */
+  renderTitleActionRow?: (item: QueueItem) => React.ReactNode
   /** Render supporting content below the detail title. */
   renderTitleSubtext?: (item: QueueItem) => React.ReactNode
   /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */
@@ -321,6 +323,7 @@ export function DetailView({
   renderAfterScore,
   lastActivityTime,
   renderTitleExtra,
+  renderTitleActionRow,
   renderTitleSubtext,
   renderMetadataExtra,
   onOpenSignalBucket,
@@ -468,12 +471,19 @@ export function DetailView({
             <span className="text-xs text-muted-foreground">{item.company}</span>
           </div>
 
-          <div className="mb-3 flex flex-wrap items-start gap-x-3 gap-y-2">
-            <div className="min-w-0 flex-1">
-              <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
-              {renderTitleSubtext?.(item)}
+          <div className="mb-3 space-y-3">
+            <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
+              <div className="min-w-0 flex-1">
+                <h1 className="text-2xl font-bold tracking-tight text-foreground">{item.title}</h1>
+                {renderTitleSubtext?.(item)}
+              </div>
+              {renderTitleExtra?.(item)}
             </div>
-            {renderTitleExtra?.(item)}
+            {renderTitleActionRow ? (
+              <div className="flex w-full flex-wrap items-center gap-2">
+                {renderTitleActionRow(item)}
+              </div>
+            ) : null}
           </div>
 
           <div className="mb-6 flex flex-wrap items-center gap-2">
@@ -649,6 +659,7 @@ export function PrototypeInboxView({
   timelineSystemEventsConfig,
   attentionCount,
   renderTitleExtra,
+  renderTitleActionRow,
   renderTitleSubtext,
   sortOptions,
   activeSortId,
@@ -891,6 +902,7 @@ export function PrototypeInboxView({
     timelineSystemEventsConfig,
     attentionCount,
     renderTitleExtra,
+    renderTitleActionRow,
     renderTitleSubtext,
     onOpenSignalBucket,
   }