@flamingo-stack/openframe-frontend-core 0.0.512 → 0.0.513-1642.4228.1

package/src/components/ui/.deleted-user-avatar.md

@@ -0,0 +1,20 @@
+<!-- source-hash: 2f3d376de06fcf7bbf7f975bb94674e9 -->
+Red round user-x placeholder rendered instead of an avatar for deleted user accounts (statuses `DELETED` / `SELF_DELETED`).
+
+## Key Components
+
+### `DeletedUserAvatar`
+
+**Props (`DeletedUserAvatarProps`):**
+
+| Prop | Type | Description |
+|---|---|---|
+| `size` | `'sm' \| 'md' \| 'lg'` | Mirrors `SquareAvatar` size buckets (32 / 40 / 48px). Default `'md'`. |
+| `className` | `string` | Extra classes (e.g. `h-6 w-6` for the dropdown-option size). |
+| `accessibleLabel` | `string` | Accessible name; pass the user identity when known (e.g. "Deleted user: Jane Doe"). Defaults to "Deleted user". |
+
+## Notes
+
+- A dedicated component — not a `SquareAvatar` prop — because `SquareAvatar`'s only fallback is text initials, and initials for a deleted account is exactly what the design replaces.
+- Styling: `bg-ods-error/20` circle + `text-ods-error` `UserXmarkIcon`.
+- Consumed by `AssigneeDropdown` and the board `TicketCardBody` via the `deleted` flag on their assignee shapes; app repos also use it directly for their own user cells.

package/src/components/ui/.ticket-info-section.md

@@ -1,4 +1,4 @@
-<!-- source-hash: 7ac50b47361449080e2ba3874b959c5f -->
+<!-- source-hash: 64199a542faa0b43a2d1edd2ca00d745 -->
 A collapsible ticket information panel that displays key ticket metadata (organization, assignee, device, status) in a compact header row, with an expandable section revealing description, attachments, tags, and notes.
 
 ## Key Components
@@ -48,4 +48,5 @@ import { TicketInfoSection } from "./ticket-info-section"
 
 ## Source
 
-[`ticket-info-section.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ticket-info-section.tsx)
+[`ticket-info-section.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ticket-info-section.tsx)
+- `assigned.currentAssignee.deleted` — forwarded to `AssigneeDropdown`: deleted accounts render the red user-x placeholder + red name.

package/src/components/ui/assignee-dropdown.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { PenEditIcon, UserIcon, UserPlusIcon } from '../icons-v2-generated'
 import { cn } from '../../utils/cn'
 import { Autocomplete, type AutocompleteOption } from './autocomplete'
+import { DeletedUserAvatar } from './deleted-user-avatar'
 import { SearchableSelect, type SearchableSelectOption } from './searchable-select'
 import { SquareAvatar } from './square-avatar'
 
@@ -18,6 +19,8 @@ export interface AssigneeDropdownProps {
     id: string
     name: string
     avatarSrc?: string
+    /** Deleted account (DELETED / SELF_DELETED) — renders the red user-x placeholder + red name. */
+    deleted?: boolean
   }
   options: TicketAssigneeOption[]
   isLoading?: boolean
@@ -79,13 +82,17 @@ function CompactAssigneeDropdown({
         className,
       )}
     >
