Merge branch 'master' of github.com:n8n-io/n8n into n8n-2349-connectors

packages/design-system/src/components/N8nButton/Button.stories.js

@@ -18,7 +18,7 @@ export default {
 		size: {
 			control: {
 				type: 'select',
-				options: ['small', 'medium', 'large'],
+				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
 			},
 		},
 		loading: {
@@ -31,12 +31,6 @@ export default {
 				type: 'text',
 			},
 		},
-		iconSize: {
-			control: {
-				type: 'select',
-				options: ['small', 'medium', 'large'],
-			},
-		},
 		circle: {
 			control: {
 				type: 'boolean',

packages/design-system/src/components/N8nButton/Button.vue

@@ -16,13 +16,13 @@
 			<component
 				:is="$options.components.N8nSpinner"
 				v-if="props.loading"
-				:size="props.iconSize"
+				:size="props.size"
 			/>
 			<component
 				:is="$options.components.N8nIcon"
 				v-else-if="props.icon"
 				:icon="props.icon"
-				:size="props.iconSize"
+				:size="props.size"
 			/>
 		</span>
 		<span v-if="props.label">{{ props.label }}</span>
@@ -58,7 +58,7 @@ export default {
 			type: String,
 			default: 'medium',
 			validator: (value: string): boolean =>
-				['small', 'medium', 'large'].indexOf(value) !== -1,
+				['mini', 'small', 'medium', 'large', 'xlarge'].indexOf(value) !== -1,
 		},
 		loading: {
 			type: Boolean,
@@ -71,9 +71,6 @@ export default {
 		icon: {
 			type: String,
 		},
-		iconSize: {
-			type: String,
-		},
 		round: {
 			type: Boolean,
 			default: true,

packages/design-system/src/components/N8nButton/index.d.ts

@@ -35,9 +35,6 @@ export declare class N8nButton extends N8nComponent {
 	/** Button icon, accepts an icon name of font awesome icon component */
 	icon: string;
 
-	/** Size of icon */
-	iconSize: N8nComponentSize;
-
 	/** Full width */
 	fullWidth: boolean;
 

packages/design-system/src/components/N8nIcon/Icon.vue

@@ -1,19 +1,27 @@
 <template functional>
 	<component
-		:is="$options.components.FontAwesomeIcon"
-		:class="$style[`_${props.size}`]"
-		:icon="props.icon"
-		:spin="props.spin"
-	/>
+		:is="$options.components.N8nText"
+		:size="props.size"
+		:compact="true"
+	>
+		<component
+			:is="$options.components.FontAwesomeIcon"
+			:icon="props.icon"
+			:spin="props.spin"
+			:class="$style[props.size]"
+		/>
+	</component>
 </template>
 
 <script lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import N8nText from '../N8nText';
 
 export default {
 	name: 'n8n-icon',
 	components: {
 		FontAwesomeIcon,
+		N8nText,
 	},
 	props: {
 		icon: {
@@ -23,9 +31,6 @@ export default {
 		size: {
 			type: String,
 			default: 'medium',
-			validator: function (value: string): boolean {
-				return ['small', 'medium', 'large'].indexOf(value) !== -1;
-			},
 		},
 		spin: {
 			type: Boolean,
@@ -35,22 +40,21 @@ export default {
 };
 </script>
 
+
 <style lang="scss" module>
-._small {
-	font-size: 0.85em;
-	height: 0.85em;
-	width: 0.85em !important;
+.xlarge {
+	width: var(--font-size-xl) !important;
 }
 
-._medium {
-	font-size: 0.95em;
-	height: 0.95em;
-	width: 0.95em !important;
+.large {
+	width: var(--font-size-m) !important;
 }
 
-._large {
-	font-size: 1.22em;
-	height: 1.22em;
-	width: 1.22em !important;
+.medium {
+	width: var(--font-size-s) !important;
+}
+
+.small {
+	width: var(--font-size-2xs) !important;
 }
 </style>

packages/design-system/src/components/N8nIconButton/IconButton.vue

@@ -2,11 +2,10 @@
 	<component :is="$options.components.N8nButton"
 		:type="props.type"
 		:disabled="props.disabled"
-		:size="props.size === 'xlarge' ? 'large' : props.size"
+		:size="props.size"
 		:loading="props.loading"
 		:title="props.title"
 		:icon="props.icon"
-		:iconSize="$options.iconSizeMap[props.size] || props.size"
 		:theme="props.theme"
 		@click="(e) => listeners.click && listeners.click(e)"
 		circle
@@ -16,11 +15,6 @@
 <script lang="ts">
 import N8nButton from '../N8nButton';
 
-const iconSizeMap = {
-	large: 'medium',
-	xlarge: 'large',
-};
-
 export default {
 	name: 'n8n-icon-button',
 	components: {
@@ -36,8 +30,6 @@ export default {
 		size: {
 			type: String,
 			default: 'medium',
-			validator: (value: string): boolean =>
-				['small', 'medium', 'large', 'xlarge'].indexOf(value) !== -1,
 		},
 		loading: {
 			type: Boolean,
@@ -55,6 +47,5 @@ export default {
 			type: String,
 		},
 	},
-	iconSizeMap,
 };
 </script>

packages/design-system/src/components/N8nIconButton/index.d.ts

@@ -12,9 +12,6 @@ export declare class N8nIconButton extends N8nComponent {
 	/** Button size */
 	size: N8nComponentSize | 'xlarge';
 
-	/** icon size */
-	iconSize: N8nComponentSize;
-
 	/** Determine whether it's loading */
 	loading: boolean;
 

packages/design-system/src/components/N8nInputLabel/InputLabel.vue

@@ -1,13 +1,13 @@
 <template functional>
-	<div :class="$style.inputLabel">
-		<div :class="props.label ? $style.label: ''">
-			<component v-if="props.label" :is="$options.components.N8nText" :bold="true">
+	<div :class="{[$style.inputLabelContainer]: !props.labelHoverableOnly}">
+		<div :class="{[$style.inputLabel]: props.labelHoverableOnly, [$options.methods.getLabelClass(props, $style)]: true}">
+			<component v-if="props.label" :is="$options.components.N8nText" :bold="props.bold" :size="props.size" :compact="!props.underline">
 				{{ props.label }}
-				<component :is="$options.components.N8nText" color="primary" :bold="true" v-if="props.required">*</component>
+				<component :is="$options.components.N8nText" color="primary" :bold="props.bold" :size="props.size" v-if="props.required">*</component>
 			</component>
-			<span :class="$style.infoIcon" v-if="props.tooltipText">
+			<span :class="[$style.infoIcon, props.showTooltip ? $style.showIcon: $style.hiddenIcon]" v-if="props.tooltipText">
 				<component :is="$options.components.N8nTooltip" placement="top" :popper-class="$style.tooltipPopper">
-					<component :is="$options.components.N8nIcon" icon="question-circle" />
+					<component :is="$options.components.N8nIcon" icon="question-circle" size="small" />
 					<div slot="content" v-html="$options.methods.addTargetBlank(props.tooltipText)"></div>
 				</component>
 			</span>
@@ -40,31 +40,97 @@ export default {
 		required: {
 			type: Boolean,
 		},
+		bold: {
+			type: Boolean,
+			default: true,
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium'].includes(value),
+		},
+		underline: {
+			type: Boolean,
+		},
+		showTooltip: {
+			type: Boolean,
+		},
+		labelHoverableOnly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	methods: {
 		addTargetBlank,
+		getLabelClass(props: {label: string, size: string, underline: boolean}, $style: any) {
+			if (!props.label) {
+				return '';
+			}
+
+			if (props.underline) {
+				return $style[`label-${props.size}-underline`];
+			}
+
+			return $style[`label-${props.size}`];
+		},
 	},
 };
 </script>
 
 <style lang="scss" module>
-.inputLabel {
-	&:hover {
-		--info-icon-display: inline-block;
+.inputLabelContainer:hover {
+	> div > .infoIcon {
+		display: inline-block;
 	}
 }
 
-.label {
-	margin-bottom: var(--spacing-2xs);
-
-	* {
-		margin-right: var(--spacing-4xs);
+.inputLabel:hover {
+	> .infoIcon {
+		display: inline-block;
 	}
 }
 
 .infoIcon {
 	color: var(--color-text-light);
-	display: var(--info-icon-display, none);
+}
+
+.showIcon {
+	display: inline-block;
+}
+
+.hiddenIcon {
+	display: none;
+}
+
+.label {
+	* {
+		margin-right: var(--spacing-5xs);
+	}
+}
+
+.label-small {
+	composes: label;
+	margin-bottom: var(--spacing-4xs);
+}
+
+.label-medium {
+	composes: label;
+	margin-bottom: var(--spacing-2xs);
+}
+
+.underline {
+	border-bottom: var(--border-base);
+}
+
+.label-small-underline {
+	composes: label-small;
+	composes: underline;
+}
+
+.label-medium-underline {
+	composes: label-medium;
+	composes: underline;
 }
 
 .tooltipPopper {

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 => ['large', 'medium', 'small'].includes(value),
+			validator: (value: string): boolean => ['mini', 'small', 'medium', 'large', 'xlarge'].includes(value),
 		},
 		color: {
 			type: String,
@@ -26,16 +26,23 @@ export default Vue.extend({
 			type: String,
 			validator: (value: string): boolean => ['right', 'left', 'center'].includes(value),
 		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	methods: {
 		getClass(props: {size: string, bold: boolean}) {
 			return `body-${props.size}${props.bold ? '-bold' : '-regular'}`;
 		},
-		getStyles(props: {color: string, align: string}) {
+		getStyles(props: {color: string, align: string, compact: false}) {
 			const styles = {} as any;
 			if (props.color) {
 				styles.color = `var(--color-${props.color})`;
 			}
+			if (props.compact) {
+				styles['line-height'] = 1;
+			}
 			if (props.align) {
 				styles['text-align'] = props.align;
 			}
@@ -54,6 +61,22 @@ export default Vue.extend({
 	font-weight: var(--font-weight-regular);
 }
 
+.body-xlarge {
+	font-size: var(--font-size-xl);
+	line-height: var(--font-line-height-xloose);
+}
+
+.body-xlarge-regular {
+	composes: regular;
+	composes: body-xlarge;
+}
+
+.body-xlarge-bold {
+	composes: bold;
+	composes: body-xlarge;
+}
+
+
 .body-large {
 	font-size: var(--font-size-m);
 	line-height: var(--font-line-height-xloose);

packages/design-system/src/components/component.d.ts

@@ -7,4 +7,4 @@ export declare class N8nComponent extends Vue {
 }
 
 /** Component size definition for button, input, etc */
-export type N8nComponentSize = 'large' | 'medium' | 'small';
+export type N8nComponentSize = 'xlarge' | 'large' | 'medium' | 'small' | 'mini';

packages/design-system/theme/src/button.scss

@@ -83,6 +83,17 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 		--button-border-radius: 50%;
 	}
 
+	@include mixins.m(mini) {
+		--button-padding-vertical: var(--spacing-4xs);
+		--button-padding-horizontal: var(--spacing-2xs);
+		--button-font-size: var(--font-size-2xs);
+
+		@include mixins.when(circle) {
+			--button-padding-vertical: var(--spacing-4xs);
+			--button-padding-horizontal: var(--spacing-4xs);
+		}
+	}
+
 	@include mixins.m(small) {
 		--button-padding-vertical: var(--spacing-3xs);
 		--button-padding-horizontal: var(--spacing-xs);
@@ -104,4 +115,15 @@ $loading-overlay-background-color: rgba(255, 255, 255, 0.35);
 			--button-padding-horizontal: var(--spacing-2xs);
 		}
 	}
+
+	@include mixins.m(xlarge) {
+		--button-padding-vertical: var(--spacing-xs);
+		--button-padding-horizontal: var(--spacing-s);
+		--button-font-size: var(--font-size-m);
+
+		@include mixins.when(circle) {
+			--button-padding-vertical: var(--spacing-xs);
+			--button-padding-horizontal: var(--spacing-xs);
+		}
+	}
 }

packages/design-system/theme/src/dialog.scss

@@ -68,8 +68,6 @@
 	@include mixins.e(body) {
 		padding: var.$dialog-padding-primary;
 		color: var(--color-text-base);
-		font-size: var.$dialog-content-font-size;
-		word-break: break-all;
 	}
 
 	@include mixins.e(footer) {

packages/design-system/theme/src/tabs.scss

@@ -5,7 +5,7 @@
 	@include mixins.e(header) {
 		padding: 0;
 		position: relative;
-		margin: 0 0 15px;
+		margin: 0;
 	}
 	@include mixins.e(active-bar) {
 		position: absolute;

packages/editor-ui/src/components/About.vue

@@ -67,6 +67,7 @@ export default mixins(
 
 <style scoped lang="scss">
 .n8n-about {
+	font-size: var(--font-size-s);
 	.el-row {
 		padding: 0.25em 0;
 	}

packages/editor-ui/src/components/CodeEdit.vue

@@ -1,13 +1,12 @@
 <template>
 	<div v-if="dialogVisible">
 		<el-dialog :visible="dialogVisible" append-to-body :close-on-click-modal="false" width="80%" :title="`Edit ${parameter.displayName}`" :before-close="closeDialog">
-			<div class="text-editor-wrapper ignore-key-press">
-				<div class="editor-description">
-					{{parameter.displayName}}:
-				</div>
-				<div class="text-editor" @keydown.stop>
-					<prism-editor :lineNumbers="true" :code="value" :readonly="isReadOnly" @change="valueChanged" language="js"></prism-editor>
-				</div>
+			<div class="ignore-key-press">
+				<n8n-input-label :label="parameter.displayName">
+					<div :class="$style.editor" @keydown.stop>
+						<prism-editor :lineNumbers="true" :code="value" :readonly="isReadOnly" @change="valueChanged" language="js"></prism-editor>
+					</div>
+				</n8n-input-label>
 			</div>
 		</el-dialog>
 	</div>
@@ -53,9 +52,8 @@ export default mixins(
 	});
 </script>
 
-<style scoped>
-.editor-description {
-	font-weight: bold;
-	padding: 0 0 0.5em 0.2em;;
+<style lang="scss" module>
+.editor {
+	font-size: var(--font-size-s);
 }
 </style>

packages/editor-ui/src/components/CollectionParameter.vue

@@ -2,10 +2,10 @@
 	<div @keydown.stop class="collection-parameter">
 		<div class="collection-parameter-wrapper">
 			<div v-if="getProperties.length === 0" class="no-items-exist">
-				Currently no properties exist
+				<n8n-text size="small">Currently no properties exist</n8n-text>
 			</div>
 
-			<parameter-input-list :parameters="getProperties" :nodeValues="nodeValues" :path="path" :hideDelete="hideDelete" @valueChanged="valueChanged" />
+			<parameter-input-list :parameters="getProperties" :nodeValues="nodeValues" :path="path" :hideDelete="hideDelete" :indent="true" @valueChanged="valueChanged" />
 
 			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
 				<n8n-button
@@ -184,14 +184,14 @@ export default mixins(
 <style lang="scss">
 
 .collection-parameter {
-	padding-left: 2em;
+	padding-left: var(--spacing-s);
 
 	.param-options {
-		padding-top: 0.5em;
+		margin-top: var(--spacing-xs);
 	}
 
 	.no-items-exist {
-		margin: 0.8em 0 0.4em 0;
+		margin: var(--spacing-xs) 0;
 	}
 	.option {
 		position: relative;

packages/editor-ui/src/components/CopyInput.vue

@@ -53,6 +53,7 @@ export default mixins(copyPaste, showMessage).extend({
 	span {
 		font-family: Monaco, Consolas;
 		line-height: 1.5;
+		font-size: var(--font-size-s);
 	}
 
 	padding: var(--spacing-xs);

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -24,7 +24,7 @@
 				<div :class="$style.credActions">
 					<n8n-icon-button
 						v-if="currentCredential"
-						size="medium"
+						size="small"
 						title="Delete"
 						icon="trash"
 						type="text"

packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue

@@ -2,7 +2,7 @@
 	<div :class="$style.container">
 		<el-row>
 			<el-col :span="8" :class="$style.accessLabel">
-				<span>Allow use by</span>
+				<n8n-text :compact="true" :bold="true">Allow use by</n8n-text>
 			</el-col>
 			<el-col :span="16">
 				<div
@@ -20,26 +20,26 @@
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<span>Created</span>
+				<n8n-text :compact="true" :bold="true">Created</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
-				<TimeAgo :date="currentCredential.createdAt" :capitalize="true" />
+				<n8n-text :compact="true"><TimeAgo :date="currentCredential.createdAt" :capitalize="true" /></n8n-text>
 			</el-col>
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<span>Last modified</span>
+				<n8n-text :compact="true" :bold="true">Last modified</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
-				<TimeAgo :date="currentCredential.updatedAt" :capitalize="true" />
+				<n8n-text :compact="true"><TimeAgo :date="currentCredential.updatedAt" :capitalize="true" /></n8n-text>
 			</el-col>
 		</el-row>
 		<el-row v-if="currentCredential">
 			<el-col :span="8" :class="$style.label">
-				<span>ID</span>
+				<n8n-text :compact="true" :bold="true">ID</n8n-text>
 			</el-col>
 			<el-col :span="16" :class="$style.valueLabel">
-				<span>{{currentCredential.id}}</span>
+				<n8n-text :compact="true">{{currentCredential.id}}</n8n-text>
 			</el-col>
 		</el-row>
 	</div>

packages/editor-ui/src/components/CredentialsList.vue

@@ -26,8 +26,8 @@
 					width="120">
 					<template slot-scope="scope">
 						<div class="cred-operations">
-							<n8n-icon-button title="Edit Credentials" @click.stop="editCredential(scope.row)" icon="pen" />
-							<n8n-icon-button title="Delete Credentials" @click.stop="deleteCredential(scope.row)" icon="trash" />
+							<n8n-icon-button title="Edit Credentials" @click.stop="editCredential(scope.row)" size="small" icon="pen" />
+							<n8n-icon-button title="Delete Credentials" @click.stop="deleteCredential(scope.row)" size="small" icon="trash" />
 						</div>
 					</template>
 				</el-table-column>

packages/editor-ui/src/components/DataDisplay.vue

@@ -3,7 +3,7 @@
 		:visible="!!node"
 		:before-close="close"
 		:custom-class="`classic data-display-wrapper`"
-		width="80%"
+		width="85%"
 		append-to-body
 		@opened="showDocumentHelp = true"
 	>

packages/editor-ui/src/components/ExecutionsList.vue

@@ -35,7 +35,7 @@
 			<div class="selection-options">
 				<span v-if="checkAll === true || isIndeterminate === true">
 					Selected: {{numSelected}} / <span v-if="finishedExecutionsCountEstimated === true">~</span>{{finishedExecutionsCount}}
-					<n8n-icon-button title="Delete Selected" icon="trash" size="small" @click="handleDeleteSelected" />
+					<n8n-icon-button title="Delete Selected" icon="trash" size="mini" @click="handleDeleteSelected" />
 				</span>
 			</div>
 
@@ -101,7 +101,7 @@
 									 v-if="scope.row.stoppedAt !== undefined && !scope.row.finished && scope.row.retryOf === undefined && scope.row.retrySuccessId === undefined && !scope.row.waitTill"
 									 type="light"
 									 :theme="scope.row.stoppedAt === null ? 'warning': 'danger'"
-									 size="small"
+									 size="mini"
 									 title="Retry execution"
 									 icon="redo"
 								/>
@@ -134,10 +134,10 @@
 					<template slot-scope="scope">
 						<div class="actions-container">
 							<span v-if="scope.row.stoppedAt === undefined || scope.row.waitTill">
-								<n8n-icon-button icon="stop" title="Stop Execution" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
+								<n8n-icon-button icon="stop" size="small" title="Stop Execution" @click.stop="stopExecution(scope.row.id)" :loading="stoppingExecutions.includes(scope.row.id)" />
 							</span>
 							<span v-if="scope.row.stoppedAt !== undefined && scope.row.id" >
-								<n8n-icon-button icon="folder-open" title="Open Past Execution" @click.stop="displayExecution(scope.row)" />
+								<n8n-icon-button icon="folder-open" size="small" title="Open Past Execution" @click.stop="displayExecution(scope.row)" />
 							</span>
 						</div>
 					</template>
@@ -711,12 +711,10 @@ export default mixins(
 	position: relative;
 	display: inline-block;
 	padding: 0 10px;
-	height: 22.6px;
 	line-height: 22.6px;
 	border-radius: 15px;
 	text-align: center;
-	font-weight: 400;
-	font-size: 12px;
+	font-size: var(--font-size-s);
 
 	&.error {
 		background-color: var(--color-danger-tint-1);

packages/editor-ui/src/components/ExpressionEdit.vue

@@ -143,6 +143,7 @@ export default mixins(
 
 	.el-dialog__body {
 		padding: 0;
+		font-size: var(--font-size-s);
 	}
 
 	.right-side {

packages/editor-ui/src/components/FixedCollectionParameter.vue

@@ -1,35 +1,39 @@
 <template>
 	<div @keydown.stop class="fixed-collection-parameter">
 		<div v-if="getProperties.length === 0" class="no-items-exist">
-			Currently no items exist
+			<n8n-text size="small">Currently no items exist</n8n-text>
 		</div>
 
 		<div v-for="property in getProperties" :key="property.name" class="fixed-collection-parameter-property">
-			<div v-if="property.displayName === '' || parameter.options.length === 1"></div>
-			<div v-else class="parameter-name" :title="property.displayName">{{property.displayName}}:</div>
-
-			<div v-if="multipleValues === true">
-				<div v-for="(value, index) in values[property.name]" :key="property.name + index" class="parameter-item">
+			<n8n-input-label
+				:label="property.displayName === '' || parameter.options.length === 1 ? '' : property.displayName"
+				:underline="true"
+				:labelHoverableOnly="true"
+				size="small"
+			>
+				<div v-if="multipleValues === true">
+					<div v-for="(value, index) in values[property.name]" :key="property.name + index" class="parameter-item">
+						<div class="parameter-item-wrapper">
+							<div class="delete-option" v-if="!isReadOnly">
+								<font-awesome-icon icon="trash" class="reset-icon clickable" title="Delete Item" @click="deleteOption(property.name, index)" />
+								<div v-if="sortable" class="sort-icon">
+									<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" title="Move up" @click="moveOptionUp(property.name, index)" />
+									<font-awesome-icon v-if="index !== (values[property.name].length -1)" icon="angle-down" class="clickable" title="Move down" @click="moveOptionDown(property.name, index)" />
+								</div>
+							</div>
+							<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name, index)" :hideDelete="true" @valueChanged="valueChanged" />
+						</div>
+					</div>
+				</div>
+				<div v-else class="parameter-item">
 					<div class="parameter-item-wrapper">
 						<div class="delete-option" v-if="!isReadOnly">
-							<font-awesome-icon icon="trash" class="reset-icon clickable" title="Delete Item" @click="deleteOption(property.name, index)" />
-							<div v-if="sortable" class="sort-icon">
-								<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" title="Move up" @click="moveOptionUp(property.name, index)" />
-								<font-awesome-icon v-if="index !== (values[property.name].length -1)" icon="angle-down" class="clickable" title="Move down" @click="moveOptionDown(property.name, index)" />
-							</div>
+							<font-awesome-icon icon="trash" class="reset-icon clickable" title="Delete Item" @click="deleteOption(property.name)" />
 						</div>
-						<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name, index)" :hideDelete="true" @valueChanged="valueChanged" />
+						<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name)" class="parameter-item" @valueChanged="valueChanged" :hideDelete="true" />
 					</div>
 				</div>
-			</div>
-			<div v-else class="parameter-item">
-				<div class="parameter-item-wrapper">
-					<div class="delete-option" v-if="!isReadOnly">
-						<font-awesome-icon icon="trash" class="reset-icon clickable" title="Delete Item" @click="deleteOption(property.name)" />
-					</div>
-					<parameter-input-list :parameters="property.values" :nodeValues="nodeValues" :path="getPropertyPath(property.name)" class="parameter-item" @valueChanged="valueChanged" :hideDelete="true" />
-				</div>
-			</div>
+			</n8n-input-label>
 		</div>
 
 		<div v-if="parameterOptions.length > 0 && !isReadOnly">
@@ -221,16 +225,11 @@ export default mixins(genericHelpers)
 <style scoped lang="scss">
 
 .fixed-collection-parameter {
-	padding: 0 0 0 1em;
+	padding-left: var(--spacing-s);
 }
 
 .fixed-collection-parameter-property {
-	margin: 0.5em 0;
-	padding: 0.5em 0;
-
-	.parameter-name {
-		border-bottom: 1px solid #999;
-	}
+	margin: var(--spacing-xs) 0;
 }
 
 .delete-option {
@@ -244,28 +243,33 @@ export default mixins(genericHelpers)
 	height: 100%;
 }
 
-.parameter-item-wrapper:hover > .delete-option {
+.parameter-item:hover > .parameter-item-wrapper > .delete-option {
 	display: block;
 }
 
 .parameter-item {
 	position: relative;
 	padding: 0 0 0 1em;
-	margin: 0.6em 0 0.5em 0.1em;
 
 	+ .parameter-item {
 		.parameter-item-wrapper {
-			padding-top: 0.5em;
 			border-top: 1px dashed #999;
+
+			.delete-option {
+				top: 14px;
+			}
 		}
 	}
 }
 
 .no-items-exist {
-	margin: 0.8em 0;
+	margin: var(--spacing-xs) 0;
 }
 
 .sort-icon {
+	display: flex;
+	flex-direction: column;
+	margin-left: 1px;
 	margin-top: .5em;
 }
 </style>

packages/editor-ui/src/components/MultipleParameter.vue

@@ -1,37 +1,37 @@
 <template>
 	<div @keydown.stop class="duplicate-parameter">
+		<n8n-input-label
+			:label="parameter.displayName"
+			:tooltipText="parameter.description"
+			:underline="true"
+			:labelHoverableOnly="true"
+			size="small"
+		>
 
-		<div class="parameter-name">
-			{{parameter.displayName}}:
-			<n8n-tooltip v-if="parameter.description" class="parameter-info" placement="top" >
-				<div slot="content" v-html="addTargetBlank(parameter.description)"></div>
-				<font-awesome-icon icon="question-circle" />
-			</n8n-tooltip>
-		</div>
-
-		<div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type">
-			<div class="delete-item clickable" v-if="!isReadOnly">
-				<font-awesome-icon icon="trash" title="Delete Item" @click="deleteItem(index)" />
-				<div v-if="sortable">
-					<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" title="Move up" @click="moveOptionUp(index)" />
-					<font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" title="Move down" @click="moveOptionDown(index)" />
+			<div v-for="(value, index) in values" :key="index" class="duplicate-parameter-item" :class="parameter.type">
+				<div class="delete-item clickable" v-if="!isReadOnly">
+					<font-awesome-icon icon="trash" title="Delete Item" @click="deleteItem(index)" />
+					<div v-if="sortable">
+						<font-awesome-icon v-if="index !== 0" icon="angle-up" class="clickable" title="Move up" @click="moveOptionUp(index)" />
+						<font-awesome-icon v-if="index !== (values.length -1)" icon="angle-down" class="clickable" title="Move down" @click="moveOptionDown(index)" />
+					</div>
+				</div>
+				<div v-if="parameter.type === 'collection'">
+					<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" @valueChanged="valueChanged" />
+				</div>
+				<div v-else>
+					<parameter-input class="duplicate-parameter-input-item" :parameter="parameter" :value="value" :displayOptions="true" :path="getPath(index)" @valueChanged="valueChanged" inputSize="small" :isReadOnly="isReadOnly" />
 				</div>
 			</div>
-			<div v-if="parameter.type === 'collection'">
-				<collection-parameter :parameter="parameter" :values="value" :nodeValues="nodeValues" :path="getPath(index)" :hideDelete="hideDelete" @valueChanged="valueChanged" />
-			</div>
-			<div v-else>
-				<parameter-input class="duplicate-parameter-input-item" :parameter="parameter" :value="value" :displayOptions="true" :path="getPath(index)" @valueChanged="valueChanged" inputSize="small" :isReadOnly="isReadOnly" />
-			</div>
-		</div>
 
-		<div class="add-item-wrapper">
-			<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
-				Currently no items exist
+			<div class="add-item-wrapper">
+				<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
+					<n8n-text size="small">Currently no items exist</n8n-text>
+				</div>
+				<n8n-button v-if="!isReadOnly" fullWidth @click="addItem()" :label="addButtonText" />
 			</div>
-			<n8n-button v-if="!isReadOnly" fullWidth @click="addItem()" :label="addButtonText" />
-		</div>
 
+		</n8n-input-label>
 	</div>
 </template>
 
@@ -48,7 +48,6 @@ import { get } from 'lodash';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 
 import mixins from 'vue-typed-mixins';
-import { addTargetBlank } from './helpers';
 
 export default mixins(genericHelpers)
 	.extend({
@@ -75,7 +74,6 @@ export default mixins(genericHelpers)
 			},
 		},
 		methods: {
-			addTargetBlank,
 			addItem () {
 				const name = this.getPath();
 				let currentValue = get(this.nodeValues, name);
@@ -134,11 +132,7 @@ export default mixins(genericHelpers)
 <style scoped lang="scss">
 
 .duplicate-parameter-item ~.add-item-wrapper {
-	margin: 1.5em 0 0em 0em;
-}
-
-.add-item-wrapper {
-	margin: 0.5em 0 0em 2em;
+	margin-top: var(--spacing-xs);
 }
 
 .delete-item {
@@ -149,23 +143,15 @@ export default mixins(genericHelpers)
 	z-index: 999;
 	color: #f56c6c;
 	width: 15px;
+	font-size: var(--font-size-2xs);
 
 	:hover {
 		color: #ff0000;
 	}
 }
 
-.duplicate-parameter {
-	margin-top: 0.5em;
-	.parameter-name {
-		border-bottom: 1px solid #999;
-	}
-}
-
 ::v-deep .duplicate-parameter-item {
 	position: relative;
-	margin-top: 0.5em;
-	padding-top: 0.5em;
 
 	.multi > .delete-item{
 		top: 0.1em;
@@ -179,12 +165,12 @@ export default mixins(genericHelpers)
 ::v-deep .duplicate-parameter-item + .duplicate-parameter-item {
 	.collection-parameter-wrapper {
 		border-top: 1px dashed #999;
-		padding-top: 0.5em;
+		margin-top: var(--spacing-xs);
 	}
 }
 
 .no-items-exist {
-	margin: 0 0 1em 0;
+	margin: var(--spacing-xs) 0;
 }
 </style>
 

packages/editor-ui/src/components/NodeCredentials.vue

@@ -1,51 +1,46 @@
 <template>
-	<div v-if="credentialTypesNodeDescriptionDisplayed.length" class="node-credentials">
-		<div class="headline">
-			Credentials
-		</div>
+	<div v-if="credentialTypesNodeDescriptionDisplayed.length" :class="$style.container">
+		<div v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed" :key="credentialTypeDescription.name">
+			<n8n-input-label
+				:label="`Credential for ${credentialTypeNames[credentialTypeDescription.name]}`"
+				:bold="false"
+				size="small"
 
-		<div v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed" :key="credentialTypeDescription.name" class="credential-data">
-			<el-row class="credential-parameter-wrapper">
-				<el-col :span="10" class="parameter-name">
-					{{credentialTypeNames[credentialTypeDescription.name]}}:
-				</el-col>
+				:set="issues = getIssues(credentialTypeDescription.name)"
+			>
+				<div v-if="isReadOnly">
+					<n8n-input disabled :value="selected && selected[credentialTypeDescription.name] && selected[credentialTypeDescription.name].name" size="small" />
+				</div>
 
-				<el-col v-if="!isReadOnly" :span="12" class="parameter-value" :class="getIssues(credentialTypeDescription.name).length?'has-issues':''">
-					<div :style="credentialInputWrapperStyle(credentialTypeDescription.name)">
-						<n8n-select :value="getSelectedId(credentialTypeDescription.name)" @change="(value) => onCredentialSelected(credentialTypeDescription.name, value)" placeholder="Select Credential" size="small">
-							<n8n-option
-								v-for="(item) in credentialOptions[credentialTypeDescription.name]"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id">
-							</n8n-option>
-							<n8n-option
-								:key="NEW_CREDENTIALS_TEXT"
-								:value="NEW_CREDENTIALS_TEXT"
-								:label="NEW_CREDENTIALS_TEXT"
-							>
-							</n8n-option>
-						</n8n-select>
-					</div>
+				<div :class="issues.length ? $style.hasIssues : $style.input" v-else >
+					<n8n-select :value="getSelectedId(credentialTypeDescription.name)" @change="(value) => onCredentialSelected(credentialTypeDescription.name, value)" placeholder="Select Credential" size="small">
+						<n8n-option
+							v-for="(item) in credentialOptions[credentialTypeDescription.name]"
+							:key="item.id"
+							:label="item.name"
+							:value="item.id">
+						</n8n-option>
+						<n8n-option
+							:key="NEW_CREDENTIALS_TEXT"
+							:value="NEW_CREDENTIALS_TEXT"
+							:label="NEW_CREDENTIALS_TEXT"
+						>
+						</n8n-option>
+					</n8n-select>
 
-					<div class="credential-issues">
+					<div :class="$style.warning" v-if="issues.length">
 						<n8n-tooltip placement="top" >
-							<div slot="content" v-html="'Issues:<br />&nbsp;&nbsp;- ' + getIssues(credentialTypeDescription.name).join('<br />&nbsp;&nbsp;- ')"></div>
+							<div slot="content" v-html="'Issues:<br />&nbsp;&nbsp;- ' + issues.join('<br />&nbsp;&nbsp;- ')"></div>
 							<font-awesome-icon icon="exclamation-triangle" />
 						</n8n-tooltip>
 					</div>
-				</el-col>
-				<el-col v-if="!isReadOnly" :span="2" class="parameter-value credential-action">
-					<font-awesome-icon v-if="isCredentialExisting(credentialTypeDescription.name)" icon="pen" @click="editCredential(credentialTypeDescription.name)" class="update-credentials clickable" title="Update Credentials" />
-				</el-col>
 
-				<el-col v-if="isReadOnly" :span="14" class="readonly-container" >
-					<n8n-input disabled :value="selected && selected[credentialTypeDescription.name] && selected[credentialTypeDescription.name].name" size="small" />
-				</el-col>
-
-			</el-row>
+					<div :class="$style.edit" v-if="selected[credentialTypeDescription.name] && isCredentialExisting(credentialTypeDescription.name)">
+						<font-awesome-icon icon="pen" @click="editCredential(credentialTypeDescription.name)" class="clickable" title="Update Credentials" />
+					</div>
+				</div>
+			</n8n-input-label>
 		</div>
-
 	</div>
 </template>
 
@@ -285,62 +280,39 @@ export default mixins(
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" module>
+.container {
+	margin: var(--spacing-xs) 0;
 
-.node-credentials {
-	padding-bottom: 1em;
-	margin: 0.5em;
-	border-bottom: 1px solid #ccc;
-
-	.credential-issues {
-		display: none;
-		width: 20px;
-		text-align: right;
-		float: right;
-		color: #ff8080;
-		font-size: 1.2em;
-		margin-top: 3px;
-	}
-
-	.credential-data + .credential-data {
-		margin-top: 1em;
-	}
-
-	.has-issues {
-		.credential-issues {
-			display: inline-block;
-		}
-	}
-
-	.headline {
-		font-weight: bold;
-		margin-bottom: 0.7em;
-	}
-
-	.credential-parameter-wrapper {
-		display: flex;
-		align-items: center;
-	}
-
-	.parameter-name {
-		font-weight: 400;
-	}
-
-	.parameter-value {
-		display: flex;
-		align-items: center;
-	}
-
-	.credential-action {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		color: var(--color-text-base);
-	}
-
-	.readonly-container {
-		padding-right: 0.5em;
+	> * {
+		margin-bottom: var(--spacing-xs);
 	}
 }
 
+.warning {
+	min-width: 20px;
+	margin-left: 5px;
+	color: #ff8080;
+	font-size: var(--font-size-s);
+}
+
+.edit {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: var(--color-text-base);
+	min-width: 20px;
+	margin-left: 5px;
+	font-size: var(--font-size-s);
+}
+
+.input {
+	display: flex;
+	align-items: center;
+}
+
+.hasIssues {
+	composes: input;
+	--input-border-color: var(--color-danger);
+}
 </style>

packages/editor-ui/src/components/NodeSettings.vue

@@ -10,10 +10,9 @@
 					</n8n-tooltip>
 				</a>
 			</span>
-			<span v-else>No node active</span>
 		</div>
 		<div class="node-is-not-valid" v-if="node && !nodeValid">
-			The node is not valid as its type "{{node.type}}" is unknown.
+			<n8n-text>The node is not valid as its type "{{node.type}}" is unknown.</n8n-text>
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
 			<el-tabs stretch @tab-click="handleTabClick">
@@ -21,8 +20,8 @@
 					<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
 					<node-webhooks :node="node" :nodeType="nodeType" />
 					<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
-					<div v-if="parametersNoneSetting.length === 0">
-						This node does not have any parameters.
+					<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
+						<n8n-text>This node does not have any parameters.</n8n-text>
 					</div>
 				</el-tab-pane>
 				<el-tab-pane label="Settings">
@@ -521,7 +520,10 @@ export default mixins(
 	overflow: hidden;
 	min-width: 350px;
 	max-width: 350px;
-	font-size: var(--font-size-s);
+
+	.no-parameters {
+		margin-top: var(--spacing-xs);
+	}
 
 	.header-side-menu {
 		padding: 1em 0 1em 1.8em;
@@ -547,10 +549,10 @@ export default mixins(
 
 	.node-parameters-wrapper {
 		height: 100%;
-		font-size: .9em;
 
 		.el-tabs__header {
 			background-color: #fff5f2;
+			margin-bottom: 0;
 		}
 
 		.el-tabs {
@@ -561,13 +563,13 @@ export default mixins(
 				padding-bottom: 180px;
 
 				.el-tab-pane {
-					margin: 0 1em;
+					margin: 0 var(--spacing-s);
 				}
 			}
 		}
 
 		.el-tabs__nav {
-			padding-bottom: 1em;
+			padding-bottom: var(--spacing-xs);
 		}
 
 		.add-option {
@@ -621,14 +623,6 @@ export default mixins(
 	padding: 0 1em;
 }
 
-.parameter-name {
-	line-height: 1.5;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	align-self: center;
-}
-
 .color-reset-button-wrapper {
 	position: relative;
 

packages/editor-ui/src/components/NodeWebhooks.vue

@@ -128,14 +128,14 @@ export default mixins(
 <style scoped lang="scss">
 
 .webhoooks {
-	padding: 0.7em;
-	font-size: 0.9em;
-	margin: 0.5em 0;
+	padding-bottom: var(--spacing-xs);
+	margin: var(--spacing-xs) 0;
 	border-bottom: 1px solid #ccc;
 
 	.headline {
 		color: $--color-primary;
 		font-weight: 600;
+		font-size: var(--font-size-2xs);
 	}
 }
 
@@ -154,8 +154,8 @@ export default mixins(
 	margin-left: 5px;
 	text-align: center;
 	border-radius: 2px;
-	font-size: 0.8em;
-	font-weight: 600;
+	font-size: var(--font-size-2xs);
+	font-weight: var(--font-weight-bold);
 	color: #fff;
 }
 
@@ -175,11 +175,11 @@ export default mixins(
 .url-field {
 	display: inline-block;
 	width: calc(100% - 60px);
-	margin-left: 50px;
+	margin-left: 55px;
 }
 
 .url-selection {
-	margin-top: 1em;
+	margin-top: var(--spacing-xs);
 }
 
 .minimize-button {
@@ -205,12 +205,11 @@ export default mixins(
 	position: relative;
 	top: 0;
 	width: 100%;
-	font-size: 0.9em;
+	font-size: var(--font-size-2xs);
 	white-space: normal;
 	overflow: visible;
 	text-overflow: initial;
 	color: #404040;
-	padding: 0.5em;
 	text-align: left;
 	direction: ltr;
 	word-break: break-all;
@@ -219,9 +218,8 @@ export default mixins(
 .webhook-wrapper {
 	line-height: 1.5;
 	position: relative;
-	margin: 1em 0 0.5em 0;
+	margin-top: var(--spacing-xs);
 	background-color: #fff;
-	padding: 2px 0;
 	border-radius: 3px;
 }
 </style>

packages/editor-ui/src/components/ParameterInput.vue

@@ -16,7 +16,7 @@
 			<code-edit :dialogVisible="codeEditDialogVisible" :value="value" :parameter="parameter" @closeDialog="closeCodeEditDialog" @valueChanged="expressionUpdated"></code-edit>
 			<text-edit :dialogVisible="textEditDialogVisible" :value="value" :parameter="parameter" @closeDialog="closeTextEditDialog" @valueChanged="expressionUpdated"></text-edit>
 
-			<div v-if="isEditor === true" class="clickable" @click="displayEditDialog()">
+			<div v-if="isEditor === true" class="code-edit clickable" @click="displayEditDialog()">
 				<prism-editor v-if="!codeEditDialogVisible" :lineNumbers="true" :readonly="true" :code="displayValue" language="js"></prism-editor>
 			</div>
 
@@ -515,8 +515,9 @@ export default mixins(
 				const classes = [];
 				const rows = this.getArgument('rows');
 				const isTextarea = this.parameter.type === 'string' && rows !== undefined;
+				const isSwitch = this.parameter.type === 'boolean' && !this.isValueExpression;
 
-				if (!isTextarea) {
+				if (!isTextarea && !isSwitch) {
 					classes.push('parameter-value-container');
 				}
 				if (this.isValueExpression) {
@@ -597,7 +598,7 @@ export default mixins(
 						parameter_field_type: this.parameter.type,
 						new_expression: !this.isValueExpression,
 						workflow_id: this.$store.getters.workflowId,
-					});	
+					});
 				}
 			},
 			closeTextEditDialog () {
@@ -664,6 +665,8 @@ export default mixins(
 						(this.$refs.inputField.$el.querySelector(this.getStringInputType === 'textarea' ? 'textarea' : 'input') as HTMLInputElement).focus();
 					}
 				});
+
+				this.$emit('focus');
 			},
 			rgbaToHex (value: string): string | null {
 				// Convert rgba to hex from: https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
@@ -775,8 +778,12 @@ export default mixins(
 
 <style scoped lang="scss">
 
+.code-edit {
+	font-size: var(--font-size-xs);
+}
+
 .switch-input {
-	margin: 5px 0;
+	margin: 2px 0;
 }
 
 .parameter-value-container {
@@ -804,7 +811,7 @@ export default mixins(
 	text-align: right;
 	float: right;
 	color: #ff8080;
-	font-size: 1.2em;
+	font-size: var(--font-size-s);
 }
 
 ::v-deep .color-input {

packages/editor-ui/src/components/ParameterInputExpanded.vue

@@ -3,6 +3,7 @@
 		:label="parameter.displayName"
 		:tooltipText="parameter.description"
 		:required="parameter.required"
+		:showTooltip="focused"
 	>
 		<parameter-input
 			:parameter="parameter"
@@ -12,7 +13,7 @@
 			:displayOptions="true"
 			:documentationUrl="documentationUrl"
 			:errorHighlight="showRequiredErrors"
-
+			@focus="onFocus"
 			@blur="onBlur"
 			@textInput="valueChanged"
 			@valueChanged="valueChanged"
@@ -48,7 +49,8 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			blurred: false,
+			focused: false,
+			blurredEver: false,
 		};
 	},
 	computed: {
@@ -57,7 +59,7 @@ export default Vue.extend({
 				return false;
 			}
 
-			if (this.blurred || this.showValidationWarnings) {
+			if (this.blurredEver || this.showValidationWarnings) {
 				if (this.$props.parameter.type === 'string') {
 					return !this.value;
 				}
@@ -71,8 +73,12 @@ export default Vue.extend({
 		},
 	},
 	methods: {
+		onFocus() {
+			this.focused = true;
+		},
 		onBlur() {
-			this.blurred = true;
+			this.blurredEver = true;
+			this.focused = false;
 		},
 		valueChanged(parameterData: IUpdateInformation) {
 			this.$emit('change', parameterData);

packages/editor-ui/src/components/ParameterInputFull.vue

@@ -1,16 +1,22 @@
 <template>
-	<el-row class="parameter-wrapper" :class="{'multi-line': isMultiLineParameter}">
-		<el-col :span="isMultiLineParameter ? 24 : 10" class="parameter-name" :class="{'multi-line': isMultiLineParameter}">
-			<span class="title" :title="parameter.displayName">{{parameter.displayName}}</span>:
-			<n8n-tooltip class="parameter-info" placement="top" v-if="parameter.description" >
-				<div slot="content" v-html="addTargetBlank(parameter.description)"></div>
-				<font-awesome-icon icon="question-circle" />
-			</n8n-tooltip>
-		</el-col>
-		<el-col :span="isMultiLineParameter ? 24 : 14" class="parameter-value">
-			<parameter-input :parameter="parameter" :value="value" :displayOptions="displayOptions" :path="path" :isReadOnly="isReadOnly" @valueChanged="valueChanged" inputSize="small" />
-		</el-col>
-	</el-row>
+	<n8n-input-label
+		:label="parameter.displayName"
+		:tooltipText="parameter.description"
+		:showTooltip="focused"
+		:bold="false"
+		size="small"
+	>
+		<parameter-input
+			:parameter="parameter"
+			:value="value"
+			:displayOptions="displayOptions"
+			:path="path"
+			:isReadOnly="isReadOnly"
+			@valueChanged="valueChanged"
+			@focus="focused = true"
+			@blur="focused = false"
+			inputSize="small" />
+	</n8n-input-label>
 </template>
 
 <script lang="ts">
@@ -21,7 +27,6 @@ import {
 } from '@/Interface';
 
 import ParameterInput from '@/components/ParameterInput.vue';
-import { addTargetBlank } from './helpers';
 
 export default Vue
 	.extend({
@@ -29,21 +34,10 @@ export default Vue
 		components: {
 			ParameterInput,
 		},
-		computed: {
-			isMultiLineParameter () {
-				if (this.level > 4) {
-					return true;
-				}
-				const rows = this.getArgument('rows');
-				if (rows !== undefined && rows > 1) {
-					return true;
-				}
-
-				return false;
-			},
-			level (): number {
-				return this.path.split('.').length;
-			},
+		data() {
+			return {
+				focused: false,
+			};
 		},
 		props: [
 			'displayOptions',
@@ -53,7 +47,6 @@ export default Vue
 			'value',
 		],
 		methods: {
-			addTargetBlank,
 			getArgument (argumentName: string): string | number | boolean | undefined {
 				if (this.parameter.typeOptions === undefined) {
 					return undefined;
@@ -71,46 +64,3 @@ export default Vue
 		},
 	});
 </script>
-
-<style lang="scss">
-
-.parameter-wrapper {
-	display: flex;
-	align-items: center;
-
-	&.multi-line {
-		flex-direction: column;
-	}
-
-	.option {
-		margin: 1em;
-	}
-
-	.parameter-info {
-		background-color: #ffffffaa;
-		display: none;
-		position: absolute;
-		right: 2px;
-		top: 1px;
-	}
-
-	.parameter-name {
-		position: relative;
-
-		&:hover {
-			.parameter-info {
-				display: inline;
-			}
-		}
-
-		&.multi-line {
-			line-height: 1.5em;
-		}
-	}
-
-	.title {
-		font-weight: 400;
-	}
-}
-
-</style>

packages/editor-ui/src/components/ParameterInputList.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="paramter-input-list-wrapper">
-		<div v-for="parameter in filteredParameters" :key="parameter.name">
+		<div v-for="parameter in filteredParameters" :key="parameter.name" :class="{indent}">
 			<div
 				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
 				class="parameter-item"
@@ -14,28 +14,31 @@
 				/>
 			</div>
 
-			<div v-else-if="parameter.type === 'notice'" v-html="parameter.displayName" class="parameter-item parameter-notice"></div>
+			<div v-else-if="parameter.type === 'notice'" class="parameter-item parameter-notice">
+				<n8n-text size="small">
+					<span v-html="parameter.displayName"></span>
+				</n8n-text>
+			</div>
 
 			<div
 				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
 				class="multi-parameter"
 			>
-				<div class="parameter-name" :title="parameter.displayName">
-					<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
-						<font-awesome-icon
-							icon="trash"
-							class="reset-icon clickable"
-							title="Parameter Options"
-							@click="deleteOption(parameter.name)"
-						/>
-					</div>
-					{{parameter.displayName}}:
-					<n8n-tooltip placement="top" class="parameter-info" v-if="parameter.description" >
-						<div slot="content" v-html="addTargetBlank(parameter.description)"></div>
-						<font-awesome-icon icon="question-circle"/>
-					</n8n-tooltip>
+				<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
+					<font-awesome-icon
+						icon="trash"
+						class="reset-icon clickable"
+						title="Parameter Options"
+						@click="deleteOption(parameter.name)"
+					/>
 				</div>
-				<div>
+				<n8n-input-label
+					:label="parameter.displayName"
+					:tooltipText="parameter.description"
+					size="small"
+					:underline="true"
+					:labelHoverableOnly="true"
+				>
 					<collection-parameter
 						v-if="parameter.type === 'collection'"
 						:parameter="parameter"
@@ -52,7 +55,7 @@
 						:path="getPath(parameter.name)"
 						@valueChanged="valueChanged"
 					/>
-				</div>
+				</n8n-input-label>
 			</div>
 
 			<div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
@@ -93,8 +96,6 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 
-import { addTargetBlank } from './helpers';
-
 import { get, set } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
@@ -114,6 +115,7 @@ export default mixins(
 			'parameters', // INodeProperties
 			'path', // string
 			'hideDelete', // boolean
+			'indent',
 		],
 		computed: {
 			filteredParameters (): INodeProperties[] {
@@ -124,7 +126,6 @@ export default mixins(
 			},
 		},
 		methods: {
-			addTargetBlank,
 			multipleValues (parameter: INodeProperties): boolean {
 				if (this.getArgument('multipleValues', parameter) === true) {
 					return true;
@@ -260,50 +261,42 @@ export default mixins(
 		position: absolute;
 		z-index: 999;
 		color: #f56c6c;
+		font-size: var(--font-size-2xs);
 
 		&:hover {
 			color: #ff0000;
 		}
 	}
 
+	.indent > div {
+		padding-left: var(--spacing-s);
+	}
+
 	.multi-parameter {
 		position: relative;
-		margin: 0.5em 0;
-		padding: 0.5em 0;
+		margin: var(--spacing-xs) 0;
 
-		>.parameter-name {
-			font-weight: 600;
-			border-bottom: 1px solid #999;
-
-			&:hover {
-				.parameter-info {
-					display: inline;
-				}
-			}
-
-			.delete-option {
-				top: 0;
-				left: -0.9em;
-			}
-
-			.parameter-info {
-				display: none;
-			}
+		.delete-option {
+			top: 0;
+			left: 0;
+		}
 
+		.parameter-info {
+			display: none;
 		}
 	}
 
 	.parameter-item {
 		position: relative;
-		margin: 8px 0;
+		margin: var(--spacing-xs) 0;
 
 		>.delete-option {
-			left: -0.9em;
-			top: 0.6em;
+			top: var(--spacing-5xs);
+			left: 0;
 		}
 	}
 	.parameter-item:hover > .delete-option,
-	.parameter-name:hover > .delete-option {
+	.multi-parameter:hover > .delete-option {
 		display: block;
 	}
 
@@ -311,9 +304,7 @@ export default mixins(
 		background-color: #fff5d3;
 		color: $--custom-font-black;
 		margin: 0.3em 0;
-		padding: 0.8em;
-		line-height: 1.5;
-		word-break: normal;
+		padding: 0.7em;
 
 		a {
 			font-weight: var(--font-weight-bold);

packages/editor-ui/src/components/RunData.vue

@@ -17,31 +17,31 @@
 
 		<div class="header">
 			<div class="title-text">
-				<strong v-if="dataCount < maxDisplayItems">
+				<n8n-text :bold="true" v-if="dataCount < maxDisplayItems">
 					Items: {{ dataCount }}
-				</strong>
+				</n8n-text>
 				<div v-else class="title-text">
-					<strong>Items:</strong>
+					<n8n-text :bold="true">Items:</n8n-text>
 					<span class="opts">
 						<n8n-select size="mini" v-model="maxDisplayItems" @click.stop>
 							<n8n-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" />
 						</n8n-select>
 					</span>/
-					<strong>{{ dataCount }}</strong>
+					<n8n-text :bold="true">{{ dataCount }}</n8n-text>
 				</div>
 				<n8n-tooltip
 					v-if="runMetadata"
 					placement="right"
 				>
 					<div slot="content">
-						<strong>Start Time:</strong> {{runMetadata.startTime}}<br/>
-						<strong>Execution Time:</strong> {{runMetadata.executionTime}} ms
+						<n8n-text :bold="true" size="small">Start Time:</n8n-text> {{runMetadata.startTime}}<br/>
+						<n8n-text :bold="true" size="small">Execution Time:</n8n-text> {{runMetadata.executionTime}} ms
 					</div>
 					<font-awesome-icon icon="info-circle" class="primary-color" />
 				</n8n-tooltip>
-				<span v-if="maxOutputIndex > 0">
+				<n8n-text :bold="true" v-if="maxOutputIndex > 0">
 					| Output:
-				</span>
+				</n8n-text>
 				<span class="opts" v-if="maxOutputIndex > 0" >
 					<n8n-select size="mini" v-model="outputIndex" @click.stop>
 						<n8n-option v-for="option in (maxOutputIndex + 1)" :label="getOutputName(option-1)" :value="option -1" :key="option">
@@ -49,9 +49,9 @@
 					</n8n-select>
 				</span>
 
-				<span v-if="maxRunIndex > 0">
+				<n8n-text :bold="true" v-if="maxRunIndex > 0">
 					| Data of Execution:
-				</span>
+				</n8n-text>
 				<span class="opts">
 					<n8n-select v-if="maxRunIndex > 0" size="mini" v-model="runIndex" @click.stop>
 						<n8n-option v-for="option in (maxRunIndex + 1)" :label="option + '/' + (maxRunIndex+1)" :value="option-1" :key="option">
@@ -186,7 +186,7 @@
 			</span>
 			<div v-else class="message">
 				<div>
-					<strong>No data</strong><br />
+					<n8n-text :bold="true">No data</n8n-text ><br />
 					<br />
 					Data returned by this node will display here<br />
 				</div>
@@ -659,6 +659,7 @@ export default mixins(
 		overflow-y: auto;
 		line-height: 1.5;
 		word-break: normal;
+		font-size: var(--font-size-s);
 
 		.binary-data-row {
 			display: inline-flex;

packages/editor-ui/src/components/TextEdit.vue

@@ -2,13 +2,12 @@
 	<div v-if="dialogVisible">
 		<el-dialog :visible="dialogVisible" append-to-body width="80%" :title="`Edit ${parameter.displayName}`" :before-close="closeDialog">
 
-			<div class="text-editor-wrapper ignore-key-press">
-				<div class="editor-description">
-					{{parameter.displayName}}:
-				</div>
-				<div class="text-editor" @keydown.stop @keydown.esc="closeDialog()">
-					<n8n-input v-model="tempValue" type="textarea" ref="inputField" :value="value" :placeholder="parameter.placeholder" @change="valueChanged" @keydown.stop="noOp" :rows="15" />
-				</div>
+			<div class="ignore-key-press">
+				<n8n-input-label :label="parameter.displayName">
+					<div @keydown.stop @keydown.esc="closeDialog()">
+						<n8n-input v-model="tempValue" type="textarea" ref="inputField" :value="value" :placeholder="parameter.placeholder" @change="valueChanged" @keydown.stop="noOp" :rows="15" />
+					</div>
+				</n8n-input-label>
 			</div>
 
 		</el-dialog>
@@ -60,10 +59,3 @@ export default Vue.extend({
 	},
 });
 </script>
-
-<style scoped>
-.editor-description {
-	font-weight: bold;
-	padding: 0 0 0.5em 0.2em;;
-}
-</style>

packages/editor-ui/src/components/WorkflowSettings.vue

@@ -516,6 +516,7 @@ export default mixins(
 
 <style scoped lang="scss">
 .workflow-settings {
+	font-size: var(--font-size-s);
 	.el-row {
 		padding: 0.25em 0;
 	}

packages/editor-ui/src/components/helpers.ts

@@ -2,12 +2,6 @@ import dateformat from 'dateformat';
 
 const KEYWORDS_TO_FILTER = ['API', 'OAuth1', 'OAuth2'];
 
-export function addTargetBlank(html: string) {
-	return html.includes('href=')
-		? html.replace(/href=/g, 'target="_blank" href=')
-		: html;
-}
-
 export function convertToDisplayDate (epochTime: number) {
 	return dateformat(epochTime, 'yyyy-mm-dd HH:MM:ss');
 }

packages/nodes-base/credentials/MongoDb.credentials.ts

@@ -38,7 +38,7 @@ export class MongoDb implements ICredentialType {
 			default: '',
 			placeholder: 'mongodb://<USERNAME>:<PASSWORD>@localhost:27017/?authSource=admin&readPreference=primary&appname=n8n&ssl=false',
 			required: false,
-			description: `If provided, the value here will be used as a MongoDB connection string,<br />
+			description: `If provided, the value here will be used as a MongoDB connection string,
 						  and the MongoDB credentials will be ignored`,
 		},
 		{

packages/nodes-base/credentials/SalesforceJwtApi.credentials.ts

@@ -48,7 +48,7 @@ export class SalesforceJwtApi implements ICredentialType {
 			},
 			default: '',
 			required: true,
-			description: 'Use the multiline editor.  Make sure it is in standard PEM key format:<br />-----BEGIN PRIVATE KEY-----<br />KEY DATA GOES HERE<br />-----END PRIVATE KEY-----',
+			description: 'Use the multiline editor. Make sure it is in standard PEM key format:<br />-----BEGIN PRIVATE KEY-----<br />KEY DATA GOES HERE<br />-----END PRIVATE KEY-----',
 		},
 	];
 }

packages/nodes-base/nodes/AcuityScheduling/AcuitySchedulingTrigger.node.ts

@@ -117,7 +117,7 @@ export class AcuitySchedulingTrigger implements INodeType {
 				name: 'resolveData',
 				type: 'boolean',
 				default: true,
-				description: 'By default does the webhook-data only contain the ID of the object.<br />If this option gets activated it will resolve the data automatically.',
+				description: 'By default does the webhook-data only contain the ID of the object.<br />If this option gets activated, it will resolve the data automatically.',
 			},
 		],
 	};

packages/nodes-base/nodes/Airtable/Airtable.node.ts

@@ -256,7 +256,7 @@ export class Airtable implements INodeType {
 						type: 'string',
 						default: '',
 						placeholder: 'NOT({Name} = \'\')',
-						description: 'A formula used to filter records. The formula will be evaluated for each<br />record, and if the result is not 0, false, "", NaN, [], or #Error!<br />the record will be included in the response.',
+						description: 'A formula used to filter records. The formula will be evaluated for each record, and if the result is not 0, false, "", NaN, [], or #Error! the record will be included in the response.',
 					},
 					{
 						displayName: 'Sort',
@@ -309,7 +309,7 @@ export class Airtable implements INodeType {
 						type: 'string',
 						default: '',
 						placeholder: 'All Stories',
-						description: 'The name or ID of a view in the Stories table. If set,<br />only the records in that view will be returned. The records<br />will be sorted according to the order of the view.',
+						description: 'The name or ID of a view in the Stories table. If set, only the records in that view will be returned. The records will be sorted according to the order of the view.',
 					},
 				],
 			},
@@ -741,4 +741,4 @@ export class Airtable implements INodeType {
 
 		return [this.helpers.returnJsonArray(returnData)];
 	}
-}
+}

packages/nodes-base/nodes/ApiTemplateIo/ApiTemplateIo.node.ts

@@ -180,7 +180,7 @@ export class ApiTemplateIo implements INodeType {
 						],
 					},
 				},
-				description: 'Name of the binary property to which to<br />write the data of the read file.',
+				description: 'Name of the binary property to which to write the data of the read file.',
 			},
 			{
 				displayName: 'Binary Property',

packages/nodes-base/nodes/Asana/Asana.node.ts

@@ -599,7 +599,7 @@ export class Asana implements INodeType {
 							loadOptionsMethod: 'getUsers',
 						},
 						default: '',
-						description: 'The assignee to filter tasks on.  Note: If you specify assignee, you must also specify the workspace to filter on.',
+						description: 'The assignee to filter tasks on. Note: If you specify assignee, you must also specify the workspace to filter on.',
 					},
 					{
 						displayName: 'Fields',
@@ -650,7 +650,7 @@ export class Asana implements INodeType {
 							loadOptionsMethod: 'getWorkspaces',
 						},
 						default: '',
-						description: 'The workspace to filter tasks on.  Note: If you specify workspace, you must also specify the assignee to filter on.',
+						description: 'The workspace to filter tasks on. Note: If you specify workspace, you must also specify the assignee to filter on.',
 					},
 					{
 						displayName: 'Completed Since',
@@ -1438,7 +1438,7 @@ export class Asana implements INodeType {
 						],
 					},
 				},
-				description: 'An identifier for the user to get data of. Can be one of an<br />email address,the globally unique identifier for the user,<br />or the keyword me to indicate the current user making the request.',
+				description: 'An identifier for the user to get data of. Can be one of an email address,the globally unique identifier for the user, or the keyword me to indicate the current user making the request.',
 			},
 
 			// ----------------------------------

packages/nodes-base/nodes/Aws/S3/FileDescription.ts

@@ -450,7 +450,7 @@ export const fileFields = [
 
 		},
 		placeholder: '',
-		description: 'Name of the binary property which contains<br />the data for the file to be uploaded.',
+		description: 'Name of the binary property which contains the data for the file to be uploaded.',
 	},
 	{
 		displayName: 'Additional Fields',
@@ -762,7 +762,7 @@ export const fileFields = [
 				],
 			},
 		},
-		description: 'Name of the binary property to which to<br />write the data of the read file.',
+		description: 'Name of the binary property to which to write the data of the read file.',
 	},
 /* -------------------------------------------------------------------------- */
 /*                                file:delete                                 */

packages/nodes-base/nodes/Box/FileDescription.ts

@@ -194,7 +194,7 @@ export const fileFields = [
 				],
 			},
 		},
-		description: 'Name of the binary property to which to<br />write the data of the read file.',
+		description: 'Name of the binary property to which to write the data of the read file.',
 	},
 
 	/* -------------------------------------------------------------------------- */
@@ -818,7 +818,7 @@ export const fileFields = [
 			},
 
 		},
-		description: 'Name of the binary property which contains<br />the data for the file.',
+		description: 'Name of the binary property which contains the data for the file.',
 	},
 	{
 		displayName: 'Parent ID',

packages/nodes-base/nodes/Brandfetch/Brandfetch.node.ts

@@ -95,7 +95,7 @@ export class Brandfetch implements INodeType {
 						],
 					},
 				},
-				description: 'Name of the binary property to which to<br />write the data of the read file.',
+				description: 'Name of the binary property to which to write the data of the read file.',
 			},
 			{
 				displayName: 'Image Type',

packages/nodes-base/nodes/Cisco/Webex/CiscoWebexTrigger.node.ts

@@ -107,7 +107,7 @@ export class CiscoWebexTrigger implements INodeType {
 					},
 				},
 				default: true,
-				description: 'By default the response only contain a reference to the data the user inputed<br />If this option gets activated it will resolve the data automatically.',
+				description: 'By default the response only contain a reference to the data the user inputed. If this option gets activated, it will resolve the data automatically.',
 			},
 			{
 				displayName: 'Filters',

packages/nodes-base/nodes/Clearbit/Clearbit.node.ts

@@ -58,7 +58,7 @@ export class Clearbit implements INodeType {
 					{
 						name: 'Person',
 						value: 'person',
-						description: `The Person API lets you retrieve social information associated with an email address,<br/>
+						description: `The Person API lets you retrieve social information associated with an email address,
 						such as a person’s name, location and Twitter handle.`,
 					},
 				],

packages/nodes-base/nodes/ClickUp/TaskDescription.ts

@@ -1063,8 +1063,8 @@ export const taskFields = [
 			},
 		},
 		default: false,
-		description: `The value is JSON and will be parsed as such. Is needed<br />
-		if for example needed for labels which expects the value<br />
+		description: `The value is JSON and will be parsed as such. Is needed
+		if for example needed for labels which expects the value
 		to be an array.`,
 	},
 	{

packages/nodes-base/nodes/Coda/TableDescription.ts

@@ -133,8 +133,8 @@ export const tableFields = [
 				name: 'keyColumns',
 				type: 'string',
 				default: '',
-				description: `Optional column IDs, URLs, or names (fragile and discouraged)<br />,
-				specifying columns to be used as upsert keys. If more than one separate by ,`,
+				description: `Optional column IDs, URLs, or names (fragile and discouraged),
+				specifying columns to be used as upsert keys. If more than one separate by a comma (,)`,
 			},
 		],
 	},
@@ -202,10 +202,10 @@ export const tableFields = [
 				],
 			},
 		},
-		description: `ID or name of the row. Names are discouraged because<br />
-		they're easily prone to being changed by users. If you're<br />
-		using a name, be sure to URI-encode it. If there are<br />
-		multiple rows with the same value in the identifying column,<br />
+		description: `ID or name of the row. Names are discouraged because
+		they're easily prone to being changed by users. If you're
+		using a name, be sure to URI-encode it. If there are
+		multiple rows with the same value in the identifying column,
 		an arbitrary one will be selected`,
 	},
 	{
@@ -413,7 +413,7 @@ export const tableFields = [
 				type: 'boolean',
 				default: false,
 				description: `Use column names instead of column IDs in the returned output.</br>
-				This is generally discouraged as it is fragile. If columns<br />
+				This is generally discouraged as it is fragile. If columns
 				are renamed, code using original names may throw errors.`,
 			},
 			{
@@ -576,10 +576,10 @@ export const tableFields = [
 				],
 			},
 		},
-		description: `ID or name of the row. Names are discouraged because<br />
-		they're easily prone to being changed by users. If you're<br />
-		using a name, be sure to URI-encode it. If there are multiple<br />
-		rows with the same value in the identifying column, an arbitrary<br />
+		description: `ID or name of the row. Names are discouraged because
+		they're easily prone to being changed by users. If you're
+		using a name, be sure to URI-encode it. If there are multiple
+		rows with the same value in the identifying column, an arbitrary
 		one will be selected`,
 	},
 	{

packages/nodes-base/nodes/Compression.node.ts

@@ -96,7 +96,7 @@ export class Compression implements INodeType {
 
 				},
 				placeholder: '',
-				description: 'Name of the binary property which contains<br />the data for the file(s) to be compress/decompress. Multiple can be used separated by ,',
+				description: 'Name of the binary property which contains the data for the file(s) to be compress/decompress. Multiple can be used separated by a comma (,)',
 			},
 			{
 				displayName: 'Output Format',
@@ -159,7 +159,7 @@ export class Compression implements INodeType {
 					},
 				},
 				placeholder: '',
-				description: 'Name of the binary property to which to<br />write the data of the compressed files.',
+				description: 'Name of the binary property to which to write the data of the compressed files.',
 			},
 			{
 				displayName: 'Output Prefix',

packages/nodes-base/nodes/Cortex/AnalyzerDescriptions.ts

@@ -129,7 +129,7 @@ export const analyzerFields: INodeProperties[] = [
 				],
 			},
 		},
-		description: 'Name of the binary property to which to<br />write the data of the read file.',
+		description: 'Name of the binary property to which to write the data of the read file.',
 	},
 	{
 		displayName: 'TLP',

packages/nodes-base/nodes/Demio/EventDescription.ts

@@ -279,7 +279,7 @@ export const eventFields = [
 								name: 'fieldId',
 								type: 'string',
 								default: '',
-								description: 'Each custom field\'s unique identifier<br /> can be found within the Event\'s Registration block in the Customize tab.',
+								description: 'Each custom field\'s unique identifier can be found within the Event\'s Registration block in the Customize tab.',
 							},
 							{
 								displayName: 'Value',
@@ -297,7 +297,7 @@ export const eventFields = [
 				name: 'ref_url',
 				type: 'string',
 				default: '',
-				description: 'Event Registration page URL. It can be useful when you<br /> do not know Event ID, but have Event link.',
+				description: 'Event Registration page URL. It can be useful when you do not know Event ID, but have Event link.',
 			},
 			{
 				displayName: 'GDPR',

packages/nodes-base/nodes/Disqus/Disqus.node.ts

@@ -624,7 +624,7 @@ export class Disqus implements INodeType {
 						name: 'threadId',
 						type: 'string',
 						default: '',
-						description: 'Looks up a thread by ID. You may pass us the "ident"<br />query type instead of an ID by including "forum". You may<br />pass us the "link" query type to filter by URL. You must pass<br />the "forum" if you do not have the Pro API Access addon.',
+						description: 'Looks up a thread by ID. You may pass us the "ident" query type instead of an ID by including "forum". You may pass us the "link" query type to filter by URL. You must pass the "forum" if you do not have the Pro API Access addon.',
 					},
 				],
 			},

packages/nodes-base/nodes/Dropbox/Dropbox.node.ts

@@ -361,7 +361,7 @@ export class Dropbox implements INodeType {
 						],
 					},
 				},
-				description: 'Name of the binary property to which to<br />write the data of the read file.',
+				description: 'Name of the binary property to which to write the data of the read file.',
 			},
 
 			// ----------------------------------
@@ -446,7 +446,7 @@ export class Dropbox implements INodeType {
 
 				},
 				placeholder: '',
-				description: 'Name of the binary property which contains<br />the data for the file to be uploaded.',
+				description: 'Name of the binary property which contains the data for the file to be uploaded.',
 			},
 
 			// ----------------------------------

packages/nodes-base/nodes/EditImage.node.ts

@@ -363,7 +363,7 @@ const nodeOperationOptions: INodeProperties[] = [
 				],
 			},
 		},
-		description: 'Max amount of characters in a line before a<br />line-break should get added.',
+		description: 'Max amount of characters in a line before a line-break should get added.',
 	},
 
 	// ----------------------------------
@@ -470,7 +470,7 @@ const nodeOperationOptions: INodeProperties[] = [
 				],
 			},
 		},
-		description: 'The name of the binary property which contains the data of the image to<br />composite on top of image which is found in Property Name.',
+		description: 'The name of the binary property which contains the data of the image to composite on top of image which is found in Property Name.',
 	},
 	{
 		displayName: 'Position X',

packages/nodes-base/nodes/Egoi/Egoi.node.ts

@@ -154,7 +154,7 @@ export class Egoi implements INodeType {
 					},
 				},
 				default: true,
-				description: 'By default the response just includes the contact id. If this option gets activated it<br />will resolve the data automatically.',
+				description: 'By default the response just includes the contact id. If this option gets activated, it will resolve the data automatically.',
 			},
 			{
 				displayName: 'Additional Fields',

packages/nodes-base/nodes/EmailReadImap.node.ts

@@ -70,7 +70,7 @@ export class EmailReadImap implements INodeType {
 					},
 				],
 				default: 'read',
-				description: 'What to do after the email has been received. If "nothing" gets<br />selected it will be processed multiple times.',
+				description: 'What to do after the email has been received. If "nothing" gets selected it will be processed multiple times.',
 			},
 			{
 				displayName: 'Download Attachments',
@@ -122,7 +122,7 @@ export class EmailReadImap implements INodeType {
 						],
 					},
 				},
-				description: 'Prefix for name of the binary property to which to<br />write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
+				description: 'Prefix for name of the binary property to which to write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
 			},
 			{
 				displayName: 'Property Prefix Name',
@@ -139,7 +139,7 @@ export class EmailReadImap implements INodeType {
 						],
 					},
 				},
-				description: 'Prefix for name of the binary property to which to<br />write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
+				description: 'Prefix for name of the binary property to which to write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
 			},
 			{
 				displayName: 'Options',
@@ -399,7 +399,7 @@ export class EmailReadImap implements INodeType {
 						}
 						if (staticData.lastMessageUid !== undefined) {
 							searchCriteria.push(['UID', `${staticData.lastMessageUid as number}:*`]);
-							/** 
+							/**
 							 * A short explanation about UIDs and how they work
 							 * can be found here: https://dev.to/kehers/imap-new-messages-since-last-check-44gm
 							 * TL;DR:
@@ -413,7 +413,7 @@ export class EmailReadImap implements INodeType {
 							 */
 							Logger.debug('Querying for new messages on node "EmailReadImap"', {searchCriteria});
 						}
-				
+
 						const returnData = await getNewEmails(connection, searchCriteria);
 
 						if (returnData.length) {

packages/nodes-base/nodes/EmailSend.node.ts

@@ -103,7 +103,7 @@ export class EmailSend implements INodeType {
 				name: 'attachments',
 				type: 'string',
 				default: '',
-				description: 'Name of the binary properties which contain<br />data which should be added to email as attachment.<br />Multiple ones can be comma separated.',
+				description: 'Name of the binary properties that contain data to add to email as attachment.<br />Multiple ones can be comma separated.',
 			},
 			{
 				displayName: 'Options',

packages/nodes-base/nodes/Eventbrite/EventbriteTrigger.node.ts

@@ -182,7 +182,7 @@ export class EventbriteTrigger implements INodeType {
 				name: 'resolveData',
 				type: 'boolean',
 				default: true,
-				description: 'By default does the webhook-data only contain the URL to receive<br />the object data manually. If this option gets activated it<br />will resolve the data automatically.',
+				description: 'By default does the webhook-data only contain the URL to receive the object data manually. If this option gets activated, it will resolve the data automatically.',
 			},
 		],
 	};

packages/nodes-base/nodes/FileMaker/FileMaker.node.ts

@@ -202,7 +202,7 @@ export class FileMaker implements INodeType {
 					},
 				},
 				placeholder: 'Portals',
-				description: 'The portal result set to return. Use the portal object name or portal<br />table name. If this parameter is omitted, the API will return all<br />portal objects and records in the layout. For best performance<br />, pass the portal object name or portal table name.',
+				description: 'The portal result set to return. Use the portal object name or portal table name. If this parameter is omitted, the API will return all portal objects and records in the layout. For best performance, pass the portal object name or portal table name.',
 			},
 			// ----------------------------------
 			//         find/records

packages/nodes-base/nodes/Flow/FlowTrigger.node.ts

@@ -80,7 +80,7 @@ export class FlowTrigger implements INodeType {
 						],
 					},
 				},
-				description: `Lists ids, perhaps known better as "Projects" separated by ,`,
+				description: `Lists ids, perhaps known better as "Projects" separated by a comma (,)`,
 			},
 			{
 				displayName: 'Task ID',
@@ -100,7 +100,7 @@ export class FlowTrigger implements INodeType {
 						],
 					},
 				},
-				description: `Task ids separated by ,`,
+				description: `Task ids separated by a comma (,)`,
 			},
 		],
 

packages/nodes-base/nodes/Flow/TaskDescription.ts

@@ -221,7 +221,7 @@ export const taskFields = [
 				type: 'string',
 				default: '',
 				required : false,
-				description: `A list of tag names to apply to the new task separated by ,`,
+				description: `A list of tag names to apply to the new task separated by a comma (,)`,
 			},
 		],
 	},
@@ -408,7 +408,7 @@ export const taskFields = [
 				name: 'tags',
 				type: 'string',
 				default: '',
-				description: `A list of tag names to apply to the new task separated by ,`,
+				description: `A list of tag names to apply to the new task separated by a comma (,)`,
 			},
 		],
 	},

packages/nodes-base/nodes/Freshdesk/Freshdesk.node.ts

@@ -398,7 +398,7 @@ export class Freshdesk implements INodeType {
 						name: 'ccEmails',
 						type: 'string',
 						default: '',
-						description: `Separated by , email addresses added in the 'cc' field of the incoming ticket email`,
+						description: `Separated by a comma (,) email addresses added in the 'cc' field of the incoming ticket email`,
 					},
 					{
 						displayName: 'Company',
@@ -485,7 +485,7 @@ export class Freshdesk implements INodeType {
 						name: 'tags',
 						type: 'string',
 						default: '',
-						description: `separated by , tags that have been associated with the ticket`,
+						description: `separated by a comma (,) tags that have been associated with the ticket`,
 					},
 					{
 						displayName: 'Type',
@@ -642,7 +642,7 @@ export class Freshdesk implements INodeType {
 						name: 'ccEmails',
 						type: 'string',
 						default: '',
-						description: `Separated by , email addresses added in the 'cc' field of the incoming ticket email`,
+						description: `Separated by a comma (,) email addresses added in the 'cc' field of the incoming ticket email`,
 					},
 					{
 						displayName: 'Company',
@@ -847,7 +847,7 @@ export class Freshdesk implements INodeType {
 						name: 'tags',
 						type: 'string',
 						default: '',
-						description: `separated by , tags that have been associated with the ticket`,
+						description: `separated by a comma (,) tags that have been associated with the ticket`,
 					},
 					{
 						displayName: 'Type',

packages/nodes-base/nodes/Git/descriptions/CommitDescription.ts

@@ -37,8 +37,7 @@ export const commitFields = [
 				type: 'string',
 				default: '',
 				placeholder: '/data/file1.json',
-				description: `Comma separated list of paths (absolute or relative to Repository Path) of<br />
-				files or folders to commit. If not set will all "added" files and folders be committed.`,
+				description: `Comma separated list of paths (absolute or relative to Repository Path) of files or folders to commit. If not set will all "added" files and folders be committed.`,
 			},
 		],
 	},

packages/nodes-base/nodes/Github/Github.node.ts

@@ -487,7 +487,7 @@ export class Github implements INodeType {
 
 				},
 				placeholder: '',
-				description: 'Name of the binary property which contains<br />the data for the file.',
+				description: 'Name of the binary property which contains the data for the file.',
 			},
 			{
 				displayName: 'Commit Message',
@@ -603,7 +603,7 @@ export class Github implements INodeType {
 						],
 					},
 				},
-				description: 'If set it will set the data of the file as binary property<br />instead of returning the raw API response.',
+				description: 'If set it will set the data of the file as binary property instead of returning the raw API response.',
 			},
 			{
 				displayName: 'Binary Property',
@@ -626,7 +626,7 @@ export class Github implements INodeType {
 
 				},
 				placeholder: '',
-				description: 'Name of the binary property in which to save<br />the binary data of the received file.',
+				description: 'Name of the binary property in which to save the binary data of the received file.',
 			},
 
 

packages/nodes-base/nodes/Github/GithubTrigger.node.ts

@@ -173,7 +173,7 @@ export class GithubTrigger implements INodeType {
 					{
 						name: 'installation',
 						value: 'installation',
-						description: 'Triggered when someone installs (created) , uninstalls (deleted), or accepts new permissions (new_permissions_accepted) for a GitHub App. When a GitHub App owner requests new permissions, the person who installed the GitHub App must accept the new permissions request.',
+						description: 'Triggered when someone installs (created), uninstalls (deleted), or accepts new permissions (new_permissions_accepted) for a GitHub App. When a GitHub App owner requests new permissions, the person who installed the GitHub App must accept the new permissions request.',
 					},
 					{
 						name: 'installation_repositories',
@@ -314,7 +314,7 @@ export class GithubTrigger implements INodeType {
 					{
 						name: 'team',
 						value: 'team',
-						description: 'Triggered when an organization\'s team is created,<br/>deleted, edited, added_to_repository, or removed_from_repository. Organization hooks only',
+						description: 'Triggered when an organization\'s team is created, deleted, edited, added_to_repository, or removed_from_repository. Organization hooks only',
 					},
 					{
 						name: 'team_add',

packages/nodes-base/nodes/Google/Books/GoogleBooks.node.ts

@@ -323,7 +323,7 @@ export class GoogleBooks implements INodeType {
 				displayName: 'Volume Position',
 				name: 'volumePosition',
 				type: 'string',
-				description: 'Position on shelf to move the item (0 puts the item before the<br />current first item, 1 puts it between the first and the second and so on).',
+				description: 'Position on shelf to move the item (0 puts the item before the current first item, 1 puts it between the first and the second and so on).',
 				default: '',
 				required: true,
 				displayOptions: {

packages/nodes-base/nodes/Google/Drive/GoogleDrive.node.ts

@@ -272,7 +272,7 @@ export class GoogleDrive implements INodeType {
 						],
 					},
 				},
-				description: 'Name of the binary property to which to<br />write the data of the read file.',
+				description: 'Name of the binary property to which to write the data of the read file.',
 			},
 			{
 				displayName: 'Options',
@@ -739,7 +739,7 @@ export class GoogleDrive implements INodeType {
 
 				},
 				placeholder: '',
-				description: 'Name of the binary property which contains<br />the data for the file to be uploaded.',
+				description: 'Name of the binary property which contains the data for the file to be uploaded.',
 			},
 
 			// ----------------------------------
@@ -955,7 +955,7 @@ export class GoogleDrive implements INodeType {
 						],
 					},
 				},
-				description: 'By default the response only contain the ID of the file.<br />If this option gets activated it will resolve the data automatically.',
+				description: 'By default the response only contain the ID of the file.<br />If this option gets activated, it will resolve the data automatically.',
 			},
 			{
 				displayName: 'Parents',
@@ -1059,7 +1059,7 @@ export class GoogleDrive implements INodeType {
 							},
 						},
 						default: false,
-						description: `Set to true to opt in to API behavior that aims for all items to have exactly one parent<br>
+						description: `Set to true to opt in to API behavior that aims for all items to have exactly one parent.<br>
 						This parameter only takes effect if the item is not in a shared drive`,
 					},
 					{
@@ -1631,8 +1631,8 @@ export class GoogleDrive implements INodeType {
 								name: 'adminManagedRestrictions',
 								type: 'boolean',
 								default: false,
-								description: `Whether the options to copy, print, or download files inside this shared drive,<br/>
-								should be disabled for readers and commenters. When this restriction is set to true, it will<br/>
+								description: `Whether the options to copy, print, or download files inside this shared drive,
+								should be disabled for readers and commenters. When this restriction is set to true, it will
 								override the similarly named field to true for any file inside this shared drive.`,
 							},
 							{
@@ -1640,8 +1640,8 @@ export class GoogleDrive implements INodeType {
 								name: 'copyRequiresWriterPermission',
 								type: 'boolean',
 								default: false,
-								description: `Whether the options to copy, print, or download files inside this shared drive,<br/>
-								should be disabled for readers and commenters. When this restriction is set to true, it will<br/>
+								description: `Whether the options to copy, print, or download files inside this shared drive,
+								should be disabled for readers and commenters. When this restriction is set to true, it will
 								override the similarly named field to true for any file inside this shared drive.`,
 							},
 							{
@@ -1649,8 +1649,8 @@ export class GoogleDrive implements INodeType {
 								name: 'domainUsersOnly',
 								type: 'boolean',
 								default: false,
-								description: `Whether access to this shared drive and items inside this shared drive<br/>
-								is restricted to users of the domain to which this shared drive belongs. This restriction<br/>
+								description: `Whether access to this shared drive and items inside this shared drive
+								is restricted to users of the domain to which this shared drive belongs. This restriction
 								may be overridden by other sharing policies controlled outside of this shared drive.`,
 							},
 							{
@@ -1873,8 +1873,8 @@ export class GoogleDrive implements INodeType {
 								name: 'adminManagedRestrictions',
 								type: 'boolean',
 								default: false,
-								description: `Whether the options to copy, print, or download files inside this shared drive,<br/>
-								should be disabled for readers and commenters. When this restriction is set to true, it will<br/>
+								description: `Whether the options to copy, print, or download files inside this shared drive,
+								should be disabled for readers and commenters. When this restriction is set to true, it will
 								override the similarly named field to true for any file inside this shared drive.`,
 							},
 							{
@@ -1882,8 +1882,8 @@ export class GoogleDrive implements INodeType {
 								name: 'copyRequiresWriterPermission',
 								type: 'boolean',
 								default: false,
-								description: `Whether the options to copy, print, or download files inside this shared drive,<br/>
-								should be disabled for readers and commenters. When this restriction is set to true, it will<br/>
+								description: `Whether the options to copy, print, or download files inside this shared drive,
+								should be disabled for readers and commenters. When this restriction is set to true, it will
 								override the similarly named field to true for any file inside this shared drive.`,
 							},
 							{
@@ -1891,8 +1891,8 @@ export class GoogleDrive implements INodeType {
 								name: 'domainUsersOnly',
 								type: 'boolean',
 								default: false,
-								description: `Whether access to this shared drive and items inside this shared drive<br/>
-								is restricted to users of the domain to which this shared drive belongs. This restriction<br/>
+								description: `Whether access to this shared drive and items inside this shared drive
+								is restricted to users of the domain to which this shared drive belongs. This restriction
 								may be overridden by other sharing policies controlled outside of this shared drive.`,
 							},
 							{

packages/nodes-base/nodes/Google/Gmail/DraftDescription.ts

@@ -252,7 +252,7 @@ export const draftFields = [
 						],
 					},
 				},
-				description: 'Prefix for name of the binary property to which to<br />write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
+				description: 'Prefix for name of the binary property to which to write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
 			},
 			{
 				displayName: 'Format',
@@ -368,7 +368,7 @@ export const draftFields = [
 						],
 					},
 				},
-				description: 'Prefix for name of the binary property to which to<br />write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
+				description: 'Prefix for name of the binary property to which to write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
 			},
 			{
 				displayName: 'Format',

packages/nodes-base/nodes/Google/Gmail/MessageDescription.ts

@@ -355,7 +355,7 @@ export const messageFields = [
 						],
 					},
 				},
-				description: 'Prefix for name of the binary property to which to<br />write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
+				description: 'Prefix for name of the binary property to which to write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
 			},
 		],
 	},
@@ -437,7 +437,7 @@ export const messageFields = [
 						],
 					},
 				},
-				description: 'Prefix for name of the binary property to which to<br />write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
+				description: 'Prefix for name of the binary property to which to write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
 			},
 			{
 				displayName: 'Format',

packages/nodes-base/nodes/Google/Sheet/GoogleSheets.node.ts

@@ -201,7 +201,7 @@ export class GoogleSheets implements INodeType {
 				},
 				default: 'A:F',
 				required: true,
-				description: 'The table range to read from or to append data to. See the Google <a href="https://developers.google.com/sheets/api/guides/values#writing">documentation</a> for the details.<br />If it contains multiple sheets it can also be<br />added like this: "MySheet!A:F"',
+				description: 'The table range to read from or to append data to. See the Google <a href="https://developers.google.com/sheets/api/guides/values#writing">documentation</a> for the details.<br />If it contains multiple sheets it can also be added like this: "MySheet!A:F"',
 			},
 
 			// ----------------------------------
@@ -420,7 +420,7 @@ export class GoogleSheets implements INodeType {
 						],
 					},
 				},
-				description: 'Index of the first row which contains<br />the actual data and not the keys. Starts with 0.',
+				description: 'Index of the first row which contains the actual data and not the keys. Starts with 0.',
 			},
 
 			// ----------------------------------
@@ -518,7 +518,7 @@ export class GoogleSheets implements INodeType {
 						],
 					},
 				},
-				description: 'The name of the key to identify which<br />data should be updated in the sheet.',
+				description: 'The name of the key to identify which data should be updated in the sheet.',
 			},
 
 			{
@@ -1032,7 +1032,7 @@ export class GoogleSheets implements INodeType {
 					status: 'OK',
 					message: 'Connection successful!',
 				};
-				
+
 			},
 		},
 	};

packages/nodes-base/nodes/Google/Slides/GoogleSlides.node.ts

@@ -357,7 +357,7 @@ export class GoogleSlides implements INodeType {
 						],
 					},
 				},
-				description: 'Name of the binary property to which to<br />write the data of the read page.',
+				description: 'Name of the binary property to which to write the data of the read page.',
 			},
 			{
 				displayName: 'Binary Property',

packages/nodes-base/nodes/Google/Translate/GoogleTranslate.node.ts

@@ -136,7 +136,7 @@ export class GoogleTranslate implements INodeType {
 					loadOptionsMethod: 'getLanguages',
 				},
 				default: '',
-				description: 'The language to use for translation of the input text, set to one of the<br/> language codes listed in <a href="https://cloud.google.com/translate/docs/languages">Language Support</a>',
+				description: 'The language to use for translation of the input text, set to one of the language codes listed in <a href="https://cloud.google.com/translate/docs/languages">Language Support</a>',
 				required: true,
 				displayOptions: {
 					show: {

packages/nodes-base/nodes/HelpScout/ConversationDescription.ts

@@ -164,7 +164,7 @@ export const conversationFields = [
 				],
 			},
 		},
-		description: 'By default the response only contain the ID to resource<br />. If this option gets activated it<br />will resolve the data automatically.',
+		description: 'By default the response only contain the ID to resource. If this option gets activated, it will resolve the data automatically.',
 	},
 	{
 		displayName: 'Additional Fields',
@@ -195,7 +195,7 @@ export const conversationFields = [
 				name: 'autoReply',
 				type: 'boolean',
 				default: false,
-				description: `When autoReply is set to true, an auto reply will be sent</br>
+				description: `When autoReply is set to true, an auto reply will be sent
 				as long as there is at least one customer thread in the conversation.`,
 			},
 			{

packages/nodes-base/nodes/HelpScout/CustomerDescription.ts

@@ -63,7 +63,7 @@ export const customerFields = [
 				],
 			},
 		},
-		description: 'By default the response only contain the ID to resource<br />. If this option gets activated it<br />will resolve the data automatically.',
+		description: 'By default the response only contain the ID to resource. If this option gets activated, it will resolve the data automatically.',
 	},
 	{
 		displayName: 'Additional Fields',

packages/nodes-base/nodes/HomeAssistant/CameraProxyDescription.ts

@@ -64,6 +64,6 @@ export const cameraProxyFields = [
 				],
 			},
 		},
-		description: 'Name of the binary property to which to<br />write the data of the read file.',
+		description: 'Name of the binary property to which to write the data of the read file.',
 	},
 ] as INodeProperties[];

packages/nodes-base/nodes/HtmlExtract/HtmlExtract.node.ts

@@ -185,7 +185,7 @@ export class HtmlExtract implements INodeType {
 								name: 'returnArray',
 								type: 'boolean',
 								default: false,
-								description: 'Returns the values as an array so if multiple ones get found they also get<br />returned separately.If not set all will be returned as a single string.',
+								description: 'Returns the values as an array so if multiple ones get found they also get returned separately. If not set all will be returned as a single string.',
 							},
 						],
 					},
@@ -204,7 +204,7 @@ export class HtmlExtract implements INodeType {
 						name: 'trimValues',
 						type: 'boolean',
 						default: true,
-						description: 'Removes automatically all spaces and newlines from<br />the beginning and end of the values.',
+						description: 'Removes automatically all spaces and newlines from the beginning and end of the values.',
 					},
 				],
 			},

packages/nodes-base/nodes/HttpRequest.node.ts

@@ -228,7 +228,7 @@ export class HttpRequest implements INodeType {
 						],
 					},
 				},
-				description: 'Name of the binary property to which to<br />write the data of the read file.',
+				description: 'Name of the binary property to which to write the data of the read file.',
 			},
 
 			{
@@ -1057,4 +1057,4 @@ export class HttpRequest implements INodeType {
 
 		return this.prepareOutputData(returnItems);
 	}
-}
+}

packages/nodes-base/nodes/Hubspot/CompanyDescription.ts

@@ -906,7 +906,7 @@ export const companyFields = [
 				name: 'propertiesWithHistory',
 				type: 'string',
 				default: '',
-				description: `Works similarly to properties=, but this parameter will include the history for the specified property,<br/>
+				description: `Works similarly to properties=, but this parameter will include the history for the specified property,
 				instead of just including the current value. Use this parameter when you need the full history of changes to a property's value.`,
 			},
 		],

packages/nodes-base/nodes/Hubspot/ContactDescription.ts

@@ -88,7 +88,7 @@ export const contactFields = [
 			},
 		},
 		default: true,
-		description: 'By default the response only includes the ID. If this option gets activated it<br />will resolve the data automatically.',
+		description: 'By default the response only includes the ID. If this option gets activated, it will resolve the data automatically.',
 	},
 	{
 		displayName: 'Additional Fields',

packages/nodes-base/nodes/Hubspot/DealDescription.ts

@@ -441,7 +441,7 @@ export const dealFields = [
 				name: 'includeAssociations',
 				type: 'boolean',
 				default: false,
-				description: `Include the IDs of the associated contacts and companies in the results<br/>.
+				description: `Include the IDs of the associated contacts and companies in the results.
 				This will also automatically include the num_associated_contacts property.`,
 			},
 			{
@@ -465,7 +465,7 @@ export const dealFields = [
 					loadOptionsMethod: 'getDealProperties',
 				},
 				default: [],
-				description: `Works similarly to properties=, but this parameter will include the history for the specified property,<br/>
+				description: `Works similarly to properties=, but this parameter will include the history for the specified property,
 				instead of just including the current value. Use this parameter when you need the full history of changes to a property's value.`,
 			},
 

packages/nodes-base/nodes/Hubspot/TicketDescription.ts

@@ -443,7 +443,7 @@ export const ticketFields = [
 				name: 'propertiesWithHistory',
 				type: 'string',
 				default: '',
-				description: `Works similarly to properties=, but this parameter will include the history for the specified property,<br/>
+				description: `Works similarly to properties=, but this parameter will include the history for the specified property,
 			instead of just including the current value. Use this parameter when you need the full history of changes to a property's value.`,
 			},
 		],
@@ -528,7 +528,7 @@ export const ticketFields = [
 				name: 'propertiesWithHistory',
 				type: 'string',
 				default: '',
-				description: `Works similarly to properties=, but this parameter will include the history for the specified property,<br/>
+				description: `Works similarly to properties=, but this parameter will include the history for the specified property,
 			instead of just including the current value. Use this parameter when you need the full history of changes to a property's value.`,
 			},
 		],

packages/nodes-base/nodes/ICalendar.node.ts

@@ -83,7 +83,7 @@ export class ICalendar implements INodeType {
 				type: 'string',
 				default: 'data',
 				required: true,
-				description: 'The field that your iCalendar file will be<br />available under in the output.',
+				description: 'The field that your iCalendar file will be available under in the output.',
 			},
 			{
 				displayName: 'Additional Fields',

packages/nodes-base/nodes/Intercom/CompanyDescription.ts

@@ -371,7 +371,7 @@ export const companyFields = [
 				name: 'website',
 				type: 'string',
 				default: '',
-				description: `The URL for this company's website. Please note that the value<br />specified here is not validated. Accepts any string.`,
+				description: `The URL for this company's website. Please note that the value specified here is not validated. Accepts any string.`,
 			},
 		],
 	},

packages/nodes-base/nodes/Intercom/LeadDescription.ts

@@ -403,7 +403,7 @@ export const leadFields = [
 				name: 'updateLastRequestAt',
 				type: 'boolean',
 				default: false,
-				description: 'A boolean value, which if true, instructs Intercom to update the<br />users last_request_at value to the current API service time in<br />UTC. default value if not sent is false.',
+				description: 'A boolean value, which if true, instructs Intercom to update the users last_request_at value to the current API service time in UTC. default value if not sent is false.',
 			},
 			{
 				displayName: 'UTM Campaign',

packages/nodes-base/nodes/Intercom/UserDescription.ts

@@ -456,7 +456,7 @@ export const userFields = [
 				type: 'boolean',
 				default: false,
 				options: [],
-				description: 'A boolean value, which if true, instructs Intercom to update the users<br />last_request_at value to the current API service time in UTC.',
+				description: 'A boolean value, which if true, instructs Intercom to update the users last_request_at value to the current API service time in UTC.',
 			},
 			{
 				displayName: 'UTM Campaign',

packages/nodes-base/nodes/Jira/IssueCommentDescription.ts

@@ -151,7 +151,7 @@ export const issueCommentFields = [
 					},
 				],
 				default: '',
-				description: 'Use expand to include additional information about comments<br />in the response. This parameter accepts Rendered Body, which<br />returns the comment body rendered in HTML.',
+				description: 'Use expand to include additional information about comments in the response. This parameter accepts Rendered Body, which returns the comment body rendered in HTML.',
 			},
 		],
 	},
@@ -222,7 +222,7 @@ export const issueCommentFields = [
 					},
 				],
 				default: '',
-				description: 'Use expand to include additional information about comments in<br />the response. This parameter accepts Rendered Body, which<br />returns the comment body rendered in HTML.',
+				description: 'Use expand to include additional information about comments in the response. This parameter accepts Rendered Body, which returns the comment body rendered in HTML.',
 			},
 		],
 	},
@@ -317,7 +317,7 @@ export const issueCommentFields = [
 					},
 				],
 				default: '',
-				description: 'Use expand to include additional information about comments in the<br />response. This parameter accepts Rendered Body, which returns the comment<br />body rendered in HTML.',
+				description: 'Use expand to include additional information about comments in the response. This parameter accepts Rendered Body, which returns the comment body rendered in HTML.',
 			},
 		],
 	},

packages/nodes-base/nodes/Jira/IssueDescription.ts

@@ -268,7 +268,7 @@ export const issueFields = [
 				name: 'updateHistory',
 				type: 'boolean',
 				default: false,
-				description: `Whether the project in which the issue is created is added to the user's<br/>
+				description: `Whether the project in which the issue is created is added to the user's
 				Recently viewed project list, as shown under Projects in Jira.`,
 			},
 		],
@@ -546,7 +546,7 @@ export const issueFields = [
 				transitions Returns all possible transitions for the issue.<br/>
 				editmeta Returns information about how each field can be edited.<br/>
 				changelog Returns a list of recent updates to an issue, sorted by date, starting from the most recent.<br/>
-				versionedRepresentations Returns a JSON array for each version of a field's value, with the highest number<br/>
+				versionedRepresentations Returns a JSON array for each version of a field's value, with the highest number
 				representing the most recent version. Note: When included in the request, the fields parameter is ignored.`,
 			},
 			{
@@ -567,7 +567,7 @@ export const issueFields = [
 				type: 'boolean',
 				default: false,
 				description: `Indicates whether fields in fields are referenced by keys rather than IDs.<br/>
-				This parameter is useful where fields have been added by a connect app and a field's key<br/>
+				This parameter is useful where fields have been added by a connect app and a field's key
 				may differ from its ID.`,
 			},
 			{
@@ -723,7 +723,7 @@ export const issueFields = [
 				type: 'boolean',
 				default: false,
 				description: `Indicates whether fields in fields are referenced by keys rather than IDs.<br/>
-				This parameter is useful where fields have been added by a connect app and a field's key<br/>
+				This parameter is useful where fields have been added by a connect app and a field's key
 				may differ from its ID.`,
 			},
 			{
@@ -1111,8 +1111,8 @@ export const issueFields = [
 				type: 'string',
 				default: '',
 				description: `Use expand to include additional information about transitions in the response.<br/>
-				 This parameter accepts transitions.fields, which returns information about the fields in the<br/>
-				 transition screen for each transition. Fields hidden from the screen are not returned. Use this<br/>
+				 This parameter accepts transitions.fields, which returns information about the fields in the
+				 transition screen for each transition. Fields hidden from the screen are not returned. Use this
 				 information to populate the fields and update fields in Transition issue.`,
 			},
 			{
@@ -1127,7 +1127,7 @@ export const issueFields = [
 				name: 'skipRemoteOnlyCondition',
 				type: 'boolean',
 				default: false,
-				description: `Indicates whether transitions with the condition Hide<br/>
+				description: `Indicates whether transitions with the condition Hide
 				From User Condition are included in the response.`,
 			},
 		],

packages/nodes-base/nodes/JotForm/JotFormTrigger.node.ts

@@ -69,7 +69,7 @@ export class JotFormTrigger implements INodeType {
 				name: 'resolveData',
 				type: 'boolean',
 				default: true,
-				description: 'By default does the webhook-data use internal keys instead of the names.<br />If this option gets activated it will resolve the keys automatically to the actual names.',
+				description: 'By default does the webhook-data use internal keys instead of the names.<br />If this option gets activated, it will resolve the keys automatically to the actual names.',
 			},
 			{
 				displayName: 'Only Answers',

packages/nodes-base/nodes/Keap/FileDescription.ts

@@ -76,7 +76,7 @@ export const fileFields = [
 				],
 			},
 		},
-		description: 'Name of the binary property which contains<br />the data for the file to be uploaded.',
+		description: 'Name of the binary property which contains the data for the file to be uploaded.',
 	},
 	{
 		displayName: 'File Association',

packages/nodes-base/nodes/LingvaNex/LingvaNex.node.ts

@@ -77,7 +77,7 @@ export class LingvaNex implements INodeType {
 					loadOptionsMethod: 'getLanguages',
 				},
 				default: '',
-				description: 'The language to use for translation of the input text, set to one of the<br/> language codes listed in <a href="https://cloud.google.com/translate/docs/languages">Language Support</a>',
+				description: 'The language to use for translation of the input text, set to one of the language codes listed in <a href="https://cloud.google.com/translate/docs/languages">Language Support</a>',
 				required: true,
 				displayOptions: {
 					show: {

packages/nodes-base/nodes/Mailchimp/Mailchimp.node.ts

@@ -1210,7 +1210,7 @@ export class Mailchimp implements INodeType {
 						name: 'skipMergeValidation',
 						type: 'boolean',
 						default: false,
-						description: `If skip_merge_validation is true, member data will be accepted without merge field values,<br/>
+						description: `If skip_merge_validation is true, member data will be accepted without merge field values,
 						even if the merge field is usually required`,
 					},
 					{

packages/nodes-base/nodes/Mailgun/Mailgun.node.ts

@@ -101,7 +101,7 @@ export class Mailgun implements INodeType {
 				name: 'attachments',
 				type: 'string',
 				default: '',
-				description: 'Name of the binary properties which contain<br />data which should be added to email as attachment.<br />Multiple ones can be comma separated.',
+				description: 'Name of the binary properties which contain data which should be added to email as attachment.<br />Multiple ones can be comma separated.',
 			},
 		],
 	};

packages/nodes-base/nodes/Mandrill/Mandrill.node.ts

@@ -247,21 +247,21 @@ export class Mandrill implements INodeType {
 						name: 'async',
 						type: 'boolean',
 						default: false,
-						description: `Enable a background sending mode that is optimized for bulk sending.<br />In async mode, messages/send will immediately return a status of "queued"<br />for every recipient. To handle rejections when sending in async mode, set up<br />a webhook for the 'reject' event. Defaults to false for messages with<br />no more than 10 recipients; messages with more than 10 recipients are always sent<br />asynchronously, regardless of the value of async.`,
+						description: `Enable a background sending mode that is optimized for bulk sending.<br />In async mode, messages/send will immediately return a status of "queued" for every recipient. To handle rejections when sending in async mode, set up a webhook for the 'reject' event. Defaults to false for messages with no more than 10 recipients; messages with more than 10 recipients are always sent asynchronously, regardless of the value of async.`,
 					},
 					{
 						displayName: 'Auto Text',
 						name: 'autoText',
 						type: 'boolean',
 						default: false,
-						description: 'Whether or not to automatically generate a text<br />part for messages that are not given text.',
+						description: 'Whether or not to automatically generate a text part for messages that are not given text.',
 					},
 					{
 						displayName: 'Auto HTML',
 						name: 'autoHtml',
 						type: 'boolean',
 						default: false,
-						description: 'Whether or not to automatically generate an HTML<br />part for messages that are not given HTML.',
+						description: 'Whether or not to automatically generate an HTML part for messages that are not given HTML.',
 					},
 					{
 						displayName: 'BCC Address',
@@ -293,7 +293,7 @@ export class Mandrill implements INodeType {
 						type: 'string',
 						default: '',
 						placeholder: '',
-						description: `An array of strings separated by , indicating for which any matching URLs will automatically have Google Analytics parameters appended to their query string automatically.`,
+						description: `An array of strings separated by a comma (,) indicating for which any matching URLs will automatically have Google Analytics parameters appended to their query string automatically.`,
 					},
 					{
 						displayName: 'HTML',
@@ -311,14 +311,14 @@ export class Mandrill implements INodeType {
 						name: 'important',
 						type: 'boolean',
 						default: false,
-						description: 'Whether or not this message is important, and should be<br />delivered ahead of non-important messages.',
+						description: 'Whether or not this message is important, and should be delivered ahead of non-important messages.',
 					},
 					{
 						displayName: 'Inline CSS',
 						name: 'inlineCss',
 						type: 'boolean',
 						default: false,
-						description: 'Whether or not to automatically inline all CSS styles provided in<br />the message HTML - only for HTML documents less than 256KB in size.',
+						description: 'Whether or not to automatically inline all CSS styles provided in the message HTML - only for HTML documents less than 256KB in size.',
 					},
 					{
 						displayName: 'Ip Pool',
@@ -349,7 +349,7 @@ export class Mandrill implements INodeType {
 						type: 'dateTime',
 						default: '',
 						placeholder: '',
-						description: `When this message should be sent as a UTC timestamp in<br />YYYY-MM-DD HH:MM:SS format. If you specify a time in the past, the message<br />will be sent immediately. An additional fee applies for scheduled email,<br />and this feature is only available to accounts with a positive balance.`,
+						description: `When this message should be sent as a UTC timestamp in YYYY-MM-DD HH:MM:SS format. If you specify a time in the past, the message will be sent immediately. An additional fee applies for scheduled email, and this feature is only available to accounts with a positive balance.`,
 					},
 					{
 						displayName: 'Signing Domain',
@@ -357,7 +357,7 @@ export class Mandrill implements INodeType {
 						type: 'string',
 						default: '',
 						placeholder: '',
-						description: `A custom domain to use for SPF/DKIM signing instead of<br />mandrill(for "via" or "on behalf of" in email clients).`,
+						description: `A custom domain to use for SPF/DKIM signing instead of mandrill(for "via" or "on behalf of" in email clients).`,
 					},
 					{
 						displayName: 'Subaccount',
@@ -381,7 +381,7 @@ export class Mandrill implements INodeType {
 						type: 'string',
 						default: '',
 						placeholder: '',
-						description: `An array of string separated by , to tag the message with. Stats are accumulated using tags, though we only store the first 100 we see, so this should not be unique or change frequently. Tags should be 50 characters or less. Any tags starting with an underscore are reserved for internal use and will cause errors.`,
+						description: `An array of string separated by a comma (,) to tag the message with. Stats are accumulated using tags, though we only store the first 100 we see, so this should not be unique or change frequently. Tags should be 50 characters or less. Any tags starting with an underscore are reserved for internal use and will cause errors.`,
 					},
 					{
 						displayName: 'Text',
@@ -421,7 +421,7 @@ export class Mandrill implements INodeType {
 						name: 'urlStripQs',
 						type: 'boolean',
 						default: false,
-						description: 'Whether or not to strip the query string from<br />URLs when aggregating tracked URL data.',
+						description: 'Whether or not to strip the query string from URLs when aggregating tracked URL data.',
 					},
 					{
 						displayName: 'View Content Link',
@@ -508,7 +508,7 @@ export class Mandrill implements INodeType {
 						],
 					},
 				},
-				description: 'Metadata an associative array of user metadata. Mandrill will store<br />this metadata and make it available for retrieval. In addition, you can select<br />up to 10 metadata fields to index and make searchable using the Mandrill search api.',
+				description: 'Metadata an associative array of user metadata. Mandrill will store this metadata and make it available for retrieval. In addition, you can select up to 10 metadata fields to index and make searchable using the Mandrill search api.',
 				options: [
 					{
 						name: 'metadataValues',
@@ -549,7 +549,7 @@ export class Mandrill implements INodeType {
 				placeholder: `{
 	"website": "www.example.com"
 }`,
-				description: 'Metadata an associative array of user metadata. Mandrill will store this metadata<br />and make it available for retrieval. In addition, you can select up to<br />10 metadata fields to index and make searchable using the Mandrill search api.',
+				description: 'Metadata an associative array of user metadata. Mandrill will store this metadata and make it available for retrieval. In addition, you can select up to 10 metadata fields to index and make searchable using the Mandrill search api.',
 			},
 			{
 				displayName: 'Attachments',

packages/nodes-base/nodes/Mattermost/v1/actions/channel/members/description.ts

@@ -65,7 +65,7 @@ export const channelMembersDescription: ChannelProperties = [
 			},
 		},
 		default: true,
-		description: 'By default the response only contain the ID of the user.<br />If this option gets activated it will resolve the user automatically.',
+		description: 'By default the response only contain the ID of the user.<br />If this option gets activated, it will resolve the user automatically.',
 	},
 	{
 		displayName: 'Return All',

packages/nodes-base/nodes/Mautic/ContactDescription.ts

@@ -1233,7 +1233,7 @@ export const contactFields = [
 				name: 'rawData',
 				type: 'boolean',
 				default: true,
-				description: `By default only the data of the fields get returned. If this<br />
+				description: `By default only the data of the fields get returned. If this
 							  options gets set the RAW response with all data gets returned.`,
 			},
 		],

packages/nodes-base/nodes/Merge.node.ts

@@ -104,7 +104,7 @@ export class Merge implements INodeType {
 					},
 				],
 				default: 'left',
-				description: 'How many items the output will contain<br />if inputs contain different amount of items.',
+				description: 'How many items the output will contain if inputs contain different amount of items.',
 			},
 			{
 				displayName: 'Property Input 1',

packages/nodes-base/nodes/Microsoft/Excel/WorksheetDescription.ts

@@ -244,7 +244,7 @@ export const worksheetFields = [
 				],
 			},
 		},
-		description: 'Index of the first row which contains<br />the actual data and not the keys. Starts with 0.',
+		description: 'Index of the first row which contains the actual data and not the keys. Starts with 0.',
 	},
 	{
 		displayName: 'Key Row',

packages/nodes-base/nodes/Microsoft/OneDrive/FileDescription.ts

@@ -236,7 +236,7 @@ export const fileFields = [
 				],
 			},
 		},
-		description: 'Name of the binary property to which to<br />write the data of the read file.',
+		description: 'Name of the binary property to which to write the data of the read file.',
 	},
 /* -------------------------------------------------------------------------- */
 /*                                 file:get                                   */
@@ -457,6 +457,6 @@ export const fileFields = [
 
 		},
 		placeholder: '',
-		description: 'Name of the binary property which contains<br />the data for the file.',
+		description: 'Name of the binary property which contains the data for the file.',
 	},
 ] as INodeProperties[];

packages/nodes-base/nodes/Microsoft/Outlook/DraftMessageSharedDescription.ts

@@ -29,7 +29,7 @@ export const draftMessageSharedFields = [
 				name: 'dataPropertyAttachmentsPrefixName',
 				type: 'string',
 				default: 'attachment_',
-				description: 'Prefix for name of the binary property to which to<br />write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
+				description: 'Prefix for name of the binary property to which to write the attachments. An index starting with 0 will be added.<br />So if name is "attachment_" the first attachment is saved to "attachment_0"',
 			},
 			{
 				displayName: 'Fields',

packages/nodes-base/nodes/Microsoft/Outlook/MessageAttachmentDescription.ts

@@ -133,7 +133,7 @@ export const messageAttachmentFields = [
 	{
 		displayName: 'Binary Property',
 		name: 'binaryPropertyName',
-		description: 'Name of the binary property to which to<br />write the data of the read file.',
+		description: 'Name of the binary property to which to write the data of the read file.',
 		type: 'string',
 		required: true,
 		default: 'data',