From 67c3453885bc619fedc8338a6dd0d8d66dead931 Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Thu, 3 Oct 2024 10:50:53 +0200 Subject: [PATCH] fix(editor): Fix design system form element sizing (#11040) --- .../N8nFormBox/__tests__/FormBox.test.ts | 57 ++++ .../__snapshots__/FormBox.test.ts.snap | 259 ++++++++++++++++++ .../src/components/N8nFormInput/FormInput.vue | 4 +- .../components/N8nFormInputs/FormInputs.vue | 3 - .../src/components/N8nInput/Input.vue | 2 +- packages/design-system/src/types/form.ts | 1 + 6 files changed, 320 insertions(+), 6 deletions(-) create mode 100644 packages/design-system/src/components/N8nFormBox/__tests__/FormBox.test.ts create mode 100644 packages/design-system/src/components/N8nFormBox/__tests__/__snapshots__/FormBox.test.ts.snap diff --git a/packages/design-system/src/components/N8nFormBox/__tests__/FormBox.test.ts b/packages/design-system/src/components/N8nFormBox/__tests__/FormBox.test.ts new file mode 100644 index 0000000000..a309e1aa40 --- /dev/null +++ b/packages/design-system/src/components/N8nFormBox/__tests__/FormBox.test.ts @@ -0,0 +1,57 @@ +import { createComponentRenderer } from '../../../__tests__/render'; +import FormBox from '../FormBox.vue'; + +const render = createComponentRenderer(FormBox); + +describe('FormBox', () => { + it('should render the component', () => { + const { container } = render({ + props: { + title: 'Title', + inputs: [ + { + name: 'name', + properties: { + label: 'Name', + type: 'text', + required: true, + showRequiredAsterisk: true, + validateOnBlur: false, + autocomplete: 'email', + capitalize: true, + labelSize: 'small', + tagSize: 'small', + }, + }, + { + name: 'email', + properties: { + label: 'Email', + type: 'email', + required: true, + showRequiredAsterisk: true, + validateOnBlur: false, + autocomplete: 'email', + capitalize: true, + labelSize: 'medium', + tagSize: 'medium', + }, + }, + { + name: 'password', + properties: { + label: 'Password', + type: 'password', + required: true, + showRequiredAsterisk: true, + validateOnBlur: false, + autocomplete: 'current-password', + capitalize: true, + }, + }, + ], + }, + }); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/design-system/src/components/N8nFormBox/__tests__/__snapshots__/FormBox.test.ts.snap b/packages/design-system/src/components/N8nFormBox/__tests__/__snapshots__/FormBox.test.ts.snap new file mode 100644 index 0000000000..8138b44b8c --- /dev/null +++ b/packages/design-system/src/components/N8nFormBox/__tests__/__snapshots__/FormBox.test.ts.snap @@ -0,0 +1,259 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`FormBox > should render the component 1`] = ` +
+
+
+ + + Title + + +
+
+
+ +
+ +
+
+ + +
+
+ + + + +
+ + + + + +
+ + + +
+
+ + +
+
+
+
+ + +
+
+ + + + +
+ + + + + +
+ + + +
+
+ + +
+
+
+
+ + +
+
+ + + + +
+ + + + + +
+ + + +
+
+ + +
+
+ +
+ +
+
+ +
+ +
+ + +
+
+`; diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue index b1fbd4b6e3..b50868a303 100644 --- a/packages/design-system/src/components/N8nFormInput/FormInput.vue +++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue @@ -49,7 +49,7 @@ export interface Props { inactiveLabel?: string; inactiveColor?: string; teleported?: boolean; - tagSize?: 'small' | 'medium'; + tagSize?: 'small' | 'medium' | 'large'; } const props = withDefaults(defineProps(), { @@ -59,7 +59,7 @@ const props = withDefaults(defineProps(), { showRequiredAsterisk: true, validateOnBlur: true, teleported: true, - tagSize: 'small', + tagSize: 'large', }); const emit = defineEmits<{ diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue index 8a27b28137..261663de32 100644 --- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue +++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue @@ -13,7 +13,6 @@ export type FormInputsProps = { columnView?: boolean; verticalSpacing?: '' | 'xs' | 's' | 'm' | 'l' | 'xl'; teleported?: boolean; - tagSize?: 'small' | 'medium'; }; type Value = string | number | boolean | null | undefined; @@ -24,7 +23,6 @@ const props = withDefaults(defineProps(), { columnView: false, verticalSpacing: '', teleported: true, - tagSize: 'small', }); const emit = defineEmits<{ @@ -129,7 +127,6 @@ onMounted(() => { :data-test-id="input.name" :show-validation-warnings="showValidationWarnings" :teleported="teleported" - :tag-size="tagSize" @update:model-value="(value: Value) => onUpdateModelValue(input.name, value)" @validate="(value: boolean) => onValidate(input.name, value)" @enter="onSubmit" diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue index 39cda6ce30..776b0bf7c8 100644 --- a/packages/design-system/src/components/N8nInput/Input.vue +++ b/packages/design-system/src/components/N8nInput/Input.vue @@ -39,7 +39,7 @@ const props = withDefaults(defineProps(), { }); const resolvedSize = computed( - () => (props.size === 'xlarge' ? undefined : props.size) as ElementPlusSizePropType, + () => (props.size === 'medium' ? 'default' : props.size) as ElementPlusSizePropType, ); const classes = computed(() => { diff --git a/packages/design-system/src/types/form.ts b/packages/design-system/src/types/form.ts index 45a054a012..bffaf67c81 100644 --- a/packages/design-system/src/types/form.ts +++ b/packages/design-system/src/types/form.ts @@ -56,6 +56,7 @@ export type IFormInput = { focusInitially?: boolean; disabled?: boolean; labelSize?: 'small' | 'medium' | 'large'; + tagSize?: 'small' | 'medium' | 'large'; labelAlignment?: 'left' | 'right' | 'center'; tooltipText?: string; };