Moved the validation logic of the color picker out to a color util

This makes the color picker more inline with GitLab UI inputs whereby
we pass in the invalid feedback message and current state of the input

app/assets/javascripts/lib/utils/color_utils.js

@@ -23,3 +23,23 @@ export const textColorForBackground = (backgroundColor) => {
   }
   return '#FFFFFF';
 };
+
+/**
+ * Check whether a color matches the expected hex format
+ *
+ * This matches any hex (0-9 and A-F) value which is either 3 or 6 characters in length
+ *
+ * An empty string will return `null` which means that this is neither valid nor invalid.
+ * This is useful for forms resetting the validation state
+ *
+ * @param color string = ''
+ *
+ * @returns {null|boolean}
+ */
+export const validateHexColor = (color = '') => {
+  if (!color) {
+    return null;
+  }
+
+  return /^#([0-9A-F]{3}){1,2}$/i.test(color);
+};

app/assets/javascripts/vue_shared/components/color_picker/color_picker.vue

@@ -3,12 +3,16 @@
  * Renders a color picker input with preset colors to choose from
  *
  * @example
- * <color-picker :label="__('Background color')" set-color="#FF0000" />
+ * <color-picker
+     :invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')"
+     :label="__('Background color')"
+     set-color="#FF0000"
+     state="isValidColor"
+   />
  */
 import { GlFormGroup, GlFormInput, GlFormInputGroup, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 
-const VALID_RGB_HEX_COLOR = /^#([0-9A-F]{3}){1,2}$/i;
 const PREVIEW_COLOR_DEFAULT_CLASSES =
   'gl-relative gl-w-7 gl-bg-gray-10 gl-rounded-top-left-base gl-rounded-bottom-left-base';
 
@@ -24,6 +28,11 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   props: {
+    invalidFeedback: {
+      type: String,
+      required: false,
+      default: __('Please enter a valid hex (#RRGGBB or #RGB) color value'),
+    },
     label: {
       type: String,
       required: false,
@@ -34,6 +43,11 @@ export default {
       required: false,
       default: '',
     },
+    state: {
+      type: Boolean,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -50,46 +64,32 @@ export default {
       return gon.suggested_label_colors;
     },
     previewColor() {
-      if (this.isValidColor) {
+      if (this.state) {
         return { backgroundColor: this.selectedColor };
       }
 
       return {};
     },
     previewColorClasses() {
-      const borderStyle = this.isInvalidColor
-        ? 'gl-inset-border-1-red-500'
-        : 'gl-inset-border-1-gray-400';
+      const borderStyle =
+        this.state === false ? 'gl-inset-border-1-red-500' : 'gl-inset-border-1-gray-400';
 
       return `${PREVIEW_COLOR_DEFAULT_CLASSES} ${borderStyle}`;
     },
     hasSuggestedColors() {
       return Object.keys(this.suggestedColors).length;
     },
-    isInvalidColor() {
-      return this.isValidColor === false;
-    },
-    isValidColor() {
-      if (this.selectedColor === '') {
-        return null;
-      }
-
-      return VALID_RGB_HEX_COLOR.test(this.selectedColor);
-    },
   },
   methods: {
     handleColorChange(color) {
       this.selectedColor = color.trim();
 
-      if (this.isValidColor) {
       this.$emit('input', this.selectedColor);
-      }
     },
   },
   i18n: {
     fullDescription: __('Choose any color. Or you can choose one of the suggested colors below'),
     shortDescription: __('Choose any color'),
-    invalid: __('Please enter a valid hex (#RRGGBB or #RGB) color value'),
   },
 };
 </script>
@@ -100,17 +100,17 @@ export default {
       :label="label"
       label-for="color-picker"
       :description="description"
-      :invalid-feedback="this.$options.i18n.invalid"
-      :state="isValidColor"
+      :invalid-feedback="invalidFeedback"
+      :state="state"
       :class="{ 'gl-mb-3!': hasSuggestedColors }"
     >
       <gl-form-input-group
         id="color-picker"
-        :state="isValidColor"
         max-length="7"
         type="text"
         class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base"
         :value="selectedColor"
+        :state="state"
         @input="handleColorChange"
       >
         <template #prepend>

spec/frontend/lib/utils/color_utils_spec.js

-import { textColorForBackground, hexToRgb } from '~/lib/utils/color_utils';
+import { textColorForBackground, hexToRgb, validateHexColor } from '~/lib/utils/color_utils';
 
 describe('Color utils', () => {
   describe('Converting hex code to rgb', () => {
@@ -32,4 +32,19 @@ describe('Color utils', () => {
       expect(textColorForBackground('#000')).toEqual('#FFFFFF');
     });
   });
+
+  describe('Validate hex color', () => {
+    it.each`
+      color        | output
+      ${undefined} | ${null}
+      ${null}      | ${null}
+      ${''}        | ${null}
+      ${'ABC123'}  | ${false}
+      ${'#ZZZ'}    | ${false}
+      ${'#FF0'}    | ${true}
+      ${'#FF0000'} | ${true}
+    `('returns $output when $color is given', ({ color, output }) => {
+      expect(validateHexColor(color)).toEqual(output);
+    });
+  });
 });

spec/frontend/vue_shared/components/color_picker/color_picker_spec.js

@@ -13,6 +13,7 @@ describe('ColorPicker', () => {
   };
 
   const setColor = '#000000';
+  const invalidText = 'Please enter a valid hex (#RRGGBB or #RGB) color value';
   const label = () => wrapper.find(GlFormGroup).attributes('label');
   const colorPreview = () => wrapper.find('[data-testid="color-preview"]');
   const colorPicker = () => wrapper.find(GlFormInput);
@@ -55,6 +56,7 @@ describe('ColorPicker', () => {
       expect(colorPreview().attributes('style')).toBe(undefined);
       expect(colorPicker().attributes('value')).toBe(undefined);
       expect(colorInput().props('value')).toBe('');
+      expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-gray-400');
     });
 
     it('has a color set on initialization', () => {
@@ -67,7 +69,7 @@ describe('ColorPicker', () => {
       createComponent();
       await colorInput().setValue(setColor);
 
-      expect(wrapper.emitted().input[0]).toEqual([setColor]);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
 
     it('trims spaces from submitted colors', async () => {
@@ -75,23 +77,16 @@ describe('ColorPicker', () => {
       await colorInput().setValue(`    ${setColor}    `);
 
       expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-gray-400');
+      expect(colorInput().attributes('class')).not.toContain('is-invalid');
     });
 
-    it('shows invalid feedback when an invalid color is used', async () => {
-      createComponent();
-      await colorInput().setValue('abcd');
-
-      expect(invalidFeedback().text()).toBe(
-        'Please enter a valid hex (#RRGGBB or #RGB) color value',
-      );
-      expect(wrapper.emitted().input).toBe(undefined);
-    });
-
-    it('shows an invalid feedback border on the preview when an invalid color is used', async () => {
-      createComponent();
-      await colorInput().setValue('abcd');
+    it('shows invalid feedback when the state is marked as invalid', async () => {
+      createComponent(mount, { invalidFeedback: invalidText, state: false });
 
+      expect(invalidFeedback().text()).toBe(invalidText);
       expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-red-500');
+      expect(colorInput().attributes('class')).toContain('is-invalid');
     });
   });