react-color - npm Package Compare versions

Comparing version 2.14.1 to 2.17.0

lib/components/block/Block.js

@@ -20,2 +20,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _color = require('../../helpers/color');
@@ -40,2 +44,4 @@
       triangle = _ref.triangle,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
@@ -52,3 +58,3 @@ className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -108,3 +114,3 @@ card: {
     }
-  }, { 'hide-triangle': triangle === 'hide' });
+  }, passedStyles), { 'hide-triangle': triangle === 'hide' });
 
@@ -141,3 +147,4 @@ return _react2.default.createElement(
   colors: _propTypes2.default.arrayOf(_propTypes2.default.string),
-  triangle: _propTypes2.default.oneOf(['top', 'hide'])
+  triangle: _propTypes2.default.oneOf(['top', 'hide']),
+  styles: _propTypes2.default.object
 };
@@ -148,5 +155,6 @@
   colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'],
-  triangle: 'top'
+  triangle: 'top',
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Block);

lib/components/block/spec.js

@@ -66,2 +66,6 @@ 'use strict';
   expect(tree).toMatchSnapshot();
+});
+test('Block renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Block2.default, { styles: { default: { card: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
 });

lib/components/chrome/Chrome.js

@@ -20,2 +20,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _common = require('../common');
@@ -45,6 +49,8 @@
       renderers = _ref.renderers,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -128,3 +134,3 @@ picker: {
     }
-  }, { disableAlpha: disableAlpha });
+  }, passedStyles), { disableAlpha: disableAlpha });
 
@@ -200,9 +206,11 @@ return _react2.default.createElement(
 Chrome.propTypes = {
-  disableAlpha: _propTypes2.default.bool
+  disableAlpha: _propTypes2.default.bool,
+  styles: _propTypes2.default.object
 };
 
 Chrome.defaultProps = {
-  disableAlpha: false
+  disableAlpha: false,
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Chrome);

lib/components/chrome/ChromeFields.js

@@ -24,2 +24,6 @@ 'use strict';
 
+var _UnfoldMoreHorizontalIcon = require('@icons/material/UnfoldMoreHorizontalIcon');
+
+var _UnfoldMoreHorizontalIcon2 = _interopRequireDefault(_UnfoldMoreHorizontalIcon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -89,2 +93,10 @@
       } else if (data.h || data.s || data.l) {
+        // Remove any occurances of '%'.
+        if (typeof data.s === 'string' && data.s.includes('%')) {
+          data.s = data.s.replace('%', '');
+        }
+        if (typeof data.l === 'string' && data.l.includes('%')) {
+          data.l = data.l.replace('%', '');
+        }
+
         _this.props.onChange({
@@ -98,5 +110,5 @@ h: data.h || _this.props.hsl.h,
     }, _this.showHighlight = function (e) {
-      e.target.style.background = '#eee';
+      e.currentTarget.style.background = '#eee';
     }, _this.hideHighlight = function (e) {
-      e.target.style.background = 'transparent';
+      e.currentTarget.style.background = 'transparent';
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -186,2 +198,3 @@ }
           svg: {
+            fill: '#333',
             width: '24px',
@@ -321,26 +334,8 @@ height: '24px',
               } },
-            _react2.default.createElement(
-              'svg',
-              {
-                style: styles.svg,
-                viewBox: '0 0 24 24',
-                onMouseOver: this.showHighlight,
-                onMouseEnter: this.showHighlight,
-                onMouseOut: this.hideHighlight
-              },
-              _react2.default.createElement('path', {
-                ref: function ref(iconUp) {
-                  return _this2.iconUp = iconUp;
-                },
-                fill: '#333',
-                d: 'M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z'
-              }),
-              _react2.default.createElement('path', {
-                ref: function ref(iconDown) {
-                  return _this2.iconDown = iconDown;
-                },
-                fill: '#333',
-                d: 'M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z'
-              })
-            )
+            _react2.default.createElement(_UnfoldMoreHorizontalIcon2.default, {
+              style: styles.svg,
+              onMouseOver: this.showHighlight,
+              onMouseEnter: this.showHighlight,
+              onMouseOut: this.hideHighlight
+            })
           )
@@ -347,0 +342,0 @@ )

lib/components/chrome/spec.js

@@ -84,2 +84,7 @@ 'use strict';
   expect(tree).toMatchSnapshot();
