Merge pull request #2241 from nextcloud/backport/2236/stable4

[stable4] Fix empty user bubble

src/components/UserBubble/UserBubble.vue

@@ -112,13 +112,15 @@ This component has the following slot:
 
 <script>
 import Popover from '../Popover'
+import UserBubbleDiv from './UserBubbleDiv'
 import Avatar from '../Avatar'
 
 export default {
 	name: 'UserBubble',
 	components: {
 		Popover,
 		Avatar,
+		UserBubbleDiv,
 	},
 	props: {
 		/**
@@ -198,12 +200,14 @@ export default {
 		/**
 		 * If userbubble is empty, let's NOT
 		 * use the Popover component
-		 * @returns {string} 'Popover' or 'div'
+		 * We need a component instead of a simple div here,
+		 * because otherwise the trigger template will not be shown.
+		 * @returns {string} 'Popover' or 'UserBubbleDiv'
 		 */
 		isPopoverComponent() {
 			return !this.popoverEmpty
 				? 'Popover'
-				: 'div'
+				: 'UserBubbleDiv'
 		},
 
 		/**

src/components/UserBubble/UserBubbleDiv.vue

@@ -0,0 +1,32 @@
+<!--
+ - @copyright Copyright (c) 2021 Raimund Schlüßler <[email protected]>
+ -
+ - @author Raimund Schlüßler <[email protected]>
+ -
+ - @license GNU AGPL version 3 or any later version
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+<template>
+	<div>
+		<slot name="trigger" />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'UserBubbleDiv',
+}
+</script>

styleguide.config.js

@@ -76,6 +76,7 @@ module.exports = {
 				'src/components/*Picker/*.vue',
 				'src/components/RichContenteditable/!(RichContenteditable).vue',
 				'src/components/Settings*/*.vue',
+				'src/components/UserBubble/UserBubbleDiv.vue',
 			],
 			sections: [
 				{