mirror of
https://github.com/modrinth/code.git
synced 2026-08-26 09:34:50 +00:00
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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user