Rebuild the form fields and add NumberField - #90
Draft
librowski wants to merge 2 commits into
Draft
Conversation
Fields take an explicit state - default, critical, success or read-only - in place of the error boolean, and sizes are letter-scaled. Hover, focus and filled stay visual states rather than props. Read-only keeps the field focusable and copyable through the native attribute, while disabled stays out of the tab order. Icons arrive as prefix and suffix slots with an optional clear affordance. Heights, padding, gap, radius and the label roles come from the design component set, and every surface, border and text colour binds to its field token. NumberField is new: an input with an always-visible stepper that honours min, max and step from both the buttons and the arrow keys.
Fields render the measured composition again: a label row, the control row and a helper row. The label is associated with the control, the helper joins its accessible description, and the critical state marks the control invalid, so validation text is announced instead of being merely visible. Focus is visible in every state, not only the default one. Interactive adornments no longer go into the decorative icon slot, which does not take pointer events - the datetime field renders its variable-picker button beside the input, the way its sibling branches already do. NumberField now has a value contract: clearing is representable and reported, a clamped value is emitted once, a controlled parent that refuses an update wins, non-finite input never reaches a callback, step=any keeps working, off-grid boundaries stay submittable, and malformed paste is rejected rather than reinterpreted. Fifteen tests pin those paths.
librowski
force-pushed
the
ds2-form-fields
branch
from
August 21, 2026 11:49
b120bbd to
3294026
Compare
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
1 participant
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.
Rebuilds
InputandTextAreaagainst the design system's field states and addsNumberField.State instead of a boolean —
state?: 'default' | 'critical' | 'success' | 'read-only'replaceserror?: boolean. Hover, focus and filled stay visual states rather than props.read-onlyapplies the native attribute, so the value stays focusable and copyable, whiledisabledstays out of the tab order — the distinction the design guidelines call for.Slots —
prefixIcon,suffixIconand an optionalonClearaffordance, allReactNode.Sizes — letter-scaled
lmsxs. Input row heights 42/36/32/28 with padding 11/10/8/6 vertical and 12 horizontal, gap 8, radius 8/6/6/6; the field composes a 16px label row, the input row and a 16px helper row with a 6px gap. TextArea minimum heights 120/100/80.Colours — every surface, border and text colour binds to a field token. The hover border is deliberately lighter than the default one; that is what the design paints.
NumberField — new: an input with an always-visible stepper honouring
min/max/stepfrom both the buttons and the arrow keys, with accessible names on the stepper controls.Call sites migrated in this PR (
error={…}→state, word sizes → letters).Verified: ui/sdk lint + typecheck,
build:ui,build:lib, stylelint, 62 test files / 479 tests, docs build, demo build — re-run after rebasing onto the Button layer.