refactor: Use variant instead of type when using NcButton

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

Author: susnux

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -5,10 +5,10 @@
 
 <template>
 	<NcButton v-tooltip="title"
-		type="tertiary"
-		:aria-label="title"
 		class="app-details-toggle"
-		:class="{ 'app-details-toggle--mobile': isMobile }">
+		:class="{ 'app-details-toggle--mobile': isMobile }"
+		:aria-label="title"
+		variant="tertiary">
 		<template #icon>
 			<ArrowLeft v-if="isRtl" :size="20" />
 			<ArrowRight v-else :size="20" />

src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue

@@ -7,8 +7,8 @@
 	<!-- Button to expand or collapse children -->
 	<NcButton class="icon-collapse"
 		:class="{'icon-collapse--open':open}"
-		type="tertiary"
 		:aria-label="labelButton"
+		variant="tertiary"
 		@click="onClick">
 		<template #icon>
 			<ChevronUp v-if="open"

src/components/NcAppNavigationItem/NcInputConfirmCancel.vue

@@ -21,40 +21,40 @@
 				class="app-navigation-input-confirm__input"
 				:placeholder="placeholder">
 
-			<NcButton native-type="submit"
-				type="primary"
-				:aria-label="labelConfirm"
+			<NcButton :aria-label="labelConfirm"
+				type="submit"
+				variant="primary"
 				@click.stop.prevent="confirm">
 				<template #icon>
-					<ArrowRight :size="20" />
+					<IconArrowRight :size="20" />
 				</template>
 			</NcButton>
 
-			<NcButton native-type="reset"
-				:type="primary ? 'primary' : 'tertiary'"
-				:aria-label="labelCancel"
+			<NcButton :aria-label="labelCancel"
+				type="reset"
+				:variant="primary ? 'primary' : 'tertiary'"
 				@click.stop.prevent="cancel">
 				<template #icon>
-					<Close :size="20" />
+					<IconClose :size="20" />
 				</template>
 			</NcButton>
 		</form>
 	</div>
 </template>
 <script>