+});
+
+test('Chrome renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Chrome2.default, { styles: { default: { picker: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
 });

lib/components/circle/Circle.js

@@ -24,2 +24,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _materialColors = require('material-colors');
@@ -46,2 +50,4 @@
       circleSize = _ref.circleSize,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       circleSpacing = _ref.circleSpacing,
@@ -51,3 +57,3 @@ _ref$className = _ref.className,
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -62,3 +68,3 @@ card: {
     }
-  });
+  }, passedStyles));
 
@@ -89,3 +95,4 @@ var handleChange = function handleChange(hexCode, e) {
   circleSize: _propTypes2.default.number,
-  circleSpacing: _propTypes2.default.number
+  circleSpacing: _propTypes2.default.number,
+  styles: _propTypes2.default.object
 };
@@ -97,5 +104,6 @@
   circleSpacing: 14,
-  colors: [material.red['500'], material.pink['500'], material.purple['500'], material.deepPurple['500'], material.indigo['500'], material.blue['500'], material.lightBlue['500'], material.cyan['500'], material.teal['500'], material.green['500'], material.lightGreen['500'], material.lime['500'], material.yellow['500'], material.amber['500'], material.orange['500'], material.deepOrange['500'], material.brown['500'], material.blueGrey['500']]
+  colors: [material.red['500'], material.pink['500'], material.purple['500'], material.deepPurple['500'], material.indigo['500'], material.blue['500'], material.lightBlue['500'], material.cyan['500'], material.teal['500'], material.green['500'], material.lightGreen['500'], material.lime['500'], material.yellow['500'], material.amber['500'], material.orange['500'], material.deepOrange['500'], material.brown['500'], material.blueGrey['500']],
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Circle);

lib/components/circle/spec.js

@@ -58,2 +58,7 @@ 'use strict';
 
+test('Circle renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Circle2.default, { styles: { default: { card: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});
+
 test('CircleSwatch renders correctly', function () {
@@ -60,0 +65,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_CircleSwatch2.default, null)).toJSON();

lib/components/common/Raised.js

@@ -20,2 +20,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,5 +31,7 @@
       background = _ref.background,
-      children = _ref.children;
+      children = _ref.children,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -87,3 +93,3 @@ wrap: {
     }
-  }, { 'zDepth-1': zDepth === 1 });
+  }, passedStyles), { 'zDepth-1': zDepth === 1 });
 
@@ -105,3 +111,4 @@ return _react2.default.createElement(
   zDepth: _propTypes2.default.oneOf([0, 1, 2, 3, 4, 5]),
-  radius: _propTypes2.default.number
+  radius: _propTypes2.default.number,
+  styles: _propTypes2.default.object
 };
@@ -112,5 +119,6 @@
   zDepth: 1,
-  radius: 2
+  radius: 2,
+  styles: {}
 };
 
 exports.default = Raised;

lib/components/common/Saturation.js

@@ -67,2 +67,3 @@ 'use strict';
     value: function componentWillUnmount() {
+      this.throttle.cancel();
       this.unbindEventListeners();
@@ -69,0 +70,0 @@ }

lib/components/common/Swatch.js

@@ -20,4 +20,6 @@ 'use strict';
 
-var _ = require('./');
+var _Checkboard = require('./Checkboard');
 
+var _Checkboard2 = _interopRequireDefault(_Checkboard);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,3 +81,3 @@
     children,
-    transparent && _react2.default.createElement(_.Checkboard, {
+    transparent && _react2.default.createElement(_Checkboard2.default, {
       borderRadius: styles.swatch.borderRadius,
@@ -82,0 +84,0 @@ boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.1)'

lib/components/compact/Compact.js

@@ -24,2 +24,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _color = require('../../helpers/color');
@@ -47,6 +51,8 @@
       rgb = _ref.rgb,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -67,3 +73,3 @@ Compact: {
     }
-  });
+  }, passedStyles));
 
