sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 12:05: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
apps/frontend/src/components/ui/banner/GeneratedStateErrorsBanner.vue
+14 -13
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { XCircleIcon, XIcon } from '@modrinth/assets'
import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
import { Button, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
const { formatMessage } = useVIntl()
const flags = useFeatureFlags()
@@ -57,18 +57,19 @@ function alwaysIgnoreBanner() {
}}
</template>
<template #actions_right>
<ButtonStyled color="red" type="transparent" hover-color-fill="background">
<button @click="alwaysIgnoreBanner">
<XCircleIcon />
{{ formatMessage(messages.alwaysIgnore) }}
</button>
</ButtonStyled>
<ButtonStyled color="red">
<button @click="tempIgnored = true">
<XIcon />
{{ formatMessage(messages.ignoreErrors) }}
</button>
</ButtonStyled>
<Button
type="quiet"
color="red"
class="hover:!bg-red hover:!text-[var(--color-accent-contrast)] focus-visible:!bg-red focus-visible:!text-[var(--color-accent-contrast)]"
@click="alwaysIgnoreBanner"
>
<XCircleIcon />
{{ formatMessage(messages.alwaysIgnore) }}
</Button>
<Button type="colored" color="red" @click="tempIgnored = true">
<XIcon />
{{ formatMessage(messages.ignoreErrors) }}
</Button>
</template>
</PagewideBanner>
</template>
apps/frontend/src/components/ui/banner/PreviewBanner.vue
+8 -6
View File
@@ -1,9 +1,9 @@
<script setup lang="ts">
import { XIcon } from '@modrinth/assets'
import {
ButtonStyled,
commonMessages,
defineMessages,
IconButton,
IntlFormatted,
PagewideBanner,
useVIntl,
@@ -70,11 +70,13 @@ const url = computed(() => `https://modrinth.com${route.fullPath}`)
</span>
</template>
<template #actions_top_right>
<ButtonStyled type="transparent" circular>
<button :aria-label="formatMessage(commonMessages.closeButton)" @click="hidePreviewBanner">
<XIcon aria-hidden="true" />
</button>
</ButtonStyled>
<IconButton
type="quiet"
:label="formatMessage(commonMessages.closeButton)"
@click="hidePreviewBanner"
>
<XIcon aria-hidden="true" />
</IconButton>
</template>
</PagewideBanner>
</template>
apps/frontend/src/components/ui/banner/RussiaBanner.vue
+17 -21
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { BookTextIcon, XIcon } from '@modrinth/assets'
import { ButtonStyled, commonMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
import { ButtonLink, commonMessages, IconButton, PagewideBanner, useVIntl } from '@modrinth/ui'
const flags = useFeatureFlags()
const { formatMessage } = useVIntl()
@@ -41,29 +41,25 @@ function hideRussiaCensorshipBanner() {
</template>
<template #actions>
<div class="mt-2 flex w-fit gap-2">
<ButtonStyled color="brand">
<nuxt-link to="/news/article/standing-by-our-values-russian">
<BookTextIcon /> Прочесть наше полное заявление
<span class="text-xs font-medium">(Перевод на русский)</span>
</nuxt-link>
</ButtonStyled>
<ButtonStyled type="transparent" hover-color-fill="background">
<nuxt-link to="/news/article/standing-by-our-values">
<BookTextIcon /> Read our full statement
<span class="text-xs font-medium">(English)</span>
</nuxt-link>
</ButtonStyled>
<ButtonLink type="colored" color="brand" to="/news/article/standing-by-our-values-russian">
<BookTextIcon /> Прочесть наше полное заявление
<span class="text-xs font-medium">(Перевод на русский)</span>
</ButtonLink>
<ButtonLink type="quiet" to="/news/article/standing-by-our-values">
<BookTextIcon /> Read our full statement
<span class="text-xs font-medium">(English)</span>
</ButtonLink>
</div>
</template>
<template #actions_top_right>
<ButtonStyled circular type="transparent">
<button
v-tooltip="formatMessage(commonMessages.closeButton)"
@click="hideRussiaCensorshipBanner"
>
<XIcon :aria-label="formatMessage(commonMessages.closeButton)" />
</button>
</ButtonStyled>
<IconButton
v-tooltip="formatMessage(commonMessages.closeButton)"
type="quiet"
:label="formatMessage(commonMessages.closeButton)"
@click="hideRussiaCensorshipBanner"
>
<XIcon :aria-label="formatMessage(commonMessages.closeButton)" />
</IconButton>
</template>
</PagewideBanner>
</template>
apps/frontend/src/components/ui/banner/StagingBanner.vue
+8 -12
View File
@@ -1,12 +1,6 @@
<script setup lang="ts">
import { XIcon } from '@modrinth/assets'
import {
ButtonStyled,
commonMessages,
defineMessages,
PagewideBanner,
useVIntl,
} from '@modrinth/ui'
import { commonMessages, defineMessages, IconButton, PagewideBanner, useVIntl } from '@modrinth/ui'
const { formatMessage } = useVIntl()
const cosmetics = useCosmetics()
@@ -38,11 +32,13 @@ function hideStagingBanner() {
{{ formatMessage(messages.description) }}
</template>
<template #actions_top_right>
<ButtonStyled type="transparent" circular>
<button :aria-label="formatMessage(commonMessages.closeButton)" @click="hideStagingBanner">
<XIcon aria-hidden="true" />
</button>
</ButtonStyled>
<IconButton
type="quiet"
:label="formatMessage(commonMessages.closeButton)"
@click="hideStagingBanner"
>
<XIcon aria-hidden="true" />
</IconButton>
</template>
</PagewideBanner>
</template>
apps/frontend/src/components/ui/banner/SubscriptionPaymentFailedBanner.vue
+5 -7
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { SettingsIcon } from '@modrinth/assets'
import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
import { ButtonLink, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
const { formatMessage } = useVIntl()
@@ -30,12 +30,10 @@ const messages = defineMessages({
<span>{{ formatMessage(messages.description) }}</span>
</template>
<template #actions_right>
<ButtonStyled color="red">
<nuxt-link to="/settings/billing">
<SettingsIcon aria-hidden="true" />
{{ formatMessage(messages.action) }}
</nuxt-link>
</ButtonStyled>
<ButtonLink type="colored" color="red" to="/settings/billing">
<SettingsIcon aria-hidden="true" />
{{ formatMessage(messages.action) }}
</ButtonLink>
</template>
</PagewideBanner>
</template>
apps/frontend/src/components/ui/banner/TaxComplianceBanner.vue
+4 -10
View File
@@ -1,12 +1,6 @@
<script setup lang="ts">
import { FileTextIcon } from '@modrinth/assets'
import {
ButtonStyled,
defineMessages,
PagewideBanner,
useFormatMoney,
useVIntl,
} from '@modrinth/ui'
import { Button, defineMessages, PagewideBanner, useFormatMoney, useVIntl } from '@modrinth/ui'
import { computed } from 'vue'
import { getTaxThreshold } from '@/providers/creator-withdraw.ts'
@@ -56,9 +50,9 @@ function openTaxForm(e: MouseEvent) {
}}</span>
</template>
<template #actions_right>
<ButtonStyled color="orange">
<button @click="openTaxForm"><FileTextIcon /> {{ formatMessage(messages.action) }}</button>
</ButtonStyled>
<Button type="colored" color="orange" @click="openTaxForm"
><FileTextIcon /> {{ formatMessage(messages.action) }}</Button
>
</template>
</PagewideBanner>
</template>
apps/frontend/src/components/ui/banner/TaxIdMismatchBanner.vue
+11 -7
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { MessageIcon } from '@modrinth/assets'
import { ButtonStyled, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
import { ButtonLink, defineMessages, PagewideBanner, useVIntl } from '@modrinth/ui'
const { formatMessage } = useVIntl()
@@ -31,12 +31,16 @@ const messages = defineMessages({
</template>
<template #actions_right>
<div class="flex w-fit flex-row">
<ButtonStyled color="red">
<nuxt-link to="https://support.modrinth.com" target="_blank" rel="noopener">
<MessageIcon />
{{ formatMessage(messages.action) }}
</nuxt-link>
</ButtonStyled>
<ButtonLink
type="colored"
color="red"
to="https://support.modrinth.com"
target="_blank"
rel="noopener"
>
<MessageIcon />
{{ formatMessage(messages.action) }}
</ButtonLink>
</div>
</template>
</PagewideBanner>
apps/frontend/src/components/ui/banner/VerifyEmailBanner.vue
+9 -10
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import { SettingsIcon } from '@modrinth/assets'
import {
ButtonStyled,
Button,
ButtonLink,
defineMessages,
injectNotificationManager,
PagewideBanner,
@@ -97,15 +98,13 @@ async function handleResendEmailVerification() {
</span>
</template>
<template #actions_right>
<ButtonStyled color="orange">
<button v-if="hasEmail" @click="handleResendEmailVerification">
{{ formatMessage(verifyEmailBannerMessages.action) }}
</button>
<nuxt-link v-else to="/settings/account">
<SettingsIcon aria-hidden="true" />
{{ formatMessage(addEmailBannerMessages.action) }}
</nuxt-link>
</ButtonStyled>
<Button v-if="hasEmail" type="colored" color="orange" @click="handleResendEmailVerification">
{{ formatMessage(verifyEmailBannerMessages.action) }}
</Button>
<ButtonLink v-else type="colored" color="orange" to="/settings/account">
<SettingsIcon aria-hidden="true" />
{{ formatMessage(addEmailBannerMessages.action) }}
</ButtonLink>
</template>
</PagewideBanner>
</template>