@instructure/ui-color-picker 8.26.1 → 8.26.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.26.2](https://github.com/instructure/instructure-ui/compare/v8.26.1...v8.26.2) (2022-07-11)
+
+### Bug Fixes
+
+- **ui-color-picker:** fix required props for `ColorPicker` and sub-components ([4d38fb6](https://github.com/instructure/instructure-ui/commit/4d38fb61caaf5ca9140403db75d2ae56fe5be46b))
+
+  **WARNING!** Since this commit fixes props that should be required props, some code changes might be needed.
+
 ## [8.26.1](https://github.com/instructure/instructure-ui/compare/v8.26.0...v8.26.1) (2022-07-06)
 
 **Note:** Version bump only for package @instructure/ui-color-picker

package/es/ColorContrast/index.js

@@ -1,6 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["styles", "elementRef", "failureLabel", "successLabel", "withoutColorPreview", "firstColor", "secondColor", "label", "firstColorLabel", "secondColorLabel", "normalTextLabel", "largeTextLabel", "graphicsTextLabel"];
-
 var _dec, _dec2, _class, _class2;
 
 /*
@@ -31,23 +28,24 @@ var _dec, _dec2, _class, _class2;
 
 /** @jsxFrag React.Fragment */
 import React, { Component } from 'react';
-import { passthroughProps } from '@instructure/ui-react-utils';
+import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
+import { error } from '@instructure/console';
+import { contrast as getContrast, colorToRGB, colorToHex8 } from '@instructure/ui-color-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
+import { Pill } from '@instructure/ui-pill';
 import ColorIndicator from '../ColorIndicator';
 import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { contrast as getContrast, colorToRGB, colorToHex8 } from '@instructure/ui-color-utils';
-import { Pill } from '@instructure/ui-pill';
-
 /**
 ---
 category: components
 ---
 @tsProps
 **/
+
 let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class ColorContrast extends Component {
   constructor(props) {
     super(props);
@@ -115,6 +113,32 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
+  renderPreview() {
+    const _this$props4 = this.props,
+          styles = _this$props4.styles,
+          withoutColorPreview = _this$props4.withoutColorPreview,
+          firstColor = _this$props4.firstColor,
+          secondColor = _this$props4.secondColor,
+          firstColorLabel = _this$props4.firstColorLabel,
+          secondColorLabel = _this$props4.secondColorLabel;
+
+    if (withoutColorPreview) {
+      return null;
+    }
+
+    if (!firstColorLabel || !secondColorLabel) {
+      error(false, 'When `withoutColorPreview` is not set to true, the properties `firstColorLabel` and `secondColorLabel` are required!');
+    }
+
+    return !withoutColorPreview && jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.colorPreview
+    }, jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.firstColorPreview
+    }, this.renderColorIndicator(firstColor, firstColorLabel || '')), jsx("div", {
+      css: styles === null || styles === void 0 ? void 0 : styles.secondColorPreview
+    }, this.renderColorIndicator(secondColor, secondColorLabel || '')));
+  }
+
   //We project the firstColor onto an opaque white background, then we project the secondColor onto
   //the projected first color. We calculate the contrast of these two, projected colors.
   get calcContrast() {
@@ -131,44 +155,28 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   }
 
   render() {
-    var _this$props$styles4, _this$props$styles5, _this$props$styles6, _this$props$styles7;
-
-    const _this$props4 = this.props,
-          styles = _this$props4.styles,
-          elementRef = _this$props4.elementRef,
-          failureLabel = _this$props4.failureLabel,
-          successLabel = _this$props4.successLabel,
-          withoutColorPreview = _this$props4.withoutColorPreview,
-          firstColor = _this$props4.firstColor,
-          secondColor = _this$props4.secondColor,
-          label = _this$props4.label,
-          firstColorLabel = _this$props4.firstColorLabel,
-          secondColorLabel = _this$props4.secondColorLabel,
-          normalTextLabel = _this$props4.normalTextLabel,
-          largeTextLabel = _this$props4.largeTextLabel,
-          graphicsTextLabel = _this$props4.graphicsTextLabel,
-          props = _objectWithoutProperties(_this$props4, _excluded);
-
+    const _this$props5 = this.props,
+          styles = _this$props5.styles,
+          label = _this$props5.label,
+          normalTextLabel = _this$props5.normalTextLabel,
+          largeTextLabel = _this$props5.largeTextLabel,
+          graphicsTextLabel = _this$props5.graphicsTextLabel;
     const contrast = this.calcContrast;
-    return jsx("div", Object.assign({}, passthroughProps(props), {
+    return jsx("div", Object.assign({}, omitProps(this.props, ColorContrast.allowedProps), {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorContrast
     }), jsx("div", {
-      css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.label
+      css: styles === null || styles === void 0 ? void 0 : styles.label
     }, jsx(Text, {
       weight: "bold",
       as: "div"
     }, label)), jsx(Text, {
       size: "x-large"
-    }, contrast, ":1"), !withoutColorPreview && jsx("div", {
-      css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.colorPreview
-    }, jsx("div", {
-      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.firstColorPreview
-    }, this.renderColorIndicator(firstColor, firstColorLabel || '')), jsx("div", {
-      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.secondColorPreview
-    }, this.renderColorIndicator(secondColor, secondColorLabel || ''))), this.renderStatus(contrast >= 4.5, normalTextLabel), this.renderStatus(contrast >= 3, largeTextLabel), this.renderStatus(contrast >= 3, graphicsTextLabel));
+    }, contrast, ":1"), this.renderPreview(), this.renderStatus(contrast >= 4.5, normalTextLabel), this.renderStatus(contrast >= 3, largeTextLabel), this.renderStatus(contrast >= 3, graphicsTextLabel));
   }
 
-}, _class2.displayName = "ColorContrast", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorContrast', _class2)) || _class) || _class);
+}, _class2.displayName = "ColorContrast", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorContrast', _class2.defaultProps = {
+  withoutColorPreview: false
+}, _class2)) || _class) || _class);
 export { ColorContrast };
 export default ColorContrast;

package/es/ColorIndicator/index.js

@@ -1,6 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["color", "elementRef"];
-
 var _dec, _dec2, _class, _class2;
 
 /*
@@ -30,7 +27,7 @@ var _dec, _dec2, _class, _class2;
 /** @jsx jsx */
 import { Component } from 'react';
 import { testable } from '@instructure/ui-testable';
-import { passthroughProps } from '@instructure/ui-react-utils';
+import { omitProps } from '@instructure/ui-react-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
@@ -70,21 +67,14 @@ let ColorIndicator = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }
 
   render() {
-    var _this$props$styles;
-
-    const _this$props3 = this.props,
-          color = _this$props3.color,
-          elementRef = _this$props3.elementRef,
-          props = _objectWithoutProperties(_this$props3, _excluded);
-
-    return jsx("div", Object.assign({}, passthroughProps(props), {
+    const styles = this.props.styles;
+    return jsx("div", Object.assign({}, omitProps(this.props, ColorIndicator.allowedProps), {
       ref: this.handleRef,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.colorIndicator
+      css: styles === null || styles === void 0 ? void 0 : styles.colorIndicator
     }));
   }
 
 }, _class2.displayName = "ColorIndicator", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorIndicator', _class2.defaultProps = {
-  color: '',
   shape: 'circle'
 }, _class2)) || _class) || _class);
 export default ColorIndicator;

package/es/ColorMixer/ColorPalette/index.js

@@ -28,17 +28,17 @@ var _dec, _class, _class2;
 import React, { Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
 import { addEventListener } from '@instructure/ui-dom-utils';
-import shallowCompare from '../utils/shallowCompare';
 import { View } from '@instructure/ui-view';
+import shallowCompare from '../utils/shallowCompare';
 import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 /**
- * ---
- * private: true
- * ---
- * @tsProps
- **/
+---
+private: true
+---
+@tsProps
+**/
 
 let ColorPalette = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class ColorPalette extends Component {
   constructor(props) {

package/es/ColorMixer/RGBAInput/index.js

@@ -34,11 +34,11 @@ import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 /**
- * ---
- * private: true
- * ---
- * @tsProps
- **/
+---
+private: true
+---
+@tsProps
+**/
 
 let RGBAInput = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class RGBAInput extends Component {
   constructor(props) {

package/es/ColorMixer/Slider/index.js

@@ -33,11 +33,11 @@ import { propTypes, allowedProps } from './props';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 /**
- * ---
- * private: true
- * ---
- * @tsProps
- **/
+---
+private: true
+---
+@tsProps
+**/
 
 let Slider = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class Slider extends Component {
   constructor() {

package/es/ColorMixer/index.js

@@ -1,6 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["disabled", "onChange", "value", "elementRef", "styles", "withAlpha", "rgbRedInputScreenReaderLabel", "rgbGreenInputScreenReaderLabel", "rgbBlueInputScreenReaderLabel", "rgbAlphaInputScreenReaderLabel", "colorSliderNavigationExplanationScreenReaderLabel", "alphaSliderNavigationExplanationScreenReaderLabel", "colorPaletteNavigationExplanationScreenReaderLabel"];
-
 var _dec, _dec2, _class, _class2;
 
 /*
@@ -30,7 +27,7 @@ var _dec, _dec2, _class, _class2;
 /** @jsx jsx */
 import { Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
-import { passthroughProps } from '@instructure/ui-react-utils';
+import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { colorToHex8, colorToHsva, colorToRGB } from '@instructure/ui-color-utils';
 import ColorPalette from './ColorPalette';
@@ -76,11 +73,8 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
     var _this$props$makeStyle, _this$props;
 
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
-
-    if (this.props.value) {
-      this.setState({ ...colorToHsva(this.props.value)
-      });
-    }
+    this.setState({ ...colorToHsva(this.props.value)
+    });
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -116,9 +110,6 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
   render() {
     const _this$props3 = this.props,
           disabled = _this$props3.disabled,
-          onChange = _this$props3.onChange,
-          value = _this$props3.value,
-          elementRef = _this$props3.elementRef,
           styles = _this$props3.styles,
           withAlpha = _this$props3.withAlpha,
           rgbRedInputScreenReaderLabel = _this$props3.rgbRedInputScreenReaderLabel,
@@ -127,15 +118,13 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
           rgbAlphaInputScreenReaderLabel = _this$props3.rgbAlphaInputScreenReaderLabel,
           colorSliderNavigationExplanationScreenReaderLabel = _this$props3.colorSliderNavigationExplanationScreenReaderLabel,
           alphaSliderNavigationExplanationScreenReaderLabel = _this$props3.alphaSliderNavigationExplanationScreenReaderLabel,
-          colorPaletteNavigationExplanationScreenReaderLabel = _this$props3.colorPaletteNavigationExplanationScreenReaderLabel,
-          props = _objectWithoutProperties(_this$props3, _excluded);
-
+          colorPaletteNavigationExplanationScreenReaderLabel = _this$props3.colorPaletteNavigationExplanationScreenReaderLabel;
     const _this$state2 = this.state,
           h = _this$state2.h,
           s = _this$state2.s,
           v = _this$state2.v,
           a = _this$state2.a;
-    return jsx("div", Object.assign({}, passthroughProps(props), {
+    return jsx("div", Object.assign({}, omitProps(this.props, ColorMixer.allowedProps), {
       "aria-disabled": disabled,
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorMixer
@@ -225,6 +214,7 @@ let ColorMixer = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
   }
 
 }, _class2.displayName = "ColorMixer", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorMixer', _class2.defaultProps = {
+  value: '#000',
   withAlpha: false,
   disabled: false
 }, _class2)) || _class) || _class);

package/es/ColorMixer/props.js

@@ -25,9 +25,9 @@ import PropTypes from 'prop-types';
 const propTypes = {
   disabled: PropTypes.bool,
   elementRef: PropTypes.func,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
   withAlpha: PropTypes.bool,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
   rgbRedInputScreenReaderLabel: PropTypes.string.isRequired,
   rgbGreenInputScreenReaderLabel: PropTypes.string.isRequired,
   rgbBlueInputScreenReaderLabel: PropTypes.string.isRequired,

package/es/ColorPicker/index.js

@@ -1,6 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["checkContrast", "colorMixerSettings", "disabled", "elementRef", "isRequired", "label", "onChange", "placeholderText", "popoverButtonScreenReaderLabel", "renderInvalidColorMessage", "renderIsRequiredMessage", "renderMessages", "tooltip", "value", "width", "withAlpha"];
-
 var _dec, _dec2, _class, _class2, _IconTroubleLine, _IconWarningLine, _IconCheckDarkLine, _IconInfoLine;
 
 /*
@@ -32,8 +29,8 @@ var _dec, _dec2, _class, _class2, _IconTroubleLine, _IconWarningLine, _IconCheck
 /** @jsxFrag React.Fragment */
 import React, { Component } from 'react';
 import { withStyle, jsx } from '@instructure/emotion';
-import { warn } from '@instructure/console';
-import { passthroughProps } from '@instructure/ui-react-utils';
+import { warn, error } from '@instructure/console';
+import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { colorToHex8, isValid, contrast as getContrast } from '@instructure/ui-color-utils';
 import { TextInput } from '@instructure/ui-text-input';
@@ -72,11 +69,13 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
 
     this.checkSettings = () => {
       if (this.props.children && this.props.colorMixerSettings) {
-        warn(false, 'You should either use children, colorMixerSettings or neither, not both. In this case, the colorMixerSettings will be ignored', '');
+        warn(false, 'You should either use children, colorMixerSettings or neither, not both. In this case, the colorMixerSettings will be ignored.', '');
       }
-    };
 
-    this.stripAlphaIfNeeded = hex => hex.length === 8 && hex.slice(-2) === 'FF' ? hex.slice(0, -2) : hex;
+      if (this.props.value && typeof this.props.onChange !== 'function') {
+        error(false, 'You provided a `value` prop on ColorPicker, which will render a controlled component. Please provide an `onChange` handler.');
+      }
+    };
 
     this.renderPopover = () => {
       var _this$props$styles;
@@ -101,7 +100,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           });
         },
         on: "click",
-        screenReaderLabel: this.props.popoverScreenReaderLabel || '',
+        screenReaderLabel: this.props.popoverScreenReaderLabel,
         shouldContainFocus: true,
         shouldReturnFocus: true,
         shouldCloseOnDocumentClick: true,
@@ -112,34 +111,34 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     };
 
     this.renderCustomPopoverContent = () => {
-      var _this$props$styles2, _this$props, _this$props2;
-
+      const _this$props = this.props,
+            styles = _this$props.styles,
+            children = _this$props.children,
+            onChange = _this$props.onChange;
       return jsx("div", {
-        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.popoverContent
-      }, typeof ((_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.children) === 'function' && ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.children(this.stripAlphaIfNeeded(this.state.mixedColor), color => {
+        css: styles === null || styles === void 0 ? void 0 : styles.popoverContent
+      }, typeof children === 'function' && children(`#${this.mixedColorWithStrippedAlpha}`, newColor => {
         this.setState({
-          mixedColor: color
+          mixedColor: colorToHex8(newColor).slice(1)
         });
       }, () => {
-        var _this$props3, _this$props3$onChange;
-
         this.setState({
           openColorPicker: false,
-          hexCode: `${this.stripAlphaIfNeeded(this.state.mixedColor)}`
+          hexCode: this.mixedColorWithStrippedAlpha
         });
-        (_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$onChange = _this$props3.onChange) === null || _this$props3$onChange === void 0 ? void 0 : _this$props3$onChange.call(_this$props3, `#${this.stripAlphaIfNeeded(this.state.mixedColor.slice(1))}`);
+        onChange === null || onChange === void 0 ? void 0 : onChange(`#${this.mixedColorWithStrippedAlpha}`);
       }, () => this.setState({
         openColorPicker: false,
         mixedColor: this.state.hexCode
-      }))));
+      })));
     };
 
     this.renderDefaultPopoverContent = () => {
-      var _this$props$styles3, _this$props4, _this$props4$colorMix, _this$props5, _this$props5$colorMix, _this$props$styles4, _this$props6, _this$props6$colorMix, _this$props$styles5, _this$props$styles6, _this$props$colorMixe, _this$props$colorMixe2;
+      var _this$props$styles2, _this$props2, _this$props2$colorMix, _this$props3, _this$props3$colorMix, _this$props$styles3, _this$props4, _this$props4$colorMix, _this$props$styles4, _this$props$styles5, _this$props$colorMixe, _this$props$colorMixe2;
 
       return jsx(React.Fragment, null, jsx("div", {
-        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.popoverContent
-      }, ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$colorMix = _this$props4.colorMixerSettings) === null || _this$props4$colorMix === void 0 ? void 0 : _this$props4$colorMix.colorMixer) && jsx(ColorMixer, {
+        css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.popoverContent
+      }, ((_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : (_this$props2$colorMix = _this$props2.colorMixerSettings) === null || _this$props2$colorMix === void 0 ? void 0 : _this$props2$colorMix.colorMixer) && jsx(ColorMixer, {
         value: `#${this.state.mixedColor}`,
         onChange: newColor => this.setState({
           mixedColor: colorToHex8(newColor).slice(1)
@@ -152,20 +151,20 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         colorSliderNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.colorSliderNavigationExplanationScreenReaderLabel,
         alphaSliderNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.alphaSliderNavigationExplanationScreenReaderLabel,
         colorPaletteNavigationExplanationScreenReaderLabel: this.props.colorMixerSettings.colorMixer.colorPaletteNavigationExplanationScreenReaderLabel
-      }), ((_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : (_this$props5$colorMix = _this$props5.colorMixerSettings) === null || _this$props5$colorMix === void 0 ? void 0 : _this$props5$colorMix.colorPreset) && jsx("div", {
-        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.popoverContentBlock
+      }), ((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : (_this$props3$colorMix = _this$props3.colorMixerSettings) === null || _this$props3$colorMix === void 0 ? void 0 : _this$props3$colorMix.colorPreset) && jsx("div", {
+        css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.popoverContentBlock
       }, jsx(ColorPreset, {
         label: this.props.colorMixerSettings.colorPreset.label,
         colors: this.props.colorMixerSettings.colorPreset.colors,
-        selected: this.state.mixedColor,
+        selected: this.mixedColorWithStrippedAlpha ? `#${this.mixedColorWithStrippedAlpha}` : void 0,
         onSelect: color => this.setState({
           mixedColor: color.slice(1)
         })
-      })), ((_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : (_this$props6$colorMix = _this$props6.colorMixerSettings) === null || _this$props6$colorMix === void 0 ? void 0 : _this$props6$colorMix.colorContrast) && jsx("div", {
-        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.popoverContentBlock
+      })), ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$colorMix = _this$props4.colorMixerSettings) === null || _this$props4$colorMix === void 0 ? void 0 : _this$props4$colorMix.colorContrast) && jsx("div", {
+        css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.popoverContentBlock
       }, jsx(ColorContrast, {
         firstColor: this.props.colorMixerSettings.colorContrast.firstColor,
-        secondColor: `#${this.stripAlphaIfNeeded(this.state.mixedColor)}`,
+        secondColor: `#${this.mixedColorWithStrippedAlpha}`,
         label: this.props.colorMixerSettings.colorContrast.label,
         successLabel: this.props.colorMixerSettings.colorContrast.successLabel,
         failureLabel: this.props.colorMixerSettings.colorContrast.failureLabel,
@@ -175,7 +174,7 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         firstColorLabel: this.props.colorMixerSettings.colorContrast.firstColorLabel,
         secondColorLabel: this.props.colorMixerSettings.colorContrast.secondColorLabel
       }))), jsx("div", {
-        css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.popoverFooter
+        css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.popoverFooter
       }, jsx(Button, {
         onClick: () => this.setState({
           openColorPicker: false,
@@ -186,14 +185,14 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       }, (_this$props$colorMixe = this.props.colorMixerSettings) === null || _this$props$colorMixe === void 0 ? void 0 : _this$props$colorMixe.popoverCloseButtonLabel), jsx(Button, {
         onClick: () => {
           if (typeof this.props.onChange === 'function') {
-            this.props.onChange(`#${this.stripAlphaIfNeeded(this.state.mixedColor)}`);
+            this.props.onChange(`#${this.mixedColorWithStrippedAlpha}`);
             this.setState({
               openColorPicker: false
             });
           } else {
             this.setState({
               openColorPicker: false,
-              hexCode: `${this.stripAlphaIfNeeded(this.state.mixedColor)}`
+              hexCode: `${this.mixedColorWithStrippedAlpha}`
             });
           }
         },
@@ -211,9 +210,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   componentDidMount() {
-    var _this$props$makeStyle, _this$props7, _this$props$value;
+    var _this$props$makeStyle, _this$props5, _this$props$value;
 
-    (_this$props$makeStyle = (_this$props7 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props7, { ...this.state,
+    (_this$props$makeStyle = (_this$props5 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props5, { ...this.state,
       isSimple: this.isSimple
     });
     this.checkSettings();
@@ -223,9 +222,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   componentDidUpdate(prevProps) {
-    var _this$props$makeStyle2, _this$props8;
+    var _this$props$makeStyle2, _this$props6;
 
-    (_this$props$makeStyle2 = (_this$props8 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props8, { ...this.state,
+    (_this$props$makeStyle2 = (_this$props6 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props6, { ...this.state,
       isSimple: this.isSimple
     });
 
@@ -265,6 +264,11 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
     return this.renderMode === 'customPopover';
   }
 
+  get mixedColorWithStrippedAlpha() {
+    const mixedColor = this.state.mixedColor;
+    return mixedColor.length === 8 && mixedColor.slice(-2) === 'FF' ? mixedColor.slice(0, -2) : mixedColor;
+  }
+
   getMinContrast(strength) {
     return {
       min: 3,
@@ -280,12 +284,12 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
           hexCode = _this$state.hexCode,
           showHelperErrorMessages = _this$state.showHelperErrorMessages;
     const isValidHex = isValid(hexCode);
-    const _this$props9 = this.props,
-          checkContrast = _this$props9.checkContrast,
-          renderMessages = _this$props9.renderMessages,
-          renderInvalidColorMessage = _this$props9.renderInvalidColorMessage,
-          renderIsRequiredMessage = _this$props9.renderIsRequiredMessage,
-          isRequired = _this$props9.isRequired;
+    const _this$props7 = this.props,
+          checkContrast = _this$props7.checkContrast,
+          renderMessages = _this$props7.renderMessages,
+          renderInvalidColorMessage = _this$props7.renderInvalidColorMessage,
+          renderIsRequiredMessage = _this$props7.renderIsRequiredMessage,
+          isRequired = _this$props7.isRequired;
     const contrast = isValidHex ? getContrast(((_this$props$checkCont = this.props.checkContrast) === null || _this$props$checkCont === void 0 ? void 0 : _this$props$checkCont.contrastAgainst) || '#fff', hexCode, 2) : void 0;
     const contrastStrength = checkContrast !== null && checkContrast !== void 0 && checkContrast.contrastStrength ? checkContrast.contrastStrength : 'mid';
     const minContrast = this.getMinContrast(contrastStrength);
@@ -338,9 +342,9 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   renderAfterInput() {
-    const _this$props10 = this.props,
-          checkContrast = _this$props10.checkContrast,
-          styles = _this$props10.styles;
+    const _this$props8 = this.props,
+          checkContrast = _this$props8.checkContrast,
+          styles = _this$props8.styles;
     const hexCode = this.state.hexCode;
 
     if (checkContrast && isValid(hexCode)) {
@@ -413,10 +417,10 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   renderLabel() {
-    const _this$props11 = this.props,
-          label = _this$props11.label,
-          tooltip = _this$props11.tooltip,
-          styles = _this$props11.styles;
+    const _this$props9 = this.props,
+          label = _this$props9.label,
+          tooltip = _this$props9.tooltip,
+          styles = _this$props9.styles;
     return tooltip ? jsx("div", null, jsx("span", {
       css: styles === null || styles === void 0 ? void 0 : styles.label
     }, label), jsx("span", null, jsx(Tooltip, {
@@ -427,29 +431,15 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   }
 
   render() {
-    var _this$props$styles7, _this$props$styles8, _this$props$styles9;
-
-    const _this$props12 = this.props,
-          checkContrast = _this$props12.checkContrast,
-          colorMixerSettings = _this$props12.colorMixerSettings,
-          disabled = _this$props12.disabled,
-          elementRef = _this$props12.elementRef,
-          isRequired = _this$props12.isRequired,
-          label = _this$props12.label,
-          onChange = _this$props12.onChange,
-          placeholderText = _this$props12.placeholderText,
-          popoverButtonScreenReaderLabel = _this$props12.popoverButtonScreenReaderLabel,
-          renderInvalidColorMessage = _this$props12.renderInvalidColorMessage,
-          renderIsRequiredMessage = _this$props12.renderIsRequiredMessage,
-          renderMessages = _this$props12.renderMessages,
-          tooltip = _this$props12.tooltip,
-          value = _this$props12.value,
-          width = _this$props12.width,
-          withAlpha = _this$props12.withAlpha,
-          props = _objectWithoutProperties(_this$props12, _excluded);
-
-    return jsx("div", Object.assign({}, passthroughProps(props), {
-      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorPicker,
+    var _this$props$styles6, _this$props$styles7, _this$props$styles8;
+
+    const _this$props10 = this.props,
+          disabled = _this$props10.disabled,
+          isRequired = _this$props10.isRequired,
+          placeholderText = _this$props10.placeholderText,
+          width = _this$props10.width;
+    return jsx("div", Object.assign({}, omitProps(this.props, ColorPicker.allowedProps), {
+      css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.colorPicker,
       ref: this.handleRef
     }), jsx(TextInput, {
       isRequired: isRequired,
@@ -469,19 +459,17 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
       onBlur: () => this.handleOnBlur(),
       messages: this.renderMessages()
     }), !this.isSimple && jsx("div", {
-      css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.colorMixerButtonContainer
+      css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.colorMixerButtonContainer
     }, jsx("div", {
-      css: (_this$props$styles9 = this.props.styles) === null || _this$props$styles9 === void 0 ? void 0 : _this$props$styles9.colorMixerButtonWrapper
+      css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.colorMixerButtonWrapper
     }, this.renderPopover())));
   }
 
 }, _class2.displayName = "ColorPicker", _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.componentId = 'ColorPicker', _class2.defaultProps = {
-  elementRef: () => null,
   disabled: false,
-  label: 'Color',
-  checkContrast: false,
+  withAlpha: false,
   width: '22.5rem',
-  withAlpha: false
+  popoverMaxHeight: '100vh'
 }, _class2)) || _class) || _class);
 export { ColorPicker };
 export default ColorPicker;