N8n 4040 data mapping

packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.js

@@ -7,7 +7,11 @@ export default {
 	argTypes: {
 		placement: {
 			type: 'select',
-			options: ['top', 'bottom'],
+			options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-end'],
+		},
+		size: {
+			type: 'select',
+			options: ['mini', 'small', 'medium'],
 		},
 	},
 	parameters: {

packages/design-system/src/components/N8nActionToggle/ActionToggle.vue

@@ -1,16 +1,18 @@
 <template>
 	<span :class="$style.container">
-		<el-dropdown :placement="placement" trigger="click" @command="onCommand">
-			<span :class="$style.button">
+		<el-dropdown :placement="placement" :size="size" trigger="click" @command="onCommand" @visible-change="onVisibleChange">
+			<span :class="{[$style.button]: true, [$style[theme]]: !!theme}">
 				<component :is="$options.components.N8nIcon"
 					icon="ellipsis-v"
+					:size="iconSize"
 				/>
 			</span>
 			<el-dropdown-menu slot="dropdown">
 				<el-dropdown-item
 					v-for="action in actions"
 					:key="action.value"
 					:command="action.value"
+					:disabled="action.disabled"
 				>
 					{{action.label}}
 				</el-dropdown-item>
@@ -42,12 +44,30 @@ export default {
 			type: String,
 			default: 'bottom',
 			validator: (value: string): boolean =>
-				['top', 'bottom'].includes(value),
+				['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start'].includes(value),
+		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['mini', 'small', 'medium'].includes(value),
+		},
+		iconSize: {
+			type: String,
+		},
+		theme: {
+			type: String,
+			default: 'default',
+			validator: (value: string): boolean =>
+				['default', 'dark'].includes(value),
 		},
 	},
 	methods: {
 		onCommand(value: string) {
-			this.$emit('action', value)	;
+			this.$emit('action', value);
+		},
+		onVisibleChange(value: boolean) {
+			this.$emit('visible-change', value);
 		},
 	},
 };
@@ -62,6 +82,18 @@ export default {
 	cursor: pointer;
 	padding: var(--spacing-4xs);
 	border-radius: var(--border-radius-base);
+
+	&:hover {
+		color: var(--color-primary);
+		cursor: pointer;
+	}
+
+	&:focus {
+		color: var(--color-primary);
+	}
+}
+
+.dark {
 	color: var(--color-text-dark);
 
 	&:focus {

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

@@ -1,16 +1,26 @@
-<template functional>
-	<div :class="{[$style.inputLabelContainer]: !props.labelHoverableOnly}">
-		<div :class="$options.methods.getLabelClass(props, $style)">
-			<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="props.bold" :size="props.size" v-if="props.required">*</component>
-			</component>
-			<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" size="small" />
-					<div slot="content" v-html="$options.methods.addTargetBlank(props.tooltipText)"></div>
-				</component>
+<template>
+	<div :class="$style.container">
+		<div :class="{
+				[this.$style.label]: !!this.label,
+				[this.$style.underline]: this.underline,
+				[this.$style[this.size]]: true,
+			}">
+			<div :class="$style.title" v-if="label">
+				<n8n-text :bold="bold" :size="size" :compact="!underline">
+					{{ label }}
+					<n8n-text color="primary" :bold="bold" :size="size" v-if="required">*</n8n-text>
+				</n8n-text>
+			</div>
+			<span :class="[$style.infoIcon, showTooltip ? $style.visible: $style.hidden]" v-if="tooltipText && label">
+				<n8n-tooltip placement="top" :popper-class="$style.tooltipPopper">
+					<n8n-icon icon="question-circle" size="small" />
+					<div slot="content" v-html="addTargetBlank(tooltipText)"></div>
+				</n8n-tooltip>
 			</span>
+			<div v-if="$slots.options && label" :class="{[$style.overlay]: true, [$style.visible]: showOptions}"><div></div></div>
+			<div v-if="$slots.options" :class="{[$style.options]: true, [$style.visible]: showOptions}">
+				<slot name="options"></slot>
+			</div>
 		</div>
 		<slot></slot>
 	</div>
@@ -56,89 +66,109 @@ export default {
 		showTooltip: {
 			type: Boolean,
 		},
-		labelHoverableOnly: {
+		showOptions: {
 			type: Boolean,
-			default: false,
 		},
 	},
 	methods: {
 		addTargetBlank,
-		getLabelClass(props: {label: string, size: string, underline: boolean}, $style: any) {
-			if (!props.label) {
-				return '';
-			}
-
-			const classes = [];
-			if (props.underline) {
-				classes.push($style[`label-${props.size}-underline`]);
-			}
-			else {
-				classes.push($style[`label-${props.size}`]);
-			}
-
-			if (props.labelHoverableOnly) {
-				classes.push($style.inputLabel);
-			}
-
-			return classes;
-		},
 	},
 };
 </script>
 
 <style lang="scss" module>
-.inputLabelContainer:hover {
-	> div > .infoIcon {
-		display: inline-block;
+.container {
+	display: flex;
+	flex-direction: column;
+}
+
+.container:hover,.inputLabel:hover {
+	.infoIcon {
+		opacity: 1;
+	}
+
+	.options {
+		opacity: 1;
+		transition: opacity 100ms ease-in; // transition on hover in
+	}
+
+	.overlay {
+		opacity: 1;
+		transition: opacity 100ms ease-in; // transition on hover in
 	}
 }
 
-.inputLabel:hover {
-	> .infoIcon {
-		display: inline-block;
+.title {
+	display: flex;
+	align-items: center;
+	min-width: 0;
+
+	> * {
+		white-space: nowrap;
 	}
 }
 
 .infoIcon {
+	display: flex;
+	align-items: center;
 	color: var(--color-text-light);
+	padding-left: var(--spacing-4xs);
+	background-color: var(--color-background-xlight);
+	z-index: 1;
 }
 
-.showIcon {
-	display: inline-block;
-}
+.options {
+	opacity: 0;
+	background-color: var(--color-background-xlight);
+	transition: opacity 250ms cubic-bezier(.98,-0.06,.49,-0.2); // transition on hover out
 
-.hiddenIcon {
-	display: none;
+	> * {
+		float: right;
+	}
 }
 
-.label {
-	* {
-		margin-right: var(--spacing-5xs);
+.overlay {
+	position: relative;
+	flex-grow: 1;
+	opacity: 0;
+	transition: opacity 250ms cubic-bezier(.98,-0.06,.49,-0.2); // transition on hover out
+
+	> div {
+		position: absolute;
+		width: 60px;
+		height: 19px;
+		top: 0;
+		right: 0;
+		z-index: 0;
+
+		background: linear-gradient(270deg, var(--color-foreground-xlight) 72.19%, rgba(255, 255, 255, 0) 107.45%);
 	}
 }
 
-.label-small {
-	composes: label;
-	margin-bottom: var(--spacing-4xs);
+.hidden {
+	opacity: 0;
 }
 
-.label-medium {
-	composes: label;
-	margin-bottom: var(--spacing-2xs);
+.visible {
+	opacity: 1;
 }
 
-.underline {
-	border-bottom: var(--border-base);
+.label {
+	display: flex;
+	overflow-x: hidden;
+	overflow-y: clip;
+}
+
+.small {
+	margin-bottom: var(--spacing-5xs);
 }
 
-.label-small-underline {
-	composes: label-small;
-	composes: underline;
+.medium {
+	margin-bottom: var(--spacing-2xs);
 }
 
-.label-medium-underline {
-	composes: label-medium;
-	composes: underline;
+.underline {
+	border-bottom: var(--border-base);
 }
 
 .tooltipPopper {
@@ -148,4 +178,5 @@ export default {
 		margin-left: var(--spacing-s);
 	}
 }
+
 </style>

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -1,7 +1,7 @@
 <template>
-	<label role="radio" tabindex="-1" :class="$style.container" aria-checked="true">
+	<label role="radio" tabindex="-1" :class="{[$style.container]: true, [$style.hoverable]: !this.disabled}" aria-checked="true">
 		<input type="radio" tabindex="-1" autocomplete="off" :class="$style.input" :value="value">
-		<div :class="{[$style.button]: true, [$style.active]: active}" @click="$emit('click')">{{ label }}</div>
+		<div :class="{[$style.button]: true, [$style.active]: active, [$style[size]]: true, [$style.disabled]: disabled}" @click="$emit('click')">{{ label }}</div>
 	</label>
 </template>
 
@@ -21,6 +21,15 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		size: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium'].includes(value),
+		},
+		disabled: {
+			type: Boolean,
+		},
 	},
 };
 </script>
@@ -30,11 +39,11 @@ export default {
 	display: inline-block;
 	outline: 0;
 	position: relative;
+}
 
-	&:hover {
-		.button:not(.active) {
-			color: var(--color-primary);
-		}
+.hoverable:hover {
+	.button:not(.active) {
+		color: var(--color-primary);
 	}
 }
 
@@ -47,16 +56,29 @@ export default {
 
 .button {
 	border-radius: 0;
-	padding: 0 var(--spacing-xs);
 	display: flex;
 	align-items: center;
-	height: 26px;
-	font-size: var(--font-size-2xs);
 	border-radius: var(--border-radius-base);
 	font-weight: var(--font-weight-bold);
 	color: var(--color-text-base);
-	cursor: pointer;
 	transition: background-color 0.2s ease;
+	cursor: pointer;
+}
+
+.disabled {
+	cursor: not-allowed;
+}
+
+.medium {
+	height: 26px;
+	font-size: var(--font-size-2xs);
+	padding: 0 var(--spacing-xs);
+}
+
+.small {
+	font-size: var(--font-size-3xs);
+	height: 15px;
+	padding: 0 var(--spacing-4xs);
 }
 
 .active {