From cdbd1c2ac47d2c74585175f9fae2fc940347fb81 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Date: Tue, 4 Jan 2022 18:58:06 +0000
Subject: [PATCH] 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         |   4 +-
 cypress/integration/list/namespaces.spec.js   |   2 +-
 cypress/integration/task/task.spec.js         |   4 +-
 cypress/integration/user/settings.spec.js     |   4 +-
 src/App.vue                                   |   4 +-
 src/components/base/BaseButton.vue            | 118 ++++++++++++++++++
 src/components/home/topNavigation.vue         |   2 +-
 src/components/input/button.vue               | 118 ++++++++----------
 src/components/input/colorPicker.vue          |   2 +-
 src/components/input/datepicker.vue           |   1 +
 src/components/input/editor.vue               |   2 +-
 src/components/list/partials/filter-popup.vue |   4 +-
 src/components/misc/create-edit.vue           |  18 +--
 src/components/misc/notification.vue          |   2 +-
 src/components/misc/subscription.vue          |   2 +-
 src/components/modal/modal.vue                |   5 +-
 src/components/tasks/partials/attachments.vue |   2 +-
 src/components/tasks/partials/defer-task.vue  |   6 +-
 .../tasks/partials/relatedTasks.vue           |   2 +-
 src/components/tasks/partials/repeatAfter.vue |   6 +-
 src/main.ts                                   |   7 +-
 src/views/About.vue                           |   2 +-
 src/views/filters/FilterEdit.vue              |   4 +-
 src/views/list/settings/background.vue        |   8 +-
 src/views/list/settings/edit.vue              |   4 +-
 src/views/list/views/Kanban.vue               |   5 +-
 src/views/list/views/List.vue                 |   2 +-
 src/views/list/views/Table.vue                |   2 +-
 src/views/migrator/MigrateService.vue         |   2 +-
 src/views/namespaces/ListNamespaces.vue       |   4 +-
 src/views/namespaces/settings/edit.vue        |   4 +-
 src/views/tasks/ShowTasks.vue                 |   6 +-
 src/views/tasks/TaskDetailView.vue            |  30 ++---
 src/views/user/Login.vue                      |   4 +-
 src/views/user/Register.vue                   |   2 +-
 src/views/user/RequestPasswordReset.vue       |   2 +-
 src/views/user/settings/Avatar.vue            |   1 +
 src/views/user/settings/General.vue           |   1 +
 src/views/user/settings/TOTP.vue              |   2 +-
 39 files changed, 254 insertions(+), 146 deletions(-)
 create mode 100644 src/components/base/BaseButton.vue

diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 864b533b3..43939197b 100644
--- a/cypress/integration/list/list.spec.js
+++ b/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()
 
diff --git a/cypress/integration/list/namespaces.spec.js b/cypress/integration/list/namespaces.spec.js
index 7d092113a..12a3b27ef 100644
--- a/cypress/integration/list/namespaces.spec.js
+++ b/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()
 
diff --git a/cypress/integration/task/task.spec.js b/cypress/integration/task/task.spec.js
index 68027e3d8..63df56512 100644
--- a/cypress/integration/task/task.spec.js
+++ b/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()
 
diff --git a/cypress/integration/user/settings.spec.js b/cypress/integration/user/settings.spec.js
index 29cb1ad03..c6a645d59 100644
--- a/cypress/integration/user/settings.spec.js
+++ b/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()
 
diff --git a/src/App.vue b/src/App.vue
index e0b53d243..2d7fe65f4 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
new file mode 100644
index 000000000..8096e8a8a
--- /dev/null
+++ b/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>
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 7e427a30c..190950a6f 100644
--- a/src/components/home/topNavigation.vue
+++ b/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">
diff --git a/src/components/input/button.vue b/src/components/input/button.vue
index 831ef11a7..c3a5e4c7f 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -1,79 +1,64 @@
 <template>
-	<a
+	<BaseButton
 		class="button"
