From 2967df2fe098278dd20126dc033b03cbb4b903ce Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Fri, 17 May 2024 11:25:13 +0200
Subject: [PATCH] fix: Fix color picker type errors (#9436)

---
 .../components/N8nColorPicker/ColorPicker.vue   | 17 ++++++-----------
 .../__snapshots__/ColorPicker.spec.ts.snap      |  4 ++--
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
index 0754fcc87b..99c18b2c89 100644
--- a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
@@ -40,16 +40,6 @@ const emit = defineEmits<{
 	(event: 'active-change', value: string): void;
 }>();
 
-const model = computed({
-	get() {
-		return color.value;
-	},
-	set(value: string) {
-		color.value = value;
-		emit('update:modelValue', value);
-	},
-});
-
 const onChange = (value: string) => {
 	emit('change', value);
 };
@@ -61,15 +51,20 @@ const onInput = (value: string) => {
 const onActiveChange = (value: string) => {
 	emit('active-change', value);
 };
+
+const onColorSelect = (value: string) => {
+	emit('update:modelValue', value);
+};
 </script>
 
 <template>
 	<span :class="['n8n-color-picker', $style.component]">
 		<ElColorPicker
-			v-model="model"
 			v-bind="colorPickerProps"
+			size="default"
 			@change="onChange"
 			@active-change="onActiveChange"
+			@update:model-value="onColorSelect"
 		/>
 		<N8nInput
 			v-if="showInput"
diff --git a/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap b/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
index 0e235831c7..98c92ea40d 100644
--- a/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
+++ b/packages/design-system/src/components/N8nColorPicker/__tests__/__snapshots__/ColorPicker.spec.ts.snap
@@ -10,7 +10,7 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
     <div
       aria-description="current color is . press enter to select a new color."
       aria-label="color picker"
-      class="el-color-picker el-color-picker--medium el-tooltip__trigger el-tooltip__trigger"
+      class="el-color-picker el-color-picker--default el-tooltip__trigger el-tooltip__trigger"
       role="button"
       tabindex="0"
     >
@@ -108,7 +108,7 @@ exports[`components > N8nColorPicker > should render without input 1`] = `
     <div
       aria-description="current color is . press enter to select a new color."
       aria-label="color picker"
-      class="el-color-picker el-color-picker--medium el-tooltip__trigger el-tooltip__trigger"
+      class="el-color-picker el-color-picker--default el-tooltip__trigger el-tooltip__trigger"
       role="button"
       tabindex="0"
     >