From ca38469cdde7a90a3f0b6ac847eb98c0aedf6480 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Thu, 18 Jul 2024 15:06:22 +0200
Subject: [PATCH] fix(NcInputField): Perfectly align trailing button outline
 with input field

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcInputField/NcInputField.vue | 30 +++++++++-----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 4b776a0b43..fc6b5705c7 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -17,7 +17,11 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 </docs>
 
 <template>
-	<div class="input-field" :class="{ 'input-field--disabled': disabled }">
+	<div class="input-field"
+		:class="{
+			'input-field--disabled': disabled,
+			'input-field--pill': pill,
+		}">
 		<div class="input-field__main-wrapper">
 			<input v-bind="$attrs"
 				:id="computedId"
@@ -35,7 +39,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 						'input-field__input--label-outside': labelOutside,
 						'input-field__input--success': success,
 						'input-field__input--error': error,
-						'input-field__input--pill': pill,
 					}]"
 				:value="value.toString()"
 				v-on="$listeners"
@@ -61,9 +64,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 			<NcButton v-if="showTrailingButton"
 				type="tertiary-no-background"
 				class="input-field__trailing-button"
-				:class="[{
-					'input-field__trailing-button--pill': pill,
-				}]"
 				:aria-label="trailingButtonLabel"
 				:disabled="disabled"
 				@click="handleTrailingButtonClick">
@@ -329,9 +329,10 @@ export default {
 <style lang="scss" scoped>
 
 .input-field {
+	--input-border-radius: var(--border-radius-element, var(--border-radius-large));
+	// styles
 	position: relative;
 	width: 100%;
-	border-radius: var(--border-radius-large);
 	margin-block-start: 6px; // for the label in active state
 
 	&__main-wrapper {
@@ -344,6 +345,10 @@ export default {
 		filter: saturate(0.4);
 	}
 
+	&--pill {
+		--input-border-radius: var(--border-radius-pill);
+	}
+
 	&__input {
 		margin: 0;
 		padding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input
@@ -356,11 +361,12 @@ export default {
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
 		border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
-		border-radius: var(--border-radius-large);
+		border-radius: var(--input-border-radius);
 
 		cursor: pointer;
 		-webkit-appearance: textfield !important;
 		-moz-appearance: textfield !important;
+		appearance: textfield !important;
 
 		// Center text if external label is used
 		&--label-outside {
@@ -418,10 +424,6 @@ export default {
 				box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
 			}
 		}
-
-		&--pill {
-			border-radius: var(--border-radius-pill);
-		}
 	}
 
 	&__label {
@@ -489,21 +491,17 @@ export default {
 
 	&__trailing-button {
 		--button-size: calc(var(--default-clickable-area) - 2 * var(--border-width-input-focused, 2px)) !important;
+		--button-radius: calc(var(--input-border-radius) - var(--border-width-input-focused, 2px)); // lower radius as size is smaller
 
 		&.button-vue {
 			position: absolute;
 			top: var(--border-width-input-focused, 2px);
 			right: var(--border-width-input-focused, 2px);
-			border-radius: var(--border-radius-large);
 
 			&:focus-visible {
 				box-shadow: none !important;
 			}
 		}
-
-		&--pill.button-vue {
-			border-radius: var(--border-radius-pill);
-		}
 	}
 
 	&__helper-text-message {