From 51b2237970198e657c42ab8640cd9d5cb0600571 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Mon, 16 Dec 2024 10:38:53 +0100
Subject: [PATCH] fix(ui): re-introduce fields unit in Builder - WF-127

---
 .../builder/settings/BuilderSettingsProperties.vue  |  2 +-
 src/ui/src/wds/WdsFieldWrapper.vue                  | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/ui/src/builder/settings/BuilderSettingsProperties.vue b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
index d91d64597..c0415f41e 100644
--- a/src/ui/src/builder/settings/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/settings/BuilderSettingsProperties.vue
@@ -28,7 +28,7 @@
 							: fieldValue.name ?? fieldKey
 					"
 					:hint="fieldValue.desc"
-					:type="fieldValue.type"
+					:unit="fieldValue.type"
 				>
 					<BuilderFieldsColor
 						v-if="fieldValue.type == FieldType.Color"
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index 01e4da7fa..1b5cfdce3 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -1,9 +1,12 @@
 <template>
 	<div class="WdsFieldWrapper colorTransformer">
 		<div v-if="label || helpButton" class="WdsFieldWrapper__title">
-			<label v-if="label" class="WdsFieldWrapper__title__label">{{
-				label
-			}}</label>
+			<label v-if="label" class="WdsFieldWrapper__title__label"
+				>{{ label
+				}}<span v-if="unit" class="WdsFieldWrapper__title__label__unit"
+					>&nbsp;:&nbsp;{{ unit }}</span
+				>
+			</label>
 			<button
 				v-if="helpButton"
 				class="WdsFieldWrapper__title__help"
@@ -22,6 +25,7 @@
 <script setup lang="ts">
 defineProps({
 	label: { type: String, required: false, default: undefined },
+	unit: { type: String, required: false, default: undefined },
 	hint: { type: String, required: false, default: undefined },
 	helpButton: {
 		type: [String, Boolean],
@@ -70,6 +74,9 @@ defineEmits({
 	font-weight: 400;
 	line-height: 20px;
 }
+.WdsFieldWrapper__title__label__unit {
+	color: var(--secondaryTextColor);
+}
 
 .WdsFieldWrapper__hint {
 	color: var(--secondaryTextColor);