Skip to content

[feat]: Create <pf-v6-form> element #1663

@castastrophe

Description

@castastrophe

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

Source Element Status
PFE v4 -- --
cem <pf-v6-form> Exists
cockpit <pf-v6-form> Exists
chickadee -- --

Sub-components

  • <pf-v6-form-group> - Groups a label, control, and helper text
  • <pf-v6-form-field-group> - Groups related form fields with header

Design

Requirements

  • MUST implement PFv6 visual designs
  • MUST provide end-user feature parity with @patternfly/react-core Form
  • MAY adjust element API to leverage web platform strengths
  • SHOULD maintain CSS custom property theming compatibility
  • SHOULD expose useful CSS shadow parts

Element-specific considerations

  • isHorizontal: label/control side-by-side vs stacked
  • isWidthLimited / maxWidth: constrain form width
  • FormGroup: label, isRequired, fieldId, helperText, validated (success/warning/error/default)
  • FormSection: titled group of form groups; title slot or prop
  • FormFieldGroup: collapsible field group; FormFieldGroupHeader with title, description, actions
  • ActionGroup: button row at form bottom
  • FormHelperText with icon for validated states
  • Native <form> element inside shadow DOM vs light DOM passthrough - evaluate carefully
  • noValidate to disable browser built-in validation
  • FormLabel: for attribute must pierce shadow DOM - use FACE ElementInternals label association or light DOM labels

Checklist

Implementation

  • API per .claude/ADVICE.md
  • CSS uses v6 tokens, logical properties, nesting
  • @summary and JSDoc on element class

Demos

  • Demos match patternfly.org naming/structure
  • CSS custom properties match computed styles from patternfly.org (Chrome MCP)
  • Visual parity verified via Chrome MCP

Tests

  • Public API covered (attributes, properties, events, slots)
  • a11ySnapshot assertions

Reviews

  • /review-api passes
  • /review-demos passes
  • /review-a11y passes
  • eslint and stylelint pass

Ship

  • Add changeset
  • PR targets staging/pfv6 (NOT main)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions