peter
295c1db5f1
- F12 (owner: A): SwitchRow, the whole settings row toggles; a Config boolean toggles from its title and hint (a label pointed at the switch). - F14 (owner: B): the form dropdown trigger wears the field frame (see-through, the >= 3:1 edge); labelled pills keep the faint edge and the accent-edge hover. DESIGN says so, with log rows. - F6: ~15 bg-card / bg-border / opacity hovers onto the B3 state layer; a lint rule (HOVER_SWAP) refuses the swap, contract-tested. - F10: bare 14px icon links onto IconLink / LinkButton; a local lint rule refuses a glyph-only <a>. - F13: reason-disabled controls are aria-disabled (Users, Channels backfill, Discovery, Scheduler runs, Config tests); FocusSafeButton now swallows the click of a caller's aria-disabled; the Config tests say why while dirty (testDirty, HU/EN). - F5/F11: every control measured live at 24 (mouse) and 44 (coarse) across every page; touch-target is a utility that wins over a caller's min-h-6; link variants carry it too; SegmentedToggle, Tabs, NavRail, menu rows, PriorityStepper, sliders, CheckRow, InnerInput, card links and the rest. - F9: DismissibleChip's label reaches the chip's 24; the Combobox chips are DismissibleChips. - F15: the "+N" / "More..." open state worded as it renders.
81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import clsx from "clsx";
|
|
import type { InputHTMLAttributes, Ref, TextareaHTMLAttributes } from "react";
|
|
import { fieldClass, type FieldSize } from "./fieldStyles";
|
|
|
|
// The text-field primitives (docs/DESIGN.md A4, E28 S3c). Every text, number, password, e-mail, search
|
|
// and date box is an `Input`; a multi-line one a `Textarea`; a box whose frame also holds an icon,
|
|
// chips or a clear button is a wrapper painted with `fieldClass` around an `InnerInput`. A raw
|
|
// `<input>` or `<textarea>` anywhere else is a lint error (`local/input-primitive`), so the
|
|
// frame, the focus edge and the coarse-pointer 1rem text cannot drift apart again.
|
|
//
|
|
// `className` lays the field out (width, margin, font weight); its box and edge are the rung's.
|
|
|
|
type Common = {
|
|
/** The rung (`FieldSize`): `md` 32 in a form (default), `sm` 28 in a toolbar, a popover or an inline rename, `xs` 24 in a row, `heading` for a title rename. */
|
|
size?: FieldSize;
|
|
/** A toolbar search (A4): a pill instead of r8. */
|
|
pill?: boolean;
|
|
/** Marks the field invalid (the danger edge) and says so to a screen reader. */
|
|
invalid?: boolean;
|
|
};
|
|
|
|
export function Input({
|
|
size,
|
|
pill,
|
|
invalid,
|
|
className,
|
|
ref,
|
|
...rest
|
|
}: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & Common & { ref?: Ref<HTMLInputElement> }) {
|
|
return (
|
|
<input
|
|
ref={ref}
|
|
aria-invalid={invalid || undefined}
|
|
className={clsx(fieldClass({ size, pill }), className)}
|
|
{...rest}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function Textarea({
|
|
invalid,
|
|
className,
|
|
ref,
|
|
...rest
|
|
}: TextareaHTMLAttributes<HTMLTextAreaElement> & {
|
|
invalid?: boolean;
|
|
ref?: Ref<HTMLTextAreaElement>;
|
|
}) {
|
|
return (
|
|
<textarea
|
|
ref={ref}
|
|
aria-invalid={invalid || undefined}
|
|
className={clsx(
|
|
fieldClass({ size: "free" }),
|
|
"px-3 py-1.5 text-sm pointer-coarse:text-base",
|
|
className,
|
|
)}
|
|
{...rest}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/** The bare text box inside a `fieldClass` frame: no edge, no box, it fills the frame's free width AND
|
|
* height (`self-stretch`), so the whole frame is the target, not a 20px line of text in it (B1, A3). */
|
|
export function InnerInput({
|
|
className,
|
|
ref,
|
|
...rest
|
|
}: InputHTMLAttributes<HTMLInputElement> & { ref?: Ref<HTMLInputElement> }) {
|
|
return (
|
|
<input
|
|
ref={ref}
|
|
className={clsx(
|
|
"min-w-0 flex-1 self-stretch bg-transparent text-fg outline-hidden placeholder:text-muted",
|
|
className,
|
|
)}
|
|
{...rest}
|
|
/>
|
|
);
|
|
}
|