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

writer · Dec 3, 2024 · 0773b41 · 0773b41
1 parent 99fcb0d
commit 0773b41
Show file tree

Hide file tree

Showing 15 changed files with 412 additions and 429 deletions.
diff --git 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">{{
@@ -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);

diff --git 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/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/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/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/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/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/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);
 }