Merge remote-tracking branch 'origin' into chore/noid/merge-master-next

nextcloud-libraries · Nov 1, 2023 · a6f09b8 · a6f09b8
2 parents 120d960 + daaec86
commit a6f09b8
Show file tree

Hide file tree

Showing 112 changed files with 151 additions and 88 deletions.
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -10,13 +10,14 @@ export default defineConfig({
 	env: {
 		failSilently: false,
 		type: 'actual',
-		screenshotsFolder: './cypress/snapshots/actual',
 		SNAPSHOT_BASE_DIRECTORY: './cypress/snapshots/base',
 		SNAPSHOT_DIFF_DIRECTORY: './cypress/snapshots/diff',
 		INTEGRATION_FOLDER: 'cypress/visual/',
 		trashAssetsBeforeRuns: true,
 	},
 
+	screenshotsFolder: './cypress/snapshots/actual',
+
 	component: {
 		setupNodeEvents(on, config) {
 			getCompareSnapshotsPlugin(on, config)

diff --git a/...avigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route-menu-active.png b/...avigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route-menu-active.png
diff --git a/...ts/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route.png b/...ts/base/AppNavigationItem.cy.ts/NcAppNavigationItem-primary-on-active-route.png
diff --git a/.../base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-route.png b/.../base/AppNavigationItem.cy.ts/NcAppNavigationItem-tertiary-non-active-route.png
diff --git a/...ull-starred_false-compact_true-header_image-secondary_button-editable_false.png b/...ull-starred_false-compact_true-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_false-compact_true-header_image-secondary_button-editable_true.png b/...null-starred_false-compact_true-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_false-compact_true-header_image-secondary_none-editable_false.png b/..._null-starred_false-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_false-compact_true-header_image-secondary_none-editable_true.png b/...e_null-starred_false-compact_true-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_false-compact_true-header_none-secondary_button-editable_false.png b/...null-starred_false-compact_true-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_false-compact_true-header_none-secondary_button-editable_true.png b/..._null-starred_false-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_false-compact_true-header_none-secondary_none-editable_false.png b/...e_null-starred_false-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_false-compact_true-header_none-secondary_none-editable_true.png b/...me_null-starred_false-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...null-starred_null-compact_true-header_image-secondary_button-editable_false.png b/...null-starred_null-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._null-starred_null-compact_true-header_image-secondary_button-editable_true.png b/..._null-starred_null-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_null-starred_null-compact_true-header_image-secondary_none-editable_false.png b/...e_null-starred_null-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_null-starred_null-compact_true-header_image-secondary_none-editable_true.png b/...me_null-starred_null-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._null-starred_null-compact_true-header_none-secondary_button-editable_false.png b/..._null-starred_null-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_null-starred_null-compact_true-header_none-secondary_button-editable_true.png b/...e_null-starred_null-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_null-starred_null-compact_true-header_none-secondary_none-editable_false.png b/...me_null-starred_null-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_null-starred_null-compact_true-header_none-secondary_none-editable_true.png b/...ame_null-starred_null-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...null-starred_true-compact_true-header_image-secondary_button-editable_false.png b/...null-starred_true-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._null-starred_true-compact_true-header_image-secondary_button-editable_true.png b/..._null-starred_true-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_null-starred_true-compact_true-header_image-secondary_none-editable_false.png b/...e_null-starred_true-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_null-starred_true-compact_true-header_image-secondary_none-editable_true.png b/...me_null-starred_true-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._null-starred_true-compact_true-header_none-secondary_button-editable_false.png b/..._null-starred_true-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_null-starred_true-compact_true-header_none-secondary_button-editable_true.png b/...e_null-starred_true-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_null-starred_true-compact_true-header_none-secondary_none-editable_false.png b/...me_null-starred_true-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_null-starred_true-compact_true-header_none-secondary_none-editable_true.png b/...ame_null-starred_true-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_false-compact_true-header_image-secondary_button-editable_false.png b/...rue-starred_false-compact_true-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_false-compact_true-header_image-secondary_button-editable_true.png b/...true-starred_false-compact_true-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_false-compact_true-header_image-secondary_none-editable_false.png b/..._true-starred_false-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_false-compact_true-header_image-secondary_none-editable_true.png b/...e_true-starred_false-compact_true-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_false-compact_true-header_none-secondary_button-editable_false.png b/...true-starred_false-compact_true-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_false-compact_true-header_none-secondary_button-editable_true.png b/..._true-starred_false-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_false-compact_true-header_none-secondary_none-editable_false.png b/...e_true-starred_false-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_false-compact_true-header_none-secondary_none-editable_true.png b/...me_true-starred_false-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...true-starred_null-compact_true-header_image-secondary_button-editable_false.png b/...true-starred_null-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._true-starred_null-compact_true-header_image-secondary_button-editable_true.png b/..._true-starred_null-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_true-starred_null-compact_true-header_image-secondary_none-editable_false.png b/...e_true-starred_null-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_true-starred_null-compact_true-header_image-secondary_none-editable_true.png b/...me_true-starred_null-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._true-starred_null-compact_true-header_none-secondary_button-editable_false.png b/..._true-starred_null-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_true-starred_null-compact_true-header_none-secondary_button-editable_true.png b/...e_true-starred_null-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_true-starred_null-compact_true-header_none-secondary_none-editable_false.png b/...me_true-starred_null-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_true-starred_null-compact_true-header_none-secondary_none-editable_true.png b/...ame_true-starred_null-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...true-starred_true-compact_true-header_image-secondary_button-editable_false.png b/...true-starred_true-compact_true-header_image-secondary_button-editable_false.png
diff --git a/..._true-starred_true-compact_true-header_image-secondary_button-editable_true.png b/..._true-starred_true-compact_true-header_image-secondary_button-editable_true.png
diff --git a/...e_true-starred_true-compact_true-header_image-secondary_none-editable_false.png b/...e_true-starred_true-compact_true-header_image-secondary_none-editable_false.png
diff --git a/...me_true-starred_true-compact_true-header_image-secondary_none-editable_true.png b/...me_true-starred_true-compact_true-header_image-secondary_none-editable_true.png
diff --git a/..._true-starred_true-compact_true-header_none-secondary_button-editable_false.png b/..._true-starred_true-compact_true-header_none-secondary_button-editable_false.png
diff --git a/...e_true-starred_true-compact_true-header_none-secondary_button-editable_true.png b/...e_true-starred_true-compact_true-header_none-secondary_button-editable_true.png
diff --git a/...me_true-starred_true-compact_true-header_none-secondary_none-editable_false.png b/...me_true-starred_true-compact_true-header_none-secondary_none-editable_false.png
diff --git a/...ame_true-starred_true-compact_true-header_none-secondary_none-editable_true.png b/...ame_true-starred_true-compact_true-header_none-secondary_none-editable_true.png
diff --git a/...ll-starred_false-compact_false-header_image-secondary_button-editable_false.png b/...ll-starred_false-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...ull-starred_false-compact_false-header_image-secondary_button-editable_true.png b/...ull-starred_false-compact_false-header_image-secondary_button-editable_true.png
diff --git a/...null-starred_false-compact_false-header_image-secondary_none-editable_false.png b/...null-starred_false-compact_false-header_image-secondary_none-editable_false.png
diff --git a/..._null-starred_false-compact_false-header_image-secondary_none-editable_true.png b/..._null-starred_false-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...ull-starred_false-compact_false-header_none-secondary_button-editable_false.png b/...ull-starred_false-compact_false-header_none-secondary_button-editable_false.png
diff --git a/...null-starred_false-compact_false-header_none-secondary_button-editable_true.png b/...null-starred_false-compact_false-header_none-secondary_button-editable_true.png
diff --git a/..._null-starred_false-compact_false-header_none-secondary_none-editable_false.png b/..._null-starred_false-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...e_null-starred_false-compact_false-header_none-secondary_none-editable_true.png b/...e_null-starred_false-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ull-starred_null-compact_false-header_image-secondary_button-editable_false.png b/...ull-starred_null-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_null-compact_false-header_image-secondary_button-editable_true.png b/...null-starred_null-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_null-compact_false-header_image-secondary_none-editable_false.png b/..._null-starred_null-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_null-compact_false-header_image-secondary_none-editable_true.png b/...e_null-starred_null-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_null-compact_false-header_none-secondary_button-editable_false.png b/...null-starred_null-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_null-compact_false-header_none-secondary_button-editable_true.png b/..._null-starred_null-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_null-compact_false-header_none-secondary_none-editable_false.png b/...e_null-starred_null-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_null-compact_false-header_none-secondary_none-editable_true.png b/...me_null-starred_null-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ull-starred_true-compact_false-header_image-secondary_button-editable_false.png b/...ull-starred_true-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...null-starred_true-compact_false-header_image-secondary_button-editable_true.png b/...null-starred_true-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._null-starred_true-compact_false-header_image-secondary_none-editable_false.png b/..._null-starred_true-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_null-starred_true-compact_false-header_image-secondary_none-editable_true.png b/...e_null-starred_true-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...null-starred_true-compact_false-header_none-secondary_button-editable_false.png b/...null-starred_true-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._null-starred_true-compact_false-header_none-secondary_button-editable_true.png b/..._null-starred_true-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_null-starred_true-compact_false-header_none-secondary_none-editable_false.png b/...e_null-starred_true-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_null-starred_true-compact_false-header_none-secondary_none-editable_true.png b/...me_null-starred_true-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...ue-starred_false-compact_false-header_image-secondary_button-editable_false.png b/...ue-starred_false-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...rue-starred_false-compact_false-header_image-secondary_button-editable_true.png b/...rue-starred_false-compact_false-header_image-secondary_button-editable_true.png
diff --git a/...true-starred_false-compact_false-header_image-secondary_none-editable_false.png b/...true-starred_false-compact_false-header_image-secondary_none-editable_false.png
diff --git a/..._true-starred_false-compact_false-header_image-secondary_none-editable_true.png b/..._true-starred_false-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...rue-starred_false-compact_false-header_none-secondary_button-editable_false.png b/...rue-starred_false-compact_false-header_none-secondary_button-editable_false.png
diff --git a/...true-starred_false-compact_false-header_none-secondary_button-editable_true.png b/...true-starred_false-compact_false-header_none-secondary_button-editable_true.png
diff --git a/..._true-starred_false-compact_false-header_none-secondary_none-editable_false.png b/..._true-starred_false-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...e_true-starred_false-compact_false-header_none-secondary_none-editable_true.png b/...e_true-starred_false-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_null-compact_false-header_image-secondary_button-editable_false.png b/...rue-starred_null-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_null-compact_false-header_image-secondary_button-editable_true.png b/...true-starred_null-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_null-compact_false-header_image-secondary_none-editable_false.png b/..._true-starred_null-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_null-compact_false-header_image-secondary_none-editable_true.png b/...e_true-starred_null-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_null-compact_false-header_none-secondary_button-editable_false.png b/...true-starred_null-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_null-compact_false-header_none-secondary_button-editable_true.png b/..._true-starred_null-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_null-compact_false-header_none-secondary_none-editable_false.png b/...e_true-starred_null-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_null-compact_false-header_none-secondary_none-editable_true.png b/...me_true-starred_null-compact_false-header_none-secondary_none-editable_true.png
diff --git a/...rue-starred_true-compact_false-header_image-secondary_button-editable_false.png b/...rue-starred_true-compact_false-header_image-secondary_button-editable_false.png
diff --git a/...true-starred_true-compact_false-header_image-secondary_button-editable_true.png b/...true-starred_true-compact_false-header_image-secondary_button-editable_true.png
diff --git a/..._true-starred_true-compact_false-header_image-secondary_none-editable_false.png b/..._true-starred_true-compact_false-header_image-secondary_none-editable_false.png
diff --git a/...e_true-starred_true-compact_false-header_image-secondary_none-editable_true.png b/...e_true-starred_true-compact_false-header_image-secondary_none-editable_true.png
diff --git a/...true-starred_true-compact_false-header_none-secondary_button-editable_false.png b/...true-starred_true-compact_false-header_none-secondary_button-editable_false.png
diff --git a/..._true-starred_true-compact_false-header_none-secondary_button-editable_true.png b/..._true-starred_true-compact_false-header_none-secondary_button-editable_true.png
diff --git a/...e_true-starred_true-compact_false-header_none-secondary_none-editable_false.png b/...e_true-starred_true-compact_false-header_none-secondary_none-editable_false.png
diff --git a/...me_true-starred_true-compact_false-header_none-secondary_none-editable_true.png b/...me_true-starred_true-compact_false-header_none-secondary_none-editable_true.png
diff --git a/src/assets/action.scss b/src/assets/action.scss
@@ -115,7 +115,7 @@
 		&__longtext {
 			cursor: pointer;
 			// allow the use of `\n`
-			white-space: pre-wrap;
+			white-space: pre-wrap !important;
 		}
 
 		&__name {
@@ -126,5 +126,13 @@
 			max-width: 100%;
 			display: inline-block;
 		}
+
+		&__menu-icon {
+			// Push to the right
+			margin-left: auto;
+			// Align with right end of the button
+			// This is the padding-right
+			margin-right: -$icon-margin;
+		}
 	}
 }
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
@@ -26,35 +26,32 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 
 ```vue
 	<template>
-		<div style="display: flex; align-items: center;">
-			<NcActions>
-				<NcActionButton @click="showMessage('Delete')">
-					<template #icon>
-						<Delete :size="20" />
-					</template>
-					Delete
-				</NcActionButton>
-				<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
-					<template #icon>
-						<Delete :size="20" />
-					</template>
-					Delete and close
-				</NcActionButton>
-				<NcActionButton :close-after-click="true" @click="focusInput">
-					<template #icon>
-						<Plus :size="20" />
-					</template>
-					Create
-				</NcActionButton>
-				<NcActionButton :disabled="true" @click="showMessage('Disabled')">
-					<template #icon>
-						<Delete :size="20" />
-					</template>
-					Disabled button
-				</NcActionButton>
-			</NcActions>
-			<input ref="input" />
-		</div>
+		<NcActions>
+			<NcActionButton @click="showMessage('Delete')">
+				<template #icon>
+					<Delete :size="20" />
+				</template>
+				Delete
+			</NcActionButton>
+			<NcActionButton :close-after-click="true" @click="showMessage('Delete and close menu')">
+				<template #icon>
+					<Delete :size="20" />
+				</template>
+				Delete and close
+			</NcActionButton>
+			<NcActionButton :is-menu="true">
+				<template #icon>
+					<Plus :size="20" />
+				</template>
+				Create
+			</NcActionButton>
+			<NcActionButton :disabled="true" @click="showMessage('Disabled')">
+				<template #icon>
+					<Delete :size="20" />
+				</template>
+				Disabled button
+			</NcActionButton>
+		</NcActions>
 	</template>
 	<script>
 	import Delete from 'vue-material-design-icons/Delete'
@@ -69,9 +66,6 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 			showMessage(msg) {
 				alert(msg)
 			},
-			focusInput() {
-				this.$nextTick(() => this.$refs.input.focus())
-			},
 		},
 	}
 	</script>
@@ -217,13 +211,17 @@ export default {
 			<!-- default text display -->
 			<span v-else class="action-button__text">{{ text }}</span>
 
+			<!-- right arrow icon when there is a sub-menu -->
+			<ChevronRightIcon v-if="isMenu" class="action-button__menu-icon" />
+
 			<!-- fake slot to gather inner text -->
 			<slot v-if="false" />
 		</button>
 	</li>
 </template>
 
 <script>
+import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
 import ActionTextMixin from '../../mixins/actionText.js'
 
 /**
@@ -232,6 +230,9 @@ import ActionTextMixin from '../../mixins/actionText.js'
 export default {
 	name: 'NcActionButton',
 
+	components: {
+		ChevronRightIcon,
+	},
 	mixins: [ActionTextMixin],
 
 	props: {
@@ -242,13 +243,23 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
 		/**
 		 * aria-hidden attribute for the icon slot
 		 */
 		ariaHidden: {
 			type: Boolean,
 			default: null,
 		},
+
+		/**
+		 * If this is a menu, a chevron icon will
+		 * be added at the end of the line
+		 */
+		isMenu: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		/**

diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
@@ -989,10 +989,11 @@ export default {
 		})
 
 		const isNavLink = (action) => {
-			const componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag
+			const href = action?.props?.href
 			return (
-				componentName === 'NcActionLink'
-				&& action?.componentOptions?.propsData?.href?.startsWith(window.location.origin)
+				action?.type?.name === 'NcActionLink'
+					&& !href?.startsWith('#')
+					&& new URL(href, window.location.origin).origin === window.location.origin
 			)
 		}
 		// Automatically detect whether all actions are website navigation links

diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
@@ -388,6 +388,8 @@ export default {
 :deep(.splitpanes.default-theme) {
 	.app-content-list {
 		max-width: none;
+		/* Thin scrollbar is hard to catch on resizable columns */
+		scrollbar-width: auto;
 	}
 
 	.splitpanes__pane {

diff --git a/src/components/NcEmptyContent/NcEmptyContent.vue b/src/components/NcEmptyContent/NcEmptyContent.vue
@@ -28,8 +28,8 @@ Providing an icon, name, and a description is strongly advised.
 
 ```
 <template>
-	<NcEmptyContent
-		name="No comments">
+	<NcEmptyContent name="No comments"
+		description="Start writing comments and they will appear here.">
 		<template #icon>
 			<Comment />
 		</template>
@@ -150,7 +150,7 @@ export default {
 				{{ name }}
 			</span>
 		</slot>
-		<p v-if="description !== '' || $slots.description">
+		<p v-if="description !== '' || $slots.description" class="empty-content__description">
 			<!-- @slot Optional formatted description rendered inside a paragraph -->
 			<slot name="description">
 				{{ description }}
@@ -231,6 +231,10 @@ export default {
 		line-height: 30px;
 	}
 
+	&__description {
+		color: var(--color-text-maxcontrast);
+	}
+
 	&__action {
 		margin-top: 8px;
 

diff --git a/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue b/src/components/NcRelatedResourcesPanel/NcRelatedResourcesPanel.vue
@@ -28,7 +28,7 @@ Use this component to display the related resources of a given item.
 ```
 <template>
 	<NcRelatedResourcesPanel provider-id="talk"
-							 header="Related resources for talk"
+		header="Related resources for talk"
 		:item-id="conversationId" />
 </template>
 
@@ -48,7 +48,7 @@ export default {
 	<div v-if="appEnabled && isVisible" class="related-resources">
 		<div class="related-resources__header">
 			<h5>{{ header }}</h5>
-			<p>{{ description }}</p>
+			<p>{{ subline }}</p>
 		</div>
 
 		<NcResource v-for="resource in resources"
@@ -120,6 +120,17 @@ export default {
 			type: String,
 			default: t('Related resources'),
 		},
+		description: {
+			type: String,
+			default: t('Anything shared with the same group of people will show up here'),
+		},
+		/**
+		 * If this element is used on a primary element set to true for primary styling.
+		 */
+		primary: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: [
@@ -143,12 +154,11 @@ export default {
 			}
 			return this.error ?? this.resources.length > 0
 		},
-
-		description() {
+		subline() {
 			if (this.error) {
 				return t('Error getting related resources. Please contact your system administrator if you have any questions.')
 			}
-			return t('Anything shared with the same group of people will show up here')
+			return this.description
 		},
 
 		hasResourceInfo() {

diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -337,6 +337,7 @@ export default {
 		'submit',
 		'paste',
 		'update:value',
+		'smart-picker-submit',
 	],
 
 	data() {
@@ -585,21 +586,30 @@ export default {
 			// there is no way to get a tribute result asynchronously
 			// so we immediately insert a node and replace it when the result comes
 			getLinkWithPicker(item.original.id)
-				.then(link => {
-					// replace dummy temp element by a text node which contains the link
-					const tmpElem = document.getElementById('tmp-link-result-node')
-					const newElem = document.createTextNode(link)
-					tmpElem.replaceWith(newElem)
-					this.setCursorAfter(newElem)
-					this.updateValue(this.$refs.contenteditable.innerHTML)
+				.then(result => {
+					// replace dummy temp element by a text node which contains the picker result
+					const tmpElem = document.getElementById('tmp-smart-picker-result-node')
+					const eventData = {
+						result,
+						insertText: true,
+					}
+					this.$emit('smart-picker-submit', eventData)
+					if (eventData.insertText) {
+						const newElem = document.createTextNode(result)
+						tmpElem.replaceWith(newElem)
+						this.setCursorAfter(newElem)
+						this.updateValue(this.$refs.contenteditable.innerHTML)
+					} else {
+						tmpElem.remove()
+					}
 				})
 				.catch((error) => {
 					console.debug('Smart picker promise rejected:', error)
-					const tmpElem = document.getElementById('tmp-link-result-node')
+					const tmpElem = document.getElementById('tmp-smart-picker-result-node')
 					this.setCursorAfter(tmpElem)
 					tmpElem.remove()
 				})
-			return '<span id="tmp-link-result-node"></span>'
+			return '<span id="tmp-smart-picker-result-node"></span>'
 		},
 		setCursorAfter(element) {
 			const range = document.createRange()

diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
@@ -1146,6 +1146,9 @@ body {
 			.vs__selected {
 				// Fix `max-width` for `position: absolute`
 				max-width: 100%;
+				// Fix color to be accessible
+				opacity: 1;
+				color: var(--color-text-maxcontrast);
 			}
 		}
 		.vs__selected-options {

diff --git a/src/components/NcTimezonePicker/NcTimezonePicker.vue b/src/components/NcTimezonePicker/NcTimezonePicker.vue
@@ -42,7 +42,8 @@ export default {
 </docs>
 
 <template>
-	<NcSelect :model-value="selectedTimezone"
+	<NcSelect :uid="uid"
+		:model-value="selectedTimezone"
 		:options="options"
 		:multiple="false"
 		:clearable="false"
@@ -59,6 +60,7 @@ import {
 	getSortedTimezoneList,
 } from './timezone.js'
 import getTimezoneManager from './timezoneDataProviderService.js'
+import GenRandomId from '../../utils/GenRandomId.js'
 import NcSelect from '../NcSelect/index.js'
 import { t } from '../../l10n.js'
 
@@ -82,6 +84,13 @@ export default {
 			type: String,
 			default: 'floating',
 		},
+		/**
+		 * ID of the inner vue-select element, can be used for labels like: `vs-${uid}__combobox`
+		 */
+		uid: {
+			type: [String, Number],
+			default: () => `tz-${GenRandomId(5)}`,
+		},
 	},
 	emits: ['update:modelValue'],
 	computed: {