fix(editor): Fix TS errors in color picker (no-changelog) (#9575)

packages/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts

@@ -11,7 +11,7 @@ export default {
 		},
 		size: {
 			control: 'select',
-			options: ['mini', 'small', 'medium', 'large'],
+			options: ['small', 'large'],
 		},
 		showAlpha: {
 			control: 'boolean',
@@ -52,7 +52,7 @@ const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {
 	disabled: false,
-	size: 'medium',
+	size: 'small',
 	showAlpha: false,
 	colorFormat: '',
 	popperClass: '',

packages/design-system/src/components/N8nColorPicker/ColorPicker.vue

@@ -3,11 +3,10 @@ import { computed, ref } from 'vue';
 import { uid } from '../../utils';
 import { ElColorPicker } from 'element-plus';
 import N8nInput from '../N8nInput';
-import type { ElementPlusSizePropType } from '@/types';
 
 export type ColorPickerProps = {
 	disabled?: boolean;
-	size?: 'small' | 'medium' | 'mini';
+	size?: 'small' | 'large';
 	showAlpha?: boolean;
 	colorFormat?: 'hex' | 'rgb' | 'hsl' | 'hsv';
 	popperClass?: string;
@@ -20,7 +19,7 @@ export type ColorPickerProps = {
 defineOptions({ name: 'N8nColorPicker' });
 const props = withDefaults(defineProps<ColorPickerProps>(), {
 	disabled: false,
-	size: 'default',
+	size: 'large',
 	showAlpha: false,
 	colorFormat: 'hex',
 	popperClass: '',
@@ -31,7 +30,6 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
 });
 
 const color = ref(props.modelValue);
-
 const colorPickerProps = computed(() => {
 	const { showInput, modelValue, size, ...rest } = props;
 	return rest;
@@ -43,8 +41,6 @@ const emit = defineEmits<{
 	(event: 'active-change', value: string): void;
 }>();
 
-const resolvedSize = computed(() => props.size as ElementPlusSizePropType);
-
 const onChange = (value: string) => {
 	emit('change', value);
 };
@@ -66,7 +62,8 @@ const onColorSelect = (value: string) => {
 	<span :class="['n8n-color-picker', $style.component]">
 		<ElColorPicker
 			v-bind="colorPickerProps"
-			:size="resolvedSize"
+			:model-value="modelValue"
+			:size="props.size"
 			@change="onChange"
 			@active-change="onActiveChange"
 			@update:model-value="onColorSelect"
@@ -75,7 +72,7 @@ const onColorSelect = (value: string) => {
 			v-if="showInput"
 			:class="$style.input"
 			:disabled="props.disabled"
-			:size="size"
+			:size="props.size"
 			:model-value="color"
 			:name="name"
 			type="text"

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--default el-tooltip__trigger el-tooltip__trigger"
+      class="el-color-picker el-color-picker--large el-tooltip__trigger el-tooltip__trigger"
       role="button"
       tabindex="0"
     >
@@ -64,7 +64,7 @@ exports[`components > N8nColorPicker > should render with input 1`] = `
     <!--teleport end-->
     
     <div
-      class="el-input el-input--default n8n-input input input"
+      class="el-input el-input--large n8n-input input input"
       data-v-dab78bb8=""
     >
       <!-- input -->
@@ -107,7 +107,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--default el-tooltip__trigger el-tooltip__trigger"
+      class="el-color-picker el-color-picker--large el-tooltip__trigger el-tooltip__trigger"
       role="button"
       tabindex="0"
     >