vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: delete StatusChip, migrate its 3 callers to shared Badge

Browse source 
mara: non-interactive Badge and StatusChip render identically (same
padding/radius/font, same tone-to-color mapping) and StatusChip's
4-tone/single-label shape is a strict subset of Badge's — no real
reason to keep both. Deletes StatusChip.tsx/.css, migrates AgentsPage's
config-PR chip, HivesPage's freshness chip, and ComponentsPage's own
table-status sample to Badge (tone/value, no onClick). Also drops the
now-redundant standalone StatusChip demo section on /components (the
Badge section already covers all 4 former chip tones plus accent).

Updated the two stale StatusChip references outside swarm-ui too:
design-guide.md's component-list example and colors.css's WCAG-
contrast-rationale comment.
This commit is contained in:
iris 2026-08-28 10:46:04 +02:00 • committed by mara
commit 638e1ac2c6
8 changed files with 19 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/packages/swarm-ui/src/pages/ComponentsPage.tsx
View file

@ -10,7 +10,6 @@ import type { ComponentChildren } from 'preact';
import { Panel } from '../ui/panel/Panel.js';
import { RelativeTime } from '../ui/relative-time/RelativeTime.js';
import { RefreshIntervalPicker, type RefreshIntervalMs } from '../ui/refresh-interval/RefreshInterval.js';
import { StatusChip, type ChipTone } from '../ui/status-chip/StatusChip.js';
import { Table, type TableColumn } from '../ui/table/Table.js';
import { TextField } from '../ui/text-field/TextField.js';
import { SelectField, type SelectOption } from '../ui/select-field/SelectField.js';
@ -37,8 +36,6 @@ function Sample({ label, children }: { label: string; children: ComponentChildre
);
}
const CHIP_TONES: ChipTone[] = ['neutral', 'positive', 'warning', 'negative'];
interface Row {
name: string;
detail: string;
@ -47,7 +44,7 @@ interface Row {
const TABLE_COLUMNS: TableColumn<Row>[] = [
{ key: 'name', header: 'name', render: (r) => r.name },
{ key: 'detail', header: 'detail', render: (r) => r.detail },
{ key: 'status', header: 'status', render: () => <StatusChip tone="positive" label="ok" /> },
{ key: 'status', header: 'status', render: () => <Badge tone="positive" value="ok" /> },
];
const TABLE_ROWS: Row[] = [
@ -170,16 +167,6 @@ export function ComponentsPage() {
</Sample>
</Section>
<Section title="StatusChip">
<div class="components-chip-row">
{CHIP_TONES.map((tone) => (
<Sample key={tone} label={tone}>
<StatusChip tone={tone} label={tone} />
</Sample>
))}
</div>
</Section>
<Section title="Table">
<Sample label="populated">
<Table columns={TABLE_COLUMNS} rows={TABLE_ROWS} rowKey={(r) => r.name} />