Outstanding work as of January 2022

query for Input labeled issues

• RC prep (mostly done) - Project: Finish getting Input ready for RC #20936
• a11y pass (mostly done) - Input a11y pass #21174
  • contrast issues with filled appearances - Input has inadequate contrast in filledDarker/filledLighter #21449
  • accessible examples for contentBefore/after - Input: add better example for accessible contentBefore/contentAfter #21450
• minor outline styling issue - Input still uses browser focus outline in webkit #21296
• minor open design questions - Input: minor open design questions #21464

Possible items for later

• Field (for attaching label) - Field #19627
• Implement additional features, related components, and/or component variants: tentative details/research in Spec-variants.md
  • Bookends - Input: add bookends #21462
  • Textarea (multiline)
  • Validation
  • Password
  • Masking

Preparation:

• Started prep
• Open UI Research complete
  • [link to https://open-ui.org/]
• Comparison on v8 and v0 complete
• Gather open GitHub issues related to component
• react-* package scaffolded
• Component Spec authored and reviewed
• Deliverable: Reviewed component spec

Implementation

https://github.com/microsoft/fluentui/tree/master/packages/react-input

• Started impl - Migrate react-input to new DX and create Input from template #18781
• Implement component
• Add storybook stories
• Using hooks
• Using makeStyles
• Respects Figma tokens (and using provider)
  • Basic styling: Input: Add styling #19376
  • Bookend styling deferred
  • Focus styling Input: add interaction styling and vr-tests #20648
  • Styling polish after design review
• Respects API principles, shorthands and slots handling
• No dependency on v0/v7
• Add tests - Conformance, Unit, and VR
  • Conformance tests
  • Unit tests
  • VR tests Input: add interaction styling and vr-tests #20648
  • Accessibility behavior tests probably not needed due to entirely using a native element
• Accessibility pass Input a11y pass #21174 (almost done)
• Write README.md covering basic usage
• Write initial MIGRATION.md guide (include v8 and v0)
• Set component ownership in CODEOWNERS
• Deliverable: Experimental component ready for partner use, component re-exported in react-components

Validation

• Started validating
• Validate with token pipeline
• Validate in product
• Finalize migration guide
  • Author codemods
• Deliverable: Preview component ready for broader/3rd party use