refactor: Use variant instead of type when using NcButton

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

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,18 +21,18 @@
 				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" />
 				</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" />
@@ -42,11 +42,11 @@
 	</div>
 </template>
 <script>
-import NcButton from '../NcButton/index.js'
 import { t } from '../../l10n.js'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
+import NcButton from '../NcButton/index.js'
 
 export default {
 	name: 'NcInputConfirmCancel',

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,12 +6,12 @@
 <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"
-			:aria-keyshortcuts="disableKeyboardShortcuts ? '' : 'n'"
+			variant="tertiary"
 			@click="toggleNavigation">
 			<template #icon>
 				<MenuOpenIcon v-if="open" :size="20" />

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -379,7 +379,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 -->
@@ -548,7 +548,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>
@@ -598,7 +598,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" />
@@ -636,9 +636,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>
 												<ArrowRight :size="20" />
 											</template>
@@ -666,10 +666,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>
 						<Close :size="20" />
@@ -704,9 +704,9 @@ import { Portal as Teleport } from '@linusborg/vue-simple-portal'
 
 import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
 import NcActions from '../NcActions/index.js'
-import NcLoadingIcon from '../NcLoadingIcon/index.js'
 import NcButton from '../NcButton/index.js'
 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 { useIsSmallMobile } from '../../composables/useIsMobile/index.js'

src/components/NcAvatar/NcAvatar.vue

@@ -175,22 +175,22 @@ 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" />
 				<DotsHorizontal v-else :size="20" />
 			</template>
 		</NcButton>
 		<NcActions v-else-if="hasMenu"
+			:aria-label="avatarAriaLabel"
+			:container="menuContainer"
 			force-menu
 			manual-open
-			type="tertiary-no-background"
-			:container="menuContainer"
 			:open.sync="contactsMenuOpenState"
-			: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,9 @@ 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"
+			:title="title"
+			variant="tertiary"
 			v-bind="linkAttributes"
 			v-on="$listeners">
 			<template v-if="$slots.icon || icon" #icon>
@@ -41,13 +41,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

@@ -181,22 +181,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

@@ -63,15 +63,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') }}

src/components/NcEmojiPicker/NcEmojiPicker.vue

@@ -154,7 +154,7 @@ This component allows the user to pick an emoji.
 						:palette="skinTonePalette"
 						:value="currentColor.color"
 						@update:value="onChangeSkinTone">
-						<NcButton :aria-label="t('Skin tone')" type="tertiary-no-background">
+						<NcButton :aria-label="t('Skin tone')" variant="tertiary-no-background">
 							<template #icon>
 								<IconCircle :style="{ color: currentColor.color }" :title="currentColor.name" :size="20" />
 							</template>

src/components/NcEmptyContent/NcEmptyContent.vue

@@ -74,7 +74,7 @@ consider only using header elements as the root elements for the name slot.
 			</h1>
 		</template>
 		<template #action>
-			<NcButton type="primary">
+			<NcButton variant="primary">
 				Add a comment!
 			</NcButton>
 		</template>

src/components/NcHeaderButton/NcHeaderButton.vue

@@ -64,11 +64,11 @@ export default {
 <template>
 	<!-- We need a wrapper for server styles to apply -->
 	<div :id="id" class="header-menu">
-		<NcButton type="tertiary-no-background"
-			class="header-menu__trigger"
+		<NcButton class="header-menu__trigger"
 			:aria-label="ariaLabel"
 			:aria-describedby="descriptionId"
 			size="large"
+			variant="tertiary-no-background"
 			@click.prevent="$emit('click', $event)">
 			<template #icon>
 				<!-- @slot Icon trigger slot. Make sure the svg path

src/components/NcHeaderMenu/NcHeaderMenu.vue

@@ -68,13 +68,13 @@ export default {
 		<!-- Trigger -->
 		<NcButton :id="isNav ? triggerId : null"
 			ref="trigger"
-			type="tertiary-no-background"
 			class="header-menu__trigger"
-			:aria-label="ariaLabel"
-			:aria-describedby="description ? descriptionId : null"
 			:aria-controls="`header-menu-${id}`"
+			:aria-describedby="description ? descriptionId : null"
 			:aria-expanded="opened.toString()"
+			:aria-label="ariaLabel"
 			size="large"
+			variant="tertiary-no-background"
 			@click.prevent="toggleMenu">
 			<template #icon>
 				<!-- @slot Icon trigger slot. Make sure the svg path

src/components/NcInputField/NcInputField.vue

@@ -61,10 +61,10 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 
 			<!-- trailing button -->
 			<NcButton v-if="showTrailingButton"
-				type="tertiary-no-background"
 				class="input-field__trailing-button"
 				:aria-label="trailingButtonLabel"
 				:disabled="disabled"
+				variant="tertiary-no-background"
 				@click="handleTrailingButtonClick">
 				<!-- Populating this slot creates a trailing button within the
 				input boundaries that emits a `trailing-button-click` event -->

src/components/NcListItem/NcListItem.vue

@@ -284,7 +284,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #extra-actions>
-				<NcButton type="primary">
+				<NcButton variant="primary">
 					<template #icon>
 						<IconCog :size="20" />
 					</template>
@@ -312,12 +312,12 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
 				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #extra-actions>
-				<NcButton type="tertiary">
+				<NcButton variant="tertiary">
 					<template #icon>
 						<IconPencil :size="20" />
 					</template>
 				</NcButton>
-				<NcButton type="tertiary">
+				<NcButton variant="tertiary">
 					<template #icon>
 						<IconCog :size="20" />
 					</template>

src/components/NcModal/NcModal.vue

@@ -84,7 +84,7 @@ export default {
 				<NcButton
 					:disabled="!firstName || !lastName || !pizza"
 					@click="closeModal"
-					type="primary">
+					variant="primary">
 					Submit
 				</NcButton>
 			</div>
@@ -255,7 +255,7 @@ export default {
 						<NcButton v-if="canClose && !closeButtonContained"
 							:aria-label="closeButtonAriaLabel"
 							class="header-close"
-							type="tertiary"
+							variant="tertiary"
 							@click="close">
 							<template #icon>
 								<Close :size="iconSize" />
@@ -277,9 +277,9 @@ export default {
 					<!-- Navigation button -->
 					<transition name="fade-visibility" appear>
 						<NcButton v-show="hasPrevious"
-							type="tertiary-no-background"
-							class="prev"
 							:aria-label="prevButtonAriaLabel"
+							class="prev"
+							variant="tertiary-no-background"
 							@click="previous">
 							<template #icon>
 								<ChevronLeft :size="40" />
@@ -295,9 +295,9 @@ export default {
 						</div>
 						<!-- Close modal -->
 						<NcButton v-if="canClose && closeButtonContained"
-							type="tertiary"
-							class="modal-container__close"
 							:aria-label="closeButtonAriaLabel"
+							class="modal-container__close"
+							variant="tertiary"
 							@click="close">
 							<template #icon>
 								<Close :size="20" />
@@ -308,9 +308,9 @@ export default {
 					<!-- Navigation button -->
 					<transition name="fade-visibility" appear>
 						<NcButton v-show="hasNext"
-							type="tertiary-no-background"
-							class="next"
 							:aria-label="nextButtonAriaLabel"
+							class="next"
+							variant="tertiary-no-background"
 							@click="next">
 							<template #icon>
 								<ChevronRight :size="40" />