storybook
storybook copied to clipboard
[Feature Request]: Addon-control color picker preset limit
Is your feature request related to a problem? Please describe
/cc @ghengeveld and @shilman who initially worked on this code and decided on the 27 preset color limit.
My design system has more than 27 colors available to choose from. However, the default color picker control option does not allow any more colors past 27 due to this line of code:
https://github.com/storybookjs/storybook/blob/5642c93edbc7472a608263d5518e30012731bf6c/code/ui/blocks/src/controls/Color.tsx#L287
Describe the solution you'd like
Provide a mechanism to allow the color picker preset limit to be changed or disabled entirely. If possible, I would be willing to open a PR to enhance the code with proper guidance.
Describe alternatives you've considered
Not sure on alternatives since the color picker not configurable. I would create a custom add-on but that seems heavy handed when all I need is to change the limit.
Are you able to assist to bring the feature to reality?
yes, I can
Additional context
No response
The rationale for the 27 swatches limit is that usually the list grows with each picked color, and we don't want limitless "memory". In case of preconfigured swatches, that does not apply and so it makes sense to be able to see more.
We could either swap out the 27th swatch with a "view more" button (e.g. [...]
) which when clicked will extend the list of swatches to the full set, or simply always show the full set, but only if that set consists of preconfigured swatches. What do y'all think makes most sense?
I'm fine with showing the complete set since in most cases we would want to display all preset colors.
I agree, I feel like the custom-defined preset colors should always be shown and not conflict with a very short list of available slots for additional user-defined colors. Any chance that this will be changed?
I'd be open to a PR here since it seems like a few of you are running into this.
I just ran into this issue as well. Our fledgling design system consists of color palettes for two schemes, one for the overall organization (set by the university) and another for a federally-funded program which our unit maintains for the state. I'm shorted 4 colors with the current setup.