Merge branch 'improve-color-picker-value-handling' into 'master'

Change color pickers set-color prop to value so it links better with Vue and input standards

See merge request gitlab-org/gitlab!53020

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

@@ -6,7 +6,7 @@
  * <color-picker
      :invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')"
      :label="__('Background color')"
-     set-color="#FF0000"
+     :value="#FF0000"
      state="isValidColor"
    />
  */
@@ -38,7 +38,7 @@ export default {
       required: false,
       default: '',
     },
-    setColor: {
+    value: {
       type: String,
       required: false,
       default: '',
@@ -49,11 +49,6 @@ export default {
       default: null,
     },
   },
-  data() {
-    return {
-      selectedColor: this.setColor.trim() || '',
-    };
-  },
   computed: {
     description() {
       return this.hasSuggestedColors
@@ -65,7 +60,7 @@ export default {
     },
     previewColor() {
       if (this.state) {
-        return { backgroundColor: this.selectedColor };
+        return { backgroundColor: this.value };
       }
 
       return {};
@@ -82,9 +77,7 @@ export default {
   },
   methods: {
     handleColorChange(color) {
-      this.selectedColor = color.trim();
-
-      this.$emit('input', this.selectedColor);
+      this.$emit('input', color.trim());
     },
   },
   i18n: {
@@ -109,7 +102,7 @@ export default {
         max-length="7"
         type="text"
         class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base"
-        :value="selectedColor"
+        :value="value"
         :state="state"
         @input="handleColorChange"
       >
@@ -119,7 +112,7 @@ export default {
               type="color"
               class="gl-absolute gl-top-0 gl-left-0 gl-h-full! gl-p-0! gl-m-0! gl-cursor-pointer gl-opacity-0"
               tabindex="-1"
-              :value="selectedColor"
+              :value="value"
               @input="handleColorChange"
             />
           </div>

ee/app/assets/javascripts/groups/settings/compliance_frameworks/components/shared_form.vue

@@ -173,7 +173,6 @@ export default {
       <color-picker
         :value="color"
         :label="$options.i18n.colorInputLabel"
-        :set-color="color || ''"
         :state="isValidColor"
         @input="color = $event"
       />

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

@@ -29,8 +29,6 @@ describe('ColorPicker', () => {
       '#428BCA': 'Moderate blue',
       '#44AD8E': 'Lime green',
     };
-
-    createComponent(shallowMount);
   });
 
   afterEach(() => {
@@ -39,6 +37,8 @@ describe('ColorPicker', () => {
 
   describe('label', () => {
     it('hides the label if the label is not passed', () => {
+      createComponent(shallowMount);
+
       expect(label()).toBe('');
     });
 
@@ -60,9 +60,9 @@ describe('ColorPicker', () => {
     });
 
     it('has a color set on initialization', () => {
-      createComponent(shallowMount, { setColor });
+      createComponent(mount, { value: setColor });
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(colorInput().props('value')).toBe(setColor);
     });
 
     it('emits input event from component when a color is selected', async () => {
@@ -76,7 +76,7 @@ describe('ColorPicker', () => {
       createComponent();
       await colorInput().setValue(`    ${setColor}    `);
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
       expect(colorPreview().attributes('class')).toContain('gl-inset-border-1-gray-400');
       expect(colorInput().attributes('class')).not.toContain('is-invalid');
     });
@@ -95,14 +95,14 @@ describe('ColorPicker', () => {
       createComponent();
       await colorInput().setValue(setColor);
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
 
     it('has color picker value entered', async () => {
       createComponent();
       await colorPicker().setValue(setColor);
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
   });
 
@@ -127,7 +127,7 @@ describe('ColorPicker', () => {
       createComponent();
       await presetColors().at(0).trigger('click');
 
-      expect(wrapper.vm.$data.selectedColor).toBe(setColor);
+      expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
   });
 });