sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-28 10:34:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Button components (#6929)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/layouts/shared/user-profile/layout.vue
+56 -53
View File
@@ -13,19 +13,26 @@
<template #actions>
<div class="flex justify-end gap-2">
<ButtonStyled type="outlined">
<button type="button" :disabled="isBlockingUser" @click="blockUserModal?.hide()">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>
</ButtonStyled>
<ButtonStyled color="red">
<button type="button" :disabled="isBlockingUser" @click="confirmBlockUser">
<SpinnerIcon v-if="isBlockingUser" class="animate-spin" />
<BanIcon v-else />
{{ formatMessage(messages.blockButton) }}
</button>
</ButtonStyled>
<Button
type="outlined"
native-type="button"
:disabled="isBlockingUser"
@click="blockUserModal?.hide()"
>
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</Button>
<Button
type="colored"
color="red"
native-type="button"
:disabled="isBlockingUser"
@click="confirmBlockUser"
>
<SpinnerIcon v-if="isBlockingUser" class="animate-spin" />
<BanIcon v-else />
{{ formatMessage(messages.blockButton) }}
</Button>
</div>
</template>
</NewModal>
@@ -42,28 +49,26 @@
:placeholder="formatMessage(messages.selectRolePlaceholder)"
/>
<div class="flex justify-end gap-2">
<ButtonStyled>
<button type="button" @click="cancelRoleEdit">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button
type="button"
:disabled="!selectedRole || selectedRole === user.role || isSavingRole"
@click="saveRoleEdit"
>
<template v-if="isSavingRole">
<SpinnerIcon class="animate-spin" />
{{ formatMessage(messages.savingLabel) }}
</template>
<template v-else>
<SaveIcon />
{{ formatMessage(commonMessages.saveChangesButton) }}
</template>
</button>
</ButtonStyled>
<Button native-type="button" @click="cancelRoleEdit">
<XIcon />
{{ formatMessage(commonMessages.cancelButton) }}
</Button>
<Button
type="colored"
color="brand"
native-type="button"
:disabled="!selectedRole || selectedRole === user.role || isSavingRole"
@click="saveRoleEdit"
>
<template v-if="isSavingRole">
<SpinnerIcon class="animate-spin" />
{{ formatMessage(messages.savingLabel) }}
</template>
<template v-else>
<SaveIcon />
{{ formatMessage(commonMessages.saveChangesButton) }}
</template>
</Button>
</div>
</div>
</NewModal>
@@ -192,7 +197,7 @@
</div>
</NewModal>
<NormalPage :sidebar="sidebarPosition">
<NormalPage :sidebar="sidebarPosition" :full-width="variant === 'app'">
<template #header>
<UserPageHeader
:user="user"
@@ -284,7 +289,11 @@
}"
:layout="displayMode === 'list' ? 'list' : 'grid'"
:status="project.status"
/>
>
<template v-if="$slots['project-actions']" #actions>
<slot name="project-actions" :project="project" />
</template>
</ProjectCard>
</ProjectCardList>
<EmptyState
@@ -296,11 +305,9 @@
"
>
<template v-if="isSelf" #actions>
<ButtonStyled color="brand">
<button type="button" @click="createProject">
{{ formatMessage(messages.createProjectButton) }}
</button>
</ButtonStyled>
<Button type="colored" color="brand" native-type="button" @click="createProject">
{{ formatMessage(messages.createProjectButton) }}
</Button>
</template>
</EmptyState>
@@ -380,11 +387,9 @@
"
>
<template v-if="isSelf" #actions>
<ButtonStyled color="brand">
<button type="button" @click="createCollection">
{{ formatMessage(messages.createCollectionButton) }}
</button>
</ButtonStyled>
<Button type="colored" color="brand" native-type="button" @click="createCollection">
{{ formatMessage(messages.createCollectionButton) }}
</Button>
</template>
</EmptyState>
</div>
@@ -437,11 +442,9 @@
:description="formatMessage(messages.userLoadErrorDescription)"
>
<template #actions>
<ButtonStyled color="brand">
<button type="button" @click="retryQueries">
{{ formatMessage(commonMessages.retryButton) }}
</button>
</ButtonStyled>
<Button type="colored" color="brand" native-type="button" @click="retryQueries">
{{ formatMessage(commonMessages.retryButton) }}
</Button>
</template>
</EmptyState>
</div>
@@ -473,7 +476,7 @@ import { useRoute, useRouter } from 'vue-router'
import Admonition from '#ui/components/base/Admonition.vue'
import AutoLink from '#ui/components/base/AutoLink.vue'
import Avatar from '#ui/components/base/Avatar.vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import { Button } from '#ui/components/base/buttons'
import Combobox from '#ui/components/base/Combobox.vue'
import EmptyState from '#ui/components/base/EmptyState.vue'
import IntlFormatted from '#ui/components/base/IntlFormatted.vue'