refactor: Button components (#6929)

* feat: refactor button components

* fix: qa

* fix: storybook

* a11y: pass

* fix: build

* fix: rename default ->md

* fix: lint

* docs: buttons.md

* refactor part 1

* refactor part 2

* fix: undo refactor for fresh restart

* refactor

* Revert "refactor"

This reverts commit 96d65902d7.

* refactor: part 1

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: remove text-contrast

* fix: qa

* fix: v-tooltip

* fix: lint

* fix: split broken

* fix: passkey qa

* fix: qa

* fix: qa

* fix: prepr

* fix: splitbutton

* improve button group seam

---------

Signed-off-by: Calum H. <calum@modrinth.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/components/ui/world/InstanceItem.vue

@@ -9,11 +9,11 @@ import {
 } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	SmartClickable,
+	TeleportOverflowMenu,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
@@ -185,54 +185,53 @@ onUnmounted(() => {
 				</div>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<ButtonStyled v-if="playing && !loading" color="red">
-					<button @click="stop">
-						<StopCircleIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.stopButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button
-						v-tooltip="
-							instance.quarantined
-								? 'This instance has been locked'
-								: playing
-									? 'Instance is already open'
-									: null
-						"
-						:disabled="instance.quarantined || playing || loading"
-						@click="play"
-					>
-						<SpinnerIcon v-if="loading" class="animate-spin" />
-						<PlayIcon v-else aria-hidden="true" />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						:options="[
-							{
-								id: 'open-instance',
-								shown: !!instance.id,
-								action: () => router.push(encodeURI(`/instance/${instance.id}`)),
-							},
-							{
-								id: 'open-folder',
-								action: () => showInstanceInFolder(instance.id),
-							},
-						]"
-					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #open-instance>
-							<EyeIcon aria-hidden="true" />
-							View instance
-						</template>
-						<template #open-folder>
-							<FolderOpenIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.openFolderButton) }}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+				<Button v-if="playing && !loading" type="colored" color="red" @click="stop">
+					<StopCircleIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.stopButton) }}
+				</Button>
+				<Button
+					v-else
+					v-tooltip="
+						instance.quarantined
+							? 'This instance has been locked'
+							: playing
+								? 'Instance is already open'
+								: null
+					"
+					:disabled="instance.quarantined || playing || loading"
+					@click="play"
+				>
+					<SpinnerIcon v-if="loading" class="animate-spin" />
+					<PlayIcon v-else aria-hidden="true" />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<TeleportOverflowMenu
+					type="quiet"
+					label="More options"
+					:options="[
+						{
+							id: 'open-instance',
+							label: 'View instance',
+							shown: !!instance.id,
+							action: () => router.push(encodeURI(`/instance/${instance.id}`)),
+						},
+						{
+							id: 'open-folder',
+							label: formatMessage(commonMessages.openFolderButton),
+							action: () => showInstanceInFolder(instance.id),
+						},
+					]"
+				>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #open-instance>
+						<EyeIcon aria-hidden="true" />
+						View instance
+					</template>
+					<template #open-folder>
+						<FolderOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.openFolderButton) }}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</SmartClickable>

apps/app-frontend/src/components/ui/world/WorldItem.vue

@@ -21,13 +21,13 @@ import {
 import type { MessageDescriptor } from '@modrinth/ui'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	SmartClickable,
 	TagItem,
+	TeleportOverflowMenu,
 	useFormatDateTime,
 	useFormatNumber,
 	useRelativeTime,
@@ -412,177 +412,184 @@ const messages = defineMessages({
 				</template>
 			</div>
 			<div class="flex gap-1 justify-end smart-clickable:allow-pointer-events">
-				<ButtonStyled
+				<Button
 					v-if="(playingWorld || (locked && playingInstance)) && !startingInstance"
+					type="colored"
 					color="red"
+					@click="emit('stop')"
 				>
-					<button @click="emit('stop')">
-						<StopCircleIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.stopButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled v-else>
-					<button
-						v-tooltip="
-							quarantined
-								? 'This instance has been locked'
-								: world.type === 'server'
-									? !supportsServerQuickPlay
-										? formatMessage(messages.noServerQuickPlay)
-										: playingOtherWorld
-											? formatMessage(messages.gameAlreadyOpen)
-											: !serverStatus
-												? formatMessage(messages.noContact)
-												: serverIncompatible
-													? formatMessage(messages.incompatibleServer)
-													: null
-									: !supportsWorldQuickPlay
-										? formatMessage(messages.noSingleplayerQuickPlay)
-										: playingOtherWorld || locked
-											? formatMessage(messages.gameAlreadyOpen)
-											: null
-						"
-						:disabled="
-							quarantined ||
-							playingOtherWorld ||
-							startingInstance ||
-							(world.type == 'server' && !supportsServerQuickPlay) ||
-							(world.type == 'singleplayer' && !supportsWorldQuickPlay)
-						"
-						@click="emit('play')"
-					>
-						<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
-						<PlayIcon v-else aria-hidden="true" />
-						{{ formatMessage(commonMessages.playButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled circular type="transparent">
-					<OverflowMenu
-						:options="[
-							{
-								id: 'play-instance',
-								shown: !!instanceId,
-								disabled: playingInstance || quarantined,
-								action: () => emit('play-instance'),
+					<StopCircleIcon aria-hidden="true" />
+					{{ formatMessage(commonMessages.stopButton) }}
+				</Button>
+				<Button
+					v-else
+					v-tooltip="
+						quarantined
+							? 'This instance has been locked'
+							: world.type === 'server'
+								? !supportsServerQuickPlay
+									? formatMessage(messages.noServerQuickPlay)
+									: playingOtherWorld
+										? formatMessage(messages.gameAlreadyOpen)
+										: !serverStatus
+											? formatMessage(messages.noContact)
+											: serverIncompatible
+												? formatMessage(messages.incompatibleServer)
+												: null
+								: !supportsWorldQuickPlay
+									? formatMessage(messages.noSingleplayerQuickPlay)
+									: playingOtherWorld || locked
+										? formatMessage(messages.gameAlreadyOpen)
+										: null
+					"
+					:disabled="
+						quarantined ||
+						playingOtherWorld ||
+						startingInstance ||
+						(world.type == 'server' && !supportsServerQuickPlay) ||
+						(world.type == 'singleplayer' && !supportsWorldQuickPlay)
+					"
+					@click="emit('play')"
+				>
+					<SpinnerIcon v-if="startingInstance && playingWorld" class="animate-spin" />
+					<PlayIcon v-else aria-hidden="true" />
+					{{ formatMessage(commonMessages.playButton) }}
+				</Button>
+				<TeleportOverflowMenu
+					type="quiet"
+					label="More options"
+					:options="[
+						{
+							id: 'play-instance',
+							label: formatMessage(messages.playInstance),
+							shown: !!instanceId,
+							disabled: playingInstance || quarantined,
+							action: () => emit('play-instance'),
+						},
+						{
+							id: 'open-instance',
+							label: formatMessage(messages.viewInstance),
+							shown: !!instanceId,
+							action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
+						},
+						{
+							id: 'refresh',
+							label: formatMessage(commonMessages.refreshButton),
+							shown: world.type === 'server',
+							action: () => emit('refresh'),
+						},
+						{
+							id: 'copy-address',
+							label: formatMessage(messages.copyAddress),
+							shown: world.type === 'server',
+							action: () => copyToClipboard((world as ServerWorld).address),
+						},
+						{
+							id: 'edit',
+							label: formatMessage(commonMessages.editButton),
+							action: () => emit('edit'),
+							shown: !instanceId,
+							disabled: locked || managed,
+							tooltip: locked
+								? formatMessage(messages.worldInUse)
+								: managed
+									? formatMessage(messages.linkedServer)
+									: undefined,
+						},
+						{
+							id: 'open-folder',
+							label: formatMessage(commonMessages.openFolderButton),
+							shown: world.type === 'singleplayer',
+							action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
+						},
+						{
+							type: 'divider',
+							shown: !!instanceId,
+						},
+						{
+							id: 'dont-show-on-home',
+							label: formatMessage(messages.dontShowOnHome),
+							shown: !!instanceId,
+							action: () => {
+								set_world_display_status(
+									instanceId,
+									world.type,
+									getWorldIdentifier(world),
+									'hidden',
+								).then(() => {
+									emit('update')
+								})
 							},
-							{
-								id: 'open-instance',
-								shown: !!instanceId,
-								action: () => router.push(`/instance/${encodeURIComponent(instanceId)}`),
-							},
-							{
-								id: 'refresh',
-								shown: world.type === 'server',
-								action: () => emit('refresh'),
-							},
-							{
-								id: 'copy-address',
-								shown: world.type === 'server',
-								action: () => copyToClipboard((world as ServerWorld).address),
-							},
-							{
-								id: 'edit',
-								action: () => emit('edit'),
-								shown: !instanceId,
-								disabled: locked || managed,
-								tooltip: locked
-									? formatMessage(messages.worldInUse)
-									: managed
-										? formatMessage(messages.linkedServer)
-										: undefined,
-							},
-							{
-								id: 'open-folder',
-								shown: world.type === 'singleplayer',
-								action: () => (world.type === 'singleplayer' ? emit('open-folder', world) : {}),
-							},
-							{
-								divider: true,
-								shown: !!instanceId,
-							},
-							{
-								id: 'dont-show-on-home',
-								shown: !!instanceId,
-								action: () => {
-									set_world_display_status(
-										instanceId,
-										world.type,
-										getWorldIdentifier(world),
-										'hidden',
-									).then(() => {
-										emit('update')
-									})
-								},
-							},
-							{
-								id: 'create-shortcut',
-								shown: !!shortcutInstanceId && !quarantined,
-								action: () => createShortcut(),
-							},
-							{
-								divider: true,
-								shown: !instanceId,
-							},
-							{
-								id: 'delete',
-								color: 'red',
-								hoverFilled: true,
-								action: () => emit('delete'),
-								shown: !instanceId,
-								disabled: locked || managed,
-								tooltip: locked
-									? formatMessage(messages.worldInUse)
-									: managed
-										? formatMessage(messages.linkedServer)
-										: undefined,
-							},
-						]"
-					>
-						<MoreVerticalIcon aria-hidden="true" />
-						<template #play-instance>
-							<PlayIcon aria-hidden="true" />
-							{{ formatMessage(messages.playInstance) }}
-						</template>
-						<template #open-instance>
-							<EyeIcon aria-hidden="true" />
-							{{ formatMessage(messages.viewInstance) }}
-						</template>
-						<template #edit>
-							<EditIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.editButton) }}
-						</template>
-						<template #open-folder>
-							<FolderOpenIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.openFolderButton) }}
-						</template>
-						<template #copy-address>
-							<ClipboardCopyIcon aria-hidden="true" />
-							{{ formatMessage(messages.copyAddress) }}
-						</template>
-						<template #refresh>
-							<UpdatedIcon aria-hidden="true" />
-							{{ formatMessage(commonMessages.refreshButton) }}
-						</template>
-						<template #create-shortcut>
-							<ExternalIcon aria-hidden="true" />
-							{{ formatMessage(messages.createShortcut) }}
-						</template>
-						<template #dont-show-on-home>
-							<XIcon aria-hidden="true" />
-							{{ formatMessage(messages.dontShowOnHome) }}
-						</template>
-						<template #delete>
-							<TrashIcon aria-hidden="true" />
-							{{
-								formatMessage(
-									world.type === 'server'
-										? commonMessages.removeButton
-										: commonMessages.deleteLabel,
-								)
-							}}
-						</template>
-					</OverflowMenu>
-				</ButtonStyled>
+						},
+						{
+							id: 'create-shortcut',
+							label: formatMessage(messages.createShortcut),
+							shown: !!shortcutInstanceId && !quarantined,
+							action: () => createShortcut(),
+						},
+						{
+							type: 'divider',
+							shown: !instanceId,
+						},
+						{
+							id: 'delete',
+							label: formatMessage(
+								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
+							),
+							tone: 'red',
+							action: () => emit('delete'),
+							shown: !instanceId,
+							disabled: locked || managed,
+							tooltip: locked
+								? formatMessage(messages.worldInUse)
+								: managed
+									? formatMessage(messages.linkedServer)
+									: undefined,
+						},
+					]"
+				>
+					<MoreVerticalIcon aria-hidden="true" />
+					<template #play-instance>
+						<PlayIcon aria-hidden="true" />
+						{{ formatMessage(messages.playInstance) }}
+					</template>
+					<template #open-instance>
+						<EyeIcon aria-hidden="true" />
+						{{ formatMessage(messages.viewInstance) }}
+					</template>
+					<template #edit>
+						<EditIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.editButton) }}
+					</template>
+					<template #open-folder>
+						<FolderOpenIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.openFolderButton) }}
+					</template>
+					<template #copy-address>
+						<ClipboardCopyIcon aria-hidden="true" />
+						{{ formatMessage(messages.copyAddress) }}
+					</template>
+					<template #refresh>
+						<UpdatedIcon aria-hidden="true" />
+						{{ formatMessage(commonMessages.refreshButton) }}
+					</template>
+					<template #create-shortcut>
+						<ExternalIcon aria-hidden="true" />
+						{{ formatMessage(messages.createShortcut) }}
+					</template>
+					<template #dont-show-on-home>
+						<XIcon aria-hidden="true" />
+						{{ formatMessage(messages.dontShowOnHome) }}
+					</template>
+					<template #delete>
+						<TrashIcon aria-hidden="true" />
+						{{
+							formatMessage(
+								world.type === 'server' ? commonMessages.removeButton : commonMessages.deleteLabel,
+							)
+						}}
+					</template>
+				</TeleportOverflowMenu>
 			</div>
 		</div>
 	</SmartClickable>

