Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a Color Picker component #12059

Open
TheOneTheOnlyJJ opened this issue Feb 14, 2024 · 1 comment
Open

Add a Color Picker component #12059

TheOneTheOnlyJJ opened this issue Feb 14, 2024 · 1 comment
Labels
docs Improvements or additions to the documentation enhancement This is not a bug, nor a new feature RFC Request For Comments waiting for 👍 Waiting for upvotes

Comments

@TheOneTheOnlyJJ
Copy link

TheOneTheOnlyJJ commented Feb 14, 2024

Summary

It would be a very straightforward component (UX-wise), allowing the user to either select from a list of predefined colors, or select (or we should say "compose") a color in one of the common color formats (RGB, RGBA, HSL, HSV, HEX, etc.).
The idea for this suggestion came to me while browsing the official M3 docs, where in one of the illustrations regarding Colors, a Color Picker is shown: https://m3.material.io/styles/color/system/how-the-system-works#d7e1bd66-e758-405f-9814-51e5d2f02c6b
This led me to researching whether there's anything like that available for Material UI and finding that there isn't any official Color Picker component (not even suggested at the time I'm writing this).

Examples

The example from the MD3 documentation
MD3_Color_Picker
Libraries implementing React color pickers:

There are many more, but you get the idea.

Motivation

There is no easy (UX-way) out-of-the-box solution to allow the user to pick a custom color.
Such a picker could go very well with the new M3 color system and the customization options it brings to the table compared to M2. Given how many picker variants there are (see react-color, linked above), there is potential for Pro/Premium content regarding these pickers.

Search keywords: color colour picker new component rgb rgba hsv hsl hex

@TheOneTheOnlyJJ TheOneTheOnlyJJ added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 14, 2024
@zannager zannager added docs Improvements or additions to the documentation component: pickers This is the name of the generic UI component, not the React module! labels Feb 14, 2024
@alexfauquette alexfauquette added waiting for 👍 Waiting for upvotes RFC Request For Comments enhancement This is not a bug, nor a new feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer component: pickers This is the name of the generic UI component, not the React module! labels Feb 14, 2024
@TheOneTheOnlyJJ
Copy link
Author

TheOneTheOnlyJJ commented May 18, 2024

Having this component would be leveraged by the RJSF/MUI library, as it allows for a dedicated ColorWidget (docs) to be specified for inputting colors as strings (docs).

It would also be a prerequisite for features to be supported by the Rich Text Editor component (#513).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation enhancement This is not a bug, nor a new feature RFC Request For Comments waiting for 👍 Waiting for upvotes
Projects
None yet
Development

No branches or pull requests

3 participants