Merge branch 'color-picker-custom-suggested-colors' into 'master'

Color picker: allow to pass custom color suggestions

See merge request gitlab-org/gitlab!81604

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

@@ -7,6 +7,7 @@
      :invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')"
      :label="__('Background color')"
      :value="#FF0000"
+     :suggestedColors="{ '#ff0000': 'Red', '#808080': 'Gray' }",
      state="isValidColor"
    />
  */
@@ -48,6 +49,11 @@ export default {
       required: false,
       default: null,
     },
+    suggestedColors: {
+      type: Object,
+      required: false,
+      default: () => gon.suggested_label_colors,
+    },
   },
   computed: {
     description() {
@@ -55,9 +61,6 @@ export default {
         ? this.$options.i18n.fullDescription
         : this.$options.i18n.shortDescription;
     },
-    suggestedColors() {
-      return gon.suggested_label_colors;
-    },
     previewColor() {
       if (this.state) {
         return { backgroundColor: this.value };

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

@@ -127,5 +127,18 @@ describe('ColorPicker', () => {
 
       expect(wrapper.emitted().input[0]).toStrictEqual([setColor]);
     });
+
+    it('shows the suggested colors passed using props', () => {
+      const customColors = {
+        '#ff0000': 'Red',
+        '#808080': 'Gray',
+      };
+
+      createComponent(shallowMount, { suggestedColors: customColors });
+      expect(description()).toBe('Enter any color or choose one of the suggested colors below.');
+      expect(presetColors()).toHaveLength(2);
+      expect(presetColors().at(0).attributes('title')).toBe('Red');
+      expect(presetColors().at(1).attributes('title')).toBe('Gray');
+    });
   });
 });