-
Notifications
You must be signed in to change notification settings - Fork 106
[feat]: Create <pf-v6-form> element #1663
Copy link
Copy link
Open
Labels
1:1Aligning components with PatternFly v4Aligning components with PatternFly v4design systemUpdates or issues to align components to the Red Hat Design System.Updates or issues to align components to the Red Hat Design System.for devnew component requestpriority: lowSeverity level: 3Severity level: 3priority: mediumSeverity level: 2Severity level: 2
Milestone
Metadata
Metadata
Assignees
Labels
1:1Aligning components with PatternFly v4Aligning components with PatternFly v4design systemUpdates or issues to align components to the Red Hat Design System.Updates or issues to align components to the Red Hat Design System.for devnew component requestpriority: lowSeverity level: 3Severity level: 3priority: mediumSeverity level: 2Severity level: 2
Summary
Create a
<pf-v6-form>web component implementing the PatternFly v6 Form component.Form layout container providing consistent spacing, horizontal/vertical layout, and field-level organization.
Prior Art
<pf-v6-form><pf-v6-form>Sub-components
<pf-v6-form-group>- Groups a label, control, and helper text<pf-v6-form-field-group>- Groups related form fields with headerDesign
Requirements
@patternfly/react-coreFormElement-specific considerations
isHorizontal: label/control side-by-side vs stackedisWidthLimited/maxWidth: constrain form widthFormGroup:label,isRequired,fieldId,helperText,validated(success/warning/error/default)FormSection: titled group of form groups;titleslot or propFormFieldGroup: collapsible field group;FormFieldGroupHeaderwith title, description, actionsActionGroup: button row at form bottomFormHelperTextwith icon for validated states<form>element inside shadow DOM vs light DOM passthrough - evaluate carefullynoValidateto disable browser built-in validationFormLabel:forattribute must pierce shadow DOM - use FACEElementInternalslabel association or light DOM labelsChecklist
Implementation
.claude/ADVICE.md@summaryand JSDoc on element classDemos
Tests
a11ySnapshotassertionsReviews
/review-apipasses/review-demospasses/review-a11ypasseseslintandstylelintpassShip
staging/pfv6(NOTmain)