chore: Migrate to built-in NcSelect input label

apps/files/src/components/TransferOwnershipDialogue.vue

@@ -25,7 +25,7 @@
 		<form @submit.prevent="submit">
 			<p class="transfer-select-row">
 				<span>{{ readableDirectory }}</span>
-				<NcButton v-if="directory === undefined" 
+				<NcButton v-if="directory === undefined"
 					class="transfer-select-row__choose_button"
 					@click.prevent="start">
 					{{ t('files', 'Choose file or folder to transfer') }}
@@ -38,8 +38,9 @@
 				<label for="targetUser">
 					<span>{{ t('files', 'New owner') }}</span>
 				</label>
-				<NcSelect input-id="targetUser"
-					v-model="selectedUser"
+				<NcSelect v-model="selectedUser"
+					input-id="targetUser"
+					label-outside
 					:options="formatedUserSuggestions"
 					:multiple="false"
 					:loading="loadingUsers"

apps/files_sharing/src/components/SharingInput.vue

@@ -22,10 +22,9 @@
 
 <template>
 	<div class="sharing-search">
-		<label for="sharing-search-input">{{ t('files_sharing', 'Search for share recipients') }}</label>
 		<NcSelect ref="select"
 			v-model="value"
-			input-id="sharing-search-input"
+			:input-label="t('files_sharing', 'Search for share recipients')"
 			class="sharing-search__input"
 			:disabled="!canReshare"
 			:loading="loading"
