use WdsTextInput

fix pick fields adapt BuilderSelect improve settings handler modal move help button
writer · Dec 3, 2024 · 02a1d02 · 02a1d02
1 parent 0f8a653
commit 02a1d02
Show file tree

Hide file tree

Showing 15 changed files with 487 additions and 516 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -75,7 +75,6 @@ const handleInput = (ev: Event) => {
 
 <style>
 .BuilderFieldsText .content {
-	padding: 16px 12px 12px 12px;
 	width: 100%;
 }
 </style>