refactor: migrate all input fields to StyledInput (#5306)

* feat: StyledInput component * migrate: auth pages to styledInput * migrate: search/filter inputs * migrate: dashboard inputs * migrate: app frontend * migrate: search related inputs * migrate: all of app-frontend * fix: missing inputs on app-frontend * migrate: frontend * feat: multiline * migrate: textareas * fix: storybook use text-primary * fix: lint * fix: merge conflict * feat: cleanup
2026-02-09 14:57:31 +00:00
parent 90438a1ad5
commit 37eac92329
108 changed files with 1670 additions and 1479 deletions
--- a/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
+++ b/apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue
@@ -63,19 +63,17 @@
 		</nav>

 		<div class="flex flex-shrink-0 items-center gap-2">
-			<div class="iconified-input w-full sm:w-[280px]">
-				<SearchIcon aria-hidden="true" class="!text-secondary" />
-				<input
-					id="search-folder"
-					:value="searchQuery"
-					type="search"
-					name="search"
-					autocomplete="off"
-					class="h-10 w-full rounded-[14px] border-0 bg-surface-4 text-sm"
-					placeholder="Search files"
-					@input="$emit('update:searchQuery', ($event.target as HTMLInputElement).value)"
-				/>
-			</div>
+			<StyledInput
+				id="search-folder"
+				:model-value="searchQuery"
+				:icon="SearchIcon"
+				type="search"
+				name="search"
+				autocomplete="off"
+				placeholder="Search files"
+				wrapper-class="w-full sm:w-[280px]"
+				@update:model-value="$emit('update:searchQuery', $event)"
+			/>

 			<ButtonStyled type="outlined">
 				<OverflowMenu
@@ -128,7 +126,7 @@ import {
 	SearchIcon,
 	UploadIcon,
 } from '@modrinth/assets'
-import { ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { ButtonStyled, OverflowMenu, StyledInput } from '@modrinth/ui'

 defineProps<{
 	breadcrumbSegments: string[]
--- a/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue
@@ -3,14 +3,12 @@
 		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
 			<div class="flex flex-col gap-2">
 				<div class="font-semibold text-contrast">Name</div>
-				<input
+				<StyledInput
 					ref="createInput"
 					v-model="itemName"
 					autofocus
-					type="text"
-					class="bg-bg-input w-full rounded-lg p-4"
+					wrapper-class="bg-bg-input w-full rounded-lg p-4"
 					:placeholder="`e.g. ${type === 'file' ? 'config.yml' : 'plugins'}`"
-					required
 				/>
 				<div v-if="submitted && error" class="text-red">{{ error }}</div>
 			</div>
@@ -34,7 +32,7 @@

 <script setup lang="ts">
 import { PlusIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
 import { computed, nextTick, ref } from 'vue'

 const props = defineProps<{
--- a/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesMoveItemModal.vue
@@ -2,14 +2,12 @@
 	<NewModal ref="modal" :header="`Moving ${item?.name}`">
 		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
 			<div class="flex flex-col gap-2">
-				<input
+				<StyledInput
 					ref="destinationInput"
 					v-model="destination"
 					autofocus
-					type="text"
-					class="bg-bg-input w-full rounded-lg p-4"
+					wrapper-class="bg-bg-input w-full rounded-lg p-4"
 					placeholder="e.g. /mods/modname"
-					required
 				/>
 			</div>
 			<div class="flex items-center gap-2 text-nowrap">
@@ -38,7 +36,7 @@

 <script setup lang="ts">
 import { ArrowBigUpDashIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
 import { computed, nextTick, ref } from 'vue'

 const destinationInput = ref<HTMLInputElement | null>(null)
--- a/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesRenameItemModal.vue
@@ -3,13 +3,11 @@
 		<form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
 			<div class="flex flex-col gap-2">
 				<div class="font-semibold text-contrast">Name</div>
-				<input
+				<StyledInput
 					ref="renameInput"
 					v-model="itemName"
 					autofocus
-					type="text"
-					class="bg-bg-input w-full rounded-lg p-4"
-					required
+					wrapper-class="bg-bg-input w-full rounded-lg p-4"
 				/>
 				<div v-if="submitted && error" class="text-red">{{ error }}</div>
 			</div>
@@ -33,7 +31,7 @@

 <script setup lang="ts">
 import { EditIcon, XIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal } from '@modrinth/ui'
+import { ButtonStyled, NewModal, StyledInput } from '@modrinth/ui'
 import { computed, nextTick, ref } from 'vue'

 const props = defineProps<{
--- a/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
+++ b/apps/frontend/src/components/ui/servers/FilesUploadZipUrlModal.vue
@@ -33,16 +33,14 @@
 					</li>
 				</ol>
 				<p v-else class="mb-1 mt-0">Copy and paste the direct download URL of a .zip file.</p>
-				<input
+				<StyledInput
 					ref="urlInput"
 					v-model="url"
 					autofocus
 					:disabled="submitted"
-					type="text"
 					data-1p-ignore
 					data-lpignore="true"
 					data-protonpass-ignore="true"
-					required
 					:placeholder="
 						cf
 							? 'https://www.curseforge.com/minecraft/modpacks/.../files/6412259'
@@ -81,6 +79,7 @@ import {
 	injectModrinthServerContext,
 	injectNotificationManager,
 	NewModal,
+	StyledInput,
 } from '@modrinth/ui'
 import { ModrinthServersFetchError } from '@modrinth/utils'
 import { computed, nextTick, ref } from 'vue'
--- a/apps/frontend/src/components/ui/servers/PanelTerminal.vue
+++ b/apps/frontend/src/components/ui/servers/PanelTerminal.vue
@@ -2,15 +2,16 @@
 	<div class="contents">
 		<div class="flex items-center gap-4">
 			<div class="relative w-full">
-				<input
+				<StyledInput
 					v-model="searchInput"
-					type="text"
+					type="search"
+					:icon="SearchIcon"
 					placeholder="Search logs"
-					class="h-12 !w-full !pl-10 !pr-48"
+					wrapper-class="h-12 !w-full"
+					input-class="!pr-48"
 					:disabled="loading"
 					@keydown.escape="clearSearch"
 				/>
-				<SearchIcon class="absolute left-4 top-1/2 -translate-y-1/2" />
 				<ButtonStyled v-if="searchInput && !loading" @click="clearSearch">
 					<button class="absolute right-2 top-1/2 -translate-y-1/2">
 						<XIcon class="h-5 w-5" />
@@ -298,7 +299,7 @@

 <script setup lang="ts">
 import { CopyIcon, EyeIcon, RightArrowIcon, SearchIcon, XIcon } from '@modrinth/assets'
-import { NewModal } from '@modrinth/ui'
+import { NewModal, StyledInput } from '@modrinth/ui'
 import ButtonStyled from '@modrinth/ui/src/components/base/ButtonStyled.vue'
 import { useDebounceFn } from '@vueuse/core'
 import DOMPurify from 'dompurify'
--- a/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
+++ b/apps/frontend/src/components/ui/servers/notice/AssignNoticeModal.vue
@@ -6,6 +6,7 @@ import {
 	injectNotificationManager,
 	NewModal,
 	ServerNotice,
+	StyledInput,
 	TagItem,
 } from '@modrinth/ui'
 import type { ServerNotice as ServerNoticeType } from '@modrinth/utils'
@@ -180,11 +181,10 @@ defineExpose({ show, hide })
 					<span v-else class="mb-2"> No nodes assigned yet </span>
 				</div>
 				<div class="flex w-[45rem] items-center gap-2">
-					<input
+					<StyledInput
 						id="server-assign-field"
 						v-model="inputField"
-						class="w-full"
-						type="text"
+						wrapper-class="w-full"
 						autocomplete="off"
 					/>
 					<ButtonStyled color="green" color-fill="text">