@@ -83,3 +89,3 @@ var handleChange = function handleChange(data, e) {
     _common.Raised,
-    { style: styles.Compact },
+    { style: styles.Compact, styles: passedStyles },
     _react2.default.createElement(
@@ -108,9 +114,11 @@ 'div',
 Compact.propTypes = {
-  colors: _propTypes2.default.arrayOf(_propTypes2.default.string)
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  styles: _propTypes2.default.object
 };
 
 Compact.defaultProps = {
-  colors: ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E']
+  colors: ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E'],
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Compact);

lib/components/compact/spec.js

@@ -77,2 +77,7 @@ 'use strict';
   expect(tree).toMatchSnapshot();
+});
+
+test('Compact renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Compact2.default, _extends({}, _color.red, { styles: { default: { wrap: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
 });

lib/components/github/Github.js

@@ -24,2 +24,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _common = require('../common');
@@ -39,6 +43,8 @@
       triangle = _ref.triangle,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -119,3 +125,3 @@ card: {
     }
-  }, {
+  }, passedStyles), {
     'hide-triangle': triangle === 'hide',
@@ -151,3 +157,4 @@ 'top-left-triangle': triangle === 'top-left',
   colors: _propTypes2.default.arrayOf(_propTypes2.default.string),
-  triangle: _propTypes2.default.oneOf(['hide', 'top-left', 'top-right', 'bottom-left', 'bottom-right'])
+  triangle: _propTypes2.default.oneOf(['hide', 'top-left', 'top-right', 'bottom-left', 'bottom-right']),
+  styles: _propTypes2.default.object
 };
@@ -158,5 +165,6 @@
   colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
-  triangle: 'top-left'
+  triangle: 'top-left',
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Github);

lib/components/github/spec.js

@@ -70,2 +70,7 @@ 'use strict';
 
+test('Github renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Github2.default, _extends({}, _color.red, { styles: { default: { card: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
 test('GithubSwatch renders correctly', function () {
@@ -72,0 +77,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_GithubSwatch2.default, { color: '#333' })).toJSON();

lib/components/hue/Hue.js

@@ -14,2 +14,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -19,2 +23,6 @@
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _common = require('../common');
@@ -35,6 +43,8 @@
       pointer = _ref.pointer,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -50,3 +60,3 @@ picker: {
     }
-  });
+  }, passedStyles));
 
@@ -70,2 +80,5 @@ // Overwrite to provide pure hue color
 
+HuePicker.propTypes = {
+  styles: _propTypes2.default.object
+};
 HuePicker.defaultProps = {
@@ -75,5 +88,6 @@ width: '316px',
   direction: 'horizontal',
-  pointer: _HuePointer2.default
+  pointer: _HuePointer2.default,
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(HuePicker);

lib/components/hue/spec.js

@@ -35,2 +35,7 @@ 'use strict';
 
+test('Hue renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Hue2.default, _extends({}, _color.red, { styles: { default: { picker: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
 test('HuePointer renders correctly', function () {
@@ -37,0 +42,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_HuePointer2.default, null)).toJSON();

lib/components/material/Material.js

@@ -16,2 +16,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _color = require('../../helpers/color');
@@ -29,6 +33,8 @@
       rgb = _ref.rgb,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -98,3 +104,3 @@ material: {
     }
-  });
+  }, passedStyles));
 
@@ -119,3 +125,3 @@ var handleChange = function handleChange(data, e) {
     _common.Raised,
-    null,
+    { styles: passedStyles },
     _react2.default.createElement(
@@ -122,0 +128,0 @@ 'div',

lib/components/material/spec.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* global test, test, expect */
+
 var _react = require('react');
@@ -19,7 +21,10 @@
 
-/* global test, test, expect */
-
 test('Material renders correctly', function () {
   var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Material2.default, _color.red)).toJSON();
   expect(tree).toMatchSnapshot();
+});
+
+test('Material renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Material2.default, _extends({}, _color.red, { styles: { default: { wrap: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
 });

lib/components/photoshop/Photoshop.js

