Uh oh!
There was an error while loading. Please reload this page.
select: migrate to TUI Select / MultiSelect - #81
Merged
Conversation
Picks up MultiCombobox (searchable multi-select — needed for the combo-box field migration's multiple+async case), Chip onRemove, and the Combobox aria-describedby/invalid/required forwarding fix. Compat: TUI 0.2.0's Button dropped the `iconSize` prop (icons size intrinsically now) — removed it from the base Button wrapper + its story. tsc error count unchanged from 0.1.x (422 pre-existing); rebuilt bundle. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the react-aria/react-stately select-field internals with TUI's Select (single) and MultiSelect (multiple), in the TUI Field idiom. Static-only (select has no async), so the contract is simple and preserved — verified live: - single: hidden input = the key - multiple: hidden input = "a,b,c"; onChange([...keys]) (array, as before) New: Single.tsx (TUI Select + hidden input for form submission, replacing react-aria HiddenSelect), Multiple.tsx (TUI MultiSelect, display=chips), renderOptions.tsx (flat/grouped/disabledKeys). Removed MultipleSelect.tsx. Note: select/Select.tsx (the react-aria Select) is KEPT — it's still an internal building block for the gradient / dimensions / simple-dimension fields; only the select FIELD TYPE stops using it. Its .tf-select styles stay; the migrated field uses a distinct .tf-select-field class. tsc 422 -> 414; rebuilt bundle. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Uh oh!
There was an error while loading. Please reload this page.
nicolas-jaussaud added a commit
that referenced
this pull request
Aug 17, 2026
* color: migrate to TUI ColorField (with opt-in gradient mode)
Color field -> TUI ColorField (swatch trigger + popover picker), in the
Field idiom. Requires @tangible/ui ^0.2.5.
Value contract preserved: CSS color strings in/out, legacy { value }
objects unwrapped, empty/invalid values default to #FFFFFF (the old
react-aria impl emitted #FFFFFFFF - TUI hex omits the alpha byte when
fully opaque). Legacy config mapped: hasAlpha -> alpha, react-stately
format names (hexa/rgba/hsla/...) -> TUI formats. var(--x) values pass
through verbatim.
New opt-in: gradient: true adds Solid|Gradient tabs to the popover and
lets the value be a CSS gradient string (the Figma Color Selector).
Explicit aria-label like the date field - Field.Control's labelledby
injection lands on FieldWrapper, which doesn't forward it. Dynamic
values preserved via FieldWrapper (hidden input lives with the picker).
Old react-aria components move to deprecated/fields/color, registered
as deprecated-color-picker; the (still-legacy) gradient field keeps
using the deprecated ColorPicker until its own migration. Existing jest
tests migrated to deprecated-controls; new tests cover value contract,
popover edit commit, var() passthrough, and gradient tabs. Verified
live (gradient story: tabs render, edits flow to the hidden input).
jest 518 pass, tsc 424 -> 424.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* Color: Keep support for isDisabled for legacy reason; rebuild bundle
Matches the follow-up pattern from the other TUI migrations (#81, #82):
isDisabled || readOnly both disable the control, and the built assets
ship with the PR.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* Deprecated color: Make sure deprecated style is being applied correctly
* Color and gradient: Make sure to use consistent border radius in wp context
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: Nicolas Jaussaud <hi@nicolasjaussaud.me>
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 freeto 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.
Replaces the
selectfield's react-aria/react-stately internals with TUI's Select (single) and MultiSelect (multiple), in the TUI Field idiom. The non-searchable sibling of #80 — static-only, so no async/label-map.Contract preserved — verified live
"test1")"a,b,c";onChange([...keys])(array, as before)Confirmed in Storybook + Playwright: single picks show the label in the trigger, multiple renders the shared chips, grouped choices +
disabledKeyswork.Structure
Single.tsx— TUISelect+ a hidden input for form submission (replaces react-aria'sHiddenSelect).Multiple.tsx— TUIMultiSelect(display="chips").renderOptions.tsx— flat/grouped/disabledKeysrenderer.MultipleSelect.tsx.select/Select.tsxis KEPTThe react-aria
Selectcomponent stays — it's still an internal building block for the gradient / dimensions / simple-dimension fields. Only the select field type stops using it. Its.tf-selectstyles remain; the migrated field uses a distinct.tf-select-fieldclass.tscimproves 422 → 414; rebuilt bundle.🤖 Generated with Claude Code