feat(ui): use design system in builder - WF-127

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">{{
@@ -38,19 +43,24 @@
 
 <script setup lang="ts">
 import WdsButton from "@/wds/WdsButton.vue";
-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);
 
@@ -82,6 +92,10 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
 }
 
+.BuilderModal--overflow .main {
+	overflow: unset;
+}
+
 .titleContainer {
 	border-bottom: 1px solid var(--builderSubtleSeparatorColor);
 	padding: 8px 8px 8px 16px;
@@ -100,6 +114,9 @@ const handleKeydown = (ev: KeyboardEvent) => {
 	max-height: 60vh;
 	overflow: auto;
 }
+.BuilderModal--overflow .slotContainer {
+	overflow: unset;
+}
 
 .actionContainer {
 	border-top: 1px solid var(--builderSubtleSeparatorColor);

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>

src/ui/src/builder/settings/BuilderFieldsAlign.vue

@@ -5,39 +5,11 @@
 		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>
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
@@ -75,6 +47,11 @@ import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "@/injectionKeys";
 import BuilderSelect from "../BuilderSelect.vue";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -84,8 +61,6 @@ const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 enum SubMode {
 	hleft = "start",
 	hcenter = "center",
@@ -231,6 +206,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInputSelect = (select: string) => {
@@ -263,13 +242,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;
+	margin-top: 4px;
 }
 </style>

src/ui/src/builder/settings/BuilderFieldsColor.vue

@@ -5,40 +5,11 @@
 		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>
-
+		<WdsTabs
+			:tabs="tabs"
+			:model-value="mode"
+			@update:model-value="setMode"
+		/>
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<input
@@ -74,6 +45,11 @@ import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
 import injectionKeys from "../../injectionKeys";
 import BuilderTemplateInput from "./BuilderTemplateInput.vue";
+import WdsTabs from "@/wds/WdsTabs.vue";
+import {
+	BuilderFieldCssMode as Mode,
+	BUILDER_FIELD_CSS_TAB_OPTIONS as tabs,
+} from "./constants/builderFieldsCssTabs";
 
 const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
@@ -83,8 +59,6 @@ const rootEl: Ref<HTMLElement> = ref(null);
 const pickerEl: Ref<HTMLInputElement> = ref(null);
 const freehandInputEl: Ref<HTMLInputElement> = ref(null);
 
-type Mode = "pick" | "css" | "default";
-
 const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
 	pick: pickerEl,
 	css: freehandInputEl,
@@ -123,6 +97,10 @@ const setMode = async (newMode: Mode) => {
 	mode.value = newMode;
 	await nextTick();
 	autofocus();
+
+	if (newMode === "default") {
+		setContentValue(component.value.id, fieldKey.value, undefined);
+	}
 };
 
 const handleInput = (ev: Event) =>
@@ -144,13 +122,16 @@ onBeforeUnmount(() => {
 <style scoped>
 @import "../sharedStyles.css";
 
-.chipStackContainer {
-	padding: 12px;
+.main {
 	margin-top: 4px;
-	padding-bottom: 12px;
 }
-.main {
-	border-top: 1px solid var(--builderSeparatorColor);
-	padding: 12px;
+input[type="color"] {
+	width: 100%;
+	height: 34px;
+	border-radius: 8px;
+	border: 1px solid var(--separatorColor);
+
+	display: block;
+	height: 40px;
 }
 </style>