-      <SquareAvatar
-        src={currentAssignee.avatarSrc}
-        alt={currentAssignee.name}
-        fallback={currentAssignee.name || 'User'}
-        size="sm"
-        variant="round"
-      />
+      {currentAssignee.deleted ? (
+        <DeletedUserAvatar size="sm" accessibleLabel={`Deleted user: ${currentAssignee.name || currentAssignee.id}`} />
+      ) : (
+        <SquareAvatar
+          src={currentAssignee.avatarSrc}
+          alt={currentAssignee.name}
+          fallback={currentAssignee.name || 'User'}
+          size="sm"
+          variant="round"
+        />
+      )}
     </button>
   ) : (
     <button
@@ -159,14 +166,22 @@ function DefaultAssigneeDropdown({
           showChevron={false}
           startAdornment={
             hasAssignee ? (
-              <SquareAvatar
-                src={currentAssignee!.avatarSrc}
-                alt={currentAssignee!.name}
-                fallback={currentAssignee!.name || 'User'}
-                size="sm"
-                variant="round"
-                className="h-6 w-6"
-              />
+              currentAssignee!.deleted ? (
+                <DeletedUserAvatar
+                  size="sm"
+                  className="h-6 w-6"
+                  accessibleLabel={`Deleted user: ${currentAssignee!.name || currentAssignee!.id}`}
+                />
+              ) : (
+                <SquareAvatar
+                  src={currentAssignee!.avatarSrc}
+                  alt={currentAssignee!.name}
+                  fallback={currentAssignee!.name || 'User'}
+                  size="sm"
+                  variant="round"
+                  className="h-6 w-6"
+                />
+              )
             ) : (
               <UserIcon className="size-5 text-ods-text-secondary" />
             )
@@ -181,14 +196,18 @@ function DefaultAssigneeDropdown({
   if (hasAssignee) {
     return (
       <div className={cn('flex items-center gap-[var(--spacing-system-xs)] min-w-0', className)}>
-        <SquareAvatar
-          src={currentAssignee!.avatarSrc}
-          alt={currentAssignee!.name}
-          fallback={currentAssignee!.name || 'User'}
-          size="md"
-          variant="round"
-          className="shrink-0"
-        />
+        {currentAssignee!.deleted ? (
+          <DeletedUserAvatar size="md" accessibleLabel={`Deleted user: ${currentAssignee!.name || currentAssignee!.id}`} />
+        ) : (
+          <SquareAvatar
+            src={currentAssignee!.avatarSrc}
+            alt={currentAssignee!.name}
+            fallback={currentAssignee!.name || 'User'}
+            size="md"
+            variant="round"
+            className="shrink-0"
+          />
+        )}
         <div className="flex-1 min-w-0 overflow-hidden">
           <div className="flex flex-col justify-center">
             <div className="flex items-center gap-[var(--spacing-system-xxs)] w-full min-w-0">
@@ -198,7 +217,10 @@ function DefaultAssigneeDropdown({
                 className="flex items-center gap-[var(--spacing-system-xxs)] cursor-pointer group text-left"
               >
                 <PenEditIcon className="size-4 shrink-0 text-ods-text-secondary group-hover:text-ods-accent transition-colors" />
-                <span className="text-h4 text-ods-text-primary truncate" title={currentAssignee!.name}>{currentAssignee!.name}</span>
+                <span
+                  className={cn('text-h4 truncate', currentAssignee!.deleted ? 'text-ods-error' : 'text-ods-text-primary')}
+                  title={currentAssignee!.name}
+                >{currentAssignee!.name}</span>
               </button>
             </div>
             <span className="text-h6 text-ods-text-secondary truncate">Assigned</span>

package/src/components/ui/deleted-user-avatar.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import * as React from 'react'
+import { UserXmarkIcon } from '../icons-v2-generated'
+import { cn } from '../../utils/cn'
+
+/** Mirrors SquareAvatar's size buckets (sm 32 / md 40 / lg 48). */
+const SIZE_CLASSES = {
+  sm: 'h-8 w-8',
+  md: 'h-10 w-10',
+  lg: 'h-12 w-12',
+} as const
+
+const ICON_CLASSES = {
+  sm: 'w-4 h-4',
+  md: 'w-5 h-5',
+  lg: 'w-6 h-6',
+} as const
+
+export interface DeletedUserAvatarProps {
+  size?: keyof typeof SIZE_CLASSES
+  className?: string
+  /**
+   * Accessible name for the placeholder. Pass the user's identity when known
+   * (e.g. "Deleted user: Jane Doe") so assistive technology doesn't lose who
+   * the row refers to. Falls back to the generic "Deleted user".
+   */
+  accessibleLabel?: string
+}
+
+/**
+ * Red round user-x placeholder shown instead of the avatar for deleted users
+ * (accounts with status DELETED / SELF_DELETED). A dedicated component — not a
+ * `SquareAvatar` prop — because `SquareAvatar`'s only fallback is text
+ * initials, and initials for a deleted account is exactly what the design
+ * replaces.
+ */
+export function DeletedUserAvatar({ size = 'md', className, accessibleLabel }: DeletedUserAvatarProps) {
+  return (
+    <span
+      role="img"
+      aria-label={accessibleLabel || 'Deleted user'}
+      className={cn(
+        'flex items-center justify-center rounded-full bg-ods-error/20 shrink-0',
+        SIZE_CLASSES[size],
+        className,
+      )}
+    >
+      <UserXmarkIcon className={cn('text-ods-error', ICON_CLASSES[size])} />
+    </span>
+  )
+}

package/src/components/ui/index.ts

@@ -103,6 +103,7 @@ export * from './page-actions'
 export * from './service-card'
 export * from './slider'
 export * from './avatar-stack'
+export * from './deleted-user-avatar'
 export * from './square-avatar'
 export * from './tab-selector'
 export * from './tag'

package/src/components/ui/ticket-info-section.tsx

@@ -57,6 +57,8 @@ export interface TicketInfoSectionProps {
       id: string
       name: string
       avatarSrc?: string
+      /** Deleted account (DELETED / SELF_DELETED) — renders the red user-x placeholder + red name. */
+      deleted?: boolean
     }
     options: TicketAssigneeOption[]
     isLoading?: boolean