Commit 55babfe9 authored by Jonas Waelter's avatar Jonas Waelter

Allow to pass suggestedColors to ColorPicker

Changelog: added
parent 084dce0b
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
:invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')" :invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')"
:label="__('Background color')" :label="__('Background color')"
:value="#FF0000" :value="#FF0000"
:suggestedColors="{ '#ff0000': 'Red', '#808080': 'Gray' }",
state="isValidColor" state="isValidColor"
/> />
*/ */
...@@ -48,6 +49,11 @@ export default { ...@@ -48,6 +49,11 @@ export default {
required: false, required: false,
default: null, default: null,
}, },
suggestedColors: {
type: Object,
required: false,
default: () => gon.suggested_label_colors,
},
}, },
computed: { computed: {
description() { description() {
...@@ -55,9 +61,6 @@ export default { ...@@ -55,9 +61,6 @@ export default {
? this.$options.i18n.fullDescription ? this.$options.i18n.fullDescription
: this.$options.i18n.shortDescription; : this.$options.i18n.shortDescription;
}, },
suggestedColors() {
return gon.suggested_label_colors;
},
previewColor() { previewColor() {
if (this.state) { if (this.state) {
return { backgroundColor: this.value }; return { backgroundColor: this.value };
......
...@@ -127,5 +127,18 @@ describe('ColorPicker', () => { ...@@ -127,5 +127,18 @@ describe('ColorPicker', () => {
expect(wrapper.emitted().input[0]).toStrictEqual([setColor]); 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');
});
}); });
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment