✨ Implement design system (#2050)

* split up main, sass imports, import new nds

* migrate most buttons

* update sizes based on feedback

* update copy buttons

* update executions list

* fix issues

* force message box buttons

* update warning color

* update more buttons

* wrap message box buttons

* update last component

* lint fixes

* add build report step

* breakout imports

* set package.json

* fix notification bug

* clean up imports

* use build directories directly

* update imports

* remove xl size

* update number inputs

* fix input width

* update line height, fix icon bug

* fix up editor

* fix spacing between buttons

* Reset line height

* revert changes to this

* revert changes

* clean up button sizes

* change to outline

* update select height

* update tooltip

* remove build report step

* clean up impl

* remove regenerator runtime

* add design system repo

* apply editorconfig

* apply editor config prettier

* lint issue

* switch to tabs

* switch to single space

* update eslintrc

* remove git modules

* update sass package

* support dart sass

* add build

* update dependency

* update contributing.md

* set repo

* update versions

* add tslint step

* update spacing to spaces, add dev step

* add test step

* add test step

* update browser lint rc

* remove .github

* delete .gitignore

* set comment for icons

* remove preview link

* update button interface

* update types

* set types

* clean up intro

* update intro

* remove assets

* move into preview

* remove headline comment

* reduce theme build

* loading executions

* match deps versions

* match deps versions

* fix lint issues

* fix lint issues

* update callback

* disable codacy for docs.css

* fix storybook issues

* add design system to docker image

* update spacing around delete sort button

* set line height to stop juggling headline

* update sizes

* clean up vars

* fix scss issues

* update button vars

* add shade color

* fix button without click

* fix buttons bug

* fix bug with executions list

* clean up theme

* update link styling

* fix typo

* run prettier

* 🎨 code format

* 🎨 code format

* 🔥 remove empty files

* ✨ N8n 2284 new inputs (#2075)

* implement inputs

* prettier fixes

* revert unnessary change

* move input components and tooltip

* remove form elements

* move select

* update input placements

* update sizes

* update credentails

* clean up select size

* fix caret issue

* update inputs

* clean up select

* fix tags dropdown border

* clean up tags input

* fix workflow name bug

* clean up select here

* add sizes template

* fix option caret

* fix input sizes

* update date input size

* remove tags input override

* update prop

* update input size

* center run data inputs

* update disabled colors

* update execution header

* update scrollbar

* update text area spacing

* fix items in header

* update run data tooltip

* remove popover

* update prefix positions

* add filterable demo

* address design issues

* fix input issues, flip boolean input to text

* update input sufffix colors

* remove override

* speed up switch, fix toggle spacing issue

* update icon

* remove icon classes

* clean up inputs

* clean up inputs with icons

* update input spacing again

* update suffix position

* build

* Add support for xlarge inputs

* fix input issues

* fix input issue

* update listeners

* update number inputs for settings

* update append/prepend spacing

* clean up inputs, set expression input as text

* fix type errors

* fix workflow number input

* fix tags dropdown bug

* fix bugs

* fix menu item bug

* remove font weight from link element

* remove default

* fix select option

* fix contrast issues

* allow overflow x for multi selects

* fix icon

* update options select

* fix issue that resolves expression to null

* update how actions are centered

* fix up selects

* update selects to support limiting size

* update option styles

* ⚡ Apply suggestions BHesseldieck

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* 🎨 code format

Co-authored-by: Jan <janober@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>

* ⏪ Revert "🔥 remove empty files"

This reverts commit e91ace4e52403f4a6b00b7be68b86fc48b7d8fef.

* ⚡ Remove private from n8n-design-system package

* 🎨 Change to spaces to stay consistent with editorconfig & others
package files

* ⚡ Fix year in license

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
Co-authored-by: Jan <janober@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>

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

@@ -1,8 +1,18 @@
 <template>
 	<div @keydown.stop :class="parameterInputClasses">
 	<expression-edit :dialogVisible="expressionEditDialogVisible" :value="value" :parameter="parameter" :path="path" @closeDialog="closeExpressionEditDialog" @valueChanged="expressionUpdated"></expression-edit>
-	<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
-		<div v-if="['json', 'string'].includes(parameter.type) || remoteParameterOptionsLoadingIssues !== null">
+	<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle" @click="openExpressionEdit">
+
+		<n8n-input
+			v-if="isValueExpression && showExpressionAsTextInput"
+			:size="inputSize"
+			:value="expressionDisplayValue"
+			:disabled="isReadOnly"
+			:title="displayTitle"
+			@keydown.stop
+		/>
+
+		<div v-else-if="['json', 'string'].includes(parameter.type) || remoteParameterOptionsLoadingIssues !== null">
 			<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>
 
@@ -10,37 +20,88 @@
 				<prism-editor v-if="!codeEditDialogVisible" :lineNumbers="true" :readonly="true" :code="displayValue" language="js"></prism-editor>
 			</div>
 
-			<el-input v-else v-model="tempValue" ref="inputField" size="small" :type="getStringInputType" :rows="getArgument('rows')" :value="displayValue" :disabled="!isValueExpression && isReadOnly" @change="valueChanged" @keydown.stop @focus="setFocus" :title="displayTitle" :placeholder="isValueExpression?'':parameter.placeholder">
-				<font-awesome-icon v-if="!isValueExpression && !isReadOnly" slot="suffix" icon="external-link-alt" class="edit-window-button clickable" title="Open Edit Window" @click="displayEditDialog()" />
-			</el-input>
-		</div>
-		<div v-else-if="parameter.type === 'dateTime'">
-			<el-date-picker
+			<n8n-input
+				v-else
 				v-model="tempValue"
 				ref="inputField"
-				type="datetime"
-				size="small"
+				:size="inputSize"
+				:type="getStringInputType"
+				:rows="getArgument('rows')"
 				:value="displayValue"
-				:title="displayTitle"
 				:disabled="isReadOnly"
-				:placeholder="parameter.placeholder?parameter.placeholder:'Select date and time'"
-				:picker-options="dateTimePickerOptions"
 				@change="valueChanged"
-				@focus="setFocus"
 				@keydown.stop
+				@focus="setFocus"
+				:title="displayTitle"
+				:placeholder="isValueExpression?'':parameter.placeholder"
 			>
-			</el-date-picker>
+				<div slot="suffix" class="expand-input-icon-container">
+					<font-awesome-icon v-if="!isValueExpression && !isReadOnly" icon="external-link-alt" class="edit-window-button clickable" title="Open Edit Window" @click="displayEditDialog()" />
+				</div>
+			</n8n-input>
 		</div>
 
-		<div v-else-if="parameter.type === 'number'">
-			<!-- <el-slider :value="value" @input="valueChanged"></el-slider> -->
-			<el-input-number ref="inputField" size="small" :value="displayValue" :max="getArgument('maxValue')" :min="getArgument('minValue')" :precision="getArgument('numberPrecision')" :step="getArgument('numberStepSize')" :disabled="isReadOnly" @change="valueChanged" @focus="setFocus" @keydown.stop :title="displayTitle" :placeholder="parameter.placeholder"></el-input-number>
+		<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
+			<el-color-picker
+				size="small"
+				class="color-picker"
+				:value="displayValue"
+				:disabled="isReadOnly"
+				@focus="setFocus"
+				@change="valueChanged"
+				:title="displayTitle"
+				:show-alpha="getArgument('showAlpha')"
+			/>
+			<n8n-input
+				v-model="tempValue"
+				:size="inputSize"
+				type="text"
+				:value="tempValue"
+				:disabled="isReadOnly"
+				@change="valueChanged"
+				@keydown.stop
+				@focus="setFocus"
+				:title="displayTitle"
+			/>
 		</div>
 
-		<el-select
+		<el-date-picker
+			v-else-if="parameter.type === 'dateTime'"
+			v-model="tempValue"
+			ref="inputField"
+			type="datetime"
+			:size="inputSize"
+			:value="displayValue"
+			:title="displayTitle"
+			:disabled="isReadOnly"
+			:placeholder="parameter.placeholder?parameter.placeholder:'Select date and time'"
+			:picker-options="dateTimePickerOptions"
+			@change="valueChanged"
+			@focus="setFocus"
+			@keydown.stop
+		/>
+
+		<n8n-input-number
+			v-else-if="parameter.type === 'number'"
+			ref="inputField" :size="inputSize"
+			:value="displayValue"
+			:controls="false"
+			:max="getArgument('maxValue')"
+			:min="getArgument('minValue')"
+			:precision="getArgument('numberPrecision')"
+			:step="getArgument('numberStepSize')"
+			:disabled="isReadOnly"
+			@change="valueChanged"
+			@focus="setFocus"
+			@keydown.stop
+			:title="displayTitle"
+			:placeholder="parameter.placeholder"
+		/>
+
+		<n8n-select
 			v-else-if="parameter.type === 'options'"
 			ref="inputField"
-			size="small"
+			:size="inputSize"
 			filterable
 			:value="displayValue"
 			:loading="remoteParameterOptionsLoading"
@@ -50,21 +111,23 @@
 			@keydown.stop
 			@focus="setFocus"
 		>
-			<el-option
+			<n8n-option
 				v-for="option in parameterOptions"
 				:value="option.value"
 				:key="option.value"
 				:label="option.name"
 			>
-				<div class="option-headline">{{ option.name }}</div>
-				<div v-if="option.description" class="option-description" v-html="option.description"></div>
-			</el-option>
-		</el-select>
+				<div class="list-option">
+					<div class="option-headline">{{ option.name }}</div>
+					<div v-if="option.description" class="option-description" v-html="option.description"></div>
+				</div>
+			</n8n-option>
+		</n8n-select>
 
-		<el-select
+		<n8n-select
 			v-else-if="parameter.type === 'multiOptions'"
 			ref="inputField"
-			size="small"
+			:size="inputSize"
 			filterable
 			multiple
 			:value="displayValue"
@@ -75,22 +138,32 @@
 			@focus="setFocus"
 			:title="displayTitle"
 		>
-			<el-option v-for="option in parameterOptions" :value="option.value" :key="option.value" :label="option.name" >
-				<div class="option-headline">{{ option.name }}</div>
-				<div v-if="option.description" class="option-description" v-html="option.description"></div>
-			</el-option>
-		</el-select>
+			<n8n-option v-for="option in parameterOptions" :value="option.value" :key="option.value" :label="option.name" >
+				<div class="list-option">
+					<div class="option-headline">{{ option.name }}</div>
+					<div v-if="option.description" class="option-description" v-html="option.description"></div>
+				</div>
+			</n8n-option>
+		</n8n-select>
 
-		<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
-			<el-color-picker :value="displayValue" :disabled="isReadOnly" @change="valueChanged" size="small" class="color-picker" @focus="setFocus" :title="displayTitle" :show-alpha="getArgument('showAlpha')"></el-color-picker>
-			<el-input v-model="tempValue" size="small" type="text" :value="tempValue" :disabled="isReadOnly" @change="valueChanged" @keydown.stop @focus="setFocus" :title="displayTitle" ></el-input>
-		</div>
-
-		<div v-else-if="parameter.type === 'boolean'">
-			<el-switch ref="inputField" :value="displayValue" @change="valueChanged" active-color="#13ce66" :disabled="isValueExpression || isReadOnly"></el-switch>
-			<div class="expression-info clickable" @click="expressionEditDialogVisible = true">Edit Expression</div>
-		</div>
+		<el-switch
+			v-else-if="parameter.type === 'boolean'"
+			class="switch-input"
+			ref="inputField"
+			active-color="#13ce66"
+			:value="displayValue"
+			:disabled="isReadOnly"
+			@change="valueChanged"
+		/>
 	</div>
+
+	<div class="parameter-issues" v-if="getIssues.length">
+		<n8n-tooltip placement="top" >
+			<div slot="content" v-html="'Issues:<br />&nbsp;&nbsp;- ' + getIssues.join('<br />&nbsp;&nbsp;- ')"></div>
+			<font-awesome-icon icon="exclamation-triangle" />
+		</n8n-tooltip>
+	</div>
+
 	<div class="parameter-options" v-if="displayOptionsComputed">
 			<el-dropdown trigger="click" @command="optionSelected" size="mini">
 				<span class="el-dropdown-link">
@@ -103,13 +176,6 @@
 					<el-dropdown-item command="resetValue" :disabled="isDefault" divided>Reset Value</el-dropdown-item>
 				</el-dropdown-menu>
 			</el-dropdown>
-
-	</div>
-	<div class="parameter-issues" v-if="getIssues.length">
-		<el-tooltip placement="top" effect="light">
-			<div slot="content" v-html="'Issues:<br />&nbsp;&nbsp;- ' + getIssues.join('<br />&nbsp;&nbsp;- ')"></div>
-			<font-awesome-icon icon="exclamation-triangle" />
-		</el-tooltip>
 	</div>
 
 	</div>
@@ -163,6 +229,7 @@ export default mixins(
 			'path', // string
 			'value',
 			'isCredential', // boolean
+			'inputSize',
 		],
 		data () {
 			return {
@@ -221,6 +288,11 @@ export default mixins(
 			},
 		},
 		computed: {
+			showExpressionAsTextInput(): boolean {
+				const types = ['number', 'boolean', 'dateTime', 'options', 'multiOptions'];
+
+				return types.includes(this.parameter.type);
+			},
 			dependentParametersValues (): string | null {
 				const loadOptionsDependsOn = this.getArgument('loadOptionsDependsOn') as string[] | undefined;
 
@@ -295,6 +367,20 @@ export default mixins(
 
 				return returnValue;
 			},
+			expressionDisplayValue (): string {
+				const value = this.displayValue;
+
+				// address type errors for text input
+				if (typeof value === 'number' || typeof value === 'boolean') {
+					return JSON.stringify(value);
+				}
+
+				if (value === null) {
+					return '';
+				}
+
+				return value;
+			},
 			displayOptionsComputed (): boolean {
 				if (this.isReadOnly === true) {
 					return false;
@@ -417,6 +503,12 @@ export default mixins(
 			},
 			parameterInputClasses () {
 				const classes = [];
+				const rows = this.getArgument('rows');
+				const isTextarea = this.parameter.type === 'string' && rows !== undefined;
+
+				if (!isTextarea) {
+					classes.push('parameter-value-container');
+				}
 				if (this.isValueExpression) {
 					classes.push('expression');
 				}
@@ -507,6 +599,11 @@ export default mixins(
 			expressionUpdated (value: string) {
 				this.valueChanged(value);
 			},
+			openExpressionEdit() {
+				if (this.isValueExpression) {
+					this.expressionEditDialogVisible = true;
+				}
+			},
 			setFocus () {
 				if (this.isValueExpression) {
 					this.expressionEditDialogVisible = true;
@@ -572,12 +669,18 @@ export default mixins(
 				if (command === 'resetValue') {
 					this.valueChanged(this.parameter.default);
 				} else if (command === 'addExpression') {
-					this.valueChanged(`=${this.value}`);
+					if (this.parameter.type === 'number' || this.parameter.type === 'boolean') {
+						this.valueChanged(`={{${this.value}}}`);
+					}
+					else {
+						this.valueChanged(`=${this.value}`);
+					}
+
 					this.expressionEditDialogVisible = true;
 				} else if (command === 'removeExpression') {
-					this.valueChanged(this.expressionValueComputed || null);
+					this.valueChanged(this.expressionValueComputed !== undefined ? this.expressionValueComputed : null);
 				} else if (command === 'refreshOptions') {
-					this.loadRemoteParameterOptions();	
+					this.loadRemoteParameterOptions();
 				}
 			},
 		},
@@ -631,6 +734,20 @@ export default mixins(
 
 <style scoped lang="scss">
 
+.switch-input {
+	margin: 5px 0;
+}
+
+.parameter-value-container {
+	display: flex;
+	align-items: center;
+}
+
+.parameter-actions {
+	display: inline-flex;
+	align-items: center;
+}
+
 .parameter-input {
 	display: inline-block;
 }
@@ -649,20 +766,13 @@ export default mixins(
 	font-size: 1.2em;
 }
 
-.color-input {
-	background-color: $--custom-input-background;
-	border-radius: 16px;
-	line-height: 2.2em;
+::v-deep .color-input {
+	display: flex;
 
-	.el-input {
-		width: 90px;
-	}
-	.color-picker {
-		float: left;
-		z-index: 10;
+	.el-color-picker__trigger {
+		border: none;
 	}
 }
-
 </style>
 
 <style lang="scss">
@@ -670,93 +780,50 @@ export default mixins(
 .ql-editor {
 	padding: 6px;
 	line-height: 26px;
+	background-color: #f0f0f0;
 }
 
-.expression-info {
-	display: none;
-}
 .expression {
-	.expression-info {
-		display: inline-block;
-		background-color: #441133;
-		color: #fff;
-		font-size: 0.7em;
-		line-height: 2.5em;
-		padding: 0 0.5em;
-		margin-left: 1em;
-		border-radius: 3px;
+	textarea[disabled], input[disabled] {
+		cursor: pointer !important;
 	}
 
 	.el-switch__core {
 		border: 1px dashed $--custom-expression-text;
 	}
 
-	.el-input > .el-input__inner,
-	.el-select > .el-input__inner,
-	.el-textarea textarea,
-	.el-textarea textarea:active,
-	.el-textarea textarea:focus,
-	.el-textarea textarea:hover,
-	.el-input-number,
-	.color-input {
-		border: 1px dashed $--custom-expression-text;
-		color: $--custom-expression-text;
-		background-color: $--custom-expression-background;
-	}
-
-	.el-input-number input,
-	.color-input .el-input__inner {
-		background-color: $--custom-expression-background;
-	}
-
-	// Overwrite again for number and color inputs to not create
-	// a second border inside of the already existing one
-	.color-input .el-input > .el-input__inner,
-	.el-input-number .el-input > .el-input__inner {
-		border: none;
-		background-color: none;
-	}
+	--input-border-color: #{$--custom-expression-text};
+	--input-border-style: dashed;
+	--input-background-color: #{$--custom-expression-background};
+	--disabled-border: #{$--custom-expression-text};
 }
 
 .has-issues {
-	.el-textarea textarea,
-	.el-textarea textarea:active,
-	.el-textarea textarea:focus,
-	.el-textarea textarea:hover,
-	.el-input-number input,
-	.el-input-number input:active,
-	.el-input-number input:focus,
-	.el-input-number input:hover,
-	.el-input-number [role="button"],
-	.el-input-number [role="button"]:active,
-	.el-input-number [role="button"]:focus,
-	.el-input-number [role="button"]:hover,
-	.el-input input,
-	.el-input input:active,
-	.el-input input:focus,
-	.el-input input:hover {
-		border-width: 1px;
-		border-color: #ff8080;
-		border-style: solid;
-	}
+	--input-border-color: var(--color-danger);
 }
 
 .el-dropdown {
 	color: #999;
 }
 
-.option-headline {
-	font-weight: 600;
-}
-li:not(.selected) .option-description {
-	color: $--custom-font-very-light;
-}
-
-.option-description {
-	font-weight: 400;
+.list-option {
+	max-width: 340px;
+	margin: 6px 0;
 	white-space: normal;
-	max-width: 350px;
-	margin-top: -4px;
+
+	.option-headline {
+		font-weight: var(--font-weight-bold);
+		line-height: var(--font-line-height-regular);
+		overflow-wrap: break-word;
+	}
+
+	.option-description {
+		margin-top: 2px;
+		font-size: var(--font-size-2xs);
+		font-weight: var(--font-weight-regular);
+		line-height: var(--font-line-height-xloose);
+		color: $--custom-font-very-light;
+	}
 }
 
 .edit-window-button {
@@ -767,4 +834,10 @@ li:not(.selected) .option-description {
 	display: inline;
 }
 
+.expand-input-icon-container {
+	display: flex;
+	height: 100%;
+	align-items: center;
+}
+
 </style>