Merge pull request #4876 from nextcloud-libraries/fix/7850/add-input-…

…pill-form

feat(NcInputField): add optional pill form appearance to the component

src/components/NcInputField/NcInputField.vue

@@ -51,6 +51,7 @@ 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"
 				v-on="$listeners"
@@ -76,6 +77,9 @@ 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">
@@ -237,6 +241,16 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Specifies whether the input should have a pill form.
+		 * By default, input has rounded corners.
+		 */
+		pill: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Class to add to the input field.
 		 * Necessary to use NcInputField in the NcActionInput component.
@@ -418,6 +432,10 @@ 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 {
@@ -482,11 +500,17 @@ export default {
 		}
 	}
 
-	&__trailing-button.button-vue {
-		position: absolute;
-		top: 0;
-		right: 0;
-		border-radius: var(--border-radius-large);
+	&__trailing-button {
+		&.button-vue {
+			position: absolute;
+			top: 0;
+			right: 0;
+			border-radius: var(--border-radius-large);
+		}
+
+		&--pill.button-vue {
+			border-radius: var(--border-radius-pill);
+		}
 	}
 
 	&__helper-text-message {