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

Allow to pass suggestedColors to ColorPicker

Changelog: added
parent 084dce0b
......@@ -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 };
......
......@@ -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');
});
});
});
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