From 1b7952a516a5c5dfe1f79e25f811fc044a5e4962 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 5 Dec 2022 14:48:56 +0200
Subject: [PATCH] feat: Fix checkbox line height and make checkbox label
 clickable (#4818)

* fix: Update checkbox design and make checkbox label clickable

* fix: Remove checkbox ids

* chore: remove unused imports
---
 .../src/components/N8nCheckbox/Checkbox.vue      | 16 +++++++++++++++-
 .../src/components/N8nInputLabel/InputLabel.vue  |  8 ++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index cb655ab8d7..06105faf4c 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -1,6 +1,7 @@
 <template>
 	<el-checkbox
 		v-bind="$props"
+		ref="checkbox"
 		:class="['n8n-checkbox', $style.n8nCheckbox]"
 		:disabled="disabled"
 		:indeterminate="indeterminate"
@@ -12,7 +13,8 @@
 			:tooltipText="tooltipText"
 			:bold="false"
 			:size="labelSize"
-		></n8n-input-label>
+			@click.prevent="onLabelClick"
+		/>
 	</el-checkbox>
 </template>
 
@@ -58,6 +60,14 @@ export default Vue.extend({
 		onChange(event: Event) {
 			this.$emit('input', event);
 		},
+		onLabelClick() {
+			const checkboxComponent = this.$refs.checkbox as ElCheckbox;
+			if (!checkboxComponent) {
+				return;
+			}
+
+			(checkboxComponent.$el as HTMLElement).click();
+		},
 	},
 });
 </script>
@@ -70,5 +80,9 @@ export default Vue.extend({
 	span {
 		white-space: normal;
 	}
+
+	label {
+		cursor: pointer;
+	}
 }
 </style>
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 4ba6974d5d..e600a80cb5 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.container">
+	<div :class="$style.container" v-on="$listeners">
 		<label
 			v-if="label || $slots.options"
 			:for="inputName"
@@ -12,7 +12,7 @@
 			}"
 		>
 			<div :class="$style.title" v-if="label">
-				<n8n-text :bold="bold" :size="size" :compact="!underline && !$slots.options" :color="color">
+				<n8n-text :bold="bold" :size="size" :compact="compact" :color="color">
 					{{ label }}
 					<n8n-text color="primary" :bold="bold" :size="size" v-if="required">*</n8n-text>
 				</n8n-text>
@@ -57,6 +57,10 @@ export default Vue.extend({
 		N8nTooltip,
 	},
 	props: {
+		compact: {
+			type: Boolean,
+			default: false,
+		},
 		color: {
 			type: String,
 		},