microsoft
ColorPicker
💡 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
- [X] Open UI Research
- OpenUI does not have research on a ColorPicker.
- #31927
- [X] Open GitHub issues related to component
- #23434
- #17404
- #16194
- #8013
- #10900
- #12929
- [X] Create react-color-picker
- #31976
- [X] (Optional) Draft implementation
- #32033
- [X] Component Spec authored and reviewed
- #32234
Implementation
- [ ] Component implementation
- #32336
- #32346
- #32426
- #32443
- #32473
- #33018
- #33041
- #33079
- [ ] Initial conformance and unit tests (validate basic functionality)
- #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
disallowedChangeTypesto"major", "prerelease"
- [ ] Ensure exports are removed from from
📢
- 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
📢
- 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
📢
- 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
📢
- 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
📢
- ColorArea mouse events - in review.
- Dev is working on ColorPicker combined along with ColorArea keyboard events.
cc @tudorpopams , @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?
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
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.
@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
@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.
Hey @emil-eklund, the bug is fixed. You might want to check it out: https://react.fluentui.dev/?path=/docs/preview-components-colorpicker--docs
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).