c7c6c5a8c4
Adds a shared urgency color source to priorityIndicator and wires it into every priority-glyph surface so low/normal/high/urgent read consistently by color, not just icon shape. - priorityIndicator.tsx: add colorVar (low=info/blue, normal=muted, high=warning/amber, urgent=error/red) and new getPriorityColorVar() export as the single source of truth - QuickEntryBox: tint the icon-only priority trigger and each option row in the priority picker with the matching urgency color - TaskForm: tint the New Task inline priority glyph using the same color source - TaskCard: render a colored priority glyph alongside the existing text label in the card-priority-badge (kept the non-normal visibility gate and badge geometry via a small CSS gap addition) - Updated/added tests for QuickEntryBox, TaskCard (badge, badge-height, badge-wrap), and priorityIndicator to assert the new colors; added a patch changeset and a dashboard-guide.md doc update Files changed: .changeset/fn-7842-priority-color-coding.md | 7 +++++ docs/dashboard-guide.md | 7 +++-- .../dashboard/app/components/QuickEntryBox.tsx | 7 +++-- packages/dashboard/app/components/TaskCard.css | 2 ++ packages/dashboard/app/components/TaskCard.tsx | 6 +++- packages/dashboard/app/components/TaskForm.tsx | 7 +++-- .../components/__tests__/QuickEntryBox.test.tsx | 17 +++++++++-- .../__tests__/TaskCard.badge-height.test.tsx | 5 ++++ .../__tests__/TaskCard.badge-wrap.test.tsx | 5 ++++ .../app/components/__tests__/TaskCard.test.tsx | 33 +++++++++++++++++++++- .../app/utils/__tests__/priorityIndicator.test.tsx | 13 +++++---- packages/dashboard/app/utils/priorityIndicator.tsx | 16 ++++++++--- 12 files changed, 103 insertions(+), 22 deletions(-) Fusion-Task-Id: FN-7842 Fusion-Task-Lineage: 0b2d0d15-6e61-45fc-9378-bc09002bef55 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
39 lines
1.7 KiB
TypeScript
39 lines
1.7 KiB
TypeScript
import { ArrowDown, ArrowUp, Flag, TriangleAlert, type LucideIcon } from "lucide-react";
|
|
import type { TaskPriority } from "@fusion/core";
|
|
|
|
export interface PriorityIndicator {
|
|
icon: LucideIcon;
|
|
label: string;
|
|
colorVar: string;
|
|
}
|
|
|
|
/*
|
|
FNXC:QuickAddPriorityIndicator 2026-07-10-12:00:
|
|
Quick-add and New Task priority affordances must share one glyph language: ArrowUp means high, ArrowDown means low, Flag means normal, and TriangleAlert means urgent. Keep this helper as the single source so icon-only priority buttons do not drift across composer surfaces.
|
|
|
|
FNXC:PriorityColorCoding 2026-07-11-00:00:
|
|
Priority affordances in quick add, the New Task inline row, and task cards must be color-coded by urgency from this single source: low=info, normal=muted, high=warning, urgent=error. Use semantic dashboard tokens only so composer glyphs and card badges cannot drift.
|
|
*/
|
|
const PRIORITY_INDICATORS: Record<TaskPriority, PriorityIndicator> = {
|
|
low: { icon: ArrowDown, label: "Low", colorVar: "var(--color-info)" },
|
|
normal: { icon: Flag, label: "Normal", colorVar: "var(--text-muted)" },
|
|
high: { icon: ArrowUp, label: "High", colorVar: "var(--color-warning)" },
|
|
urgent: { icon: TriangleAlert, label: "Urgent", colorVar: "var(--color-error)" },
|
|
};
|
|
|
|
export function priorityIndicator(priority: TaskPriority): PriorityIndicator {
|
|
return PRIORITY_INDICATORS[priority];
|
|
}
|
|
|
|
export function getPriorityIcon(priority: TaskPriority): LucideIcon {
|
|
return priorityIndicator(priority).icon;
|
|
}
|
|
|
|
export function getPriorityLabel(priority: TaskPriority): string {
|
|
return priorityIndicator(priority).label;
|
|
}
|
|
|
|
export function getPriorityColorVar(priority: TaskPriority): string {
|
|
return priorityIndicator(priority).colorVar;
|
|
}
|