@@ -542,10 +541,6 @@ export default {
 	flex-direction: column;
 	margin-bottom: 4px;
 
-	label[for="sharing-search-input"] {
-		margin-bottom: 2px;
-	}
-
 	&__input {
 		width: 100%;
 		margin: 10px 0;

apps/settings/src/components/AdminDelegating.vue

@@ -4,7 +4,6 @@
 		:doc-url="authorizedSettingsDocLink">
 		<div class="setting-list">
 			<div v-for="setting in availableSettings" :key="setting.class">
-				<label :for="setting.id">{{ setting.sectionName }}</label>
 				<GroupSelect :available-groups="availableGroups" :authorized-groups="authorizedGroups" :setting="setting" />
 			</div>
 		</div>

apps/settings/src/components/AdminDelegation/GroupSelect.vue

@@ -1,6 +1,6 @@
 <template>
 	<NcSelect v-model="selected"
-		:input-id="setting.id"
+		:input-label="setting.sectionName"
 		class="group-select"
 		:placeholder="t('settings', 'None')"
 		label="displayName"

apps/settings/src/components/AdminTwoFactor.vue

@@ -19,11 +19,8 @@
 				{{ t('settings', 'Two-factor authentication is enforced for all members of the following groups.') }}
 			</p>
 			<p>
-				<label for="enforcedGroups">
-					<span>{{ t('settings', 'Enforced groups') }}</span>
-				</label>
 				<NcSelect v-model="enforcedGroups"
-					input-id="enforcedGroups"
+					:input-label="t('settings', 'Enforced groups')"
 					:options="groups"
 					:disabled="loading"
 					:multiple="true"
@@ -35,11 +32,8 @@
 				{{ t('settings', 'Two-factor authentication is not enforced for members of the following groups.') }}
 			</p>
 			<p>
-				<label for="excludedGroups">
-					<span>{{ t('settings', 'Excluded groups') }}</span>
-				</label>
 				<NcSelect v-model="excludedGroups"
-					input-id="excludedGroups"
+					:input-label="t('settings', 'Excluded groups')"
 					:options="groups"
 					:disabled="loading"
 					:multiple="true"

apps/settings/src/components/AppDetails.vue

@@ -36,11 +36,8 @@
 					:title="t('settings', 'All')"
 					value="">
 				<br />
-				<label for="limitToGroups">
-					<span>{{ t('settings', 'Limit app usage to groups') }}</span>
-				</label>
 				<NcSelect v-if="isLimitedToGroups(app)"
-					input-id="limitToGroups"
+					:input-label="t('settings', 'Limit app usage to groups')"
 					:options="groups"
 					:value="appGroups"
 					:limit="5"

apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/VisibilityDropdown.vue

@@ -28,6 +28,7 @@
 		</label>
 		<NcSelect :input-id="inputId"
 			class="visibility-container__select"
+			label-outside
 			:clearable="false"
 			:options="visibilityOptions"
 			:value="visibilityObject"

apps/settings/src/components/Users/NewUserModal.vue

@@ -82,12 +82,8 @@
 					:class="{ 'icon-loading-small': loading.groups }"
 					:value="newUser.groups"
 					:required="!settings.isAdmin" />
-				<label class="modal__label"
-					for="new-user-groups">
-					{{ !settings.isAdmin ? t('settings', 'Groups (required)') : t('settings', 'Groups') }}
-				</label>
 				<NcSelect class="modal__select"
-					input-id="new-user-groups"
+					:input-label="!settings.isAdmin ? t('settings', 'Groups (required)') : t('settings', 'Groups')"
 					:placeholder="t('settings', 'Set user groups')"
 					:disabled="loading.groups || loading.all"
 					:options="canAddGroups"
@@ -104,27 +100,19 @@
 			</div>
 			<div v-if="subAdminsGroups.length > 0 && settings.isAdmin"
 				class="modal__item">
-				<label class="modal__label"
-					for="new-user-sub-admin">
-					{{ t('settings', 'Administered groups') }}
-				</label>
 				<NcSelect v-model="newUser.subAdminsGroups"
 					class="modal__select"
-					input-id="new-user-sub-admin"
+					:input-label="t('settings', 'Administered groups')"
 					:placeholder="t('settings', 'Set user as admin for …')"
 					:options="subAdminsGroups"
 					:close-on-select="false"
 					:multiple="true"
 					label="name" />
 			</div>
 			<div class="modal__item">
-				<label class="modal__label"
-					for="new-user-quota">
-					{{ t('settings', 'Quota') }}
-				</label>
 				<NcSelect v-model="newUser.quota"
 					class="modal__select"
-					input-id="new-user-quota"
+					:input-label="t('settings', 'Quota')"
 					:placeholder="t('settings', 'Set user quota')"
 					:options="quotaOptions"
 					:clearable="false"
@@ -133,13 +121,9 @@
 			</div>
 			<div v-if="showConfig.showLanguages"
 				class="modal__item">
-				<label class="modal__label"
-					for="new-user-language">
-					{{ t('settings', 'Language') }}
-				</label>
 				<NcSelect	v-model="newUser.language"
 					class="modal__select"
-					input-id="new-user-language"
+					:input-label="t('settings', 'Language')"
 					:placeholder="t('settings', 'Set default language')"
 					:clearable="false"
 					:selectable="option => !option.languages"
@@ -148,15 +132,10 @@
 					label="name" />
 			</div>
 			<div :class="['modal__item managers', { 'icon-loading-small': loading.manager }]">
-				<label class="modal__label"
-					for="new-user-manager">
-					<!-- TRANSLATORS This string describes a manager in the context of an organization -->
-					{{ t('settings', 'Manager') }}
-				</label>
 				<NcSelect v-model="newUser.manager"
 					class="modal__select"
-					input-id="new-user-manager"
-					:placeholder="managerLabel"
+					:input-label="managerLabel"
+					:placeholder="managerPlaceholder"
 					:options="possibleManagers"
 					:user-select="true"
 					label="displayname"
@@ -211,7 +190,9 @@ export default {
 		return {
 			possibleManagers: [],
 			// TRANSLATORS This string describes a manager in the context of an organization
-			managerLabel: t('settings', 'Set user manager'),
+			managerLabel: t('settings', 'Manager'),
+			// TRANSLATORS This string describes a manager in the context of an organization
+			managerPlaceholder: t('settings', 'Set user manager'),
 		}
 	},
 
@@ -424,11 +405,6 @@ export default {
 		align-self: flex-start;
 	}
 
-	&__label {
-		display: block;
-		padding: 4px 0;
-	}
-
 	&__select {
 		width: 100%;
 	}

apps/settings/src/components/Users/UserRow.vue

@@ -123,6 +123,7 @@
 				</label>
 				<NcSelect data-cy-user-list-input-groups
 					:data-loading="loading.groups || undefined"
+					label-outside
 					:input-id="'groups' + uniqueId"
 					:close-on-select="false"
 					:disabled="isLoadingField"
@@ -156,6 +157,7 @@
 				</label>
 				<NcSelect data-cy-user-list-input-subadmins
 					:data-loading="loading.subadmins || undefined"
+					label-outside
 					:input-id="'subadmins' + uniqueId"
 					:close-on-select="false"
 					:disabled="isLoadingField"
@@ -183,6 +185,7 @@
 					{{ t('settings', 'Select user quota') }}
 				</label>
 				<NcSelect v-model="editedUserQuota"
+					label-outside
 					:close-on-select="true"
 					:create-option="validateQuota"
 					data-cy-user-list-input-quota
@@ -219,6 +222,7 @@
 				<NcSelect :id="'language' + uniqueId"
 					data-cy-user-list-input-language
 					:data-loading="loading.languages || undefined"
+					label-outside
 					:allow-empty="false"
 					:disabled="isLoadingField"
 					:loading="loading.languages"
@@ -265,6 +269,7 @@
 					class="select--fill"
 					data-cy-user-list-input-manager
 					:data-loading="loading.manager || undefined"
+					label-outside
 					:input-id="'manager' + uniqueId"
 					:close-on-select="true"
 					:disabled="isLoadingField"

apps/settings/src/components/Users/UserSettingsDialog.vue

@@ -60,9 +60,8 @@
 
 		<NcAppSettingsSection id="default-settings"
 			:name="t('settings', 'Defaults')">
-			<label for="default-quota-select">{{ t('settings', 'Default quota') }}</label>
 			<NcSelect v-model="defaultQuota"
-				input-id="default-quota-select"
+				:input-label="t('settings', 'Default quota')"
 				placement="top"
 				:taggable="true"
 				:options="quotaOptions"
@@ -271,10 +270,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-label[for="default-quota-select"] {
-	display: block;
-	padding: 4px 0;
-}
-</style>

apps/systemtags/src/components/SystemTagForm.vue

@@ -31,9 +31,8 @@
 		</h3>
 
 		<div class="system-tag-form__group">
-			<label for="system-tags-input">{{ t('systemtags', 'Search for a tag to edit') }}</label>
 			<NcSelectTags v-model="selectedTag"
-				input-id="system-tags-input"
+				:input-label="t('systemtags', 'Search for a tag to edit')"
 				:placeholder="t('systemtags', 'Collaborative tags …')"
 				:fetch-tags="false"
 				:options="tags"
@@ -56,9 +55,8 @@
 		</div>
 
 		<div class="system-tag-form__group">
-			<label for="system-tag-level">{{ t('systemtags', 'Tag level') }}</label>
 			<NcSelect v-model="tagLevel"
-				input-id="system-tag-level"
+				:input-label="t('systemtags', 'Tag level')"
 				:options="tagLevelOptions"
 				:reduce="level => level.id"
 				:clearable="false"

apps/systemtags/src/components/SystemTags.vue

@@ -26,9 +26,8 @@
 			:name="t('systemtags', 'Loading collaborative tags …')"
 			:size="32" />
 		<template v-else>
-			<label for="system-tags-input">{{ t('systemtags', 'Search or create collaborative tags') }}</label>
 			<NcSelectTags class="system-tags__select"
-				input-id="system-tags-input"
+				:input-label="t('systemtags', 'Search or create collaborative tags')"
 				:placeholder="t('systemtags', 'Collaborative tags …')"
 				:options="sortedTags"
 				:value="selectedTags"
@@ -224,10 +223,6 @@ export default Vue.extend({
 	display: flex;
 	flex-direction: column;
 
-	label[for="system-tags-input"] {
-		margin-bottom: 2px;
-	}
-
 	&__select {
 		width: 100%;
 		:deep {

apps/user_status/src/components/ClearAtSelect.vue

@@ -25,6 +25,7 @@
 			{{ $t('user_status', 'Clear status after') }}
 		</label>
 		<NcSelect input-id="clearStatus"
+			label-outside
 			class="clear-at-select__select"
 			:options="options"
 			:value="option"