swarm-ui: shared form-field kit (TextField, SelectField, Button)
Closes #3448. New ui/ primitives: FormField (shared label+control wrapper), TextField, SelectField, Button — each with a min-height touch target (2.75em ~= 44px, WCAG 2.5.5) per mara's #3447 ask, and a max-width instead of a fixed width so the control caps on desktop without overflowing a narrow/touch viewport. CreateAgentPage's name field + submit button now come from the kit instead of page-scoped CSS; ComponentsPage gets a section for each new primitive with an editable sample.
This commit is contained in:
iris
parent
3643eccf22
commit
ba873926fa
9 changed files with 288 additions and 57 deletions
|
|
@ -5,10 +5,14 @@
|
|||
// primitive gets a section here the same day it's added. Sample data
|
||||
// only, no network calls — this page must render the same whether
|
||||
// swarm-controller's API is up or not.
|
||||
import { useState } from 'preact/hooks';
|
||||
import type { ComponentChildren } from 'preact';
|
||||
import { Panel } from '../ui/panel/Panel.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';
|
||||
import { Button, type ButtonVariant } from '../ui/button/Button.js';
|
||||
import './ComponentsPage.css';
|
||||
|
||||
function Section({ title, children }: { title: string; children: ComponentChildren }) {
|
||||
|
|
@ -47,6 +51,34 @@ const TABLE_ROWS: Row[] = [
|
|||
{ name: 'beta', detail: 'sample row two' },
|
||||
];
|
||||
|
||||
const SELECT_OPTIONS: SelectOption[] = [
|
||||
{ value: 'alpha', label: 'alpha' },
|
||||
{ value: 'beta', label: 'beta' },
|
||||
];
|
||||
|
||||
const BUTTON_VARIANTS: ButtonVariant[] = ['primary', 'default'];
|
||||
|
||||
// Controlled samples need their own state to actually type/select into —
|
||||
// module-level consts can't do that, hence these two small wrappers
|
||||
// rather than inline JSX in the page body below.
|
||||
function TextFieldSample() {
|
||||
const [value, setValue] = useState('');
|
||||
return <TextField id="sample-text-field" label="agent name" value={value} onInput={setValue} />;
|
||||
}
|
||||
|
||||
function SelectFieldSample() {
|
||||
const [value, setValue] = useState('alpha');
|
||||
return (
|
||||
<SelectField
|
||||
id="sample-select-field"
|
||||
label="hive"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
options={SELECT_OPTIONS}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ComponentsPage() {
|
||||
return (
|
||||
<Panel title="components">
|
||||
|
|
@ -82,6 +114,31 @@ export function ComponentsPage() {
|
|||
<Table columns={TABLE_COLUMNS} rows={[]} rowKey={(r) => r.name} />
|
||||
</Sample>
|
||||
</Section>
|
||||
|
||||
<Section title="TextField">
|
||||
<Sample label="editable">
|
||||
<TextFieldSample />
|
||||
</Sample>
|
||||
</Section>
|
||||
|
||||
<Section title="SelectField">
|
||||
<Sample label="editable">
|
||||
<SelectFieldSample />
|
||||
</Sample>
|
||||
</Section>
|
||||
|
||||
<Section title="Button">
|
||||
<div class="components-chip-row">
|
||||
{BUTTON_VARIANTS.map((variant) => (
|
||||
<Sample key={variant} label={variant}>
|
||||
<Button variant={variant}>{variant}</Button>
|
||||
</Sample>
|
||||
))}
|
||||
<Sample label="disabled">
|
||||
<Button disabled>disabled</Button>
|
||||
</Sample>
|
||||
</div>
|
||||
</Section>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/* <CreateAgentPage> — the create-agent form. First form in this package,
|
||||
so its input/button chrome lives here rather than in `ui/` — see the
|
||||
component's own comment for why. Reuses the same base16 slots
|
||||
(../theme.css) every other component draws from. */
|
||||
/* <CreateAgentPage> — the create-agent form. Input/button chrome now
|
||||
comes from the shared `ui/` form kit (`TextField`/`Button`); this
|
||||
file only owns the page's own layout + copy. Reuses the same base16
|
||||
slots (../theme.css) every other component draws from. */
|
||||
.create-agent-intro {
|
||||
margin: 0 0 1.5em;
|
||||
color: var(--muted);
|
||||
|
|
@ -12,37 +12,6 @@
|
|||
gap: 0.75em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.create-agent-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.3em;
|
||||
}
|
||||
.create-agent-label {
|
||||
font-size: 0.85em;
|
||||
color: var(--muted);
|
||||
}
|
||||
.create-agent-input {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border: 1px solid var(--purple-dim);
|
||||
border-radius: 0.3em;
|
||||
padding: 0.4em 0.6em;
|
||||
font: inherit;
|
||||
min-width: 16em;
|
||||
}
|
||||
.create-agent-submit {
|
||||
background: var(--purple-dim);
|
||||
color: var(--fg);
|
||||
border: none;
|
||||
border-radius: 0.3em;
|
||||
padding: 0.5em 1.2em;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.create-agent-submit:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
.create-agent-result {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,16 +16,17 @@
|
|||
// one path segment deep — a real bug, filed separately rather than
|
||||
// fixed here, but reason enough to avoid a nested route today.
|
||||
//
|
||||
// First real form in this package — no shared form kit exists yet, so
|
||||
// the input/button styling below is scoped to `CreateAgentPage.css`
|
||||
// rather than promoted into `ui/`. Promote the day a second page needs
|
||||
// one, same "don't build ahead of a second caller" rule `Panel`'s own
|
||||
// comment states.
|
||||
// First real form in this package — its name field + submit button now
|
||||
// come from the shared `ui/` form kit (`TextField`/`Button`) rather than
|
||||
// page-scoped input/button chrome, so a hive-picker soon landing on this
|
||||
// same page has something to reuse instead of copying this page's CSS.
|
||||
import { useState } from 'preact/hooks';
|
||||
import { Link } from 'wouter-preact';
|
||||
import { ApiErrorPanel } from '@hive/shared/api-error-panel.js';
|
||||
import { readApiError, type ProblemDetails } from '@hive/shared/api-error.js';
|
||||
import { Panel } from '../ui/panel/Panel.js';
|
||||
import { TextField } from '../ui/text-field/TextField.js';
|
||||
import { Button } from '../ui/button/Button.js';
|
||||
import './CreateAgentPage.css';
|
||||
|
||||
interface CreateAgentResponse {
|
||||
|
|
@ -85,24 +86,18 @@ export function CreateAgentPage() {
|
|||
<Link href="/jobs">jobs</Link> to watch it settle.
|
||||
</p>
|
||||
<form class="create-agent-form" onSubmit={submit}>
|
||||
<div class="create-agent-field">
|
||||
<label class="create-agent-label" for="agent-name">
|
||||
agent name
|
||||
</label>
|
||||
<input
|
||||
id="agent-name"
|
||||
class="create-agent-input"
|
||||
type="text"
|
||||
value={name}
|
||||
pattern={NAME_PATTERN}
|
||||
title="1-63 chars: lowercase letters, digits, hyphens"
|
||||
required
|
||||
onInput={(e) => setName(e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
<button class="create-agent-submit" type="submit" disabled={result.status === 'submitting'}>
|
||||
<TextField
|
||||
id="agent-name"
|
||||
label="agent name"
|
||||
value={name}
|
||||
pattern={NAME_PATTERN}
|
||||
title="1-63 chars: lowercase letters, digits, hyphens"
|
||||
required
|
||||
onInput={setName}
|
||||
/>
|
||||
<Button variant="primary" type="submit" disabled={result.status === 'submitting'}>
|
||||
{result.status === 'submitting' ? 'creating…' : 'create'}
|
||||
</button>
|
||||
</Button>
|
||||
</form>
|
||||
{result.status === 'done' && (
|
||||
<p class="create-agent-result create-agent-result-ok">
|
||||
|
|
|
|||
Loading…
Reference in a new issue