@@ -22,2 +22,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _common = require('../common');
@@ -70,6 +74,9 @@
     value: function render() {
-      var _props$className = this.props.className,
+      var _props = this.props,
+          _props$styles = _props.styles,
+          passedStyles = _props$styles === undefined ? {} : _props$styles,
+          _props$className = _props.className,
           className = _props$className === undefined ? '' : _props$className;
 
-      var styles = (0, _reactcss2.default)({
+      var styles = (0, _reactcss2.default)((0, _merge2.default)({
         'default': {
@@ -129,3 +136,3 @@ picker: {
         }
-      });
+      }, passedStyles));
 
@@ -200,9 +207,11 @@ return _react2.default.createElement(
 Photoshop.propTypes = {
-  header: _propTypes2.default.string
+  header: _propTypes2.default.string,
+  styles: _propTypes2.default.object
 };
 
 Photoshop.defaultProps = {
-  header: 'Color Picker'
+  header: 'Color Picker',
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Photoshop);

lib/components/photoshop/spec.js

@@ -46,2 +46,7 @@ 'use strict';
 
+test('Photoshop renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Photoshop2.default, _extends({}, _color.red, { styles: { default: { picker: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
 test('PhotoshopButton renders correctly', function () {
@@ -48,0 +53,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_PhotoshopButton2.default, { label: 'accept', onClick: function onClick() {} })).toJSON();

lib/components/sketch/Sketch.js

@@ -8,2 +8,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -21,2 +23,6 @@
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _common = require('../common');
@@ -45,7 +51,9 @@
       renderers = _ref.renderers,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
-    'default': {
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
+    'default': _extends({
       picker: {
@@ -110,3 +118,3 @@ width: width,
       }
-    },
+    }, passedStyles),
     'disableAlpha': {
@@ -123,3 +131,3 @@ color: {
     }
-  }, { disableAlpha: disableAlpha });
+  }, passedStyles), { disableAlpha: disableAlpha });
 
@@ -190,3 +198,4 @@ return _react2.default.createElement(
   disableAlpha: _propTypes2.default.bool,
-  width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number])
+  width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  styles: _propTypes2.default.object
 };
@@ -197,2 +206,3 @@
   width: 200,
+  styles: {},
   presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
@@ -199,0 +209,0 @@ };

lib/components/sketch/spec.js

@@ -73,2 +73,7 @@ 'use strict';
 
+test('Sketch renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Sketch2.default, { styles: { default: { picker: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});
+
 test('SketchFields renders correctly', function () {
@@ -75,0 +80,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_SketchFields2.default, _color.red)).toJSON();

lib/components/sketch/story.js

@@ -29,2 +29,18 @@ 'use strict';
   );
+}).add('SketchPicker Custom Styles', function () {
+  return _react2.default.createElement(
+    _SyncColorField2.default,
+    { component: _Sketch2.default },
+    (0, _report.renderWithKnobs)(_Sketch2.default, {
+      styles: {
+        default: {
+          picker: {
+            boxShadow: 'none'
+          }
+        }
+      }
+    }, null, {
+      width: { range: true, min: 140, max: 500, step: 1 }
+    })
+  );
 });

lib/components/slider/Slider.js

@@ -12,2 +12,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactcss = require('reactcss');
@@ -17,2 +21,6 @@
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _common = require('../common');
@@ -34,6 +42,8 @@
       pointer = _ref.pointer,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -48,7 +58,7 @@ hue: {
     }
