mapbox / react-colorpickr Goto Github PK

Sometimes it is 1 number off, sometimes 4, etc.

/cc @tristen

using https://github.com/mapbox/react-colorpickr/releases/tag/v4.1.0-alpha I get:

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofColorForm.

This would remove the manual step and make this configurable on the fly.

From #58

User often wants to use the H version of the color field but manually input an S value. To see an example of a similar UI that is more user-friendly, check out Photoshop: it uses explicit toggles to switch modes. I'd even be in favor of locking the color field in Hue mode always – it's the most familiar and intuitive way to pick a color.

/cc @tristen

/cc @tristen

The current/reset colors are identical when first opening up the pane, and it's not clear that one of them is designed to reset to the original value:

Consider adding icon or separating the two color squares (bad sketch below)

make it pop

Seeing this error when trying to require the 4.x.x versions of react-colorpickr. My app is using browserify with babelify.

ReferenceError: [BABEL] /Users/saman/work_repos/maki-icons/node_modules/react-colorpickr/dist/colorpickr.js: Unknown option: /Users/saman/work_repos/maki-icons/node_modules/react-colorpickr/.babelrc.presets while parsing file: /Users/saman/work_repos/maki-icons/node_modules/react-colorpickr/dist/colorpickr.js

https://github.com/mapbox/react-colorpickr/blob/mb-pages/.babelrc

If I add the following:

[
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
]

as devDependencies in my project, the problem goes away, but that shouldn't' be required to use the colorpickr.

react-colorpickr/index.js Line 206: Unexpected token <
You may need an appropriate loader to handle this file type.

return (
/* jshint ignore:start */
<div className='colorpickr' onClick={this._onClick}>
<div className='colorpickr-body'>
<div className='col'>

Everything works, but mode toggles for the item lower in the dom are all always empty:

Can we adjust the sliders and color field on selection of either H, S, V, R, G, or B?

/cc @tristen

One thing to notice is that rgb colors and hsv colors are not 1-1 mapping, so hsv -> rgb -> hsv may not return the original hsv value. Thats why i check whether the color should be updated, which seems not quite elegant.

Add perceptual color space as an option beside the current RGB/HSV options.

#000000 -> #000

https://npmjs.org/package/colr-convert

This project uses webpack for the live server and browserify to build a bundle. It should use one of those tools to do both things.

To reproduce:

1. Start at rgba(0,0,0,1) — the color dot on the square canvas is all the way at the bottom
2. Try to slide slider below it to change color

(be assured that the long period of nothing happening in this gif is me trying in vain to slide or click further down the slider)

cc/ @peterqliu

the rotated range input sometimes doesn't work or is unresponsive, and covers up other elements on the page. Should un-rotate this guy and place it along the bottom:

Currently if the reset button is enabled, it jumps back to the previous color before.

But it might be more useful if this were a swatch of the original color to measure contrast alongside a changed one:

Clicking on the original swatch would reset things. Thoughts @ajashton @nickidlugash ?

What's received by an onChange listener should be nicely formatted as color values. Right now I'm passing everything which is a little silly and means private things are no longer private.

This would be more intuitive:

I would leave the opacity slider where it is.

How do your feed about a way to explicitly pass colorMode or mode in props?

Remembering color mode preferences should be an application-level concern, not a component-level one.

what do you all think of breaking repeated things like https://github.com/mapbox/react-colorpickr/blob/mb-pages/src/colorpickr.js#L295-L324 these out into compoents instead of all in one colorpickr component?

'unsafe-eval' ('store' via 'react-colorpicker' is being silly, Function('return this')(), could have other eval()/Function())

This is necessary to enable unsafe-eval rule in CSP downstream.

https://github.com/mapbox/react-colorpickr/blob/mb-pages/index.js#L24-L35

This code can be simplified by using default props

Wondering if there would be support for adding "show props" here. For example application that does not support alpha transparency can pass in prop to not show the alpha picker, etc... Thanks!

When using the alpha selector, it seems like there is a bug.

Using the slider will return alpha between 0-1.0, but when selecting a color, it will return an alpha between 0-100. It was a easy conditional on my side, but something that could be fixed I think.

When S is active I control V:

When V is active I control S:

Maybe this should be on a different ticket, but I think the mode switch interaction is poorly designed. It doesn't match user intention to change the functionality of the color field based on which input is active. User often wants to use the H version of the color field but manually input an S value. To see an example of a similar UI that is more user-friendly, check out Photoshop: it uses explicit toggles to switch modes. I'd even be in favor of locking the color field in Hue mode always – it's the most familiar and intuitive way to pick a color.

Using Chrome 45 on Ubuntu.

Examples:

• No matter what I do I can't drag the white circle all the way to the left or bottom of the square. It always gets stuck at a saturation or value of about 1-30.
• The hue slider will get stuck at 345 or 350 and I can't drag it any further to the right
• If I'm dragging the hue slider and my cursor leaves the very narrow rainbow track, the slider gets stuck in drag mode and will follow my cursor even after mouseup. I have to click again on the hue slider to stop it.

npm 3.x is removing peerDependency and we should use a dependency instead for React from this module.

minimum allowed in the UI seems to be 1

If we use csscolorparser, react-colorpickr will reuse the application's existing csscolorparser dependency instead of including color-parser alongside it

Is it possible to provide ES5 version for use in browser without transpiling?

A good candidate to use gremlins to stress test & capture bugs 👡

The onChange property should be required with a propType

right now picker can only receive an rgba color as a prop.

using Object.assign without a module is including the babel polyfill by default