feat: create BaseButton component (#1123)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1123
Reviewed-by: konrad <k@knt.li>
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>

cypress/integration/list/list.spec.js

@@ -101,7 +101,7 @@ describe('Lists', () => {
 			.click()
 		cy.url()
 			.should('contain', '/settings/delete')
-		cy.get('.modal-mask .modal-container .modal-content .actions a.button')
+		cy.get('[data-cy="modalPrimary"]')
 			.contains('Do it')
 			.click()
 
@@ -392,7 +392,7 @@ describe('Lists', () => {
 			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
 				.first()
 				.type(3)
-			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field a.button.is-primary')
+			cy.get('[data-cy="setBucketLimit"]')
 				.first()
 				.click()
 

cypress/integration/list/namespaces.spec.js

@@ -89,7 +89,7 @@ describe('Namepaces', () => {
 			.click()
 		cy.url()
 			.should('contain', '/settings/delete')
-		cy.get('.modal-mask .modal-container .modal-content .actions a.button')
+		cy.get('[data-cy="modalPrimary"]')
 			.contains('Do it')
 			.click()
 

cypress/integration/task/task.spec.js

@@ -168,7 +168,7 @@ describe('Task', () => {
 				.click()
 			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
 				.type('{selectall}New Description')
-			cy.get('.task-view .details.content.description .editor a')
+			cy.get('[data-cy="saveEditor"]')
 				.contains('Save')
 				.click()
 
@@ -404,7 +404,7 @@ describe('Task', () => {
 			cy.get('.datepicker .datepicker-popup a')
 				.contains('Tomorrow')
 				.click()
-			cy.get('.datepicker .datepicker-popup a.button')
+			cy.get('[data-cy="closeDatepicker"]')
 				.contains('Confirm')
 				.click()
 

cypress/integration/user/settings.spec.js

@@ -18,7 +18,7 @@ describe('User Settings', () => {
 			.trigger('mousedown', {which: 1})
 			.trigger('mousemove', {clientY: 100})
 			.trigger('mouseup')
-		cy.get('a.button.is-primary')
+		cy.get('[data-cy="uploadAvatar"]')
 			.contains('Upload Avatar')
 			.click()
 
@@ -33,7 +33,7 @@ describe('User Settings', () => {
 		cy.get('.general-settings .control input.input')
 			.first()
 			.type('Lorem Ipsum')
-		cy.get('.card.general-settings .button.is-primary')
+		cy.get('[data-cy="saveGeneralSettings"]')
 			.contains('Save')
 			.click()
 

src/App.vue

@@ -1,5 +1,6 @@
 <template>
-	<ready :class="{'is-touch': isTouch}">
+	<ready>
+		<div :class="{'is-touch': isTouch}">
 		<div :class="{'is-hidden': !online}">
 			<template v-if="authUser">
 				<top-navigation/>
@@ -15,6 +16,7 @@
 		<transition name="fade">
 			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
 		</transition>
+		</div>
 	</ready>
 </template>
 

src/components/base/BaseButton.vue

@@ -0,0 +1,118 @@
+<template>
+	<component
+		:is="componentNodeName"
+		class="base-button"
+		:class="{ 'base-button--type-button': isButton }"
+		v-bind="elementBindings"
+		:disabled="disabled || undefined"
+	>
+		<slot />
+	</component>
+</template>
+
+<script lang="ts">
+// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+// this component removes styling differences between links / vue-router links and button elements
+// by doing so we make it easy abstract the functionality from style and enable easier and semantic
+// correct button and link usage. Also see: https://css-tricks.com/a-complete-guide-to-links-and-buttons/#accessibility-considerations
+
+// the component tries to heuristically determine what it should be checking the props (see the
+// componentNodeName and elementBindings ref for this).
+
+// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
+
+import { ref, watchEffect, computed, useAttrs, PropType } from 'vue'
+
+const BASE_BUTTON_TYPES_MAP =  Object.freeze({
+  button: 'button',
+  submit: 'submit',
+})
+
+type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
+
+const props = defineProps({
+	type: {
+		type: String as PropType<BaseButtonTypes>,
+		default: 'button',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+
+const componentNodeName = ref<Node['nodeName']>('button')
+interface ElementBindings {
+	type?: string;
+	rel?: string,
+}
+
+const elementBindings = ref({})
+
+const attrs = useAttrs()
+watchEffect(() => {
+	// by default this component is a button element with the attribute of the type "button" (default prop value)
+	let nodeName = 'button'
+	let bindings: ElementBindings = {type: props.type}
+
+	// if we find a "to" prop we set it as router-link
+	if ('to' in attrs) {
+		nodeName = 'router-link'
+		bindings = {}
+	}
+
+	// if there is a href we assume the user wants an external link via a link element
+	// we also set the attribute rel to "noopener" but make it possible to overwrite this by the user.
+	if ('href' in attrs) {
+		nodeName = 'a'
+		bindings = {rel: 'noopener'}
+	}
+
+	componentNodeName.value = nodeName
+	elementBindings.value = {
+		...bindings,
+		...attrs,
+	}
+})
+
+const isButton = computed(() => componentNodeName.value === 'button')
+</script>
+
+<style lang="scss">
+// NOTE: we do not use scoped styles to reduce specifity and make it easy to overwrite
+
+// We reset the default styles of a button element to enable easier styling
+:where(.base-button--type-button) {
+	border: 0;
+	margin: 0;
+	padding: 0;
+	text-decoration: none;
+	background-color: transparent;
+	text-align: center;
+	appearance: none;
+}
+
+:where(.base-button) {
+	cursor: pointer;
+	display: block;
+	color: inherit;
+	font: inherit;
+	user-select: none;
+	pointer-events: auto; // disable possible resets
+
+	&:focus {
+		outline: transparent;
+	}
+
+	&[disabled] {
+		cursor: default;
+	}
+}
+</style>

src/components/home/topNavigation.vue

@@ -37,7 +37,7 @@
 				<dropdown class="is-right" ref="usernameDropdown">
 					<template #trigger>
 						<x-button
-							type="secondary"
+							variant="secondary"
 							:shadow="false">
 							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
 							<span class="icon is-small">

src/components/input/button.vue

@@ -1,79 +1,64 @@
 <template>
-	<a
+	<BaseButton
 		class="button"
-		:class="{
+		:class="[
-			'is-loading': loading,
+			variantClass,
-			'has-no-shadow': !shadow,
+			{
-			'is-primary': type === 'primary',
+				'is-loading': loading,
-			'is-outlined': type === 'secondary',
+				'has-no-shadow': !shadow || variant === 'tertiary',
-			'is-text is-inverted has-no-shadow underline-none':
+			}
-				type === 'tertary',
+		]"
-		}"
-		:disabled="disabled || null"
-		@click="click"
-		:href="href !== '' ? href : null"
 	>
 		<icon :icon="icon" v-if="showIconOnly"/>
 		<span class="icon is-small" v-else-if="icon !== ''">
 			<icon :icon="icon"/>
 		</span>
-		<slot></slot>
+		<slot />
-	</a>
+	</BaseButton>
 </template>
 
-<script>
+<script lang="ts">
 export default {
 	name: 'x-button',
-	props: {
-		type: {
-			type: String,
-			default: 'primary',
-		},
-		href: {
-			type: String,
-			default: '',
-		},
-		to: {
-			default: false,
-		},
-		icon: {
-			default: '',
-		},
-		loading: {
-			type: Boolean,
-			default: false,
-		},
-		shadow: {
-			type: Boolean,
-			default: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: ['click'],
-	computed: {
-		showIconOnly() {
-			return this.icon !== '' && typeof this.$slots.default === 'undefined'
-		},
-	},
-	methods: {
-		click(e) {
-			if (this.disabled) {
-				return
-			}
-
-			if (this.to !== false) {
-				this.$router.push(this.to)
-			}
-
-			this.$emit('click', e)
-		},
-	},
 }
 </script>
 
+<script setup lang="ts">
+import {computed, useSlots, PropType} from 'vue'
+import BaseButton from '@/components/base/BaseButton.vue'
+
+const BUTTON_TYPES_MAP =  Object.freeze({
+  primary: 'is-primary',
+  secondary: 'is-outlined',
+  tertiary: 'is-text is-inverted underline-none',
+})
+
+type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
+
+const props = defineProps({
+	variant: {
+		type: String as PropType<ButtonTypes>,
+		default: 'primary',
+	},
+	icon: {
+		default: '',
+	},
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+	shadow: {
+		type: Boolean,
+		default: true,
+	},
+})
+
+const variantClass = computed(() => BUTTON_TYPES_MAP[props.variant])
+
+const slots = useSlots()
+const showIconOnly = computed(() => props.icon !== '' && typeof slots.default === 'undefined')
+</script>
+
 <style lang="scss" scoped>
 .button {
   transition: all $transition;
@@ -83,8 +68,8 @@ export default {
   font-weight: bold;
   height: $button-height;
   box-shadow: var(--shadow-sm);
+  display: inline-flex;
 
-  &.is-hovered,
   &:hover {
     box-shadow: var(--shadow-md);
   }
@@ -106,9 +91,10 @@ export default {
     color: var(--white);
   }
 
-  &.is-small {
+}
-    border-radius: $radius;
+
-  }
+.is-small {
+	border-radius: $radius;
 }
 
 .underline-none {

src/components/input/colorPicker.vue

@@ -27,7 +27,7 @@
 			@click="reset"
 			class="is-small ml-2"
 			:shadow="false"
-			type="secondary"
+			variant="secondary"
 		>
 			{{ $t('input.resetColor') }}
 		</x-button>

src/components/input/datepicker.vue

@@ -101,6 +101,7 @@
 					class="is-fullwidth"
 					:shadow="false"
 					@click="close"
+					v-cy="'closeDatepicker'"
 				>
 					{{ $t('misc.confirm') }}
 				</x-button>

src/components/input/editor.vue

@@ -35,7 +35,7 @@
 					<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
 				</li>
 			</ul>
-			<x-button v-else-if="isEditActive" @click="toggleEdit" type="secondary" :shadow="false">
+			<x-button v-else-if="isEditActive" @click="toggleEdit" variant="secondary" :shadow="false" v-cy="'saveEditor'">
 				{{ $t('misc.save') }}
 			</x-button>
 		</template>

src/components/list/partials/filter-popup.vue

@@ -1,7 +1,7 @@
 <template>
 	<x-button
 		v-if="hasFilters"
-		type="secondary"
+		variant="secondary"
 		@click="clearFilters"
 	>
 		{{ $t('filters.clear') }}
@@ -10,7 +10,7 @@
 		<template #trigger="{toggle}">
 			<x-button
 				@click.prevent.stop="toggle()"
-				type="secondary"
+				variant="secondary"
 				icon="filter"
 			>
 				{{ $t('filters.title') }}

src/components/misc/create-edit.vue

@@ -14,25 +14,25 @@
 			</div>
 			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
 				<x-button
+					v-if="tertiary !== ''"
 					:shadow="false"
-					type="tertary"
+					variant="tertiary"
-					@click.prevent.stop="$emit('tertary')"
+					@click.prevent.stop="$emit('tertiary')"
-					v-if="tertary !== ''"
 				>
-					{{ tertary }}
+					{{ tertiary }}
 				</x-button>
 				<x-button
-					type="secondary"
+					variant="secondary"
 					@click.prevent.stop="$router.back()"
 				>
 					{{ $t('misc.cancel') }}
 				</x-button>
 				<x-button
-					type="primary"
+					v-if="primaryLabel !== ''"
+					variant="primary"
 					@click.prevent.stop="primary"
 					:icon="primaryIcon"
 					:disabled="primaryDisabled"
-					v-if="primaryLabel !== ''"
 				>
 					{{ primaryLabel }}
 				</x-button>
@@ -65,7 +65,7 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		tertary: {
+		tertiary: {
 			type: String,
 			default: '',
 		},
@@ -78,7 +78,7 @@ export default {
 			default: false,
 		},
 	},
-	emits: ['create', 'primary', 'tertary'],
+	emits: ['create', 'primary', 'tertiary'],
 	methods: {
 		primary() {
 			this.$emit('create')

src/components/misc/notification.vue

@@ -26,7 +26,7 @@
 						@click="action.callback"
 						:shadow="false"
 						class="is-small"
-						type="secondary"
+						variant="secondary"
 						v-for="(action, i) in item.data.actions"
 					>
 						{{ action.title }}

src/components/misc/subscription.vue

@@ -1,6 +1,6 @@
 <template>
 	<x-button
-		type="secondary"
+		variant="secondary"
 		:icon="icon"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"

src/components/modal/modal.vue

@@ -31,14 +31,15 @@
 						<div class="actions">
 							<x-button
 								@click="$emit('close')"
-								type="tertary"
+								variant="tertiary"
 								class="has-text-danger"
 							>
 								{{ $t('misc.cancel') }}
 							</x-button>
 							<x-button
 								@click="$emit('submit')"
-								type="primary"
+								variant="primary"
+								v-cy="'modalPrimary'"
 								:shadow="false"
 							>
 								{{ $t('misc.doit') }}

src/components/tasks/partials/attachments.vue

@@ -83,7 +83,7 @@
 			@click="$refs.files.click()"
 			class="mb-4"
 			icon="cloud-upload-alt"
-			type="secondary"
+			variant="secondary"
 			:shadow="false"
 		>
 			{{ $t('task.attachment.upload') }}

src/components/tasks/partials/defer-task.vue

@@ -8,21 +8,21 @@
 			<x-button
 				@click.prevent.stop="() => deferDays(1)"
 				:shadow="false"
-				type="secondary"
+				variant="secondary"
 			>
 				{{ $t('task.deferDueDate.1day') }}
 			</x-button>
 			<x-button
 				@click.prevent.stop="() => deferDays(3)"
 				:shadow="false"
-				type="secondary"
+				variant="secondary"
 			>
 				{{ $t('task.deferDueDate.3days') }}
 			</x-button>
 			<x-button
 				@click.prevent.stop="() => deferDays(7)"
 				:shadow="false"
-				type="secondary"
+				variant="secondary"
 			>
 				{{ $t('task.deferDueDate.1week') }}
 			</x-button>

src/components/tasks/partials/relatedTasks.vue

@@ -6,7 +6,7 @@
 			class="is-pulled-right add-task-relation-button"
 			:class="{'is-active': showNewRelationForm}"
 			v-tooltip="$t('task.relation.add')"
-			type="secondary"
+			variant="secondary"
 			icon="plus"
 			:shadow="false"
 		/>

src/components/tasks/partials/repeatAfter.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="control repeat-after-input">
 		<div class="buttons has-addons is-centered mt-2">
-			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">{{ $t('task.repeat.everyDay') }}</x-button>
+			<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'days')">{{ $t('task.repeat.everyDay') }}</x-button>
-			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">{{ $t('task.repeat.everyWeek') }}</x-button>
+			<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">{{ $t('task.repeat.everyWeek') }}</x-button>
-			<x-button type="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">{{ $t('task.repeat.everyMonth') }}</x-button>
+			<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'months')">{{ $t('task.repeat.everyMonth') }}</x-button>
 		</div>
 		<div class="is-flex is-align-items-center mb-2">
 			<label for="repeatMode" class="is-fullwidth">

src/main.ts

@@ -1,11 +1,8 @@
 import {createApp, configureCompat} from 'vue'
 
+// default everything to Vue 3 behavior
 configureCompat({
-	COMPONENT_V_MODEL: false,
+	MODE: 3,
-	COMPONENT_ASYNC: false,
-	RENDER_FUNCTION: false,
-	WATCH_ARRAY: false, // TODO: check this again; this might lead to some problemes
-	TRANSITION_GROUP_ROOT: false,
 })
 
 import App from './App.vue'

src/views/About.vue

@@ -21,7 +21,7 @@
 			</div>
 			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
 				<x-button
-					type="secondary"
+					variant="secondary"
 					@click.prevent.stop="$router.back()"
 				>
 					{{ $t('misc.close') }}

src/views/filters/FilterEdit.vue

@@ -4,8 +4,8 @@
 		primary-icon=""
 		:primary-label="$t('misc.save')"
 		@primary="saveSavedFilter"
-		:tertary="$t('misc.delete')"
+		:tertiary="$t('misc.delete')"
-		@tertary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
+		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
 	>
 		<form @submit.prevent="saveSavedFilter()">
 			<div class="field">

src/views/list/settings/background.vue

@@ -6,8 +6,8 @@
 		class="list-background-setting"
 		:wide="true"
 		v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
-		:tertary="hasBackground ? $t('list.background.remove') : ''"
+		:tertiary="hasBackground ? $t('list.background.remove') : ''"
-		@tertary="removeBackground()"
+		@tertiary="removeBackground()"
 	>
 		<div class="mb-4" v-if="uploadBackgroundEnabled">
 			<input
@@ -20,7 +20,7 @@
 			<x-button
 				:loading="backgroundUploadService.loading"
 				@click="$refs.backgroundUploadInput.click()"
-				type="primary"
+				variant="primary"
 			>
 				{{ $t('list.background.upload') }}
 			</x-button>
@@ -54,7 +54,7 @@
 				@click="() => searchBackgrounds(currentPage + 1)"
 				class="is-load-more-button mt-4"
 				:shadow="false"
-				type="secondary"
+				variant="secondary"
 				v-if="backgroundSearchResult.length > 0"
 			>
 				{{ backgroundService.loading ? $t('misc.loading') : $t('list.background.loadMore') }}

src/views/list/settings/edit.vue

@@ -4,8 +4,8 @@
 		primary-icon=""
 		:primary-label="$t('misc.save')"
 		@primary="save"
-		:tertary="$t('misc.delete')"
+		:tertiary="$t('misc.delete')"
-		@tertary="$router.push({ name: 'list.list.settings.delete', params: { id: $route.params.listId } })"
+		@tertiary="$router.push({ name: 'list.list.settings.delete', params: { id: $route.params.listId } })"
 	>
 		<div class="field">
 			<label class="label" for="title">{{ $t('list.title') }}</label>

src/views/list/views/Kanban.vue

@@ -79,6 +79,7 @@
 												:disabled="bucket.limit < 0"
 												:icon="['far', 'save']"
 												:shadow="false"
+												v-cy="'setBucketLimit'"
 											/>
 										</div>
 									</div>
@@ -165,7 +166,7 @@
 								:shadow="false"
 								v-if="!showNewTaskInput[bucket.id]"
 								icon="plus"
-								type="secondary"
+								variant="secondary"
 							>
 								{{
 									bucket.tasks.length === 0 ? $t('list.kanban.addTask') : $t('list.kanban.addAnotherTask')
@@ -195,7 +196,7 @@
 					:shadow="false"
 					class="is-transparent is-fullwidth has-text-centered"
 					v-else
-					type="secondary"
+					variant="secondary"
 					icon="plus"
 				>
 					{{ $t('list.kanban.addBucket') }}

src/views/list/views/List.vue

@@ -37,7 +37,7 @@
 					<x-button
 						@click="showTaskSearch = !showTaskSearch"
 						icon="search"
-						type="secondary"
+						variant="secondary"
 						v-if="!showTaskSearch"
 					/>
 				</div>

src/views/list/views/Table.vue

@@ -7,7 +7,7 @@
 						<x-button
 							@click.prevent.stop="toggle()"
 							icon="th"
-							type="secondary"
+							variant="secondary"
 						>
 							{{ $t('list.table.columns') }}
 						</x-button>

src/views/migrator/MigrateService.vue

@@ -53,7 +53,7 @@
 			</p>
 			<div class="buttons">
 				<x-button @click="migrate">{{ $t('migrate.confirm') }}</x-button>
-				<x-button :to="{name: 'home'}" type="tertary" class="has-text-danger">{{ $t('misc.cancel') }}</x-button>
+				<x-button :to="{name: 'home'}" variant="tertiary" class="has-text-danger">{{ $t('misc.cancel') }}</x-button>
 			</div>
 		</div>
 		<div v-else>

src/views/namespaces/ListNamespaces.vue

@@ -22,7 +22,7 @@
 			<x-button
 				:to="{name: 'list.create', params: {id:  n.id}}"
 				class="is-pulled-right"
-				type="secondary"
+				variant="secondary"
 				v-if="n.id > 0 && n.lists.length > 0"
 				icon="plus"
 			>
@@ -31,7 +31,7 @@
 			<x-button
 				:to="{name: 'namespace.settings.archive', params: {id:  n.id}}"
 				class="is-pulled-right mr-4"
-				type="secondary"
+				variant="secondary"
 				v-if="n.isArchived"
 				icon="archive"
 			>

src/views/namespaces/settings/edit.vue

@@ -4,8 +4,8 @@
 		primary-icon=""
 		:primary-label="$t('misc.save')"
 		@primary="save"
-		:tertary="$t('misc.delete')"
+		:tertiary="$t('misc.delete')"
-		@tertary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
+		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
 	>
 		<form @submit.prevent="save()">
 			<div class="field">

src/views/tasks/ShowTasks.vue

@@ -32,9 +32,9 @@
 			/>
 		</h3>
 		<div v-if="!showAll" class="mb-4">
-			<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
+			<x-button variant="secondary" @click="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
-			<x-button type="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
+			<x-button variant="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</x-button>
-			<x-button type="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
+			<x-button variant="secondary" @click="setDatesToNextMonth()">{{ $t('task.show.nextMonth') }}</x-button>
 		</div>
 		<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
 			<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>

src/views/tasks/TaskDetailView.vue

@@ -258,7 +258,7 @@
 							@click="toggleTaskDone()"
 							class="is-outlined has-no-border"
 							icon="check-double"
-							type="secondary"
+							variant="secondary"
 						>
 							{{ task.done ? $t('task.detail.undone') : $t('task.detail.done') }}
 						</x-button>
@@ -270,7 +270,7 @@
 						/>
 						<x-button
 							@click="setFieldActive('assignees')"
-							type="secondary"
+							variant="secondary"
 							v-shortcut="'a'"
 							v-cy="'taskDetail.assign'"
 						>
@@ -279,7 +279,7 @@
 						</x-button>
 						<x-button
 							@click="setFieldActive('labels')"
-							type="secondary"
+							variant="secondary"
 							icon="tags"
 							v-shortcut="'l'"
 						>
@@ -287,14 +287,14 @@
 						</x-button>
 						<x-button
 							@click="setFieldActive('priority')"
-							type="secondary"
+							variant="secondary"
 							icon="exclamation"
 						>
 							{{ $t('task.detail.actions.priority') }}
 						</x-button>
 						<x-button
 							@click="setFieldActive('dueDate')"
-							type="secondary"
+							variant="secondary"
 							icon="calendar"
 							v-shortcut="'d'"
 						>
@@ -302,42 +302,42 @@
 						</x-button>
 						<x-button
 							@click="setFieldActive('startDate')"
-							type="secondary"
+							variant="secondary"
 							icon="play"
 						>
 							{{ $t('task.detail.actions.startDate') }}
 						</x-button>
 						<x-button
 							@click="setFieldActive('endDate')"
-							type="secondary"
+							variant="secondary"
 							icon="stop"
 						>
 							{{ $t('task.detail.actions.endDate') }}
 						</x-button>
 						<x-button
 							@click="setFieldActive('reminders')"
-							type="secondary"
+							variant="secondary"
 							:icon="['far', 'clock']"
 						>
 							{{ $t('task.detail.actions.reminders') }}
 						</x-button>
 						<x-button
 							@click="setFieldActive('repeatAfter')"
-							type="secondary"
+							variant="secondary"
 							icon="history"
 						>
 							{{ $t('task.detail.actions.repeatAfter') }}
 						</x-button>
 						<x-button
 							@click="setFieldActive('percentDone')"
-							type="secondary"
+							variant="secondary"
 							icon="percent"
 						>
 							{{ $t('task.detail.actions.percentDone') }}
 						</x-button>
 						<x-button
 							@click="setFieldActive('attachments')"
-							type="secondary"
+							variant="secondary"
 							icon="paperclip"
 							v-shortcut="'f'"
 						>
@@ -345,7 +345,7 @@
 						</x-button>
 						<x-button
 							@click="setFieldActive('relatedTasks')"
-							type="secondary"
+							variant="secondary"
 							icon="sitemap"
 							v-shortcut="'r'"
 						>
@@ -353,21 +353,21 @@
 						</x-button>
 						<x-button
 							@click="setFieldActive('moveList')"
-							type="secondary"
+							variant="secondary"
 							icon="list"
 						>
 							{{ $t('task.detail.actions.moveList') }}
 						</x-button>
 						<x-button
 							@click="setFieldActive('color')"
-							type="secondary"
+							variant="secondary"
 							icon="fill-drip"
 						>
 							{{ $t('task.detail.actions.color') }}
 						</x-button>
 						<x-button
 							@click="toggleFavorite"
-							type="secondary"
+							variant="secondary"
 							:icon="task.isFavorite ? 'star' : ['far', 'star']"
 						>
 							{{

src/views/user/Login.vue

@@ -67,7 +67,7 @@
 					<x-button
 						:to="{ name: 'user.register' }"
 						v-if="registrationEnabled"
-						type="secondary"
+						variant="secondary"
 					>
 						{{ $t('user.auth.register') }}
 					</x-button>
@@ -87,7 +87,7 @@
 				@click="redirectToProvider(p)"
 				v-for="(p, k) in openidConnect.providers"
 				:key="k"
-				type="secondary"
+				variant="secondary"
 				class="is-fullwidth mt-2"
 			>
 				{{ $t('user.auth.loginWith', {provider: p.name}) }}

src/views/user/Register.vue

@@ -79,7 +79,7 @@
 					>
 						{{ $t('user.auth.register') }}
 					</x-button>
-					<x-button :to="{ name: 'user.login' }" type="secondary">
+					<x-button :to="{ name: 'user.login' }" variant="secondary">
 						{{ $t('user.auth.login') }}
 					</x-button>
 				</div>

src/views/user/RequestPasswordReset.vue

@@ -35,7 +35,7 @@
 					>
 						{{ $t('user.auth.resetPasswordAction') }}
 					</x-button>
-					<x-button :to="{ name: 'user.login' }" type="secondary">
+					<x-button :to="{ name: 'user.login' }" variant="secondary">
 						{{ $t('user.auth.login') }}
 					</x-button>
 				</div>

src/views/user/settings/Avatar.vue

@@ -48,6 +48,7 @@
 				<x-button
 					:loading="avatarService.loading || loading"
 					@click="uploadAvatar"
+					v-cy="'uploadAvatar'"
 				>
 					{{ $t('user.settings.avatar.uploadAvatar') }}
 				</x-button>

src/views/user/settings/General.vue

@@ -110,6 +110,7 @@
 			:loading="loading"
 			@click="updateSettings()"
 			class="is-fullwidth mt-4"
+			v-cy="'saveGeneralSettings'"
 		>
 			{{ $t('misc.save') }}
 		</x-button>

src/views/user/settings/TOTP.vue

@@ -55,7 +55,7 @@
 				<x-button @click="totpDisable" class="is-danger">
 					{{ $t('user.settings.totp.disable') }}
 				</x-button>
-				<x-button @click="totpDisableForm = false" type="tertary" class="ml-2">
+				<x-button @click="totpDisableForm = false" variant="tertiary" class="ml-2">
 					{{ $t('misc.cancel') }}
 				</x-button>
 			</div>