SILVER/NODEDC_DESIGN_GUIDELINE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(ui): support leading resource status indicators

Browse Source
This commit is contained in:
Codex
2026-09-06 01:17:37 +03:00
parent 3adeb33b1b
commit 999864e5b0
5 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-core/styles.css
+2
View File
@@ -3790,9 +3790,11 @@ textarea.nodedc-field__control {
.nodedc-resource-row__copy > small { color: var(--nodedc-text-muted); font-size: var(--nodedc-font-size-xs); }
.nodedc-resource-row__actions { display: flex; align-items: center; gap: .85rem; }
.nodedc-resource-row__status { font-size: var(--nodedc-font-size-sm); }
.nodedc-resource-row--leading-status > .nodedc-resource-row__status { display: flex; align-items: center; flex: 0 0 auto; }
@media (max-width: 540px) {
.nodedc-resource-row { flex-wrap: wrap; }
.nodedc-resource-row__copy { flex-basis: calc(100% - 3rem); }
.nodedc-resource-row--leading-status > .nodedc-resource-row__copy { flex: 1 1 0; }
.nodedc-resource-row__actions { margin-left: auto; }
}
packages/ui-react/src/ResourceRow.tsx
+6 -3
View File
@@ -8,22 +8,25 @@ export interface ResourceRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "
description?: ReactNode;
metadata?: ReactNode;
status?: ReactNode;
statusPlacement?: "leading" | "trailing";
actions?: ReactNode;
progress?: Pick<ProgressBarProps, "label" | "value" | "valueText">;
}
/** Compact resource presentation extracted from Mission Core AI Inference.
* Actions stay canonical controls; the row itself is not a nested button. */
export function ResourceRow({ title, icon, description, metadata, status, actions, progress, className, ...props }: ResourceRowProps) {
return <div className={cn("nodedc-resource-row", progress && "nodedc-resource-row--progress", className)} {...props}>
export function ResourceRow({ title, icon, description, metadata, status, statusPlacement = "trailing", actions, progress, className, ...props }: ResourceRowProps) {
const leadingStatus = !progress && !!status && statusPlacement === "leading";
return <div className={cn("nodedc-resource-row", progress && "nodedc-resource-row--progress", leadingStatus && "nodedc-resource-row--leading-status", className)} {...props}>
{icon ? <span className="nodedc-resource-row__icon" aria-hidden="true">{icon}</span> : null}
{leadingStatus ? <div className="nodedc-resource-row__status">{status}</div> : null}
<div className="nodedc-resource-row__copy">
<strong>{title}</strong>
{description ? <span>{description}</span> : null}
{metadata ? <small>{metadata}</small> : null}
</div>
{progress ? <ProgressBar {...progress} /> : null}
{!progress && status ? <div className="nodedc-resource-row__status">{status}</div> : null}
{!progress && status && statusPlacement === "trailing" ? <div className="nodedc-resource-row__status">{status}</div> : null}
{actions ? <div className="nodedc-resource-row__actions">{actions}</div> : null}
</div>;
}