-		:class="{
-			'is-loading': loading,
-			'has-no-shadow': !shadow,
-			'is-primary': type === 'primary',
-			'is-outlined': type === 'secondary',
-			'is-text is-inverted has-no-shadow underline-none':
-				type === 'tertary',
-		}"
-		:disabled="disabled || null"
-		@click="click"
-		:href="href !== '' ? href : null"
+		:class="[
+			variantClass,
+			{
+				'is-loading': loading,
+				'has-no-shadow': !shadow || variant === 'tertiary',
+			}
+		]"
 	>
 		<icon :icon="icon" v-if="showIconOnly"/>
 		<span class="icon is-small" v-else-if="icon !== ''">
 			<icon :icon="icon"/>
 		</span>
-		<slot></slot>
-	</a>
+		<slot />
+	</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 {
diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index 6c5fddb40..2f4082e40 100644
--- a/src/components/input/colorPicker.vue
+++ b/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>
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 414ecbbd6..afef20e7c 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -101,6 +101,7 @@
 					class="is-fullwidth"
 					:shadow="false"
 					@click="close"
+					v-cy="'closeDatepicker'"
 				>
 					{{ $t('misc.confirm') }}
 				</x-button>
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index f282af486..6cddba200 100644
--- a/src/components/input/editor.vue
+++ b/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>
diff --git a/src/components/list/partials/filter-popup.vue b/src/components/list/partials/filter-popup.vue
index cabc5cfb6..efbfcbe3e 100644
--- a/src/components/list/partials/filter-popup.vue
+++ b/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') }}
diff --git a/src/components/misc/create-edit.vue b/src/components/misc/create-edit.vue
index 4e802fd20..e59370cf3 100644
--- a/src/components/misc/create-edit.vue
+++ b/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"
-					@click.prevent.stop="$emit('tertary')"
-					v-if="tertary !== ''"
+					variant="tertiary"
+					@click.prevent.stop="$emit('tertiary')"
 				>
-					{{ 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')
diff --git a/src/components/misc/notification.vue b/src/components/misc/notification.vue
index 157cb7077..d841a0ddb 100644
--- a/src/components/misc/notification.vue
+++ b/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 }}
diff --git a/src/components/misc/subscription.vue b/src/components/misc/subscription.vue
index 7d11e1d40..bcfb6fe50 100644
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@@ -1,6 +1,6 @@
 <template>
 	<x-button
-		type="secondary"
+		variant="secondary"
 		:icon="icon"
 		v-tooltip="tooltipText"
 		@click="changeSubscription"
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 4a835f343..d218b8017 100644
--- a/src/components/modal/modal.vue
+++ b/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') }}
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 3def47f66..a01a62014 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/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') }}
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index b4692f746..76a1b741c 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/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>
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 961949be8..0b2be060b 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/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"
 		/>
diff --git a/src/components/tasks/partials/repeatAfter.vue b/src/components/tasks/partials/repeatAfter.vue
index f847b65e2..c2dba26c4 100644
--- a/src/components/tasks/partials/repeatAfter.vue
+++ b/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 type="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, 'days')">{{ $t('task.repeat.everyDay') }}</x-button>
+			<x-button variant="secondary" class="is-small" @click="() => setRepeatAfter(1, 'weeks')">{{ $t('task.repeat.everyWeek') }}</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">
diff --git a/src/main.ts b/src/main.ts
index d497bbee3..098231227 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,8 @@
 import {createApp, configureCompat} from 'vue'
 
+// default everything to Vue 3 behavior
 configureCompat({
-	COMPONENT_V_MODEL: false,
-	COMPONENT_ASYNC: false,
-	RENDER_FUNCTION: false,
-	WATCH_ARRAY: false, // TODO: check this again; this might lead to some problemes
-	TRANSITION_GROUP_ROOT: false,
+	MODE: 3,
 })
 
 import App from './App.vue'
diff --git a/src/views/About.vue b/src/views/About.vue
index e1570c307..51c723b43 100644
--- a/src/views/About.vue
+++ b/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') }}
diff --git a/src/views/filters/FilterEdit.vue b/src/views/filters/FilterEdit.vue
index d7de1c854..748ca0b79 100644
--- a/src/views/filters/FilterEdit.vue
+++ b/src/views/filters/FilterEdit.vue
@@ -4,8 +4,8 @@
 		primary-icon=""
 		:primary-label="$t('misc.save')"
 		@primary="saveSavedFilter"
-		:tertary="$t('misc.delete')"
-		@tertary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
+		:tertiary="$t('misc.delete')"
+		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: $route.params.listId } })"
 	>
 		<form @submit.prevent="saveSavedFilter()">
 			<div class="field">
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index 197fa0013..4e7898875 100644
--- a/src/views/list/settings/background.vue
+++ b/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') : ''"
-		@tertary="removeBackground()"
+		:tertiary="hasBackground ? $t('list.background.remove') : ''"
+		@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') }}
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index 73d2c7708..9889c5e7c 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -4,8 +4,8 @@
 		primary-icon=""
 		:primary-label="$t('misc.save')"
 		@primary="save"
-		:tertary="$t('misc.delete')"
-		@tertary="$router.push({ name: 'list.list.settings.delete', params: { id: $route.params.listId } })"
+		:tertiary="$t('misc.delete')"
+		@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>
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 92679cdcb..298ff48b5 100644
--- a/src/views/list/views/Kanban.vue
+++ b/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') }}
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index e23259ba7..d61a39e8d 100644
--- a/src/views/list/views/List.vue
+++ b/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>
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index 2e031504a..b15b0a1b8 100644
--- a/src/views/list/views/Table.vue
+++ b/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>
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index 7448adc88..1f3573eb9 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/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>
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index e2b8f0dce..c31ee9cc3 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/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"
 			>
diff --git a/src/views/namespaces/settings/edit.vue b/src/views/namespaces/settings/edit.vue
index 594c5bc38..6acaf606f 100644
--- a/src/views/namespaces/settings/edit.vue
+++ b/src/views/namespaces/settings/edit.vue
@@ -4,8 +4,8 @@
 		primary-icon=""
 		:primary-label="$t('misc.save')"
 		@primary="save"
-		:tertary="$t('misc.delete')"
-		@tertary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
+		:tertiary="$t('misc.delete')"
+		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
 	>
 		<form @submit.prevent="save()">
 			<div class="field">
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index d639d1133..d4f06ba33 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/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 type="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="showTodaysTasks()" class="mr-2">{{ $t('task.show.today') }}</x-button>
+			<x-button variant="secondary" @click="setDatesToNextWeek()" class="mr-2">{{ $t('task.show.nextWeek') }}</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>
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 988b154aa..6336a1a7c 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/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']"
 						>
 							{{
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 127e673a2..d04b97366 100644
--- a/src/views/user/Login.vue
+++ b/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}) }}
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index ef9f4a153..3f13b23c2 100644
--- a/src/views/user/Register.vue
+++ b/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>
diff --git a/src/views/user/RequestPasswordReset.vue b/src/views/user/RequestPasswordReset.vue
index f721df705..63143d548 100644
--- a/src/views/user/RequestPasswordReset.vue
+++ b/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>
diff --git a/src/views/user/settings/Avatar.vue b/src/views/user/settings/Avatar.vue
index 52374d2c4..c8cb8f653 100644
--- a/src/views/user/settings/Avatar.vue
+++ b/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>
diff --git a/src/views/user/settings/General.vue b/src/views/user/settings/General.vue
index 1c8620afc..876bef26f 100644
--- a/src/views/user/settings/General.vue
+++ b/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>
diff --git a/src/views/user/settings/TOTP.vue b/src/views/user/settings/TOTP.vue
index e796d8bbf..35e96fba3 100644
--- a/src/views/user/settings/TOTP.vue
+++ b/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>