MAGETWO-89658: Add validation check and rule

 - added validation for color inputs

Author: Robert He

app/code/Magento/Ui/Component/Form/Element/ColorPicker.php

@@ -15,7 +15,6 @@
 
 /**
  * @api
- * @since 100.0.2
  */
 class ColorPicker extends AbstractElement
 {
@@ -46,7 +45,7 @@ public function __construct(
      *
      * @return string
      */
-    public function getComponentName()
+    public function getComponentName(): string
     {
         return static::NAME;
     }

app/code/Magento/Ui/Model/ColorPicker/FullMode.php

@@ -22,10 +22,10 @@ public function getConfig()
     {
         return [
             'showInput' => true,
-            'allowEmpty' => false,
+            'allowEmpty' => true,
             'showInitial' => false,
             'showPalette' => true,
-            'showAlpha' => false,
+            'showAlpha' => true,
             'showSelectionPalette' => true
         ];
     }

app/code/Magento/Ui/view/base/requirejs-config.js

@@ -12,7 +12,8 @@ var config = {
     paths: {
         'ui/template': 'Magento_Ui/templates',
         'tinymce4': 'tiny_mce_4/tinymce.min',
-        'spectrum': 'jquery/spectrum',
+        'spectrum': 'jquery/spectrum/spectrum',
+        'tinycolor': 'jquery/spectrum/tinycolor',
         'wysiwygAdapter': 'mage/adminhtml/wysiwyg/tiny_mce/tinymce4Adapter'
     },
     map: {

app/code/Magento/Ui/view/base/ui_component/etc/definition.map.xml

@@ -107,7 +107,6 @@
         <schema name="current">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
-                    <item name="initialColor" type="string" xsi:type="xpath">settings/initialColor</item>
                     <item name="colorPickerMode" type="string" xsi:type="xpath">settings/colorPickerMode</item>
                     <item name="colorFormat" type="string" xsi:type="xpath">settings/colorFormat</item>
                 </item>

app/code/Magento/Ui/view/base/ui_component/etc/definition.xml

@@ -151,7 +151,6 @@
     </imageUploader>
     <colorPicker class="Magento\Ui\Component\Form\Element\ColorPicker" component="Magento_Ui/js/form/element/colorPicker" template="ui/form/element/colorPicker">
         <settings>
-            <initialColor>rgb(0,0,0)</initialColor>
             <colorFormat>rgb</colorFormat>
             <colorPickerMode>full</colorPickerMode>
         </settings>

app/code/Magento/Ui/view/base/ui_component/etc/definition/colorPicker.xsd

@@ -25,18 +25,11 @@
     <xs:group name="componentColorPickerSettings">
         <xs:choice>
             <xs:group ref="abstractSettings"/>
-            <xs:element name="initialColor" type="xs:string">
-                <xs:annotation>
-                    <xs:documentation>
-                        Defines the initial color that appears in the color selection dropdown and input field.
-                    </xs:documentation>
-                </xs:annotation>
-            </xs:element>
             <xs:element name="colorFormat" type="xs:string">
                 <xs:annotation>
                     <xs:documentation>
                         Defines the color format that is displayed in selection tool as well as in input field.
-                        Valid formats: hex, rgb, hsl, hsv
+                        Valid formats: hex, rgb, hsl, name, none
                     </xs:documentation>
                 </xs:annotation>
             </xs:element>

app/code/Magento/Ui/view/base/web/js/form/element/colorPicker.js

@@ -8,8 +8,9 @@ define([
     'uiLayout',
     'mage/translate',
     'Magento_Ui/js/form/element/abstract',
-    'spectrum'
-], function ($, _, layout, $t, Abstract, spectrum) {
+    'spectrum',
+    'tinycolor'
+], function ($, _, layout, $t, Abstract, spectrum, tinycolor) {
     'use strict';
 
     var defaultColorPalette = [
@@ -27,10 +28,12 @@ define([
 
         defaults: {
             colorPickerConfig: {
-                chooseText: "Apply",
-                cancelText: "Cancel",
+                chooseText: $t('Apply'),
+                cancelText: $t('Cancel'),
                 maxSelectionSize: 8,
                 clickoutFiresChange: true,
+                allowEmpty: true,
+                localStorageKey: "magento.spectrum",
                 palette: defaultColorPalette
             }
         },
@@ -61,6 +64,19 @@ define([
             this._super();
 
             return this;
+        },
+
+        showColorPicker: function () {
+            jQuery('#colorPicker-spectrum').spectrum("show");
+        },
+
+        setInputValue: function() {
+            var inputValue = jQuery('#colorPicker-input').val(),
+                inputColor = tinycolor(inputValue);
+
+            if (inputColor.isValid()) {
+                jQuery('#colorPicker-spectrum').spectrum("set", inputValue);
+            }
         }
 
     });

app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js

@@ -11,10 +11,11 @@ define([
     'underscore',
     './utils',
     'moment',
+    'tinycolor',
     'jquery/validate',
     'jquery/ui',
     'mage/translate'
-], function ($, _, utils, moment) {
+], function ($, _, utils, moment, tinycolor) {
     'use strict';
 
     /**
@@ -963,6 +964,13 @@ define([
                 return moment.utc(value, params.dateFormat).unix() <= maxValue;
             },
             $.mage.__('The date is not within the specified range.')
+        ],
+        'validate-color': [
+            function (value) {
+                if (value === 'No Color')
+                return tinycolor(value).isValid();
+            },
+            $.mage.__('Wrong color format.')
         ]
     }, function (data) {
         return {

app/code/Magento/Ui/view/base/web/templates/form/element/colorPicker.html

@@ -13,7 +13,9 @@
     <div class="admin__field-control"
          css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">
 
-        <input type="hidden" colorPicker="colorPickerConfig" ko-value="value" style="display: none"/>
-        <input type="text" ko-value="value"/>
+        <input type="hidden" id="colorPicker-spectrum" colorPicker="colorPickerConfig" ko-value="value" style="display: none"/>
+        <input type="text" id="colorPicker-input" ko-value="value" data-bind="event: { focus: showColorPicker, mouseout: setInputValue }"/>
+
+        <label class="admin__field-error" if="error" attr="for: uid" text="error"/>
     </div>
 </div>

app/design/adminhtml/Magento/backend/Magento_Ui/web/css/source/module/spectrum.less

@@ -371,13 +371,13 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
   display:inline-block;
   *zoom: 1;
   *display: inline;
-  border: solid 1px #91765d;
+  border: solid 1px #1979c3;
   background: #eee;
   color: #333;
   vertical-align: middle;
 }
 .sp-replacer:hover, .sp-replacer.sp-active {
-  border-color: #F0C49B;
+  border-color: #1979c3;
   color: #111;
 }
 .sp-replacer.sp-disabled {
@@ -395,9 +395,8 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 .sp-preview {
   position:relative;
   width:25px;
-  height: 20px;
-  border: solid 1px #222;
-  margin-right: 5px;
+  height: 24px;
+  border: solid 1px #1979c3;
   float:left;
   z-index: 0;
 }
@@ -415,6 +414,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
 
 .sp-container {
   padding-bottom:0;
+  box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
 }