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
  • 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

[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

[gouttierre]

📢

• ColorPicker is now in preview ➡️ Storybook v9

cc ~ @ValentinaKozlova , @tudorpopams , @JustSlone

[emil-eklund]

I cannot seem to install the preview package & all stackblitzes seem to fail.

Cannot find module '@fluentui/react-color-picker-preview' or its corresponding type declarations.ts(2307)

Looking at npm, it seems the package is empty. Am I missing something or is the package not fully available yet?

[ValentinaKozlova]

I cannot seem to install the preview package & all stackblitzes seem to fail.

Cannot find module '@fluentui/react-color-picker-preview' or its corresponding type declarations.ts(2307)

Looking at npm, it seems the package is empty. Am I missing something or is the package not fully available yet?

Hello @emil-eklund, thank you for catching that. I'll investigate why it's not fully available

[ValentinaKozlova]

Hey @emil-eklund, now ColorPicker is available.
https://stackblitz.com/edit/pbynm62n?file=src%2Fexample.tsx
There was an issue with version of tinyColor. It got latest and it didn't work.

[emil-eklund]

@ValentinaKozlova Thank you! Can confirm it works now!

As an aside, where do you collect feedback from the preview? I noticed the component tends to steal focus when paired with an input textbox but I don't want to disrupt your normal workflow.

Edit: added example from storybook

[ValentinaKozlova]

@emil-eklund,
Thank you for your feedback. For bug reports, you can create issues on GitHub, and for ideas or feedback, please use GitHub Discussions. Kindly assign them to me. Regarding this specific issue, it has already been addressed: #33415.
Thank you once again for looking into and reporting it.

[ValentinaKozlova]

Hey @emil-eklund, the bug is fixed. You might want to check it out: https://react.fluentui.dev/?path=/docs/preview-components-colorpicker--docs

[emil-eklund]

Thank you, @ValentinaKozlova! It works beautifully in the demo now! 🥳
Haven't been able to try it out in our system yet as the npm package is a bit old. (latest published 3 days ago, your commit was yesterday and the nightly build is empty).