From 6d6f3acd97a485d0f8f93bf5e6cdfe17371f09be Mon Sep 17 00:00:00 2001 From: Michael Kret <88898367+michael-radency@users.noreply.github.com> Date: Fri, 28 Jan 2022 08:55:25 +0200 Subject: [PATCH] :sparkles: Add parameter hints for node parameters N8N-2841 (#2704) * :hammer: base functionality done * :fix: changes accordingly to review * :fix: replaced div with n8n-text * :fix: return wrong deleted color variable * add mock examples for testing * add slack node test param * :hammer: changed font size of hint, added top margin * :hammer: updated comments and function name * :hammer: updated parameterHint to hint * :hammer: updated text color, set compact to true, changed inputLabelHint to hint * :hammer: updated components styles * :hammer: replaced mini with xsmall * :fix: fixed line height * :fix: changed line height to 1.25 * :hummer: removed mock data * :hammer: changed xsmall line-height * :zap: update to merge hint Co-authored-by: Mutasem --- .../src/components/N8nText/Text.stories.js | 2 +- .../src/components/N8nText/Text.vue | 17 +++++++++++- packages/design-system/theme/src/_tokens.scss | 1 + .../src/components/ParameterInputExpanded.vue | 9 +++++++ .../src/components/ParameterInputFull.vue | 9 +++++++ .../src/components/ParameterInputHint.vue | 22 +++++++++++++++ packages/editor-ui/src/plugins/i18n/index.ts | 27 +++++++++++++++++++ packages/nodes-base/nodes/Merge/Merge.node.ts | 2 ++ packages/workflow/src/Interfaces.ts | 1 + 9 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 packages/editor-ui/src/components/ParameterInputHint.vue 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;