@handled-ai/design-system 0.20.34 → 0.21.0

package/src/components/__tests__/virtualized-data-table.test.tsx

@@ -465,6 +465,130 @@ describe("VirtualizedDataTable — consistent header styling", () => {
     expect(triggers[0].className).toContain("group-hover/header:opacity-100");
   });
 
+  it("sortable header label carries text-xs so it does not inherit a larger button font", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const sortButton = Array.from(
+      container.querySelectorAll('[role="columnheader"] button'),
+    ).find((b) => b.getAttribute("aria-label") !== "Column actions")!;
+    // The button itself and its inner label span should carry text-xs
+    expect(sortButton.className).toContain("text-xs");
+    const labelSpan = sortButton.querySelector("span")!;
+    expect(labelSpan.className).toContain("text-xs");
+  });
+
+  it("sortable and non-sortable header labels share the same size class", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+      {
+        accessorKey: "value",
+        header: "Value",
+        size: 150,
+        // non-sortable, non-hideable → plain span
+        enableSorting: false,
+        enableHiding: false,
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const headers = container.querySelectorAll('[role="columnheader"]');
+    // Sortable label span lives inside the sort button
+    const sortButton = Array.from(
+      headers[0].querySelectorAll("button"),
+    ).find((b) => b.getAttribute("aria-label") !== "Column actions")!;
+    const sortableLabel = sortButton.querySelector("span")!;
+    // Non-sortable label is the direct span in the header cell
+    const nonSortableLabel = headers[1].querySelector("span")!;
+
+    expect(sortableLabel.className).toContain("text-xs");
+    expect(nonSortableLabel.className).toContain("text-xs");
+  });
+
+  it("string header renders a native title equal to the header text", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: "Account Name",
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const sortButton = Array.from(
+      container.querySelectorAll('[role="columnheader"] button'),
+    ).find((b) => b.getAttribute("aria-label") !== "Column actions")!;
+    const labelSpan = sortButton.querySelector("span")!;
+    expect(labelSpan.getAttribute("title")).toBe("Account Name");
+  });
+
+  it("non-string ReactNode header renders no title attribute", () => {
+    const columns: ColumnDef<TestRow, unknown>[] = [
+      {
+        accessorKey: "name",
+        header: () => <em>Custom</em>,
+        size: 200,
+        meta: { sortKey: "name" },
+      },
+    ];
+    const { container } = render(
+      <VirtualizedDataTable
+        columns={columns}
+        data={testData}
+        height={300}
+        onColumnSort={vi.fn()}
+        activeSortColumn="name"
+        activeSortDirection="asc"
+      />,
+    );
+
+    const sortButton = Array.from(
+      container.querySelectorAll('[role="columnheader"] button'),
+    ).find((b) => b.getAttribute("aria-label") !== "Column actions")!;
+    const labelSpan = sortButton.querySelector("span")!;
+    expect(labelSpan.hasAttribute("title")).toBe(false);
+  });
+
   it("header cell container uses same classes for all columns regardless of sort state", () => {
     const columns: ColumnDef<TestRow, unknown>[] = [
       {

package/src/components/contextual-quick-action-launcher.tsx

@@ -20,12 +20,6 @@ export interface ContextualQuickActionItem {
   disabled?: boolean
   disabledReason?: string
   meta?: React.ReactNode
-  /**
-   * Optional stable test id stamped on the rendered menu item. Lets callers
-   * preserve an existing testid when an action moves into the launcher (e.g.
-   * the inbox `case-sync-button`).
-   */
-  testId?: string
 }
 
 export type ContextualQuickActionLauncherVariant = "default" | "case-panel"
@@ -199,7 +193,6 @@ function ContextualQuickActionLauncher({
             <DropdownMenuItem
               key={item.id}
               disabled={item.disabled}
-              data-testid={item.testId}
               onSelect={(event) => handleSelect(item, event)}
               className={cn(
                 isCasePanel

package/src/components/data-table.tsx

@@ -23,6 +23,7 @@ import {
 } from "@tanstack/react-table"
 
 import { cn } from "../lib/utils"
+import { getEntityColor } from "../lib/entity-color"
 import { Badge } from "./badge"
 import {
   DataTableQuickViews,
@@ -407,23 +408,6 @@ const DEFAULT_COLUMN_VISIBILITY: VisibilityState = {
   opportunityCount: false,
 }
 
-function getEntityColor(name: string) {
-  const colors = [
-    "bg-muted text-muted-foreground",
-    "bg-gray-100 text-gray-600",
-    "bg-zinc-100 text-zinc-600",
-    "bg-blue-50 text-blue-600",
-    "bg-indigo-50 text-indigo-600",
-    "bg-violet-50 text-violet-600",
-  ]
-
-  let hash = 0
-  for (let i = 0; i < name.length; i += 1) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  }
-  return colors[Math.abs(hash) % colors.length]
-}
-
 function getIndustryColor(industry: string) {
   const colors: Record<string, string> = {
     "E-commerce": "bg-emerald-50 text-emerald-700 border-emerald-100",

package/src/components/linked-entity-cell.tsx

@@ -4,6 +4,7 @@ import * as React from "react"
 import { ExternalLink } from "lucide-react"
 
 import { cn } from "../lib/utils"
+import { getEntityColor } from "../lib/entity-color"
 
 export interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivElement> {
   name: React.ReactNode
@@ -13,6 +14,21 @@ export interface LinkedEntityCellProps extends React.HTMLAttributes<HTMLDivEleme
   icon?: React.ReactNode
   external?: boolean
   onNavigate?: () => void
+  /**
+   * When provided, renders a small colored rounded initial badge before the
+   * name. The full string is used as the color seed; the displayed letter is
+   * the first character. Omit to render no badge.
+   */
+  avatarLabel?: string
+  /**
+   * Optional node rendered after the name (a trailing slot), e.g. a separate
+   * action link. Does not affect the name's own `href`.
+   */
+  trailingAction?: React.ReactNode
+  /**
+   * Escape-hatch class merged onto the name span/link. Defaults to `text-sm`.
+   */
+  nameClassName?: string
 }
 
 export function LinkedEntityCell({
@@ -23,6 +39,9 @@ export function LinkedEntityCell({
   icon,
   external = false,
   onNavigate,
+  avatarLabel,
+  trailingAction,
+  nameClassName,
   className,
   ...props
 }: LinkedEntityCellProps) {
@@ -39,6 +58,18 @@ export function LinkedEntityCell({
       className={cn("flex min-w-0 items-center gap-2", className)}
       {...props}
     >
+      {avatarLabel ? (
+        <span
+          data-slot="linked-entity-cell-avatar"
+          aria-hidden="true"
+          className={cn(
+            "flex h-6 w-6 shrink-0 items-center justify-center rounded text-[10px] font-bold",
+            getEntityColor(avatarLabel),
+          )}
+        >
+          {avatarLabel.slice(0, 1)}
+        </span>
+      ) : null}
       {icon ? (
         <span data-slot="linked-entity-cell-icon" className="shrink-0 text-muted-foreground">
           {icon}
@@ -52,12 +83,18 @@ export function LinkedEntityCell({
             target={external ? "_blank" : undefined}
             rel={external ? "noreferrer" : undefined}
             onClick={onNavigate}
-            className="inline-flex max-w-full items-center gap-1 truncate font-medium text-foreground underline-offset-4 hover:text-primary hover:underline"
+            className={cn(
+              "inline-flex max-w-full items-center gap-1 truncate text-sm font-medium text-foreground underline-offset-4 hover:text-primary hover:underline",
+              nameClassName,
+            )}
           >
             {content}
           </a>
         ) : (
-          <span data-slot="linked-entity-cell-name" className="block truncate font-medium text-foreground">
+          <span
+            data-slot="linked-entity-cell-name"
+            className={cn("block truncate text-sm font-medium text-foreground", nameClassName)}
+          >
             {name}
           </span>
         )}
@@ -69,6 +106,11 @@ export function LinkedEntityCell({
           </div>
         ) : null}
       </div>
+      {trailingAction ? (
+        <span data-slot="linked-entity-cell-trailing" className="shrink-0">
+          {trailingAction}
+        </span>
+      ) : null}
     </div>
   )
 }

package/src/components/owner-chips.tsx

@@ -73,7 +73,7 @@ function SalesforceMark({ size = 13 }: { size?: number }) {
 
 function OwnerAvatar({ person, size = "sm" }: { person: OwnerPerson; size?: "sm" | "default" }) {
   return (
-    <Avatar size={size} className="ring-background ring-1">
+    <Avatar size={size} className="ring-background ring-2">
       {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt={person.name} /> : null}
       <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
         {getInitials({ name: person.name, email: person.email })}

package/src/components/virtualized-data-table.tsx

@@ -270,6 +270,13 @@ export function VirtualizedDataTable<TData>({
                   onColumnSort!(sortKey!, newDir)
                 } : undefined
 
+                const headerDef = header.column.columnDef.header
+                // When the header is a plain string, expose it as a native title
+                // tooltip so truncated headers remain readable. Non-string
+                // ReactNode headers render no title.
+                const headerTitle =
+                  typeof headerDef === "string" ? headerDef : undefined
+
                 return (
                   <div
                     key={header.id}
@@ -290,25 +297,22 @@ export function VirtualizedDataTable<TData>({
                         {canServerSort ? (
                           <button
                             type="button"
-                            className="flex min-w-0 flex-1 items-center gap-1 hover:text-foreground transition-colors"
+                            className="flex min-w-0 flex-1 items-center gap-1 text-xs leading-4 hover:text-foreground transition-colors"
                             onClick={handleHeaderClick}
                           >
-                            <span className="min-w-0 truncate">
-                              {flexRender(header.column.columnDef.header, header.getContext())}
+                            <span className="min-w-0 truncate text-xs leading-4" title={headerTitle}>
+                              {flexRender(headerDef, header.getContext())}
                             </span>
                             {sortIcon}
                           </button>
                         ) : header.column.getCanSort() ? (
                           <button
                             type="button"
-                            className="flex min-w-0 flex-1 items-center gap-1 hover:text-foreground transition-colors"
+                            className="flex min-w-0 flex-1 items-center gap-1 text-xs leading-4 hover:text-foreground transition-colors"
                             onClick={header.column.getToggleSortingHandler()}
                           >
-                            <span className="min-w-0 truncate">
-                              {flexRender(
-                                header.column.columnDef.header,
-                                header.getContext(),
-                              )}
+                            <span className="min-w-0 truncate text-xs leading-4" title={headerTitle}>
+                              {flexRender(headerDef, header.getContext())}
                             </span>
                             {header.column.getIsSorted() === "asc" ? (
                               <ArrowUp className="w-3 h-3 shrink-0" />
@@ -319,11 +323,8 @@ export function VirtualizedDataTable<TData>({
                             )}
                           </button>
                         ) : (
-                          <span className="min-w-0 flex-1 truncate">
-                            {flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
+                          <span className="min-w-0 flex-1 truncate text-xs leading-4" title={headerTitle}>
+                            {flexRender(headerDef, header.getContext())}
                           </span>
                         )}
                         {(canServerSort || header.column.getCanSort() || header.column.getCanHide()) && (

package/src/index.ts

@@ -5,6 +5,7 @@
 
 // Utilities
 export { cn } from "./lib/utils"
+export { getEntityColor } from "./lib/entity-color"
 export { BRAND_ICONS, BRAND_GRAPHICS } from "./lib/icons"
 export { displayName, getInitials, shortName, type ProfileLike } from "./lib/user-display"
 

package/src/lib/entity-color.ts

@@ -0,0 +1,22 @@
+/**
+ * Deterministically maps an entity name to a muted Tailwind color class pair
+ * (background + text) used for entity avatar/initial badges. The same input
+ * always yields the same color so a given entity keeps a stable color across
+ * the app.
+ */
+const COLORS = [
+  "bg-muted text-muted-foreground",
+  "bg-gray-100 text-gray-600",
+  "bg-zinc-100 text-zinc-600",
+  "bg-blue-50 text-blue-600",
+  "bg-indigo-50 text-indigo-600",
+  "bg-violet-50 text-violet-600",
+]
+
+export function getEntityColor(name: string) {
+  let hash = 0
+  for (let i = 0; i < name.length; i += 1) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return COLORS[Math.abs(hash) % COLORS.length]
+}