Skip to content

feat!: add BorderedTextField; migrate fields to ControlPresentation#1039

Draft
pawelgrimm wants to merge 6 commits into
pawel/input-presentation/extract-from-text-fieldfrom
pawel/refactor/integrate-control-resentation
Draft

feat!: add BorderedTextField; migrate fields to ControlPresentation#1039
pawelgrimm wants to merge 6 commits into
pawel/input-presentation/extract-from-text-fieldfrom
pawel/refactor/integrate-control-resentation

Conversation

@pawelgrimm
Copy link
Copy Markdown
Contributor

Short description

Follows up on #1037. Migrates the existing field components to compose ControlPresentation and introduces a new public sibling, BorderedTextField, that replaces the outlined-label-inside layout previously offered by <TextField variant="bordered">.

New public component

  • BorderedTextField — outlined text-field layout: the label sits inside a rounded chrome above the input; optional endSlot rendered as a full-height side column. Composes BaseField + OutlinedControlContainer (the private chrome primitive added in feat: add ControlPresentation primitive #1037). Sibling to TextField, not a variant of it.

Field migrations

  • TextField drops variant and endSlotPosition. Inline wrapper JSX is replaced with <ControlPresentation>. Local handleClick and useMergeRefs are removed (CP/OCC handle click-to-focus).
  • SelectField drops variant. The absolutely-positioned chevron moves into CP's endSlot. selectWrapper chrome CSS goes away — CP owns it.
  • TextArea drops variant. Wraps the <textarea> in OutlinedControlContainer directly (not CP — multi-line layout doesn't fit CP's fixed 32px single-row chrome). Auto-expand grid trick stays scoped to TextArea.
  • PasswordField unchanged in source but inherits the TextField refactor automatically (no more variant).

BaseField scoped down

  • Removes variant, BaseFieldVariantProps, the supportsStartAndEndSlots discriminated union, endSlot, endSlotPosition, and the bordered outer container rendering.
  • After this PR, BaseField is pure form-field scaffolding: id generation, ARIA wiring (aria-describedby / aria-invalid), optional label, character count state machine, message rendering, Stack layout, maxWidth / hidden.

Breaking changes

feat!: — major version bump. Migration is mechanical:

  • <TextField variant="bordered" .../><BorderedTextField .../>. Drop startSlot, endSlotPosition, and characterCountPosition="inline" if used — none of these are supported in the outlined layout. If you need a leading icon, use TextField (default). If you need a side action, use BorderedTextField's endSlot (full-height).
  • <TextField variant="default" .../> → drop the variant prop (no-op rename — default was always the default).
  • <SelectField variant="bordered" .../> → drop the variant. No BorderedSelectField is shipped (no demand surfaced).
  • <TextArea variant="bordered" .../> → drop the variant. No BorderedTextArea is shipped.
  • Custom components using BaseField directly: drop variant, supportsStartAndEndSlots, endSlot, endSlotPosition if used. Render slot rows via ControlPresentation instead.

What's not here

  • Anything outside the field family. CheckboxField / SwitchField are unrelated chrome and are not touched.

PR Checklist

  • Added tests for bugs / new features (BorderedTextField has its own suite; existing TextField/SelectField/TextArea tests pruned of removed behaviors)
  • Updated docs (BorderedTextField stories added; TextField/SelectField/TextArea stories updated to remove bordered examples and endSlotPosition)
  • Reviewed and approved Chromatic visual regression tests in CI

pawelgrimm and others added 6 commits May 16, 2026 14:49
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Remove variant, BaseFieldVariantProps, supportsStartAndEndSlots, endSlot,
endSlotPosition, and bordered chrome from BaseField; strip .bordered.*
CSS rules; update all callers (password-field, bordered-text-field,
select-field, text-field).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant