Skip to content

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

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)

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions