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>
This commit is contained in:
Calum H.
2026-08-04 13:54:04 -07:00
committed by GitHub
co-authored by Prospector
parent 6cfe999cb3
commit bb2193b6f5
398 changed files with 13688 additions and 13133 deletions
@@ -33,19 +33,20 @@
<div class="flex items-center justify-between">
<span class="label__title font-semibold">Announcement link (optional)</span>
<ButtonStyled v-if="committedNormalizedAnnouncementUrl" type="transparent" size="small">
<a
:href="committedNormalizedAnnouncementUrl"
target="_blank"
rel="noopener noreferrer"
aria-label="Check announcement link"
title="Check announcement link"
class="text-sm"
>
<ExternalIcon aria-hidden="true" />
Open link
</a>
</ButtonStyled>
<ButtonLink
v-if="committedNormalizedAnnouncementUrl"
type="quiet"
size="xs"
:href="committedNormalizedAnnouncementUrl"
target="_blank"
rel="noopener noreferrer"
aria-label="Check announcement link"
title="Check announcement link"
class="!h-6 text-sm"
>
<ExternalIcon aria-hidden="true" />
Open link
</ButtonLink>
</div>
<div class="flex items-center gap-2">
<StyledInput
@@ -110,15 +111,16 @@
<template #actions>
<div class="flex justify-end gap-2">
<ButtonStyled type="transparent">
<button @click="eventModal?.hide()">Cancel</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button :disabled="!canSaveEvent || isSaving" @click="saveEvent">
<SaveIcon aria-hidden="true" />
{{ modalMode === 'create' ? 'Create event' : 'Save' }}
</button>
</ButtonStyled>
<Button type="quiet" @click="eventModal?.hide()">Cancel</Button>
<Button
type="colored"
color="brand"
:disabled="!canSaveEvent || isSaving"
@click="saveEvent"
>
<SaveIcon aria-hidden="true" />
{{ modalMode === 'create' ? 'Create event' : 'Save' }}
</Button>
</div>
</template>
</NewModal>
@@ -137,12 +139,10 @@
clearable
wrapper-class="w-full sm:w-72"
/>
<ButtonStyled color="brand">
<button :disabled="isSaving" @click="openCreateModal">
<PlusIcon aria-hidden="true" />
New event
</button>
</ButtonStyled>
<Button type="colored" color="brand" :disabled="isSaving" @click="openCreateModal">
<PlusIcon aria-hidden="true" />
New event
</Button>
</div>
</div>
@@ -196,21 +196,23 @@
<template #cell-actions="{ row }">
<div class="flex justify-end gap-2">
<ButtonStyled circular type="outlined" color="red">
<button
:aria-label="`Delete ${row.title}`"
:disabled="isDeletingEvent(row.id)"
@click="openDeleteEventModal(row)"
>
<TrashIcon aria-hidden="true" />
</button>
</ButtonStyled>
<ButtonStyled type="outlined">
<button :disabled="isSaving || isDeletingEvent(row.id)" @click="openEditModal(row)">
Edit
<EditIcon aria-hidden="true" />
</button>
</ButtonStyled>
<IconButton
type="outlined"
:label="`Delete ${row.title}`"
:disabled="isDeletingEvent(row.id)"
class="!text-red !shadow-[inset_0_0_0_1px_var(--color-red)] [&>svg]:!text-red"
@click="openDeleteEventModal(row)"
>
<TrashIcon aria-hidden="true" />
</IconButton>
<Button
type="outlined"
:disabled="isSaving || isDeletingEvent(row.id)"
@click="openEditModal(row)"
>
Edit
<EditIcon aria-hidden="true" />
</Button>
</div>
</template>
@@ -239,8 +241,8 @@ import {
SpinnerIcon,
TrashIcon,
} from '@modrinth/assets'
import { Button, ButtonLink, IconButton } from '@modrinth/ui'
import {
ButtonStyled,
ConfirmModal,
DatePicker,
injectModrinthClient,