material-ui-color
material-ui-color copied to clipboard
Support for hiding color box in picker
I'm working on a project where the user wants to show the color picker without the large color square at the top. I've successfully hidden it using CSS:
.muicc-colorbox-hsvgradient height: 0 !important visibility: hidden
But the issue is that in my picker, I still have palette items that aren't on the color slider(black, grey, white). With the color box hidden I run into an issue where if I choose one of the non-color items and then click a color on the slider the color is not selected. It remains on the [non-color.]
Steps to reproduce:
- Create a palette of colors. I've attached the colors I use at the bottom of this issue.
- Select black, grey or white
- On the color slider, choose a color
- See that the color in the square is not changed
Suggested features:
- Allow the slider to change the color in this situation. And also make hiding the color box an option.
paletteColors = { "#000000": "#000000", "#333333": "#333333", "#4D4D4D": "#4D4D4D", "#666666": "#666666", "#808080": "#808080", "#999999": "#999999", "#B3B3B3": "#B3B3B3", "#cccccc": "#cccccc", "#FFFFFF": "#FFFFFF", "#9F0500": "#9F0500", "#D33115": "#D33115", "#F44E3B": "#F44E3B", "#C45100": "#C45100", "#E27300": "#E27300", "#FE9200": "#FE9200", "#FB9E00": "#FB9E00", "#FCC400": "#FCC400", "#FCDC00": "#FCDC00", "#808900": "#808900", "#B0BC00": "#B0BC00", "#DBDF00": "#DBDF00", "#194D33": "#194D33", "#68BC00": "#68BC00", "#A4DD00": "#A4DD00", "#0C797D": "#0C797D", "#16A5A5": "#16A5A5", "#68CCCA": "#68CCCA", "#0062B1": "#0062B1", "#009CE0": "#009CE0", "#73D8FF": "#73D8FF", "#653294": "#653294", "#7B64FF": "#7B64FF", "#AEA1FF": "#AEA1FF", "#AB149E": "#AB149E", "#FA28FF": "#FA28FF", "#FDA1FF": "#FDA1FF" }
I need to think how to better customise colorpicker like removing HSVGradient If you have a gray color aka without tint, it is normal that the color slider has no effect on these type of colors. I checked other colorpickers behaviours in this case, and they work the same.