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 @@
{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }} {{ $locale.baseText('parameterInputExpanded.openDocs') }}
+ + + 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;