3.0.0

[casesandberg]

Things to complete for 3.0.0 release

Previous tracking issues to incorperate: https://github.com/casesandberg/react-color/milestone/1

Goals:

• Keep package sizes small (track this in a github action)
• Have an individual package for each picker (we have @color-picker on npm)
• Everything is typed with Flow (track coverage in a github action)(ci)
• All core components:
  • Can be used within a common storybook
  • Have unit and integration tests (ci)
• All pickers
  • Have snapshot tests (ci)
  • Have cross-browser testing and / or Percy (ci)
• Automate releases — Deploy docs site + publish all pickers to npm when there is a new tag pushed to master. (use github actions)

Core Components

• [x] Checkerboard
• [ ] DraggableRegion
  • [x] DraggableRegionRectangle
  • [ ] DraggableRegionSphere — Same as rectangle but make it a corrdinate plane?
• [ ] Gradient
  • [x] VerticalGradient
  • [x] HorizontalGradient
  • [ ] RadialGradient — To work inside DraggableRegionSphere
• [ ] Input — (used to be named EditableInput)
  • [x] NumberInput
  • [x] UnitInvervalInput
  • [ ] HexInput (Needs some work) There is currently some validation in here for this but it needs to be more robust. See issues in current repo about support needed for varios hexes of various lengths
• [ ] Swatch — Connected component that knows when its hovered or if it matches the current active color in the store. Think of this like the component in react-router. It should be styleless.
• [ ] ColorPickerStore — Outermost component that proves render props to pass down values and onChange handler. Has a prop that is an array of values that it wants ['hex'] otherwise it will transform all values supported and pass them down (helps save on computation). Stores the lab value in state and uses chroma-js to transform values up and down (its only 17kB!). Calls onChange and onEveryChange (which is a change from the old onChange and onChangeComplete).
• [ ] Region
  • [x] HueRegion — (used to be named Hue)
  • [x] AlphaRegion — (used to be named Alpha)
  • [ ] SaturationRegion
  • [x] LightnessSaturationRegion — (used to be named Saturation)
  • [ ] SphereicalLightnessSaturationRegion

Pickers to rewire

• [ ] Chrome
• [ ] Sketch
• [ ] Block
• [ ] Github
• [ ] Hue — (Wrapps basic core component)
• [ ] Alpha — (Wrapps basic core component)
• [ ] Twitter
• [ ] Circle — Show example of looking like design ref
• [ ] Slider
• [ ] Swatches
• [ ] Material
• [ ] Compact

New Pickers

• [ ] Saturation — (Wrapps basic core component)
• [ ] Atom — design ref
• [ ] Figma — design ref
• [ ] Google — design ref
• [ ] React Dev Tools
• [ ] Simple / System — mix of design ref and design ref
• [ ] Circular Picker — polished version of design ref
• [ ] Circular Picker 2

Removed Pickers

• [ ] Photoshop — this was a launch gimmick to stir up interest in the project, I do not think its reasonable to support it anymore and it is almost never used by consumers.

TODO

• [ ] Passing custom styles down to components (adding classNames and\or allow passing in an object)
• [ ] Passing custom components down to pickers
• [ ] Adding aria and other accessibility support
• [ ] Update Documentation
• [ ] Migrate docs site to use Gatsby

Release plan

For 3.0.0 all of the pickers will be imported directly into react-color and there will be a dev warning thrown directing them to update to the new individual color pickers. We will deprecate the react-color namespace in the next major version.

• [ ] Release alpha of react-color importing new libs to have people test
• [ ] Reach out to people who originally wrote articles on the first one
• [ ] Write an article "Anatomy of a Color Picker"
• [ ] Release Flow and TS libdefs

[varunsridharan]

a standalone package would be awesome.

[aChudinov]

@casesandberg Hello! Do you have any estimations when you will continue to work on 3.0.0? :) I really need Gradient component. Or anyhow I can help and contribute?

[laurent-d]

Hello @casesandberg this V.3 look very promising !!! Do you have a target date for the release ? Or is there a chance to beta test it (the branch seems outdated: last commit were from 2019) Thanks a lot for your awesome work !

[xiaopujun]

Is V3 still going to be released? Stay tuned, I'm using react-color in my project and it works great, it would be great to add gradient mode!