ba873926fa
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.
27 lines
753 B
TypeScript
27 lines
753 B
TypeScript
// <FormField> — label + control wrapper shared by every labelled form
|
|
// control (`TextField`, `SelectField`, …). Not exported as a standalone
|
|
// primitive callers reach for directly — it only exists so those two
|
|
// don't each reinvent the label/spacing chrome; a bare labelled `<div>`
|
|
// wrapper has no independent identity worth a `/components` entry of
|
|
// its own.
|
|
import type { ComponentChildren } from 'preact';
|
|
import './FormField.css';
|
|
|
|
export function FormField({
|
|
label,
|
|
htmlFor,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
htmlFor: string;
|
|
children: ComponentChildren;
|
|
}) {
|
|
return (
|
|
<div class="ui-form-field">
|
|
<label class="ui-form-field-label" for={htmlFor}>
|
|
{label}
|
|
</label>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|