apps/app-frontend/src/components/ui/world/modal/AddServerModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { PlayIcon, PlusIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -96,24 +96,18 @@ defineExpose({ show, hide })
 		/>
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled>
-					<button :disabled="!address" @click="addServer(false)">
-						<PlusIcon />
-						{{ formatMessage(messages.addServer) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="addServer(true)">
-						<PlayIcon />
-						{{ formatMessage(messages.addAndPlay) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button :disabled="!address" @click="addServer(false)">
+					<PlusIcon />
+					{{ formatMessage(messages.addServer) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!address" @click="addServer(true)">
+					<PlayIcon />
+					{{ formatMessage(messages.addAndPlay) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/ConfirmRemoveWorldModal.vue

@@ -2,7 +2,7 @@
 import { TrashIcon, XIcon } from '@modrinth/assets'
 import {
 	Admonition,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	NewModal,
@@ -106,18 +106,19 @@ defineExpose({ show, hide })
 
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="red">
-					<button :disabled="!isServer && !isSingleplayer" @click="confirm">
-						<TrashIcon />
-						{{ formatMessage(actionMessage) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button
+					type="colored"
+					color="red"
+					:disabled="!isServer && !isSingleplayer"
+					@click="confirm"
+				>
+					<TrashIcon />
+					{{ formatMessage(actionMessage) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/EditServerModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { SaveIcon, XIcon } from '@modrinth/assets'
 import {
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessage,
 	injectNotificationManager,
@@ -105,18 +105,14 @@ const titleMessage = defineMessage({
 		<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		<template #actions>
 			<div class="flex gap-2 justify-end">
-				<ButtonStyled type="outlined">
-					<button @click="hide()">
-						<XIcon />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand">
-					<button :disabled="!address" @click="saveServer">
-						<SaveIcon />
-						{{ formatMessage(commonMessages.saveChangesButton) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="hide()">
+					<XIcon />
+					{{ formatMessage(commonMessages.cancelButton) }}
+				</Button>
+				<Button type="colored" color="brand" :disabled="!address" @click="saveServer">
+					<SaveIcon />
+					{{ formatMessage(commonMessages.saveChangesButton) }}
+				</Button>
 			</div>
 		</template>
 	</NewModal>

apps/app-frontend/src/components/ui/world/modal/EditSingleplayerWorldModal.vue

@@ -2,7 +2,7 @@
 import { ChevronRightIcon, SaveIcon, UndoIcon, XIcon } from '@modrinth/assets'
 import {
 	Avatar,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
@@ -113,24 +113,18 @@ const messages = defineMessages({
 			<HideFromHomeOption v-model="hideFromHome" class="mt-3" />
 		</div>
 		<div class="flex gap-2 mt-4">
-			<ButtonStyled color="brand">
-				<button @click="saveWorld">
-					<SaveIcon />
-					{{ formatMessage(commonMessages.saveChangesButton) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button :disabled="removeIcon || !icon" @click="removeIcon = true">
-					<UndoIcon />
-					{{ formatMessage(messages.resetIcon) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled>
-				<button @click="hide()">
-					<XIcon />
-					{{ formatMessage(commonMessages.cancelButton) }}
-				</button>
-			</ButtonStyled>
+			<Button type="colored" color="brand" @click="saveWorld">
+				<SaveIcon />
+				{{ formatMessage(commonMessages.saveChangesButton) }}
+			</Button>
+			<Button :disabled="removeIcon || !icon" @click="removeIcon = true">
+				<UndoIcon />
+				{{ formatMessage(messages.resetIcon) }}
+			</Button>
+			<Button @click="hide()">
+				<XIcon />
+				{{ formatMessage(commonMessages.cancelButton) }}
+			</Button>
 		</div>
 	</ModalWrapper>
 </template>