IDEA-2: Tier 2 Form Controls And Overlays - #2
Merged
Conversation
Input and Textarea ship the label/helperText/error/size (sm/md) API with native DOM onChange, matching the paper-ui call sites. The control id is auto-generated with useId unless the caller passes one, and the label wires to it via htmlFor. helperText and error share one line: error replaces helperText and flips aria-invalid plus aria-describedby, and the inset border re-tints to --fui-status-error-text. size intentionally shadows the native input size attribute (numeric px), hence InputProps Omit<>s it from InputHTMLAttributes. The frosted inset-bordered look mirrors Card and secondary Button: --fui-surface fill with backdrop blur that resolves to none inside Glass, and a 2px inset in --fui-shadow-color that goes accent on focus. Visual check of sm/md proportions is left to a human (headless run); verification was check-types + lint + build only.
… hidden native select for forms) Refs: IDEA-2
Refs: IDEA-2
…k, Escape) with Body/Footer/Error compound parts Refs: IDEA-2
Clickable list row built on a native <button>: leading icon slot, ellipsis-truncated content, and a trailing action slot for badges or secondary controls. `active` renders the accent left-bar + tint used by sidebar/nav call sites and sets aria-current. sm/md sizing matches the other Tier 2 controls; size names use the film-ui sm/md convention rather than paper-ui's `small` string. Visual check left to a human — this run is headless with no browser. Verified with check-types, biome, and stylelint. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ntation, label) Alert: info/success/warning/error variants over the --fui-status tokens, each with a variant icon and status-colored left accent bar; dismissible adds a close button wired to onDismiss. role="alert" for error/warning, role="status" otherwise. Spreads HTMLAttributes<HTMLDivElement>. Divider: horizontal/vertical orientations render a semantic <hr>; a horizontal label renders a flex wrapper with <hr> lines flanking the label (keeps biome's useSemanticElements/useFocusableInteractive happy without role hacks). Line color via color-mix on --fui-text. Verification: check-types, biome, stylelint, and build all green. Visual review in a browser is left to a human — this was done headless with no display. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Spinner: sm/md/lg ring that spins via a linear keyframe over --fui-accent on a color-mixed --fui-text track; renders a semantic <output> (implicit role="status") with an aria-label so it announces without a role hack. Reduced-motion slows the spin to a crawl rather than freezing it. Progress: native <progress> for free progressbar semantics (no ARIA, no focusable-interactive lint). value/max clamped; fill color overridable via a --fui-progress-fill custom property piped to the ::-webkit/-moz value pseudo-elements, height via inline style. Square film edges, no radius. Skeleton: text/rect/circle variants, width/height props, glossy shimmer sweep over a faint --fui-text tint; shimmer disabled under reduced-motion. All export from the barrel. Verification: check-types, biome, stylelint, and build all green. Visual review in a browser is left to a human — this was done headless with no display. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copied from paper-camp: pushes to feat/*, fix/*, refactor/*, chore/*, docs/* branches named with an idea id (e.g. feat/idea-9-select) get a draft PR via the Scout app if none exists. Direct pushes to main are untouched. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Branch slugs containing a second word-digit token (e.g. "tier-2") made grep return multiple matches and mangled the PR title with a newline. head -1 keeps the leading idea id. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Plan:
IDEA-2 TIER-2— seepapercamp/ideas/IDEA-2 TIER-2.mdfor the full idea and its plan.This PR was auto-created as a draft on the first push to this feature branch.
Promote to "Ready for review" when the plan reaches
reviewstatus.