fix(ContactSelectionBubble): migrate to NcChip and script setup

src/components/NewConversationDialog/NewConversationContactsPage.vue

@@ -291,11 +291,11 @@ export default {
 .selected-participants {
 	display: flex;
 	flex-wrap: wrap;
+	gap: var(--default-grid-baseline);
 	border-bottom: 1px solid var(--color-background-darker);
-	padding: 4px 0;
+	padding: var(--default-grid-baseline) 0;
 	max-height: 97px;
 	overflow-y: auto;
-	flex: 0 240px;
 	flex: 1 0 auto;
 	align-content: flex-start;
 }

src/components/UIShared/ContactSelectionBubble.vue

@@ -3,103 +3,43 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-<template>
-	<div class="contact-selection-bubble">
-		<AvatarWrapper :id="participant.id"
-			token="new"
-			class="contact-selection-bubble__avatar"
-			:name="participant.label"
-			:source="participant.source"
-			:size="AVATAR.SIZE.EXTRA_SMALL"
-			disable-menu
-			disable-tooltip />
-		<span class="contact-selection-bubble__username">
-			{{ displayName }}
-		</span>
-		<NcButton type="tertiary-no-background"
-			:aria-label="removeLabel"
-			@click="$emit('update', participant)">
-			<template #icon>
-				<Close :size="16" />
-			</template>
-		</NcButton>
-	</div>
-</template>
-
-<script>
-import Close from 'vue-material-design-icons/Close.vue'
+<script setup>
+import { computed } from 'vue'
 
 import { t } from '@nextcloud/l10n'
 
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcChip from '@nextcloud/vue/dist/Components/NcChip.js'
 
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
 import { AVATAR } from '../../constants.js'
 
-export default {
-	name: 'ContactSelectionBubble',
-
-	components: {
-		AvatarWrapper,
-		NcButton,
-		Close,
-	},
-
-	props: {
-		participant: {
-			type: Object,
-			required: true,
-		},
+const props = defineProps({
+	participant: {
+		type: Object,
+		required: true,
 	},
+})
+const emit = defineEmits(['update'])
 
-	emits: ['update'],
-
-	setup() {
-		return { AVATAR }
-	},
-
-	computed: {
-		displayName() {
-			// Used to be the group of characters before the first space in the name.
-			// But it causes weird scenarios in formal companies or when people have titles.
-			return this.participant.label
-		},
-
-		removeLabel() {
-			return t('spreed', 'Remove participant {name}', { name: this.displayName })
-		},
-	},
-
-	methods: {
-		t,
-	},
-}
+const removeLabel = computed(() => t('spreed', 'Remove participant {name}', { name: props.participant.label }))
 </script>
 
-<style lang="scss" scoped>
-
-// Component Variables
-$bubble-height: 24px;
-
-.contact-selection-bubble {
-	display: flex;
-	align-items: center;
-	margin: 4px;
-	background-color: var(--color-primary-element-light);
-	border-radius: $bubble-height;
-	height: $bubble-height;
-	overflow: hidden;
-	&__avatar {
-		margin-right: 4px;
-	}
-	// Limit the length of the username
-	&__username {
-		max-width: 190px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-}
+<template>
+	<NcChip :text="participant.label"
+		:aria-label-close="removeLabel"
+		@close="emit('update', participant)">
+		<template #icon>
+			<AvatarWrapper :id="participant.id"
+				token="new"
+				:name="participant.label"
+				:source="participant.source"
+				:size="AVATAR.SIZE.EXTRA_SMALL"
+				disable-menu
+				disable-tooltip />
+		</template>
+	</NcChip>
+</template>
 
+<style lang="scss" scoped>
 </style>