-  });
+  }, passedStyles));
 
   return _react2.default.createElement(
     'div',
-    { className: 'slider-picker ' + className },
+    { style: styles.wrap || '', className: 'slider-picker ' + className },
     _react2.default.createElement(
@@ -72,6 +82,10 @@ 'div',
 
+Slider.propTypes = {
+  styles: _propTypes2.default.object
+};
 Slider.defaultProps = {
-  pointer: _SliderPointer2.default
+  pointer: _SliderPointer2.default,
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Slider);

lib/components/slider/spec.js

@@ -36,2 +36,7 @@ 'use strict';
 
+test('Slider renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Slider2.default, { styles: { default: { wrap: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});
+
 test('SliderPointer renders correctly', function () {
@@ -38,0 +43,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_SliderPointer2.default, null)).toJSON();

lib/components/swatches/spec.js

@@ -40,2 +40,7 @@ 'use strict';
 
+test('Swatches renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Swatches2.default, { hex: _color.red.hex, colors: [['#fff'], ['#333']], styles: { default: { picker: { boxShadow: '0 0 10px red' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
 test('Swatches onChange events correctly', function () {
@@ -42,0 +47,0 @@ var changeSpy = jest.fn(function (data) {

lib/components/swatches/Swatches.js

@@ -24,2 +24,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _color = require('../../helpers/color');
@@ -50,6 +54,8 @@
       hex = _ref.hex,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -71,3 +77,3 @@ picker: {
     }
-  });
+  }, passedStyles));
 
@@ -112,3 +118,4 @@ var handleChange = function handleChange(data, e) {
   height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
-  colors: _propTypes2.default.arrayOf(_propTypes2.default.arrayOf(_propTypes2.default.string))
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.arrayOf(_propTypes2.default.string)),
+  styles: _propTypes2.default.object
 
@@ -119,5 +126,6 @@ /* eslint-disable max-len */
   height: 240,
-  colors: [[material.red['900'], material.red['700'], material.red['500'], material.red['300'], material.red['100']], [material.pink['900'], material.pink['700'], material.pink['500'], material.pink['300'], material.pink['100']], [material.purple['900'], material.purple['700'], material.purple['500'], material.purple['300'], material.purple['100']], [material.deepPurple['900'], material.deepPurple['700'], material.deepPurple['500'], material.deepPurple['300'], material.deepPurple['100']], [material.indigo['900'], material.indigo['700'], material.indigo['500'], material.indigo['300'], material.indigo['100']], [material.blue['900'], material.blue['700'], material.blue['500'], material.blue['300'], material.blue['100']], [material.lightBlue['900'], material.lightBlue['700'], material.lightBlue['500'], material.lightBlue['300'], material.lightBlue['100']], [material.cyan['900'], material.cyan['700'], material.cyan['500'], material.cyan['300'], material.cyan['100']], [material.teal['900'], material.teal['700'], material.teal['500'], material.teal['300'], material.teal['100']], ['#194D33', material.green['700'], material.green['500'], material.green['300'], material.green['100']], [material.lightGreen['900'], material.lightGreen['700'], material.lightGreen['500'], material.lightGreen['300'], material.lightGreen['100']], [material.lime['900'], material.lime['700'], material.lime['500'], material.lime['300'], material.lime['100']], [material.yellow['900'], material.yellow['700'], material.yellow['500'], material.yellow['300'], material.yellow['100']], [material.amber['900'], material.amber['700'], material.amber['500'], material.amber['300'], material.amber['100']], [material.orange['900'], material.orange['700'], material.orange['500'], material.orange['300'], material.orange['100']], [material.deepOrange['900'], material.deepOrange['700'], material.deepOrange['500'], material.deepOrange['300'], material.deepOrange['100']], [material.brown['900'], material.brown['700'], material.brown['500'], material.brown['300'], material.brown['100']], [material.blueGrey['900'], material.blueGrey['700'], material.blueGrey['500'], material.blueGrey['300'], material.blueGrey['100']], ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF']]
+  colors: [[material.red['900'], material.red['700'], material.red['500'], material.red['300'], material.red['100']], [material.pink['900'], material.pink['700'], material.pink['500'], material.pink['300'], material.pink['100']], [material.purple['900'], material.purple['700'], material.purple['500'], material.purple['300'], material.purple['100']], [material.deepPurple['900'], material.deepPurple['700'], material.deepPurple['500'], material.deepPurple['300'], material.deepPurple['100']], [material.indigo['900'], material.indigo['700'], material.indigo['500'], material.indigo['300'], material.indigo['100']], [material.blue['900'], material.blue['700'], material.blue['500'], material.blue['300'], material.blue['100']], [material.lightBlue['900'], material.lightBlue['700'], material.lightBlue['500'], material.lightBlue['300'], material.lightBlue['100']], [material.cyan['900'], material.cyan['700'], material.cyan['500'], material.cyan['300'], material.cyan['100']], [material.teal['900'], material.teal['700'], material.teal['500'], material.teal['300'], material.teal['100']], ['#194D33', material.green['700'], material.green['500'], material.green['300'], material.green['100']], [material.lightGreen['900'], material.lightGreen['700'], material.lightGreen['500'], material.lightGreen['300'], material.lightGreen['100']], [material.lime['900'], material.lime['700'], material.lime['500'], material.lime['300'], material.lime['100']], [material.yellow['900'], material.yellow['700'], material.yellow['500'], material.yellow['300'], material.yellow['100']], [material.amber['900'], material.amber['700'], material.amber['500'], material.amber['300'], material.amber['100']], [material.orange['900'], material.orange['700'], material.orange['500'], material.orange['300'], material.orange['100']], [material.deepOrange['900'], material.deepOrange['700'], material.deepOrange['500'], material.deepOrange['300'], material.deepOrange['100']], [material.brown['900'], material.brown['700'], material.brown['500'], material.brown['300'], material.brown['100']], [material.blueGrey['900'], material.blueGrey['700'], material.blueGrey['500'], material.blueGrey['300'], material.blueGrey['100']], ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF']],
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Swatches);

lib/components/swatches/SwatchesColor.js

@@ -22,2 +22,6 @@ 'use strict';
 
+var _CheckIcon = require('@icons/material/CheckIcon');
+
+var _CheckIcon2 = _interopRequireDefault(_CheckIcon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,3 +48,3 @@
       check: {
-        fill: _color2.default.getContrastingColor(color),
+        color: _color2.default.getContrastingColor(color),
         marginLeft: '8px',
@@ -72,3 +76,3 @@ display: 'none'
       check: {
-        fill: '#333'
+        color: '#333'
       }
@@ -78,3 +82,3 @@ },
       check: {
-        fill: '#333'
+        color: '#333'
       }
@@ -102,7 +106,3 @@ }
       { style: styles.check },
-      _react2.default.createElement(
-        'svg',
-        { style: { width: '24px', height: '24px' }, viewBox: '0 0 24 24' },
-        _react2.default.createElement('path', { d: 'M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z' })
-      )
+      _react2.default.createElement(_CheckIcon2.default, null)
     )
@@ -109,0 +109,0 @@ );

lib/components/twitter/spec.js

@@ -32,2 +32,7 @@ 'use strict';
 
+test('Material renders custom styles correctly', function () {
+  var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Twitter2.default, _extends({}, _color.red, { styles: { default: { card: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
 test('Twitter `triangle="hide"`', function () {
@@ -34,0 +39,0 @@ var tree = _reactTestRenderer2.default.create(_react2.default.createElement(_Twitter2.default, _extends({}, _color.red, { triangle: 'hide' }))).toJSON();

lib/components/twitter/Twitter.js

@@ -24,2 +24,6 @@ 'use strict';
 
+var _merge = require('lodash/merge');
+
+var _merge2 = _interopRequireDefault(_merge);
+
 var _color = require('../../helpers/color');
@@ -40,6 +44,8 @@
       triangle = _ref.triangle,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
       _ref$className = _ref.className,
       className = _ref$className === undefined ? '' : _ref$className;
 
-  var styles = (0, _reactcss2.default)({
+  var styles = (0, _reactcss2.default)((0, _merge2.default)({
     'default': {
@@ -140,3 +146,3 @@ card: {
     }
-  }, {
+  }, passedStyles), {
     'hide-triangle': triangle === 'hide',
@@ -193,3 +199,4 @@ 'top-left-triangle': triangle === 'top-left',
   triangle: _propTypes2.default.oneOf(['hide', 'top-left', 'top-right']),
-  colors: _propTypes2.default.arrayOf(_propTypes2.default.string)
+  colors: _propTypes2.default.arrayOf(_propTypes2.default.string),
+  styles: _propTypes2.default.object
 };
@@ -200,5 +207,6 @@
   colors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'],
-  triangle: 'top-left'
+  triangle: 'top-left',
+  styles: {}
 };
 
 exports.default = (0, _common.ColorWrap)(Twitter);

package.json

 {
   "name": "react-color",
-  "version": "2.14.1",
+  "version": "2.17.0",
   "description": "A Collection of Color Pickers from Sketch, Photoshop, Chrome & more",
@@ -41,3 +41,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "lodash": "^4.0.1",
+    "@icons/material": "^0.2.4",
+    "lodash": ">4.17.4",
     "material-colors": "^1.2.1",
@@ -70,2 +71,3 @@ "prop-types": "^15.5.10",
     "html-loader": "^0.3.0",
+    "html-webpack-plugin": "^3.2.0",
     "i": "^0.3.5",
@@ -72,0 +74,0 @@ "jest": "^16.0.2",

No alert changes

Improved metrics

Total package byte prevSize

228162

increased by3.87%

Lines of code

5725

increased by2.54%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

44

increased by2.33%

Dependency changes

• + Added@icons/material@^0.2.4

• + Added@icons/material@0.2.4(transitive)

• + Addedreact@19.0.0(transitive)

• Updatedlodash@>4.17.4