Merge pull request #5081 from nextcloud-libraries/chore/noid/merge-ma…

…ster-next

[next] chore(master): merge `master` into `next`

.eslintrc.json

@@ -20,5 +20,13 @@
 				"@babel/plugin-syntax-import-assertions"
 			]
 		}
+	},
+	"rules": {
+		"import/no-unresolved": [
+			"error",
+			{
+				"ignore": ["\\?raw$"]
+			}
+		]
 	}
 }

l10n/messages.pot

@@ -60,6 +60,9 @@ msgstr ""
 msgid "Boston Blue"
 msgstr ""
 
+msgid "busy"
+msgstr ""
+
 msgid "Cancel changes"
 msgstr ""
 

src/components/NcAvatar/NcAvatar.vue

@@ -167,10 +167,10 @@ export default {
 		<span v-if="showUserStatusIconOnAvatar" class="avatardiv__user-status avatardiv__user-status--icon">
 			{{ userStatus.icon }}
 		</span>
-		<NcIconSvgWrapper v-else-if="canDisplayUserStatus"
+		<NcUserStatusIcon v-else-if="canDisplayUserStatus"
 			class="avatardiv__user-status"
-			:svg="userStatusIcon"
-			:name="userStatusIconName" />
+			:status="userStatus.status"
+			:aria-hidden="String(hasMenu)" />
 
 		<!-- Show the letter if no avatar nor icon class -->
 		<span v-if="showInitials"
@@ -188,9 +188,9 @@ import NcActions from '../NcActions/index.js'
 import NcActionLink from '../NcActionLink/index.js'
 import NcButton from '../NcButton/index.ts'
 import NcLoadingIcon from '../NcLoadingIcon/index.js'
-import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
+import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
 import usernameToColor from '../../functions/usernameToColor/index.js'
-import { getUserStatusIcon, getUserStatusIconName, getUserStatusText } from '../../utils/UserStatus.ts'
+import { getUserStatusText } from '../../utils/UserStatus.ts'
 import { userStatus } from '../../mixins/index.js'
 import { t } from '../../l10n.js'
 
@@ -238,7 +238,7 @@ export default {
 		NcActionLink,
 		NcButton,
 		NcLoadingIcon,
-		NcIconSvgWrapper,
+		NcUserStatusIcon,
 	},
 	mixins: [userStatus],
 	props: {
@@ -385,26 +385,10 @@ export default {
 			}
 			return t('Avatar of {displayName}', { displayName: this.displayName ?? this.user })
 		},
-
-		userStatusIcon() {
-			return getUserStatusIcon(this.userStatus.status)
-		},
-
-		/**
-		 * If the avatar has no menu no aria-label is assigned, but for accessibility we still need the status to be accessible
-		 * So this sets the required accessible label for the user status icon.
-		 */
-		userStatusIconName() {
-			// only needed if non-interactive, otherwise the aria-label is set
-			if (this.hasMenu) {
-				return
-			}
-			return getUserStatusIconName(this.userStatus.status)
-		},
 		canDisplayUserStatus() {
 			return this.showUserStatus
 				&& this.hasStatus
-				&& ['online', 'away', 'dnd'].includes(this.userStatus.status)
+				&& ['online', 'away', 'busy', 'dnd'].includes(this.userStatus.status)
 		},
 		showUserStatusIconOnAvatar() {
 			return this.showUserStatus

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -25,6 +25,7 @@
 ### General description
 
 This component is meant to be used inside a Breadcrumbs component.
+Renders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements
 
 </docs>
 
@@ -39,17 +40,21 @@ This component is meant to be used inside a Breadcrumbs component.
 		@dragover.prevent="() => {}"
 		@dragenter="dragEnter"
 		@dragleave="dragLeave">
-		<component :is="tag"
-			v-if="(name || icon) && !$slots.default"
+		<NcButton v-if="(name || icon) && !$slots.default"
 			:title="title"
 			:aria-label="icon ? name : undefined"
+			type="tertiary"
 			v-bind="linkAttributes">
-			<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->
-			<slot name="icon">
-				<span v-if="icon" :class="icon" class="icon" />
-				<span v-else>{{ name }}</span>
-			</slot>
-		</component>
+			<template v-if="$slots.icon || icon" #icon>
+				<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->
+				<slot name="icon">
+					<span :class="icon" class="icon" />
+				</slot>
+			</template>
+			<template v-else #default>
+				{{ name }}
+			</template>
+		</NcButton>
 		<NcActions v-if="$slots.default"
 			ref="actions"
 			type="tertiary"
@@ -74,6 +79,7 @@ This component is meant to be used inside a Breadcrumbs component.
 <script>
 import NcActions from '../NcActions/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import NcButton from '../NcButton/NcButton.vue'
 
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 
@@ -82,6 +88,7 @@ export default {
 	components: {
 		NcActions,
 		ChevronRight,
+		NcButton,
 	},
 	inheritAttrs: false,
 	props: {
@@ -178,21 +185,17 @@ export default {
 		}
 	},
 	computed: {
-		/**
-		 * Determines which element tag to use
-		 *
-		 * @return {string} the tag
-		 */
-		tag() {
-			return this.to ? 'router-link' : 'a'
-		},
-
 		/**
 		 * The attributes to pass to `router-link` or `a`
 		 */
 		linkAttributes() {
-			// If it's a router-link, we pass `to`, otherwise `href`
-			return this.to ? { to: this.to, ...this.$attrs } : { href: this.href, ...this.$attrs }
+			// If it's a router-link, we pass `to` and `exact`, if its an <a/> element, we pass `href`, otherwise we have a button
+			return this.to
+				? { to: this.to, ...this.$attrs }
+				: (this.href
+					? { href: this.href, ...this.$attrs }
+					: this.$attrs
+				)
 		},
 	},
 	methods: {
@@ -285,7 +288,6 @@ export default {
 	padding: 0;
 
 	&:last-child {
-		font-weight: bold;
 		min-width: 0;
 
 		// Don't show breadcrumb separator for last crumb
@@ -294,44 +296,36 @@ export default {
 		}
 	}
 
-	// Hover and focus effect for crumbs
-	& > a:hover,
-	& > a:focus {
-		background-color: var(--color-background-dark);
-		color: var(--color-main-text);
-	}
-
+	// Necessary to hide hidden crumbs
 	&--hidden {
 		display: none;
 	}
-
-	&#{&}--hovered > a {
-		background-color: var(--color-background-dark);
-		color: var(--color-main-text);
-	}
-
 	&__separator {
 		padding: 0;
 		color: var(--color-text-maxcontrast);
 	}
-
-	> a {
-		overflow: hidden;
+	// Necessary for indicating hovering for drag and drop
+	&#{&}--hovered :deep(.button-vue) {
+		background-color: var(--color-background-dark);
+		color: var(--color-main-text);
+	}
+	// Adjust button style
+	&:not(:last-child) :deep() .button-vue {
 		color: var(--color-text-maxcontrast);
-		padding: 12px;
-		min-width: $clickable-area;
-		max-width: 100%;
-		border-radius: var(--border-radius-pill);
-		align-items: center;
-		display: inline-flex;
-		justify-content: center;
 
-		> span {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+		&:hover,
+		&:focus {
+			background-color: var(--color-background-dark);
+			color: var(--color-main-text);
+		}
+
+		&__text {
+			font-weight: normal;
 		}
 	}
+	:deep(.button-vue__text) {
+		margin: 0;
+	}
 
 	// Adjust action item appearance for crumbs with actions
 	// to match other crumbs

src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue

@@ -113,6 +113,8 @@ export default {
 		 *
 		 * Only use button when used in a `tablist` container and the
 		 * `tab` role is set.
+		 *
+		 * @type {'checkbox'|'radio'|'switch'|'button'}
 		 */
 		type: {
 			type: String,

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -362,6 +362,8 @@ export default {
 		 *
 		 * Only use button when used in a `tablist` container and the
 		 * `tab` role is set.
+		 *
+		 * @type {'checkbox'|'radio'|'switch'|'button'}
 		 */
 		type: {
 			type: String,
@@ -385,7 +387,8 @@ export default {
 		/**
 		 * Are the elements are all direct siblings?
 		 * If so they will be grouped horizontally or vertically
-		 * Possible values are `no`, `horizontal`, `vertical`.
+		 *
+		 * @type {'no'|'horizontal'|'vertical'}
 		 */
 		buttonVariantGrouped: {
 			type: String,

src/components/NcRichContenteditable/NcAutoCompleteResult.vue

@@ -29,10 +29,9 @@
 				class="autocomplete-result__status autocomplete-result__status--icon">
 				{{ status && status.icon || '' }}
 			</span>
-			<NcIconSvgWrapper v-else-if="status.status && status.status !== 'offline'"
+			<NcUserStatusIcon v-else-if="status.status && status.status !== 'offline'"
 				class="autocomplete-result__status"
-				:svg="userStatusIcon"
-				:name="userStatusIconName" />
+				:status="status.status" />
 		</div>
 
 		<!-- Title and subline -->
@@ -50,15 +49,13 @@
 <script>
 import { generateUrl } from '@nextcloud/router'
 
-import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
-
-import { getUserStatusIcon, getUserStatusIconName } from '../../utils/UserStatus.ts'
+import NcUserStatusIcon from '../NcUserStatusIcon/index.js'
 
 export default {
 	name: 'NcAutoCompleteResult',
 
 	components: {
-		NcIconSvgWrapper,
+		NcUserStatusIcon,
 	},
 
 	props: {
@@ -101,12 +98,6 @@ export default {
 				? this.getAvatarUrl(this.id, 44)
 				: null
 		},
-		userStatusIcon() {
-			return getUserStatusIcon(this.status.status)
-		},
-		userStatusIconName() {
-			return getUserStatusIconName(this.status.status)
-		},
 	},
 
 	methods: {

src/components/NcSettingsSection/NcSettingsSection.vue

@@ -49,6 +49,7 @@ This component is to be used in the settings section of nextcloud.
 				:href="docUrl"
 				class="settings-section__info"
 				:title="docNameTranslated"
+				:aria-label="docNameTranslated"
 				target="_blank"
 				rel="noreferrer nofollow">
 				<HelpCircle :size="20" />