diff --git a/packages/design-system/src/components/N8nText/Text.stories.js b/packages/design-system/src/components/N8nText/Text.stories.js
index 8f017e4614..4fbda988f8 100644
--- a/packages/design-system/src/components/N8nText/Text.stories.js
+++ b/packages/design-system/src/components/N8nText/Text.stories.js
@@ -7,7 +7,7 @@ export default {
size: {
control: {
type: 'select',
- options: ['small', 'medium', 'large'],
+ options: ['xsmall', 'small', 'medium', 'large'],
},
},
color: {
diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue
index c184c6a712..53fed00b11 100644
--- a/packages/design-system/src/components/N8nText/Text.vue
+++ b/packages/design-system/src/components/N8nText/Text.vue
@@ -16,7 +16,7 @@ export default Vue.extend({
size: {
type: String,
default: 'medium',
- validator: (value: string): boolean => ['mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
+ validator: (value: string): boolean => ['xsmall', 'mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
},
color: {
type: String,
@@ -122,4 +122,19 @@ export default Vue.extend({
composes: body-small;
}
+.body-xsmall {
+ font-size: var(--font-size-3xs);
+ line-height: var(--font-line-height-compact);
+}
+
+.body-xsmall-regular {
+ composes: regular;
+ composes: body-xsmall;
+}
+
+.body-xsmall-bold {
+ composes: bold;
+ composes: body-xsmall;
+}
+
diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 24e245a344..61bc8de97d 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -316,6 +316,7 @@
--border-base: var(--border-width-base) var(--border-style-base)
var(--color-foreground-base);
+ --font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
--font-size-s: 0.875rem;
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index 58969da441..044fea5692 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -23,18 +23,21 @@
+
+
+
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 64d0763fac..127944c533 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -16,6 +16,7 @@
@focus="focused = true"
@blur="focused = false"
inputSize="small" />
+
@@ -27,12 +28,14 @@ import {
} from '@/Interface';
import ParameterInput from '@/components/ParameterInput.vue';
+import InputHint from './ParameterInputHint.vue';
export default Vue
.extend({
name: 'ParameterInputFull',
components: {
ParameterInput,
+ InputHint,
},
data() {
return {
@@ -64,3 +67,9 @@ export default Vue
},
});
+
+
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
new file mode 100644
index 0000000000..3bdd4336a3
--- /dev/null
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts
index b731993622..d99632504a 100644
--- a/packages/editor-ui/src/plugins/i18n/index.ts
+++ b/packages/editor-ui/src/plugins/i18n/index.ts
@@ -110,6 +110,18 @@ export class I18nClass {
});
},
+ /**
+ * Hint for a top-level param.
+ */
+ hint(
+ { name: parameterName, hint }: { name: string; hint: string; },
+ ) {
+ return context.dynamicRender({
+ key: `${credentialPrefix}.${parameterName}.hint`,
+ fallback: hint,
+ });
+ },
+
/**
* Description (tooltip text) for an input label param.
*/
@@ -205,6 +217,21 @@ export class I18nClass {
});
},
+ /**
+ * Hint for an input, whether top-level or nested.
+ */
+ hint(
+ parameter: { name: string; hint: string; type: string },
+ path: string,
+ ) {
+ const middleKey = deriveMiddleKey(path, parameter);
+
+ return context.dynamicRender({
+ key: `${initialKey}.${middleKey}.hint`,
+ fallback: parameter.hint,
+ });
+ },
+
/**
* Placeholder for an input label or `collection` or `fixedCollection` param,
* whether top-level or nested.
diff --git a/packages/nodes-base/nodes/Merge/Merge.node.ts b/packages/nodes-base/nodes/Merge/Merge.node.ts
index 1b69157167..72572c1fc0 100644
--- a/packages/nodes-base/nodes/Merge/Merge.node.ts
+++ b/packages/nodes-base/nodes/Merge/Merge.node.ts
@@ -111,6 +111,7 @@ export class Merge implements INodeType {
name: 'propertyName1',
type: 'string',
default: '',
+ hint: 'The name of the field as text (e.g. “id”)',
required: true,
displayOptions: {
show: {
@@ -128,6 +129,7 @@ export class Merge implements INodeType {
name: 'propertyName2',
type: 'string',
default: '',
+ hint: 'The name of the field as text (e.g. “id”)',
required: true,
displayOptions: {
show: {
diff --git a/packages/workflow/src/Interfaces.ts b/packages/workflow/src/Interfaces.ts
index f695d6da79..c8bf57f60d 100644
--- a/packages/workflow/src/Interfaces.ts
+++ b/packages/workflow/src/Interfaces.ts
@@ -670,6 +670,7 @@ export interface INodeProperties {
typeOptions?: INodePropertyTypeOptions;
default: NodeParameterValue | INodeParameters | INodeParameters[] | NodeParameterValue[];
description?: string;
+ hint?: string;
displayOptions?: IDisplayOptions;
options?: Array;
placeholder?: string;