Storybook Knob: Color knob allowing output be RGB or Hex

[somethiiing]

Is your feature request related to a problem? Please describe
Color knob always returning RGB and not hexcode color.

Describe the solution you'd like
Would like to have an option (or some way) to select which output is selected

Are you able to assist to bring the feature to reality?
yes, I can...

[shilman]

PRs welcome!

[imshubhamsingh]

@shilman For this I think we should change SketchPicker to ChromePicker from react-color where the user can control the color styles between rgba, hex and hsla. Based on the user's choice color can be shown. If not the default can be set to rgba.

[imshubhamsingh]

After doing some more digging, it seems that data is not shared to callback onChange on toggle between color variants in ChromPicker in react-color. Either we can provide a dropdown beside color swatch to select the variant or create a custom picker using react-color and manage toggle state.

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-rc.2 containing PR storybookjs/storybook#13102 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[nick-compassaq]

Hey, I'm just curious if this feature ever got implemented. The story I'm working on is looking for a hex color, but the color control only seems to output rgba() format colors. I've looked through the documentation, but there doesn't seem to be any configuration for color controls beyond just stating that your control is or isn't a color.

[shilman]

It's being implemented in addon-controls (that supercedes addon-knobs, which will be deprecated) right here: storybookjs/storybook#14249 (comment)

[coler-j]

@shilman I don't see an API to control the hex/rgb output format. Do you know if it ever got added?