Repository navigation
[feat]: Create <pf-v6-date-picker> element #2536
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.good 1st issueGood for newcomers to the project; requires at least an introductory knowledge of the languageGood for newcomers to the project; requires at least an introductory knowledge of the languagenew component requestpriority: lowSeverity level: 3Severity level: 3red hack dayGood issue for Red Hack DayGood issue for Red Hack Day
Milestone
Description
Summary
Create a <pf-v6-date-picker> web component implementing the PatternFly v6 Date picker component.
A date picker enables users to select or input a date by day, month, and year.
Prior Art
| Source | Element | Status |
|---|---|---|
| PFE v4 | -- | -- |
| cem | -- | -- |
| cockpit | -- | -- |
| chickadee | -- | -- |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with
@patternfly/react-coreDatePicker - MUST implement all accessibility features per PatternFly v6 date picker accessibility
- 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
- Depends on
pf-v6-calendar-month(port that first) - Depends on
pf-v6-popover/ Floating UI for calendar popup - FACE:
formAssociated = true,ElementInternals- submits ISO date string value value(string),onChange,onBlurpropsplaceholderfor text input (e.g. "YYYY-MM-DD")validatorspassed down topf-v6-calendar-monthlocale,weekStartpropsappendTo/ Floating UI anchor for popover placement- Text input: manual typed entry with validation; calendar icon button toggles popover
- Popover pattern:
role="dialog",aria-label,aria-modal; closes on Escape, outside click - Validation: parse typed date, validate against validators, set
aria-invalidon input
Checklist
Implementation
-
formAssociated = true -
ElementInternalsfor value/validity reporting - API per
.claude/ADVICE.md - CSS uses v6 tokens, logical properties, nesting
-
@summaryand 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)
-
a11ySnapshotassertions - Form submission test
Reviews
-
/review-apipasses -
/review-demospasses -
/review-a11ypasses -
eslintandstylelintpass
Ship
- Add changeset
- PR targets
staging/pfv6(NOTmain)
Reactions are currently unavailable
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.good 1st issueGood for newcomers to the project; requires at least an introductory knowledge of the languageGood for newcomers to the project; requires at least an introductory knowledge of the languagenew component requestpriority: lowSeverity level: 3Severity level: 3red hack dayGood issue for Red Hack DayGood issue for Red Hack Day
Activity
[-]pf-date-picker[/-][+][1:1]: pf-date-picker[/+][-][1:1]: pf-date-picker[/-][+][feat]: Create `<pf-v6-date-picker>` element[/+]