Component: Date Picker

Component Name

Component Description

Design Spec

Link to Design Spec in Figma

Engineering Spec

Inputs

• [List all inputs into the component]
• [e.g. @attr public paused: boolean | false]

Outputs

• [List all outputs from the component]

Events

• [List all inputs into the component]

Slots

• [List all named and unnamed slots for the component]
• [e.g. Indeterminate: The slot for a custom indeterminate indicator]

CSS Variables

• [Any component-specific CSS variables that allow the user to change the appearance of the component]

Accessibility

• Find the matching component through WCAG's patterns: https://www.w3.org/WAI/ARIA/apg/patterns/https://www.w3.org/WAI/ARIA/apg/patterns/
• Are there any accessibility elements unique to this component?
• List ARIA attributes
  • ARIA attribute
• Does the component support 400% zoom?

Preparation

• Find the base FAST Component this component will inherit from and document
  • FAST Component
• Check the Fluent UI React V9 Component Spec for differences and document
  • Difference #1
• Fluent UI React V9 Storybook for implementation differences and document
  • Difference #1
• Open GitHub issues related to component
  • [link to each issue]
• (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• Component Spec authored and reviewed

Implementation

• Initial conformance and unit tests (validate basic functionality)
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
• Uses design tokens for styling
• Renders correctly in High Contrast mode

Validation

• Add tests
  • Unit and conformance tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Create an issue and run manual accessibility tests: [link to issue]
• Validate with partners
• Finalize documentation
  • Review and add any missing storybook stories
  • Finalize migration guide
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"

No implementation file or usable design spec is named; start by completing the component spec from the linked Fluent UI and FAST references, including inputs, outputs, accessibility, and differences. Done requires the Date Picker implementation plus conformance and accessibility tests, Storybook stories, README.md documentation, design-token styling, and validation tasks listed in the issue.