From 02a1d023fc83918cfd197a247aa3b9e92d5956a8 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Thu, 28 Nov 2024 23:12:25 +0100
Subject: [PATCH] use WdsTextInput

fix pick fields

adapt BuilderSelect

improve settings handler modal

move help button
---
 src/ui/src/builder/BuilderFieldsAlign.vue     |  70 +++---
 src/ui/src/builder/BuilderFieldsColor.vue     |  75 +++---
 src/ui/src/builder/BuilderFieldsKeyValue.vue  |   3 -
 src/ui/src/builder/BuilderFieldsPadding.vue   |  68 +++---
 src/ui/src/builder/BuilderFieldsShadow.vue    |  67 +++--
 src/ui/src/builder/BuilderFieldsText.vue      |   1 -
 src/ui/src/builder/BuilderFieldsWidth.vue     |  67 +++--
 src/ui/src/builder/BuilderModal.vue           |  33 ++-
 src/ui/src/builder/BuilderSelect.vue          |  44 +---
 .../src/builder/BuilderSettingsHandlers.vue   | 177 +++++---------
 .../src/builder/BuilderSettingsProperties.vue | 230 +++++++++---------
 src/ui/src/builder/BuilderTemplateInput.vue   |  63 +++--
 src/ui/src/builder/sharedStyles.css           |   2 +
 src/ui/src/wds/WdsFieldWrapper.vue            |  69 ++++--
 src/ui/src/wds/WdsTextInput.vue               |  34 ++-
 15 files changed, 487 insertions(+), 516 deletions(-)

diff --git a/src/ui/src/builder/BuilderFieldsAlign.vue b/src/ui/src/builder/BuilderFieldsAlign.vue
index 9ed4ba948..2936e8f7d 100644
--- a/src/ui/src/builder/BuilderFieldsAlign.vue
+++ b/src/ui/src/builder/BuilderFieldsAlign.vue
@@ -5,38 +5,36 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
+		<div class="chipStack">
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'default' }"
+				@click="
+					() => {
+						setMode('default');
+						setContentValue(component.id, fieldKey, undefined);
+					}
+				"
+			>
+				Default
+			</button>
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'css' }"
+				@click="setMode('css')"
+			>
+				CSS
+			</button>
+			<button
+				class="chip"
+				:class="{ active: mode == 'pick' }"
+				tabindex="0"
+				@click="setMode('pick')"
+			>
+				Pick
+			</button>
 		</div>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
@@ -263,13 +261,7 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "./sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	padding-top: 12px;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderFieldsColor.vue b/src/ui/src/builder/BuilderFieldsColor.vue
index 4385bd6b7..7552c9ae7 100644
--- a/src/ui/src/builder/BuilderFieldsColor.vue
+++ b/src/ui/src/builder/BuilderFieldsColor.vue
@@ -5,38 +5,36 @@
 		tabindex="-1"
 		:data-automation-key="fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
+		<div class="chipStack">
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'default' }"
+				@click="
+					() => {
+						setMode('default');
+						setContentValue(component.id, fieldKey, undefined);
+					}
+				"
+			>
+				Default
+			</button>
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'css' }"
+				@click="setMode('css')"
+			>
+				CSS
+			</button>
+			<button
+				class="chip"
+				:class="{ active: mode == 'pick' }"
+				tabindex="0"
+				@click="setMode('pick')"
+			>
+				Pick
+			</button>
 		</div>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
@@ -144,13 +142,12 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "./sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
 .main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+	padding-top: 6px;
+}
+
+input[type="color"] {
+	width: 100%;
+	height: 40px;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderFieldsKeyValue.vue b/src/ui/src/builder/BuilderFieldsKeyValue.vue
index 006002809..dd29aa0ce 100644
--- a/src/ui/src/builder/BuilderFieldsKeyValue.vue
+++ b/src/ui/src/builder/BuilderFieldsKeyValue.vue
@@ -192,9 +192,6 @@ onMounted(async () => {
 @import "./sharedStyles.css";
 
 .chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
 	border-bottom: 1px solid var(--builderSeparatorColor);
 }
 
diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
index 14464d2c5..f9a3e5bbb 100644
--- a/src/ui/src/builder/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -5,38 +5,36 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
+		<div class="chipStack">
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'default' }"
+				@click="
+					() => {
+						setMode('default');
+						setContentValue(component.id, fieldKey, undefined);
+					}
+				"
+			>
+				Default
+			</button>
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'css' }"
+				@click="setMode('css')"
+			>
+				CSS
+			</button>
+			<button
+				class="chip"
+				:class="{ active: mode == 'pick' }"
+				tabindex="0"
+				@click="setMode('pick')"
+			>
+				Pick
+			</button>
 		</div>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
