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>

packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue

@@ -4,18 +4,14 @@
 		<div v-if="ctx.flowType === 'instance'" class="flex items-center gap-4">
 			<Avatar :src="ctx.instanceIconUrl.value ?? undefined" size="5rem" />
 			<div class="flex flex-col gap-2">
-				<ButtonStyled type="outlined">
-					<button @click="triggerIconInput">
-						<UploadIcon />
-						{{ formatMessage(messages.selectIcon) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled type="outlined">
-					<button :disabled="!ctx.instanceIcon.value" @click="removeIcon">
-						<XIcon />
-						{{ formatMessage(messages.removeIcon) }}
-					</button>
-				</ButtonStyled>
+				<Button type="outlined" @click="triggerIconInput">
+					<UploadIcon />
+					{{ formatMessage(messages.selectIcon) }}
+				</Button>
+				<Button type="outlined" :disabled="!ctx.instanceIcon.value" @click="removeIcon">
+					<XIcon />
+					{{ formatMessage(messages.removeIcon) }}
+				</Button>
 			</div>
 		</div>
 
@@ -153,11 +149,11 @@ import { EyeIcon, EyeOffIcon, UploadIcon, XIcon } from '@modrinth/assets'
 import { commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 
 import { injectFilePicker, injectModrinthClient, injectTags } from '../../../../providers'
 import Avatar from '../../../base/Avatar.vue'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Chips from '../../../base/Chips.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'

packages/ui/src/components/flows/creation-flow-modal/components/ImportInstanceStage.vue

@@ -5,13 +5,14 @@
 			<span class="font-semibold text-contrast">{{
 				formatMessage(messages.launcherInstancesTitle)
 			}}</span>
-			<ButtonStyled
-				type="transparent"
-				size="small"
+			<Button
+				type="quiet"
+				size="xs"
+				class="!h-6"
 				:class="{ invisible: totalSelectedCount === 0 }"
+				@click="clearAll"
+				>{{ formatMessage(messages.clearAll) }}</Button
 			>
-				<button @click="clearAll">{{ formatMessage(messages.clearAll) }}</button>
-			</ButtonStyled>
 		</div>
 
 		<template v-if="loading">
@@ -76,28 +77,22 @@
 
 			<!-- Add launcher path -->
 			<div v-if="!showAddPath">
-				<ButtonStyled>
-					<button class="w-full !shadow-none" @click="showAddPath = true">
-						{{ formatMessage(messages.addLauncherPath) }}
-					</button>
-				</ButtonStyled>
+				<Button class="w-full" @click="showAddPath = true">
+					{{ formatMessage(messages.addLauncherPath) }}
+				</Button>
 			</div>
 			<div v-else class="flex items-center gap-2">
-				<ButtonStyled circular>
-					<button class="!shadow-none" @click="browseForLauncherPath">
-						<FolderSearchIcon />
-					</button>
-				</ButtonStyled>
+				<IconButton label="Browse for launcher path" @click="browseForLauncherPath">
+					<FolderSearchIcon />
+				</IconButton>
 				<StyledInput
 					v-model="newLauncherPath"
 					:placeholder="formatMessage(messages.launcherPathPlaceholder)"
 					class="flex-1"
 				/>
-				<ButtonStyled>
-					<button class="!shadow-none" :disabled="!newLauncherPath.trim()" @click="addLauncherPath">
-						{{ formatMessage(messages.add) }}
-					</button>
-				</ButtonStyled>
+				<Button :disabled="!newLauncherPath.trim()" @click="addLauncherPath">
+					{{ formatMessage(messages.add) }}
+				</Button>
 			</div>
 		</template>
 	</div>
@@ -108,9 +103,10 @@ import { ChevronRightIcon, FolderSearchIcon, SearchIcon } from '@modrinth/assets
 import { defineMessages, useVIntl } from '@modrinth/ui'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { Button, IconButton } from '#ui/components/base/buttons'
+
 import { injectInstanceImport, injectNotificationManager } from '../../../../providers'
 import type { ImportableLauncher } from '../../../../providers/instance-import'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Checkbox from '../../../base/Checkbox.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import StyledInput from '../../../base/StyledInput.vue'

packages/ui/src/components/flows/creation-flow-modal/components/ModpackStage.vue

@@ -30,28 +30,27 @@
 			<div class="h-[1px] w-full flex-1 bg-surface-5" />
 		</div>
 		<div class="flex gap-3">
-			<ButtonStyled type="outlined">
-				<button
-					v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
-					class="flex-1"
-					:disabled="ctx.finishDisabled.value"
-					@click="triggerFileInput"
-				>
-					<ImportIcon />
-					{{ formatMessage(messages.importModpack) }}
-				</button>
-			</ButtonStyled>
-			<ButtonStyled color="brand">
-				<button
-					v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
-					class="flex-1"
-					:disabled="ctx.finishDisabled.value"
-					@click="ctx.browseModpacks()"
-				>
-					<CompassIcon />
-					{{ formatMessage(messages.browseModpacks) }}
-				</button>
-			</ButtonStyled>
+			<Button
+				v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
+				type="outlined"
+				class="flex-1"
+				:disabled="ctx.finishDisabled.value"
+				@click="triggerFileInput"
+			>
+				<ImportIcon />
+				{{ formatMessage(messages.importModpack) }}
+			</Button>
+			<Button
+				v-tooltip="ctx.finishDisabled.value ? ctx.finishDisabledTooltip.value : undefined"
+				type="colored"
+				color="brand"
+				class="flex-1"
+				:disabled="ctx.finishDisabled.value"
+				@click="ctx.browseModpacks()"
+			>
+				<CompassIcon />
+				{{ formatMessage(messages.browseModpacks) }}
+			</Button>
 		</div>
 	</div>
 </template>
@@ -61,10 +60,10 @@ import { CompassIcon, ImportIcon, RightArrowIcon } from '@modrinth/assets'
 import { commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
 import { defineAsyncComponent, h, onMounted, ref, watch } from 'vue'
 
+import { Button } from '#ui/components/base/buttons'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 
 import { injectFilePicker } from '../../../../providers'
-import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Combobox from '../../../base/Combobox.vue'
 import { injectCreationFlowContext } from '../creation-flow-context'