Skip to content

feat(text-input)!: port to <pf-v6-text-input> - #3160

Draft
zeroedin wants to merge 6 commits into
staging/pfv6from
feat/v6-text-input
Draft

feat(text-input)!: port to <pf-v6-text-input>#3160
zeroedin wants to merge 6 commits into
staging/pfv6from
feat/v6-text-input

Conversation

@zeroedin

@zeroedin zeroedin commented Aug 12, 2026

Copy link
Copy Markdown
Collaborator

What I did

  • Removes <pf-v5-text-input>
  • Ports <pf-v5-text-input> to <pf-v6-text-input> web component for PatternFly v6
  • Single-line text input with type variants, validation states, and custom icon support
  • Form-associated custom element (FACE): submits value via ElementInternals, supports form reset, constraint validation (checkValidity(), reportValidity(), setCustomValidity())
  • Progressive enhancement for referenceTarget: when available, external <label for> and aria-describedby resolve natively through the shadow boundary
  • Fallback label association via delegatesFocus + computedLabelText string copy (same mechanism as v5)
  • Error state announced to screen readers via visually-hidden role="alert" + aria-describedby on the internal input
  • CSS uses v6 design tokens (--pf-v6-c-form-control--*, --pf-t--global--*) with light-dark() fallbacks
  • Grid layout with ::before/::after pseudo-elements for border styling (matching v6 SCSS structure)
  • Internal class-based state styling via classMap instead of :host([attr]) selectors
  • Cancelable change event: call preventDefault() to reject a value change
  • Labels via external <label for="id"> or accessible-label attribute
  • Keyboard: Enter submits the parent form (when valid)
  • Demos: basic, disabled, start-truncated, read-only, invalid, custom-icon, custom-icon-and-invalid, select-text, form-submission, validation

InternalsController fix (pfe-core)

  • Exposes form, validationMessage, and willValidate getters on InternalsController
  • These were declare-only (TypeScript type annotations with no runtime implementation) since the dynamic proxy was removed in feat: listbox elements #2570
  • Required by pf-v6-text-input for Enter-to-submit (form?.requestSubmit()) and error message rendering (validationMessage)
  • No impact on existing elements — none access these properties on the controller today

Closes #3043

Intentional divergences from React

  • customIcon prop replaced by icon slot (slotted content for composability)
  • isDisabled/isRequired renamed to disabled/required (no is- prefix per web component convention)
  • isStartTruncated replaced by truncated="start" enum attribute for future extensibility
  • readOnlyVariant split into readonly + plain attributes (native HTML readonly + visual modifier)
  • isExpanded/expandedProps not implemented (combobox patterns will be handled by a dedicated composite element)
  • onChange callback replaced by cancelable change DOM event
  • validated="default" state represented by attribute absence
  • innerRef + .select() replaced by select() method directly on the element
  • Form association added (not in React): native form participation, submission, reset, and constraint validation

Testing Instructions

Notes to Reviewers

@changeset-bot

changeset-bot Bot commented Aug 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: af1aabd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@patternfly/pfe-core Patch
@patternfly/elements Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@zeroedin
zeroedin changed the base branch from main to staging/pfv6 August 12, 2026 16:41
@netlify

netlify Bot commented Aug 12, 2026

Copy link
Copy Markdown

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 5eba62d
😎 Deploy Preview https://deploy-preview-3160--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions

Copy link
Copy Markdown
Contributor

✅ Commitlint tests passed!

More Info
{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(text-input)!: port  to `<pf-v6-text-input>`"
}

@github-actions github-actions Bot added the AT passed Automated testing has passed label Aug 12, 2026
@github-actions

Copy link
Copy Markdown
Contributor

SSR Test Run for 453eca2: Report

@github-actions

Copy link
Copy Markdown
Contributor

SSR Test Run for 86592b8: Report

@github-actions

Copy link
Copy Markdown
Contributor

SSR Test Run for 5eba62d: Report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AT passed Automated testing has passed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[feat]: Update <pf-v6-text-input> for PatternFly v6

1 participant