@@ -391,12 +389,6 @@ onBeforeUnmount(() => {
 @import "./sharedStyles.css";
 @import "./ico.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
-
 .main {
 	border-top: 1px solid var(--builderSeparatorColor);
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderFieldsShadow.vue b/src/ui/src/builder/BuilderFieldsShadow.vue
index 54be9f0ac..b7135065f 100644
--- a/src/ui/src/builder/BuilderFieldsShadow.vue
+++ b/src/ui/src/builder/BuilderFieldsShadow.vue
@@ -5,38 +5,36 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
+		<div class="chipStack">
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'default' }"
+				@click="
+					() => {
+						setMode('default');
+						setContentValue(component.id, fieldKey, undefined);
+					}
+				"
+			>
+				Default
+			</button>
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'css' }"
+				@click="setMode('css')"
+			>
+				CSS
+			</button>
+			<button
+				class="chip"
+				:class="{ active: mode == 'pick' }"
+				tabindex="0"
+				@click="setMode('pick')"
+			>
+				Pick
+			</button>
 		</div>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
@@ -236,11 +234,6 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "./sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
 .main {
 	border-top: 1px solid var(--builderSeparatorColor);
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderFieldsText.vue b/src/ui/src/builder/BuilderFieldsText.vue
index cee9043a6..59600bbe9 100644
--- a/src/ui/src/builder/BuilderFieldsText.vue
+++ b/src/ui/src/builder/BuilderFieldsText.vue
@@ -75,7 +75,6 @@ const handleInput = (ev: Event) => {
 
 <style>
 .BuilderFieldsText .content {
-	padding: 16px 12px 12px 12px;
 	width: 100%;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderFieldsWidth.vue b/src/ui/src/builder/BuilderFieldsWidth.vue
index bb3eaf0ba..f72d49e23 100644
--- a/src/ui/src/builder/BuilderFieldsWidth.vue
+++ b/src/ui/src/builder/BuilderFieldsWidth.vue
@@ -5,38 +5,36 @@
 		tabindex="-1"
 		:data-automation-key="props.fieldKey"
 	>
-		<div class="chipStackContainer">
-			<div class="chipStack">
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'default' }"
-					@click="
-						() => {
-							setMode('default');
-							setContentValue(component.id, fieldKey, undefined);
-						}
-					"
-				>
-					Default
-				</button>
-				<button
-					class="chip"
-					tabindex="0"
-					:class="{ active: mode == 'css' }"
-					@click="setMode('css')"
-				>
-					CSS
-				</button>
-				<button
-					class="chip"
-					:class="{ active: mode == 'pick' }"
-					tabindex="0"
-					@click="setMode('pick')"
-				>
-					Pick
-				</button>
-			</div>
+		<div class="chipStack">
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'default' }"
+				@click="
+					() => {
+						setMode('default');
+						setContentValue(component.id, fieldKey, undefined);
+					}
+				"
+			>
+				Default
+			</button>
+			<button
+				class="chip"
+				tabindex="0"
+				:class="{ active: mode == 'css' }"
+				@click="setMode('css')"
+			>
+				CSS
+			</button>
+			<button
+				class="chip"
+				:class="{ active: mode == 'pick' }"
+				tabindex="0"
+				@click="setMode('pick')"
+			>
+				Pick
+			</button>
 		</div>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
@@ -259,11 +257,6 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "./sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
-	margin-top: 4px;
-	padding-bottom: 12px;
-}
 .main {
 	border-top: 1px solid var(--builderSeparatorColor);
 	padding: 12px;
diff --git a/src/ui/src/builder/BuilderModal.vue b/src/ui/src/builder/BuilderModal.vue
index db34a6278..9330dcfa4 100644
--- a/src/ui/src/builder/BuilderModal.vue
+++ b/src/ui/src/builder/BuilderModal.vue
@@ -1,7 +1,12 @@
 <!-- eslint-disable @typescript-eslint/ban-types -->
 <template>
 	<Teleport to="#modal">
-		<div class="BuilderModal" tabindex="-1" @keydown="handleKeydown">
+		<div
+			class="BuilderModal"
+			:class="{ 'BuilderModal--overflow': allowOverflow }"
+			tabindex="-1"
+			@keydown="handleKeydown"
+		>
 			<div class="main">
 				<div class="titleContainer">
 					<i v-if="icon" class="material-symbols-outlined">{{
@@ -33,19 +38,24 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs } from "vue";
+import { PropType, toRefs } from "vue";
 
 export type ModalAction = {
 	desc: string;
 	fn: (..._args: unknown[]) => unknown;
 };
 
-const props = defineProps<{
-	modalTitle: string;
-	icon?: string;
-	closeAction: ModalAction;
-	menuActions?: ModalAction[];
-}>();
+const props = defineProps({
+	modalTitle: { type: String, required: true },
+	icon: { type: String, required: false, default: undefined },
+	closeAction: { type: Object as PropType<ModalAction>, required: true },
+	menuActions: {
+		type: Array as PropType<ModalAction[]>,
+		required: false,
+		default: undefined,
+	},
+	allowOverflow: { type: Boolean, required: false },
+});
 
 const { modalTitle, icon, closeAction, menuActions } = toRefs(props);
 
@@ -77,6 +87,10 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	box-shadow: 0 0 16px 4px rgba(0, 0, 0, 0.3);
 }
 
+.BuilderModal--overflow .main {
+	overflow: unset;
+}
+
 .titleContainer {
 	border-bottom: 1px solid var(--builderSubtleSeparatorColor);
 	padding: 10px 10px 10px 16px;
@@ -95,6 +109,9 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	max-height: 60vh;
 	overflow: auto;
 }
+.BuilderModal--overflow .slotContainer {
+	overflow: unset;
+}
 
 .actionContainer {
 	border-top: 1px solid var(--builderSubtleSeparatorColor);
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index d454a3171..1c273b263 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -1,9 +1,5 @@
 <template>
-	<div
-		ref="trigger"
-		class="BuilderSelect"
-		:class="{ 'BuilderSelect--embedded': variant === 'embedded' }"
-	>
+	<div ref="trigger" class="BuilderSelect">
 		<button
 			class="BuilderSelect__trigger"
 			role="button"
@@ -57,14 +53,6 @@ const props = defineProps({
 	defaultIcon: { type: String, required: false, default: undefined },
 	hideIcons: { type: Boolean, required: false },
 	enableSearch: { type: Boolean, required: false },
-	/**
-	 * Customize the appareance of the selector.
-	 * In embeded mode, we remove the padding and the border around the trigger. Usefull when the selector is embed into a field wrapper.
-	 */
-	variant: {
-		type: String as PropType<"normal" | "embedded">,
-		default: "normal",
-	},
 });
 
 const currentValue = defineModel({ type: String, required: false });
@@ -125,26 +113,23 @@ function onSelect(value: string) {
 
 .BuilderSelect__trigger {
 	display: flex;
-	height: 32px;
+	align-items: center;
+	gap: 8px;
+
+	height: 40px;
 	width: 100%;
+	padding: 8.5px 12px 8.5px 12px;
 
-	gap: 8px;
+	border: 1px solid var(--separatorColor);
+	border-radius: 8px;
 
-	align-items: center;
-	padding: 8px;
 	font-weight: 400;
-	color: #3b3b3b;
-	background: #ffffff;
-}
+	font-size: 0.875rem;
 
-.BuilderSelect__trigger {
-	/* reset button */
-	border: none;
-	cursor: pointer;
+	color: var(--primaryTextColor);
+	background: transparent;
 
-	font-size: 0.75rem;
-	display: flex;
-	align-items: center;
+	cursor: pointer;
 }
 .BuilderSelect__trigger__label {
 	text-overflow: ellipsis;
@@ -162,9 +147,4 @@ function onSelect(value: string) {
 	color: #000000e6;
 	cursor: pointer;
 }
-
-.BuilderSelect--embedded .BuilderSelect__trigger {
-	padding: 0;
-	height: 18px;
-}
 </style>
diff --git a/src/ui/src/builder/BuilderSettingsHandlers.vue b/src/ui/src/builder/BuilderSettingsHandlers.vue
index eca2728cd..efc57aa26 100644
--- a/src/ui/src/builder/BuilderSettingsHandlers.vue
+++ b/src/ui/src/builder/BuilderSettingsHandlers.vue
@@ -1,45 +1,34 @@
 <template>
 	<div v-if="ssbm.isSelectionActive()" class="BuilderSettingsHandlers">
-		<div class="sectionTitle">
+		<div class="BuilderSettingsHandlers__title">
 			<i class="material-symbols-outlined">bolt</i>
 			<h3>Events</h3>
 		</div>
-		<div class="list">
+		<div class="BuilderSettingsHandlers__list">
 			<div
 				v-for="(eventInfo, eventType) in recognisedEvents"
 				:key="eventType"
-				class="fieldWrapper"
 			>
 				<div class="columns">
-					<div class="fieldWrapperMain">
-						<span class="name">{{ eventType }}</span>
-						<div class="content">
-							<BuilderSelect
-								:model-value="
-									component.handlers?.[eventType] ?? ''
-								"
-								:options="getOptions(eventType)"
-								variant="embedded"
-								enable-search
-								@update:model-value="
-									handleHandlerChange($event, eventType)
-								"
-							/>
-						</div>
-					</div>
-					<div class="fieldActions">
-						<button
-							v-if="getStubCode(eventType)"
-							variant="subtle"
-							title="Show event handler stub"
-							@click="showStub(eventType)"
-						>
-							<i class="material-symbols-outlined">help</i>
-						</button>
-					</div>
-				</div>
-				<div v-if="eventInfo?.desc" class="desc">
-					{{ eventInfo.desc }}
+					<WdsFieldWrapper
+						:label="eventType"
+						:hint="eventInfo?.desc"
+						:help-button="
+							getStubCode(eventType)
+								? 'Show event handler stub'
+								: false
+						"
+						@help-click="showStub(eventType)"
+					>
+						<BuilderSelect
+							:model-value="component.handlers?.[eventType] ?? ''"
+							:options="getOptions(eventType)"
+							enable-search
+							@update:model-value="
+								handleHandlerChange($event, eventType)
+							"
+						/>
+					</WdsFieldWrapper>
 				</div>
 			</div>
 		</div>
@@ -73,63 +62,38 @@
 				:close-action="customHandlerModalCloseAction"
 				icon="bolt"
 				modal-title="Add Custom Event Handler"
+				allow-overflow
 			>
 				<div class="customHandlerModalForm">
-					<div class="fieldWrapper">
-						<div class="fieldWrapperMain">
-							<span class="name">Event type</span>
-							<input
-								v-model="customHandlerModal.eventType"
-								class="content"
-								type="text"
-								list="commonEventTypes"
-							/>
-							<datalist id="commonEventTypes">
-								<option
-									v-for="commonEventType in commonEventTypes"
-									:key="commonEventType"
-									:value="commonEventType"
-								>
-									{{ commonEventType }}
-								</option>
-							</datalist>
-						</div>
-						<span class="desc">Can be any event type.</span>
-					</div>
-					<div class="fieldWrapper">
-						<div class="fieldWrapperMain">
-							<span class="name">Handler function</span>
-						</div>
-						<select
-							v-model="customHandlerModal.handlerFunctionName"
-							class="content"
-						>
-							<option
-								v-for="userFunction in userFunctions"
-								:key="userFunction.name"
-								:value="userFunction.name"
-							>
-								{{ userFunction.name }}
-							</option>
-							<option
-								v-for="pageKey in pageKeys"
-								:key="`$goToPage_${pageKey}`"
-								:value="`$goToPage_${pageKey}`"
-							>
-								Go to page "{{ pageKey }}"
-							</option>
+					<WdsFieldWrapper
+						label="Event type"
+						hint="Can be any event type."
+					>
+						<WdsTextInput
+							v-model="customHandlerModal.eventType"
+							type="text"
+							list="commonEventTypes"
+						/>
+						<datalist id="commonEventTypes">
 							<option
-								v-for="workflowKey in workflowKeys"
-								:key="`$runWorkflow_${workflowKey}`"
-								:value="`$runWorkflow_${workflowKey}`"
+								v-for="commonEventType in commonEventTypes"
+								:key="commonEventType"
+								:value="commonEventType"
 							>
-								Run workflow "{{ workflowKey }}"
+								{{ commonEventType }}
 							</option>
-						</select>
-						<span class="desc"
-							>The function that will handle the event.</span
-						>
-					</div>
+						</datalist>
+					</WdsFieldWrapper>
+					<WdsFieldWrapper
+						label="Handler function"
+						hint="The function that will handle the event."
+					>
+						<BuilderSelect
+							v-model="customHandlerModal.handlerFunctionName"
+							:options="options"
+							enable-search
+						/>
+					</WdsFieldWrapper>
 				</div>
 
 				<button @click="addCustomEventHandler()">
@@ -150,6 +114,8 @@ import BuilderModal, { ModalAction } from "./BuilderModal.vue";
 import { WriterComponentDefinition } from "@/writerTypes";
 import BuilderSelect from "./BuilderSelect.vue";
 import type { Option } from "./BuilderSelect.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -184,7 +150,7 @@ const options = computed<Option[]>(() => {
 	];
 });
 
-function getOptions(eventType: string): Option[] {
+function getOptions(eventType?: string): Option[] {
 	if (!isHandlerInvalid(eventType)) return options.value;
 
 	const handler = component.value.handlers?.[eventType];
@@ -364,34 +330,19 @@ const copyToClipboard = (text: string) => {
 .BuilderSettingsHandlers {
 	padding: 24px;
 }
-.list {
-	border-radius: 4px;
-}
 
-.fieldWrapper .columns {
-	display: grid;
-	grid-template-columns: minmax(0, 100%) auto;
-	gap: 12px;
+.BuilderSettingsHandlers__title {
+	padding-bottom: 24px;
+	display: flex;
+	gap: 8px;
 	align-items: center;
-	max-width: 100%;
-}
-
-.fieldWrapperMain {
-	width: 100%;
-}
-
-.fieldWrapper .content {
-	padding: 16px 8px 12px 8px;
-	width: 100%;
-}
-.fieldWrapper .content .select {
-	padding: 0;
-	height: auto;
+	font-size: 1rem;
 }
 
-.fieldActions > button {
-	border-radius: 16px;
-	font-size: 0.875rem;
+.BuilderSettingsHandlers__list {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
 }
 
 .customHandler {
@@ -426,14 +377,10 @@ const copyToClipboard = (text: string) => {
 }
 
 .customHandlerModalForm {
-	display: flex;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
 	align-items: center;
 	gap: 16px;
 	margin-bottom: 16px;
 }
-
-.customHandlerModalForm .fieldWrapper {
-	flex: 1 1 auto;
-	margin-top: 0;
-}
 </style>
diff --git a/src/ui/src/builder/BuilderSettingsProperties.vue b/src/ui/src/builder/BuilderSettingsProperties.vue
index 3739ef62e..c603e416f 100644
--- a/src/ui/src/builder/BuilderSettingsProperties.vue
+++ b/src/ui/src/builder/BuilderSettingsProperties.vue
@@ -7,119 +7,109 @@
 			<span class="material-symbols-outlined"> tune </span>
 			<h3>Properties</h3>
 		</div>
-		<div>
+		<div
+			v-for="propertyCategory in fieldCategories"
+			:key="propertyCategory"
+			class="BuilderSettingsProperties__category"
+		>
+			<h4
+				v-if="fieldsByCategory[propertyCategory].length > 0"
+				class="BuilderSettingsProperties__category__title"
+			>
+				{{ propertyCategory }}
+			</h4>
 			<div
-				v-for="propertyCategory in fieldCategories"
-				:key="propertyCategory"
-				class="propertyCategory"
+				v-for="[fieldKey, fieldValue] in fieldsByCategory[
+					propertyCategory
+				]"
+				:key="fieldKey"
+				class="BuilderSettingsProperties__category__field"
 			>
-				<div
-					v-if="fieldsByCategory[propertyCategory].length > 0"
-					class="title"
-				>
-					<h4>{{ propertyCategory }}</h4>
-				</div>
-				<div
-					v-for="[fieldKey, fieldValue] in fieldsByCategory[
-						propertyCategory
-					]"
-					:key="fieldKey"
+				<WdsFieldWrapper
+					:label="
+						propertyCategory === 'Tools'
+							? undefined
+							: fieldValue.name ?? fieldKey
+					"
+					:hint="fieldValue.desc"
+					:type="fieldValue.type"
 				>
-					<div class="fieldWrapper">
-						<div v-if="propertyCategory != 'Tools'" class="name">
-							{{ fieldValue.name ?? fieldKey
-							}}<span class="type"> : {{ fieldValue.type }}</span>
-						</div>
-
-						<BuilderFieldsColor
-							v-if="fieldValue.type == FieldType.Color"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsColor>
-
-						<BuilderFieldsShadow
-							v-if="fieldValue.type == FieldType.Shadow"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsShadow>
-
-						<BuilderFieldsKeyValue
-							v-if="fieldValue.type == FieldType.KeyValue"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-							:instance-path="selectedInstancePath"
-						></BuilderFieldsKeyValue>
-
-						<BuilderFieldsText
-							v-if="fieldValue.type == FieldType.Text"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsText>
-
-						<BuilderFieldsText
-							v-if="fieldValue.type == FieldType.Number"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsText>
-
-						<BuilderFieldsText
-							v-if="fieldValue.type == FieldType.IdKey"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsText>
-
-						<BuilderFieldsObject
-							v-if="fieldValue.type == FieldType.Object"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsObject>
-
-						<BuilderFieldsWidth
-							v-if="fieldValue.type == FieldType.Width"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsWidth>
-
-						<BuilderFieldsAlign
-							v-if="fieldValue.type == FieldType.HAlign"
-							class="content"
-							direction="horizontal"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsAlign>
-
-						<BuilderFieldsAlign
-							v-if="fieldValue.type == FieldType.VAlign"
-							class="content"
-							direction="vertical"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsAlign>
-
-						<BuilderFieldsPadding
-							v-if="fieldValue.type == FieldType.Padding"
-							class="content"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						></BuilderFieldsPadding>
-
-						<BuilderFieldsTools
-							v-if="fieldValue.type == FieldType.Tools"
-							:field-key="fieldKey"
-							:component-id="selectedComponent.id"
-						>
-						</BuilderFieldsTools>
-
-						<div v-if="fieldValue.desc" class="desc">
-							{{ fieldValue.desc }}
-						</div>
-					</div>
-				</div>
+					<BuilderFieldsColor
+						v-if="fieldValue.type == FieldType.Color"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsColor>
+
+					<BuilderFieldsShadow
+						v-if="fieldValue.type == FieldType.Shadow"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsShadow>
+
+					<BuilderFieldsKeyValue
+						v-if="fieldValue.type == FieldType.KeyValue"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+						:instance-path="selectedInstancePath"
+					></BuilderFieldsKeyValue>
+
+					<BuilderFieldsText
+						v-if="fieldValue.type == FieldType.Text"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsText>
+
+					<BuilderFieldsText
+						v-if="fieldValue.type == FieldType.Number"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsText>
+
+					<BuilderFieldsText
+						v-if="fieldValue.type == FieldType.IdKey"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsText>
+
+					<BuilderFieldsObject
+						v-if="fieldValue.type == FieldType.Object"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsObject>
+
+					<BuilderFieldsWidth
+						v-if="fieldValue.type == FieldType.Width"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsWidth>
+
+					<BuilderFieldsAlign
+						v-if="fieldValue.type == FieldType.HAlign"
+						direction="horizontal"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsAlign>
+
+					<BuilderFieldsAlign
+						v-if="fieldValue.type == FieldType.VAlign"
+						direction="vertical"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsAlign>
+
+					<BuilderFieldsPadding
+						v-if="fieldValue.type == FieldType.Padding"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					></BuilderFieldsPadding>
+
+					<BuilderFieldsTools
+						v-if="fieldValue.type == FieldType.Tools"
+						:field-key="fieldKey"
+						:component-id="selectedComponent.id"
+					>
+					</BuilderFieldsTools>
+				</WdsFieldWrapper>
 			</div>
 		</div>
 	</div>
@@ -139,6 +129,7 @@ import BuilderFieldsShadow from "./BuilderFieldsShadow.vue";
 import BuilderFieldsText from "./BuilderFieldsText.vue";
 import BuilderFieldsWidth from "./BuilderFieldsWidth.vue";
 import BuilderFieldsTools from "./BuilderFieldsTools.vue";
+import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -187,18 +178,21 @@ const fieldsByCategory = computed(() => {
 
 .BuilderSettingsProperties {
 	padding: 24px;
-}
 
-.propertyCategory .title {
-	margin-top: 24px;
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
 }
 
-textarea.content {
-	resize: vertical;
-	height: 8em;
+.BuilderSettingsProperties__category {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
 }
 
-input[type="color"].content {
-	height: 48px;
+.BuilderSettingsProperties__category__title {
+	color: #828282;
+	font-weight: 500;
+	font-size: 12px;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderTemplateInput.vue b/src/ui/src/builder/BuilderTemplateInput.vue
index 02742361f..09d94a2e4 100644
--- a/src/ui/src/builder/BuilderTemplateInput.vue
+++ b/src/ui/src/builder/BuilderTemplateInput.vue
@@ -1,11 +1,9 @@
 <template>
 	<div class="BuilderTemplateInput">
 		<template v-if="!props.multiline">
-			<input
+			<WdsTextInput
 				ref="input"
-				class="templateInput"
-				type="text"
-				:value="props.value"
+				:model-value="props.value"
 				autocorrect="off"
 				autocomplete="off"
 				spellcheck="false"
@@ -29,21 +27,19 @@
 			</datalist>
 		</template>
 
-		<template v-if="props.multiline">
-			<textarea
-				ref="input"
-				v-capture-tabs
-				class="templateInput"
-				:variant="props.variant"
-				:value="props.value"
-				autocorrect="off"
-				autocomplete="off"
-				spellcheck="false"
-				rows="3"
-				:placeholder="props.placeholder"
-				@input="handleInput"
-			></textarea>
-		</template>
+		<WdsTextareaInput
+			v-if="props.multiline"
+			ref="input"
+			v-capture-tabs
+			:variant="props.variant"
+			:model-value="props.value"
+			autocorrect="off"
+			autocomplete="off"
+			spellcheck="false"
+			rows="3"
+			:placeholder="props.placeholder"
+			@input="handleInput"
+		/>
 
 		<div
 			v-if="autocompleteOptions.length"
@@ -68,8 +64,17 @@
 
 <script setup lang="ts">
 import Fuse from "fuse.js";
-import { PropType, inject, nextTick, ref, shallowRef } from "vue";
+import {
+	PropType,
+	inject,
+	nextTick,
+	ref,
+	shallowRef,
+	ComponentInstance,
+} from "vue";
 import injectionKeys from "../injectionKeys";
+import WdsTextInput from "@/wds/WdsTextInput.vue";
+import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 
 const emit = defineEmits(["input", "update:value"]);
 
@@ -97,7 +102,7 @@ const props = defineProps({
 
 const ss = inject(injectionKeys.core);
 const autocompleteOptions = shallowRef<{ text: string; type: string }[]>([]);
-const input = ref<HTMLInputElement | null>(null);
+const input = ref<ComponentInstance<typeof WdsTextInput> | null>(null);
 
 defineExpose({
 	focus: () => input.value?.focus(),
@@ -107,24 +112,26 @@ function _get(object: object, path: string[]) {
 	return path.reduce((acc, key) => acc?.[key], object);
 }
 
-const handleComplete = (selectedText) => {
+const handleComplete = (selectedText: string) => {
 	let newValue = input.value?.value ?? "";
-	const { selectionStart, selectionEnd } = input.value ?? {};
+	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
 	const text = newValue.slice(0, selectionStart);
 	const full = getPath(text);
 	if (full === null) return;
 	const keyword = full.at(-1);
 	const regexKeyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "$"; // escape the keyword to handle properly on a regex
 	const replaced = text.replace(new RegExp(regexKeyword), selectedText);
-
+	// TODO: fix autocomplete
+	console.log("handleComplete old", input.value.value);
 	newValue = replaced + newValue.slice(selectionEnd);
 	emit("input", { target: { value: newValue } });
+	console.log("handleComplete new", newValue);
 	emit("update:value", newValue);
 	autocompleteOptions.value = [];
 	input.value.focus();
 	nextTick(() => {
-		input.value.selectionEnd = replaced.length;
-		input.value.selectionStart = replaced.length;
+		input.value.setSelectionEnd(replaced.length);
+		input.value.setSelectionStart(replaced.length);
 	});
 };
 
@@ -154,13 +161,15 @@ const escapeVariable = (key) => {
 };
 
 const handleInput = (ev) => {
+	console.log("##handleInput", ev);
 	emit("input", ev);
 	emit("update:value", ev.target.value);
 	showAutocomplete();
 };
 
 const showAutocomplete = () => {
-	const { selectionStart, selectionEnd, value: newValue } = input.value ?? {};
+	const { selectionStart, selectionEnd } = input.value?.getSelection() ?? {};
+	const newValue = input.value?.value;
 	const collapsed = selectionStart === selectionEnd;
 	if (!collapsed) {
 		autocompleteOptions.value = [];
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index c699da0c2..6702eaa52 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -181,6 +181,7 @@ code {
 	font-size: 1rem;
 }
 
+/*
 .fieldWrapper {
 	position: relative;
 	width: 100%;
@@ -223,6 +224,7 @@ code {
 	outline: none;
 	width: 100%;
 }
+*/
 
 .fieldWrapper > .desc {
 	color: var(--builderSecondaryTextColor);
diff --git a/src/ui/src/wds/WdsFieldWrapper.vue b/src/ui/src/wds/WdsFieldWrapper.vue
index 31cce095e..02a9a5cad 100644
--- a/src/ui/src/wds/WdsFieldWrapper.vue
+++ b/src/ui/src/wds/WdsFieldWrapper.vue
@@ -1,17 +1,36 @@
 <template>
 	<div class="WdsFieldWrapper colorTransformer">
-		<label>{{ label }}</label>
-		<div class="slotContainer" :class="{ frameSlot }"><slot></slot></div>
-		<div v-if="hint" class="hint">{{ hint }}</div>
+		<div class="WdsFieldWrapper__title">
+			<label class="WdsFieldWrapper__title__label">{{ label }}</label>
+			<button
+				v-if="helpButton"
+				class="WdsFieldWrapper__title__help"
+				variant="subtle"
+				:title="typeof helpButton === 'string' ? helpButton : undefined"
+				@click="$emit('helpClick')"
+			>
+				<i class="material-symbols-outlined">help</i>
+			</button>
+		</div>
+		<div class="WdsFieldWrapper__slot"><slot></slot></div>
+		<div v-if="hint" class="WdsFieldWrapper__hint">{{ hint }}</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-	label: string;
-	hint?: string;
-	frameSlot?: boolean;
-}>();
+defineProps({
+	label: { type: String, required: true },
+	hint: { type: String, required: false, default: undefined },
+	helpButton: {
+		type: [String, Boolean],
+		required: false,
+		default: undefined,
+	},
+});
+
+defineEmits({
+	helpClick: () => true,
+});
 </script>
 
 <style scoped>
@@ -23,26 +42,34 @@ defineProps<{
 	gap: 4px;
 }
 
-label {
+.WdsFieldWrapper__title {
 	color: var(--primaryTextColor);
-	font-size: 14px;
-	font-weight: 400;
-	line-height: 20px;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 8px;
 }
 
-.slotContainer.frameSlot {
-	border-radius: 8px;
-	padding: 8.5px 12px 8.5px 12px;
-	font-size: 0.875rem;
-	border: 1px solid var(--separatorColor);
+.WdsFieldWrapper__title__help {
+	background-color: transparent;
+	border: none;
+	border-radius: 50%;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+}
+.WdsFieldWrapper__title__help:hover {
+	color: var(--primaryColor);
 }
 
-.slotContainer.frameSlot:focus-within {
-	border: 1px solid var(--softenedAccentColor);
-	box-shadow: 0px 0px 0px 3px rgba(81, 31, 255, 0.05);
+.WdsFieldWrapper__title__label {
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
 }
 
-.hint {
+.WdsFieldWrapper__hint {
 	color: var(--secondaryTextColor);
 	margin-top: 4px;
 	font-family: Poppins;
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index cd59d7136..b4245c071 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -2,6 +2,7 @@
 	<div
 		v-if="leftIcon"
 		class="WdsTextInput WdsTextInput--leftIcon colorTransformer"
+		v-bind="$attrs"
 		@click="input.focus()"
 	>
 		<i class="material-symbols-outlined">{{ leftIcon }}</i>
@@ -15,6 +16,7 @@
 	<input
 		v-else
 		v-model="model"
+		v-bind="$attrs"
 		type="text"
 		class="WdsTextInput colorTransformer"
 	/>
@@ -25,12 +27,42 @@ import { ref } from "vue";
 
 const model = defineModel({ type: String });
 
+// disable attributes inheritance to apply attr to nested input
+defineOptions({ inheritAttrs: false });
+
 defineProps({
 	leftIcon: { type: String, required: false, default: undefined },
 	placeholder: { type: String, required: false, default: undefined },
 });
 
-const input = ref();
+defineExpose({
+	focus,
+	getSelection,
+	value: model,
+	setSelectionEnd,
+	setSelectionStart,
+});
+
+const input = ref<HTMLInputElement>();
+
+function setSelectionStart(value: number) {
+	if (input.value) input.value.selectionStart = value;
+}
+function setSelectionEnd(value: number) {
+	if (input.value) input.value.selectionEnd = value;
+}
+
+function getSelection() {
+	if (!input.value) return {};
+	return {
+		selectionStart: input.value.selectionStart,
+		selectionEnd: input.value.selectionEnd,
+	};
+}
+
+function focus() {
+	input.value?.focus();
+}
 </script>
 
 <style scoped>