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/packages/ui/src/components/servers/backups/BackupCreateModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupCreateModal.vue
@@ -4,14 +4,13 @@
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast">Name</span>
 			</label>
-			<input
+			<StyledInput
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
-				type="text"
-				class="w-full rounded-lg bg-bg-input p-4"
 				:placeholder="`Backup #${newBackupAmount}`"
-				maxlength="48"
+				:maxlength="48"
+				wrapper-class="w-full"
 			/>
 			<Transition
 				enter-active-class="transition-all duration-300 ease-out"
@@ -76,6 +75,7 @@ import {
 	injectNotificationManager,
 } from '../../../providers'
 import ButtonStyled from '../../base/ButtonStyled.vue'
+import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'

 const { addNotification } = injectNotificationManager()
--- a/packages/ui/src/components/servers/backups/BackupRenameModal.vue
+++ b/packages/ui/src/components/servers/backups/BackupRenameModal.vue
@@ -4,14 +4,13 @@
 			<label for="backup-name-input">
 				<span class="text-lg font-semibold text-contrast"> Name </span>
 			</label>
-			<input
+			<StyledInput
 				id="backup-name-input"
 				ref="input"
 				v-model="backupName"
-				type="text"
-				class="bg-bg-input w-full rounded-lg p-4"
 				:placeholder="`Backup #${backupNumber}`"
-				maxlength="48"
+				:maxlength="48"
+				wrapper-class="w-full"
 			/>
 			<div v-if="nameExists" class="flex items-center gap-1">
 				<IssuesIcon class="hidden text-orange sm:block" />
@@ -56,6 +55,7 @@ import {
 	injectNotificationManager,
 } from '../../../providers'
 import ButtonStyled from '../../base/ButtonStyled.vue'
+import StyledInput from '../../base/StyledInput.vue'
 import NewModal from '../../modal/NewModal.vue'

 const { addNotification } = injectNotificationManager()
--- a/packages/ui/src/components/servers/files/FileNavbar.vue
+++ b/packages/ui/src/components/servers/files/FileNavbar.vue
@@ -68,19 +68,17 @@
 		</nav>

 		<div v-if="!isEditing" 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
@@ -168,7 +166,7 @@ import {
 	ShareIcon,
 	UploadIcon,
 } from '@modrinth/assets'
-import { Button, ButtonStyled, OverflowMenu } from '@modrinth/ui'
+import { Button, ButtonStyled, OverflowMenu, StyledInput } from '@modrinth/ui'
 import { computed } from 'vue'

 import TeleportOverflowMenu from './explorer/TeleportOverflowMenu.vue'
--- a/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue
+++ b/packages/ui/src/components/servers/files/modals/FileCreateItemModal.vue
@@ -3,14 +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="createInput"
 					v-model="itemName"
-					autofocus
-					type="text"
-					class="bg-bg-input w-full rounded-lg p-4"
 					:placeholder="`e.g. ${type === 'file' ? 'config.yml' : 'plugins'}`"
-					required
+					wrapper-class="w-full"
 				/>
 				<div v-if="submitted && error" class="text-red">{{ error }}</div>
 			</div>
@@ -34,7 +31,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/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue
+++ b/packages/ui/src/components/servers/files/modals/FileMoveItemModal.vue
@@ -2,14 +2,11 @@
 	<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"
 					placeholder="e.g. /mods/modname"
-					required
+					wrapper-class="w-full"
 				/>
 			</div>
 			<div class="flex items-center gap-2 text-nowrap">
@@ -38,7 +35,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/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/components/servers/files/modals/FileRenameItemModal.vue
@@ -3,14 +3,7 @@
 		<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
-					ref="renameInput"
-					v-model="itemName"
-					autofocus
-					type="text"
-					class="bg-bg-input w-full rounded-lg p-4"
-					required
-				/>
+				<StyledInput ref="renameInput" v-model="itemName" wrapper-class="w-full" />
 				<div v-if="submitted && error" class="text-red">{{ error }}</div>
 			</div>
 			<div class="flex justify-start gap-4">
@@ -33,7 +26,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<{