feat(shared): fields v2 — align fields with Toggle + Button system#6118
Open
tsahimatsliah wants to merge 6 commits into
Open
feat(shared): fields v2 — align fields with Toggle + Button system#6118tsahimatsliah wants to merge 6 commits into
tsahimatsliah wants to merge 6 commits into
Conversation
Reskin the shared field primitives to the new design language shared with the redesigned Toggle and the Button system: - Swap the legacy left-edge accent bar for a crisp, even ring on focus / invalid / readonly / password-strength, with smooth surface transitions (matching the toggle's motion). Applied to BaseField so input, password, textarea and search all update across the product. - Add a button-aligned FieldSize scale (fieldSizes.ts) that mirrors ButtonSize exactly — same heights, radii, value typography and icon sizes. A field and a button of the same `size` now line up pixel-for-pixel when they sit together in one strip, including matching "medium" icon sizes. - Thread an opt-in `fieldSize` prop through TextField / BaseFieldContainer (icons are auto-sized to match); legacy `fieldType` sizing is preserved when `fieldSize` is omitted, so existing call sites are unchanged. - Add a Storybook before/after comparison page (Field.stories.tsx) with a frozen legacy snapshot, covering states, field types, password/search and a field-vs-button size-alignment section. Co-authored-by: Cursor <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…own polish - Add a faint resting border to every field (BaseField) so fields are delineated from the page, matching the Subtle/Button v2 language. - Introduce FieldVariant (Filled / Outline) on TextField + Textarea: Filled sits on the floated surface, Outline is transparent and defined by its border with a faint hover fill. - Restore the password strength left-edge indicator + colour-graded gradient on the new field (per design preference). - Polish the dropdown popover: rounded-14 card, inset items, taller rows and smooth highlight transition. - Expand the comparison story with Variants and Dropdown & textarea sections (wrapped in a QueryClientProvider for the dropdown). Co-authored-by: Cursor <cursoragent@cursor.com>
- Invalid fields now use a red 1px border (same mechanism as the focus border) instead of an inset ring, and stay red while focused — matching the design and reading as one family with focus/read-only borders. - Fix declarative validity: an externally-controlled `valid` prop is now authoritative on first render, so a field rendered already-invalid shows its error state immediately instead of waiting for interaction. - Restore the disabled dim on fields (BaseFieldContainer + SearchField). - Storybook: add comprehensive per-field state coverage — TextField states, field types, variants, sizes; PasswordField strength ladder; SearchField states/sizes/variants; Textarea states; Dropdown states/sizes. Co-authored-by: Cursor <cursoragent@cursor.com>
Consolidate the field redesign into one "Fields — before & after" page so the team can play with old vs new side by side: - Add a "What changed" summary and before/after rows for text input states, field types, password & search, textarea and dropdown (trigger + popover). - Add a LegacyTextarea snapshot of the previous multi-line look for the textarea comparison. - Keep the new-only sections (background variants, size alignment with buttons) on the same page. - Fix stale "even ring" copy now that focus uses a 1px border. Co-authored-by: Cursor <cursoragent@cursor.com>
On light theme especially, the faint grey fill plus low-contrast tertiary content made an idle field look almost identical to its dimmed disabled state. Brighten and define the resting state in both themes: - Default (empty, editable) icon, value text and placeholder now use text-secondary instead of tertiary, so the field reads as active and clearly differs from the opacity-dimmed disabled state. - Resting border steps up from border-subtlest-tertiary to border-subtlest-secondary so every field is delineated as a real input box rather than a flat grey block. Co-authored-by: Cursor <cursoragent@cursor.com>
Align the internals of every field with the button system and clean up the ad-hoc spacing/colors: - Icons now scale with the field height (one rung below the button glyph scale so they stay balanced inside an input) and auto-size even without an explicit fieldSize. - Icon-to-value spacing uses the button gap scale (fieldSizeToGap) instead of a flat 8px margin, applied as a row gap so every adornment is evenly spaced. - Char counter drops back to a muted text-quaternary (was darkened as a side effect of the placeholder colour change) since it's metadata, not a value. - Dropdown trigger text now uses text-secondary; the chevron gets an explicit size, a muted text-quaternary rest colour that brightens to primary on hover, and the no-op group-hover override is removed. - SearchField adopts the same icon size / gap scale and the defined secondary resting border. Co-authored-by: Cursor <cursoragent@cursor.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
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.
Summary
Brings the fields in line with the redesigned Toggle and the Button system, so fields, buttons and toggles read as one family.
BaseFieldprimitive in place, soTextField(input),PasswordField,TextareaandSearchFieldall update across the product automatically.Dropdownis button-based and already follows the button language.fieldSizes.tsexposes aFieldSizeenum that mirrorsButtonSizeexactly — identical heights, radii, value typography and icon sizes. A field and a button of the same size line up pixel-for-pixel in a shared strip, and a "medium" icon is the same glyph size whether it lives in a field or a button.fieldSizeprop threads throughTextField/BaseFieldContainer(icons auto-size to match). When omitted, the legacyfieldType-driven dimensions are preserved, so existing call sites are unchanged.Components/Fields/Fieldrenders the previous vs new fields side-by-side (states, field types, password/search) against a frozen legacy snapshot, plus a dedicated field-vs-button size-alignment section.Notes
sizewas already taken by the native input attribute, so the new prop is namedfieldSize.scripts/typecheck-strict-changed.js) andsharedlints clean.Test plan
Components/Fields/Field→ review Comparison in light & dark; hover / focus / type each field.pnpm --filter shared testfor TextField / PasswordField / SearchField (15 passing).Made with Cursor
Preview domain
https://feat-fields-v2-redesign.preview.app.daily.dev