Commit fa99f393 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera

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
parents b51b57dc c3aa6fc8
......@@ -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>
......
......@@ -173,7 +173,6 @@ export default {
<color-picker
:value="color"
:label="$options.i18n.colorInputLabel"
:set-color="color || ''"
:state="isValidColor"
@input="color = $event"
/>
......
......@@ -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]);
});
});
});
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