-import NcButton from '../NcButton/index.ts'
 import { t } from '../../l10n.js'
 
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import Close from 'vue-material-design-icons/Close.vue'
+import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
+import IconClose from 'vue-material-design-icons/Close.vue'
+import NcButton from '../NcButton/index.js'
 
 export default {
 	name: 'NcInputConfirmCancel',
 
 	components: {
+		IconArrowRight,
+		IconClose,
 		NcButton,
-		ArrowRight,
-		Close,
 	},
 
 	props: {

src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue

@@ -31,7 +31,7 @@
 									Filter by year
 								</NcActionButton>
 							</NcActions>
-							<NcButton aria-label="Search globally" type="tertiary">
+							<NcButton aria-label="Search globally" variant="tertiary">
 								<template #icon>
 									<IconSearchGlobal :size="20" />
 								</template>

src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue

@@ -6,11 +6,11 @@
 <template>
 	<div class="app-navigation-toggle-wrapper">
 		<NcButton class="app-navigation-toggle"
-			type="tertiary"
+			aria-controls="app-navigation-vue"
 			:aria-expanded="open ? 'true' : 'false'"
+			:aria-keyshortcuts="disableKeyboardShortcuts ? '' : 'n'"
 			:aria-label="label"
 			:title="label"
-			aria-controls="app-navigation-vue"
 			@click="toggleNavigation">
 			<template #icon>
 				<MenuOpenIcon v-if="open" :size="20" />

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -386,7 +386,7 @@ Note: the built-in toggle button is only available then NcAppSidebar is used in
 	<NcContent app-name="styleguidist" class="content-styleguidist">
 		<NcAppContent>
 			<div class="top-bar">
-				<NcButton type="primary">Start a call</NcButton>
+				<NcButton variant="primary">Start a call</NcButton>
 			</div>
 		</NcAppContent>
 		<!-- The sidebar -->
@@ -553,7 +553,7 @@ export default {
 				<NcButton :aria-label="t('Open sidebar')"
 					class="app-sidebar__toggle"
 					:class="toggleClasses"
-					type="tertiary"
+					variant="tertiary"
 					v-bind="toggleAttrs"
 					@click="$emit('update:open', true)">
 					<template #icon>
@@ -603,7 +603,7 @@ export default {
 									:aria-label="favoriteTranslated"
 									:pressed="isStarred"
 									class="app-sidebar-header__star"
-									type="secondary"
+									variant="secondary"
 									@click.prevent="toggleStarred">
 									<template #icon>
 										<NcLoadingIcon v-if="starLoading" />
@@ -641,9 +641,9 @@ export default {
 											:value="name"
 											@keydown.esc.stop="onDismissEditing"
 											@input="onNameInput">
-										<NcButton type="tertiary-no-background"
-											:aria-label="changeNameTranslated"
-											native-type="submit">
+										<NcButton :aria-label="changeNameTranslated"
+											type="submit"
+											variant="tertiary-no-background">
 											<template #icon>
 												<IconArrowRight :size="20" />
 											</template>
@@ -671,10 +671,10 @@ export default {
 				</div>
 
 				<NcButton ref="closeButton"
-					:title="closeTranslated"
 					:aria-label="closeTranslated"
-					type="tertiary"
+					:title="closeTranslated"
 					class="app-sidebar__close"
+					variant="tertiary"
 					@click.prevent="closeSidebar">
 					<template #icon>
 						<IconClose :size="20" />
@@ -706,9 +706,9 @@ export default {
 <script>
 import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
 import NcActions from '../NcActions/index.js'
-import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcButton from '../NcButton/index.ts'
 import NcEmptyContent from '../NcEmptyContent/index.js'
+import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import Focus from '../../directives/Focus/index.js'
 import Linkify from '../../directives/Linkify/index.js'
 import { vOnClickOutside as ClickOutside } from '@vueuse/components'

src/components/NcAvatar/NcAvatar.vue

@@ -182,9 +182,9 @@ export default {
 		<!-- Contact menu -->
 		<!-- We show a button if the menu is not loaded yet. -->
 		<NcButton v-if="hasMenu && menu.length === 0"
-			type="tertiary-no-background"
-			class="action-item action-item__menutoggle"
 			:aria-label="avatarAriaLabel"
+			class="action-item action-item__menutoggle"
+			variant="tertiary-no-background"
 			@click="toggleMenu">
 			<template #icon>
 				<NcLoadingIcon v-if="contactsMenuLoading" />
@@ -193,11 +193,11 @@ export default {
 		</NcButton>
 		<NcActions v-else-if="hasMenu"
 			v-model:open="contactsMenuOpenState"
+			:aria-label="avatarAriaLabel"
+			:container="menuContainer"
 			force-menu
 			manual-open
-			type="tertiary-no-background"
-			:container="menuContainer"
-			:aria-label="avatarAriaLabel"
+			variant="tertiary-no-background"
 			@click="toggleMenu">
 			<component :is="item.ncActionComponent"
 				v-for="(item, key) in menu"

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -24,9 +24,8 @@ Renders a button element when given no redirection props, otherwise, renders <a/
 		@dragenter="dragEnter"
 		@dragleave="dragLeave">
 		<NcButton v-if="(name || icon || $slots.icon) && !$slots.default"
-			:title="title"
 			:aria-label="icon ? name : undefined"
-			type="tertiary"
+			variant="tertiary"
 			v-bind="linkAttributes">
 			<template v-if="$slots.icon || icon" #icon>
 				<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->
@@ -40,13 +39,13 @@ Renders a button element when given no redirection props, otherwise, renders <a/
 		</NcButton>
 		<NcActions v-if="$slots.default"
 			ref="actions"
-			type="tertiary"
 			:force-menu="forceMenu"
 			:open="open"
 			:menu-name="name"
 			:title="title"
 			:force-name="true"
 			:container="`.vue-crumb[${crumbId}]`"
+			variant="tertiary"
 			@update:open="onOpenChange">
 			<template #icon>
 				<!-- @slot Slot for the custom menu icon -->

src/components/NcColorPicker/NcColorPicker.vue

@@ -174,22 +174,22 @@ export default {
 				</Transition>
 				<div v-if="!paletteOnly" class="color-picker__navigation">
 					<NcButton v-if="advanced"
-						type="tertiary"
 						:aria-label="ariaBack"
+						variant="tertiary"
 						@click="handleBack">
 						<template #icon>
 							<ArrowLeft :size="20" />
 						</template>
 					</NcButton>
 					<NcButton v-else
-						type="tertiary"
 						:aria-label="ariaMore"
+						variant="tertiary"
 						@click="handleMoreSettings">
 						<template #icon>
 							<DotsHorizontal :size="20" />
 						</template>
 					</NcButton>
-					<NcButton type="primary"
+					<NcButton variant="primary"
 						@click="handleConfirm(slotProps.hide)">
 						{{ t('Choose') }}
 					</NcButton>

src/components/NcContent/NcContent.vue

@@ -72,15 +72,15 @@ It also will set the skip content buttons needed for accessibility.
 				</div>
 				<div class="vue-skip-actions__buttons">
 					<NcButton v-show="hasAppNavigation"
-						type="tertiary"
 						href="#app-navigation-vue"
+						variant="tertiary"
 						@click.prevent="openAppNavigation"
 						@focusin="currentFocus = 'navigation'"
 						@mouseover="currentFocus = 'navigation'">
 						{{ t('Skip to app navigation') }}
 					</NcButton>
-					<NcButton type="tertiary"
-						href="#app-content-vue"
+					<NcButton href="#app-content-vue"
+						variant="tertiary"
 						@focusin="currentFocus = 'content'"
 						@mouseover="currentFocus = 'content'">
 						{{ t('Skip to main content') }}