mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix design system form element sizing (#11040)

Browse source
This commit is contained in:
Csaba Tuncsik 2024-10-03 10:50:53 +02:00 committed by GitHub
parent 86c632aabf
commit 67c3453885
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 320 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
packages/design-system/src/components/N8nFormBox/__tests__/FormBox.test.ts Normal file
View file

@ -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();
});
});

259
packages/design-system/src/components/N8nFormBox/__tests__/__snapshots__/FormBox.test.ts.snap Normal file
View file

@ -0,0 +1,259 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`FormBox > should render the component 1`] = `
<div>
<div
class="n8n-form-box container"
>
<div
class="heading"
>
<span
class="n8n-heading size-xlarge regular"
>
Title
</span>
</div>
<div
class="inputsContainer"
>
<div>
<div
class="grid"
>
<div
class=""
>
<div
capitalize="true"
class="container"
data-test-id="name"
>
<label
class="n8n-input-label inputLabel heading small"
for="name"
>
<div
class="title"
>
<span
class="n8n-text size-small bold"
>
Name
<span
class="n8n-text primary size-small bold"
>
*
</span>
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
</label>
<div
class=""
>
<div
class="el-input el-input--small n8n-input"
>
<!-- input -->
<!-- prepend slot -->
<!--v-if-->
<div
class="el-input__wrapper"
>
<!-- prefix slot -->
<!--v-if-->
<input
autocomplete="email"
class="el-input__inner"
name="name"
placeholder=""
rows="2"
tabindex="0"
title=""
type="text"
/>
<!-- suffix slot -->
<!--v-if-->
</div>
<!-- append slot -->
<!--v-if-->
</div>
</div>
<!--v-if-->
</div>
</div>
<div
class=""
>
<div
capitalize="true"
class="container"
data-test-id="email"
>
<label
class="n8n-input-label inputLabel heading medium"
for="email"
>
<div
class="title"
>
<span
class="n8n-text size-medium bold"
>
Email
<span
class="n8n-text primary size-medium bold"
>
*
</span>
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
</label>
<div
class=""
>
<div
class="el-input el-input--default n8n-input"
>
<!-- input -->
<!-- prepend slot -->
<!--v-if-->
<div
class="el-input__wrapper"
>
<!-- prefix slot -->
<!--v-if-->
<input
autocomplete="email"
class="el-input__inner"
name="email"
placeholder=""
rows="2"
tabindex="0"
title=""
type="email"
/>
<!-- suffix slot -->
<!--v-if-->
</div>
<!-- append slot -->
<!--v-if-->
</div>
</div>
<!--v-if-->
</div>
</div>
<div
class=""
>
<div
capitalize="true"
class="container"
data-test-id="password"
>
<label
class="n8n-input-label inputLabel heading medium"
for="password"
>
<div
class="title"
>
<span
class="n8n-text size-medium bold"
>
Password
<span
class="n8n-text primary size-medium bold"
>
*
</span>
</span>
</div>
<!--v-if-->
<!--v-if-->
<!--v-if-->
</label>
<div
class=""
>
<div
class="el-input el-input--large n8n-input ph-no-capture"
>
<!-- input -->
<!-- prepend slot -->
<!--v-if-->
<div
class="el-input__wrapper"
>
<!-- prefix slot -->
<!--v-if-->
<input
autocomplete="current-password"
class="el-input__inner"
name="password"
placeholder=""
rows="2"
tabindex="0"
title=""
type="password"
/>
<!-- suffix slot -->
<!--v-if-->
</div>
<!-- append slot -->
<!--v-if-->
</div>
</div>
<!--v-if-->
</div>
</div>
</div>
</div>
</div>
<!--v-if-->
<div
class="actionContainer"
>
<!--v-if-->
</div>
</div>
</div>
`;

4
packages/design-system/src/components/N8nFormInput/FormInput.vue
View file

@ -49,7 +49,7 @@ export interface Props {
inactiveLabel?: string; inactiveLabel?: string;
inactiveColor?: string; inactiveColor?: string;
teleported?: boolean; teleported?: boolean;
tagSize?: 'small' | 'medium'; tagSize?: 'small' | 'medium' | 'large';
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -59,7 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
showRequiredAsterisk: true, showRequiredAsterisk: true,
validateOnBlur: true, validateOnBlur: true,
teleported: true, teleported: true,
tagSize: 'small', tagSize: 'large',
}); });
const emit = defineEmits<{ const emit = defineEmits<{

3
packages/design-system/src/components/N8nFormInputs/FormInputs.vue
View file

@ -13,7 +13,6 @@ export type FormInputsProps = {
columnView?: boolean; columnView?: boolean;
verticalSpacing?: '' | 'xs' | 's' | 'm' | 'l' | 'xl'; verticalSpacing?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
teleported?: boolean; teleported?: boolean;
tagSize?: 'small' | 'medium';
}; };
type Value = string | number | boolean | null | undefined; type Value = string | number | boolean | null | undefined;
@ -24,7 +23,6 @@ const props = withDefaults(defineProps<FormInputsProps>(), {
columnView: false, columnView: false,
verticalSpacing: '', verticalSpacing: '',
teleported: true, teleported: true,
tagSize: 'small',
}); });
const emit = defineEmits<{ const emit = defineEmits<{
@ -129,7 +127,6 @@ onMounted(() => {
:data-test-id="input.name" :data-test-id="input.name"
:show-validation-warnings="showValidationWarnings" :show-validation-warnings="showValidationWarnings"
:teleported="teleported" :teleported="teleported"
:tag-size="tagSize"
@update:model-value="(value: Value) => onUpdateModelValue(input.name, value)" @update:model-value="(value: Value) => onUpdateModelValue(input.name, value)"
@validate="(value: boolean) => onValidate(input.name, value)" @validate="(value: boolean) => onValidate(input.name, value)"
@enter="onSubmit" @enter="onSubmit"

2
packages/design-system/src/components/N8nInput/Input.vue
View file

@ -39,7 +39,7 @@ const props = withDefaults(defineProps<InputProps>(), {
}); });
const resolvedSize = computed( const resolvedSize = computed(
() => (props.size === 'xlarge' ? undefined : props.size) as ElementPlusSizePropType, () => (props.size === 'medium' ? 'default' : props.size) as ElementPlusSizePropType,
); );
const classes = computed(() => { const classes = computed(() => {

1
packages/design-system/src/types/form.ts
View file

@ -56,6 +56,7 @@ export type IFormInput = {
focusInitially?: boolean; focusInitially?: boolean;
disabled?: boolean; disabled?: boolean;
labelSize?: 'small' | 'medium' | 'large'; labelSize?: 'small' | 'medium' | 'large';
tagSize?: 'small' | 'medium' | 'large';
labelAlignment?: 'left' | 'right' | 'center'; labelAlignment?: 'left' | 'right' | 'center';
tooltipText?: string; tooltipText?: string;
}; };