Merge pull request #694 from madeindjs/WF-127-2

fix(ui): re-introduce fields unit in Builder - WF-127
writer · Dec 16, 2024 · 94f6293 · 94f6293
2 parents c01562a + 51b2237
commit 94f6293
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git 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
@@ -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);