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
@@ -17,57 +17,58 @@
tabindex="-1"
@mousedown.stop
>
<ButtonStyled type="transparent">
<button
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleCopyFilename"
>
<ClipboardCopyIcon class="size-5" />
{{ formatMessage(commonMessages.copyFilenameButton) }}
</button>
</ButtonStyled>
<ButtonStyled type="transparent">
<button
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleCopyPath"
>
<ClipboardCopyIcon class="size-5" />
{{ formatMessage(commonMessages.copyFullPathButton) }}
</button>
</ButtonStyled>
<ButtonStyled v-if="ctx.openInFolder" type="transparent">
<button
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleOpenInFolder"
>
<FolderOpenIcon class="size-5" />
{{ formatMessage(commonMessages.openInFolderButton) }}
</button>
</ButtonStyled>
<Button
type="quiet"
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleCopyFilename"
>
<ClipboardCopyIcon class="size-5" />
{{ formatMessage(commonMessages.copyFilenameButton) }}
</Button>
<Button
type="quiet"
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleCopyPath"
>
<ClipboardCopyIcon class="size-5" />
{{ formatMessage(commonMessages.copyFullPathButton) }}
</Button>
<Button
v-if="ctx.openInFolder"
type="quiet"
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleOpenInFolder"
>
<FolderOpenIcon class="size-5" />
{{ formatMessage(commonMessages.openInFolderButton) }}
</Button>
<div class="h-px w-full bg-surface-5" />
<template v-for="(option, index) in menuOptions" :key="index">
<div
v-if="'divider' in option && option.divider && option.shown !== false"
class="h-px w-full bg-surface-5"
/>
<ButtonStyled
<Button
v-else-if="'id' in option && option.shown !== false"
type="transparent"
:color="option.color"
v-tooltip="option.tooltip"
type="quiet"
:color="
option.color && option.color !== 'standard'
? option.color === 'medal-promo'
? 'medal_promotion'
: option.color
: undefined
"
:disabled="option.disabled"
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleOptionClick(option)"
>
<button
v-tooltip="option.tooltip"
:disabled="option.disabled"
class="w-full !justify-start !whitespace-nowrap"
role="menuitem"
@click="handleOptionClick(option)"
>
<slot :name="option.id" />
</button>
</ButtonStyled>
<slot :name="option.id" />
</Button>
</template>
</div>
</Transition>
@@ -78,7 +79,7 @@
import { ClipboardCopyIcon, FolderOpenIcon } from '@modrinth/assets'
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
import { Button } from '#ui/components/base/buttons'
import { useVIntl } from '#ui/composables/i18n'
import { injectNotificationManager } from '#ui/providers/web-notifications'
import { commonMessages } from '#ui/utils/common-messages'