feat(ui): restyle Number & Text field for v4#16419
Merged
Merged
Conversation
Consolidate vars for consistency.
… until image loads
… not apply correctly in CI
… loads to fix CI test
## Summary Restyles the Point field component for the v4 UI refresh. Adds custom chevron steppers to replace native browser spinners, implements proper disabled state styling (transparent background with light border), and adds a reusable `.form-input-group` class in forms.css for input wrappers that contain additional elements like steppers. Also fixes text selection highlighting in form inputs to use browser defaults. --------- Co-authored-by: Jessica Rynkar <jrynkar@figma.com>
Restrict parent :focus-within detection to typical input wrappers: - Only check div/span/label parents (not section/article elements) - Require ≤5 children (typical for input groups) - Fixes false positives where section borders were detected as focus indicators
## Summary Migrates CodeEditor from SCSS to CSS and updates Code/JSON field styling for the v4 redesign. The CodeEditor now defines transparent Monaco themes that let CSS variables control the appearance, enabling proper theming through the new token system. Also fixes the Code field validation to properly check for empty strings (not just `undefined`), and adds comprehensive test collection variants (required, disabled, readOnly) to support visual testing of all field states.
…into v4/ui-redesign
tylandavis
previously requested changes
Apr 29, 2026
Member
tylandavis
left a comment
tylandavis
left a comment
There was a problem hiding this comment.
Number field
- missing border on hover states
- focus states on hasMany chips are clipped on top and bottom
- replace "Select a value" placeholder on hasMany number field with "Enter a number", use text-default-teriary
- remove transition on border
React Select
- Chevron icon too far from right edge: use 16px icon, 4px from edge
- select dropdown group label misalignment
JarrodMFlesch
added a commit
that referenced
this pull request
Apr 29, 2026
- [ ] array ([PR](#16370)) - [ ] blocks ([PR](#16384)) - [ ] checkbox - [ ] code - [x] collapsible ([PR](#16365)) - [ ] date - [ ] email - [ ] group - [ ] join - [ ] json - [ ] number ([PR](#16419)) - [x] point ([PR](#16406))) - [ ] radio ([PR](#16411)) - [ ] relationship - [ ] richText - [ ] row - [ ] select - [ ] tabs - [ ] text - [ ] textarea - [ ] upload ([PR](#16422)) --------- Co-authored-by: Jessica Rynkar <jrynkar@figma.com> Co-authored-by: Jessica Rynkar <67977755+JessRynkar@users.noreply.github.com> Co-authored-by: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com> Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com> Co-authored-by: Jarrod Flesch <30633324+JarrodMFlesch@users.noreply.github.com>
PatrikKozak
force-pushed
the
v4/number-field
branch
from
07b7601 to
ec10c25
Compare
PatrikKozak
changed the title
PatrikKozak
changed the title
JarrodMFlesch
approved these changes
Apr 30, 2026
JarrodMFlesch
dismissed
tylandavis’s stale review
need these changes for other fields
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
5 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.
Summary
Restyles the Number field and ReactSelect components for the v4 UI refresh. Adds an
InputSteppercomponent with custom chevron buttons to replace native browser spinners, fixes multi-value pill styling with proper 20px height and spacing, and fixesClearIndicatoralignment for single and multi-row layouts.Also migrates all ReactSelect scss files to css, adds a
CircledXicon with tight viewBox, and updates theXandChevronicons with size prop support.