ColorPicker

[gouttierre]

💡 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 ColorPicker.
  • ColorPicker component - Research #31927
• Open GitHub issues related to component
  • [Bug]: Color names are not provided by the ColorPicker control #23434
  • ColorPicker: add HSL mode #17404
  • ColorPicker does not announce changes in RGBA field values consistently #16194
  • ColorPicker sliders should work on touchscreens #8013
  • ColorPicker: full RTL support? #10900
  • Add support for 8 Digit Hex on Color Picker #12929
• Create react-color-picker
  • feat(react-color-picker-preview): generate package scaffold #31976
• (Optional) Draft implementation
  • [NO-MERGE] ColorPicker research #32033
• Component Spec authored and reviewed
  • docs(react-color-picker): Added Spec.md #32234

Implementation

• Component implementation
  • feat(react-color-picker): generated components #32336
  • feat(react-color-picker): added ColorSlider #32346
  • feat(react-color-picker): added ColorArea #32426
  • feat(react-color-icker): created AlphaSlider #32443
  • feat(react-color-picker): added context to the ColorPicker #32473
  • fix(react-color-picker): added color prop instead of value #33018
  • feat(react-color-picker): added keyboard events for ColorArea #33041
  • docs(react-color-picker): added default ColorPicker with input fields #33079
  • feat(react-color-picker) Combined components of the ColorPicker #33273
  • fix(react-color-picker): fixed thumb position for ColorPicker #33356
  • feat(react-color-picker): added shape prop to the ColorPicker #33349
• Initial conformance and unit tests (validate basic functionality)
• Initial documentation - docs(react-color-picker): Updated documentation for the ColorPicker #33346
  • Storybook stories
  • README.md covering basic usage
  • MIGRATION.md guide (include v8 and v0)
• Component released as unstable from @fluentui/react-components/unstable
  • feat(react-color-picker): Release ColorPicker as unstable #33395

Validation

• Add tests
  • Unit and conformance tests
  • VR tests - test(react-color-picker): added vr tests #33491
  • Bundle size fixtures - fix(react-color-picker): added bundle size configuration #33483
  • Performance test scenario - perf-app: Added performance test scenario for the ColorPicker #33496
  • Accessibility behavior tests - test(react-color-picker): Added cy and a11y tests for sliders #33609
  • Create an issue and run manual accessibility tests: [link to issue] - ColorPicker Accessibility Review #33512
• Validate with partners
• Run a bug bash with other FUI crews
• Finalize documentation
  • Review and add any missing storybook stories
  • Finalize migration guide
• Component released as stable from @fluentui/react-components
  • 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"

[gouttierre]

📢

• Partners are asking about the ColorPicker v9 and are not interested in the ColorCompact variant.
• Whiteboard, Office AI is using color picker v8 with swatch picker v9 + are willing to contribute.
• ODSP, Viva are also interested in the ETA of the component.
• Need design resources + PoC and Prague eng. allocation.

cc @tudorpopams , @JustSlone , @paulgildea, @jurokapsiar

[gouttierre]

📢

• On hold until a severity issue gets addressed by dev.
• Valentyna will be the dev assigned and Toshie will be on the design PoC.

cc @tudorpopams , @ValentinaKozlova , @jurokapsiar , @JustSlone

[paulgildea]

Designer is also interested in a v9 based ColorPicker