[BD-46] fix: default color for not valid value

[khudym]

Description

Add default value for invalid color proposed in PR comments
Issue

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	4622b17
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/65291fcefe4e8b00080a8715
😎 Deploy Preview	https://deploy-preview-2715--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[openedx-webhooks]

Thanks for the pull request, @khudym!

When this pull request is ready, tag your edX technical lead.

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (326b28a) 91.83% compared to head (4622b17) 92.82%.
Report is 8 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2715      +/-   ##
==========================================
+ Coverage   91.83%   92.82%   +0.99%     
==========================================
  Files         235      235              
  Lines        4225     4238      +13     
  Branches     1025     1029       +4     
==========================================
+ Hits         3880     3934      +54     
+ Misses        341      300      -41     
  Partials        4        4              

Files	Coverage Δ
src/ColorPicker/index.jsx	95.83% <100.00%> (-4.17%)	⬇️

... and 40 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[viktorrusakov]

@khudym can we also update initial state variables on the docs site? Replace empty strings with valid colors, otherwise we get a brief NaNNaNNaNNaN error

Screen.Recording.2023-10-19.at.09.52.57.mov

[brian-smith-tcril]

We discussed this in the working group meeting and the conversation there led to a "we shouldn't allow invalid hex" decision.

After looking into that a bit more, I don't think "we shouldn't allow invalid hex" is a complete solution to our problem. react-colorful avoids some parts of this issue by not supporting a state where a color has not been picked.

We need to support at least entering valid hex or an empty string (to allow clearing out the pick), but it gets even more complex than that.

The react-colorful examples also allow backspacing, allowing users to have the entered text not match the value in the picker, only updating once the value is valid again.

I made a draft PR where I tried to put together what feels to me like desired behavior for this component #2734

[viktorrusakov]

@brian-smith-tcril Thanks for the context! I really wasn't sure what's going on with this component... I'll take a look at you PR as well.

[viktorrusakov]

Colsing this as the issue was fixed in #2734