Skip to content

feat(helper-text): port <pf-v5-helper-text> to <pf-v6-helper-text> element#3155

Open
adamjohnson wants to merge 5 commits into
staging/pfv6from
feat/v6-helper-text
Open

feat(helper-text): port <pf-v5-helper-text> to <pf-v6-helper-text> element#3155
adamjohnson wants to merge 5 commits into
staging/pfv6from
feat/v6-helper-text

Conversation

@adamjohnson
Copy link
Copy Markdown
Collaborator

@adamjohnson adamjohnson commented May 20, 2026

Summary

  • Removes <pf-v5-helper-text>
  • Ports <pf-v5-helper-text> to <pf-v6-helper-text> web component for PatternFly v6
  • Displays contextual feedback or validation messages for form fields
  • Supports variant (default/indeterminate/warning/success/error), has-icon, dynamic, and screen-reader-text attributes
  • Built-in SVG icons from @patternfly/react-icons (rh-ui-minus, rh-ui-warning-fill, rh-ui-check-circle-fill, rh-ui-error-fill)
  • Dark mode support via light-dark() CSS fallbacks
  • Demos: basic (index), with-custom-icons, multiple, dynamic

Closes #3012

Intentional divergences from React

  • Single element instead of React's HelperText (container) + HelperTextItem (item) pair; use plain HTML wrappers with aria-live for grouping
  • has-icon attribute for opt-in icon display (React auto-shows icons for non-default variants)
  • icon slot replaces React's icon prop (ReactNode → slotted markup)
  • screen-reader-text attribute maps to React's screenReaderText prop
  • dynamic attribute exposes React's internal .pf-m-dynamic CSS modifier class
  • Container props (component, isLiveRegion, aria-label) not implemented; users apply these directly on wrapper elements
  • No dependency on <pf-v5-icon> — uses inline SVG icons

Test plan

  • npm run test passes
  • Demos render correctly at localhost:8000
  • All variant styles (colors, font weight, icons) visually match patternfly.org
  • Dark mode colors correct when switching color scheme
  • Screen reader text announces variant status for non-default variants
  • Custom screen-reader-text overrides default announcement
  • Empty screen-reader-text="" suppresses announcement
  • Custom icon slot displays slotted SVG in place of default icon
  • Dynamic demo shows aria-live container with mixed success/error items

Assisted-By: Claude

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 20, 2026

🦋 Changeset detected

Latest commit: 205eb07

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

This PR includes changesets to release 1 package
Name Type
@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

@adamjohnson adamjohnson changed the title Feat/v6 helper text feat(helper-text): port <pf-v5-helper-text> to <pf-v6-helper-text> element May 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 20, 2026

✅ Commitlint tests passed!

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

@github-actions
Copy link
Copy Markdown
Contributor

Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 7f5d1f9
😎 Deploy Preview https://deploy-preview-3155--patternfly-elements.netlify.app/

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

@github-actions github-actions Bot added the AT passed Automated testing has passed label May 20, 2026
@adamjohnson adamjohnson moved this from Needs triage to PR Review in PatternFly Issues May 20, 2026
@github-actions

This comment has been minimized.

@adamjohnson adamjohnson linked an issue May 20, 2026 that may be closed by this pull request
18 tasks
@adamjohnson adamjohnson marked this pull request as ready for review May 20, 2026 18:03
@adamjohnson adamjohnson removed the AT passed Automated testing has passed label May 20, 2026
@github-actions github-actions Bot added the AT passed Automated testing has passed label May 20, 2026
@github-actions
Copy link
Copy Markdown
Contributor

SSR Test Run for 7f5d1f9: 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

Status: PR Review

Development

Successfully merging this pull request may close these issues.

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

1 participant