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
• Initial conformance and unit tests (validate basic functionality)
  • test(react-color-picker): added tests for ColorSlider #32373
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
  • MIGRATION.md guide (include v8 and v0)
• Component released as unstable from @fluentui/react-components/unstable

Validation

• Add tests
  • Unit and conformance tests
  • VR tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Create an issue and run manual accessibility tests: [link to issue]
• 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

[gouttierre]

📢

• Valentyna has almost completed research on the use cases and confirmed with our partners: Anuj / Amit at WXP, and Bakhodir at ODSP on their needs.
• Each partner is interested in the default v8 functionality. However, Valentyna has gathered implementation details to enhance the component further and plans to incorporate these insights into her implementation strategy to scale the component in the future.
• Valentyna will begin collaborating with Toshie on the design specifications for the behaviors.

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

[gouttierre]

📢

• ColorSlider is merged. AlphaSlider is in review, ColorArea in draft PR mode.
• Currently, the engineer is working on adding context to the ColorPicker.

cc~ @tudorpopams , @ValentinaKozlova , @paulgildea , @JustSlone

[gouttierre]

📢

• ColorArea mouse events - in review.
• Dev is working on ColorPicker combined along with ColorArea keyboard events.

cc @tudorpopams , @ValentinaKozlova