vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

swarm-ui: shared form-field kit (TextField, SelectField, Button)

Browse source 
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 2026-08-18 20:28:50 +02:00
commit ba873926fa
9 changed files with 288 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/packages/swarm-ui/src/pages/CreateAgentPage.css
View file

@ -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;
}