SwatchPicker

[ValentinaKozlova]

💡 When you create a PR for any of the checklist items, add a link to this Epic under the PR's Related Issues section.

Preparation

• Open UI Research
  • OpenUI does not have research on a SwatchPicker.
  • SwatchColorPicker component - Research #28376
• Open GitHub issues related to component
  • [Feature]: SwatchColorPicker should support custom svgs #22687
  • [Accessibility]: SwatchColorPicker add incorrect role="gridcell" on color cell if grid has multiple rows #26907
  • [Feature]: Expose 'disabled' prop within IColorCellProps #27819
• Create react-* package and component from template
  • feat(react-swatch-picker-preview): generate package scaffold #29496
  • https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-swatch-picker-preview
• (Optional) Draft implementation
  • [NO-MERGE] Swatch Color Picker research #28700
  • [NO-MERGE] SwatchPicker research #30190
  • [NO-MERGE] SwatchPicker Design demo #30631(for a11y review)
• Component Spec authored and reviewed
  • docs (react-swatch-picker): SPEC #29436
  • docs(react-swatch-picker): updated Spec.md #30880

Implementation

• Component implementation
  • feat(swatch-picker): Added ColorSwatch sub component and selection logic #30544
  • feat(swatch-picker): UI changes and spacing #30650
  • feat(react-swatch-picker): Added SwatchPickerRow component and rendering utils #30600
  • feat(react-swatch-picker): Added ImageSwatch #30769
  • docs(react-swatch-picker): Added stories for Size, Shape and Spacing #30781
  • feat(react-swatch-picker): Added icon, disabled state and initials #30843
  • feat(react-swatch-picker): changed API of renderingUtils #30868
  • feat(react-swatch-picker): Added EmptySwatch component #30953
  • fix(react-swatch-picker): colors in HC mode #31014
• Initial conformance and unit tests (validate basic functionality)
  • test(react-swatch-picker): Added cy tests #30861
• Initial documentation
  • Storybook stories
  • README.md covering basic usage - docs(react-swatch-picker): Added README.md #30877
  • MIGRATION.md guide (include v8 and v0) - docs(react-swatch-picker): Added MIGRATION.md #30878
• Component released as unstable from @fluentui/react-components/unstable - feat: release react-swatch-picker to unstable #30881

Validation

• Add tests
  • Unit and conformance tests - test(react-swatch-picker): added tests for render utils #31083
  • VR tests
    • test(react-swatch-picker): added vr tests #30887
    • test(react-swatch-picker): vr tests for grid layout and empty swatch #31029
  • Bundle size fixtures
  • Performance test scenario - perf-app: added SwatchPicker scenario #31081
  • Accessibility behavior tests
    • fix(react-swatch-picker): a11y attrs for ImageSwatch #31060
  • Create an issue and run manual accessibility tests: SwatcPicker Accessibility Review #31078
• Validate with partners
• Run a bug bash with other FUI crews
• Finalize documentation
  • Review and add any missing storybook stories - docs(react-swatch-picker): added description and best practices #31280
  • Finalize migration guide
• Component released as stable from @fluentui/react-components
  • feat(react-swatch-picker): release SwatchPicker as 9.0.0 stable #31389
  • Ensure exports are removed from from @fluentui/react-components/unstable
  • 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"

[briandrouin]

Design contact: Toshie

ADO task