[DS 2.0] Rebuild the form fields against the design system - #90
Open
librowski wants to merge 8 commits into
Open
[DS 2.0] Rebuild the form fields against the design system#90librowski wants to merge 8 commits into
librowski wants to merge 8 commits into
Conversation
librowski
force-pushed
the
ds2-form-fields
branch
3 times, most recently
from
August 25, 2026 23:45
2b6bf2a to
1ea85e4
Compare
librowski
marked this pull request as ready for review
August 26, 2026 07:56
librowski
requested review from
lukasz-jazwa,
piotrblaszczyk and
szymon-t-sc
as code owners
August 26, 2026 07:56
librowski
changed the title
librowski
force-pushed
the
ds2-form-fields
branch
from
August 26, 2026 11:53
4fd5213 to
a013320
Compare
librowski
changed the title
librowski
force-pushed
the
ds2-form-fields
branch
from
August 26, 2026 16:33
a013320 to
238a471
Compare
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.
…itical variable names
librowski
force-pushed
the
ds2-form-fields
branch
from
August 27, 2026 14:01
238a471 to
5d48235
Compare
| return ( | ||
| <ComponentPreview> | ||
| <Input placeholder="Type something" value={value} onChange={(event) => setValue(event.target.value)} /> | ||
| <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--wb-space-100)' }}> |
Contributor
There was a problem hiding this comment.
why inline styles instead of css class?
| return ( | ||
| <ComponentPreview> | ||
| <TextArea placeholder="Multi-line input" value={value} onChange={(event) => setValue(event.target.value)} /> | ||
| <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--wb-space-100)' }}> |
piotrblaszczyk
approved these changes
Aug 31, 2026
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
2 participants
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.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. Icon slots accept interactive content: clicks on buttons or links inside a slot pass through, anywhere else on the frame focuses the input.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 label row, the input row and a helper row that wrap without painting over the control. 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. The field composition (label and helper) exposes its own public variables, and
disablednow dims the whole composition, muting the critical helper.NumberField was pulled out of this PR by maintainer decision; it ships as a standalone component after the DS 2.0 migration.
Call sites migrated in this PR (
error={…}→state, word sizes → letters).Verified: ui/sdk lint + typecheck,
build:ui,build:lib, stylelint, all test suites, docs build, demo build — re-run after extracting NumberField and rebasing onto the Button layer.