chore: update BaseInput size prop values

Author: antoineneff

app/components/Compare/PackageSelector.vue

@@ -246,7 +246,6 @@ onClickOutside(containerRef, () => {
               : $t('compare.selector.search_add')
           "
           no-correct
-          size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
           ref="inputRef"

app/components/Filter/Panel.vue

@@ -246,7 +246,6 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             :placeholder="searchPlaceholder"
             autocomplete="off"
             class="w-full min-w-25"
-            size="medium"
             no-correct
           />
         </div>

app/components/Header/AuthModal.client.vue

@@ -112,7 +112,6 @@ watch(user, async newUser => {
             :placeholder="$t('auth.modal.handle_placeholder')"
             no-correct
             class="w-full"
-            size="medium"
           />
           <p v-if="errorMessage" class="text-red-500 text-xs mt-1" role="alert">
             {{ errorMessage }}

app/components/Header/ConnectorModal.vue

@@ -128,7 +128,6 @@ const executeNpmxConnectorCommand = computed(() => {
             :placeholder="$t('connector.modal.token_placeholder')"
             no-correct
             class="w-full"
-            size="medium"
           />
         </div>
 
@@ -151,7 +150,6 @@ const executeNpmxConnectorCommand = computed(() => {
               inputmode="numeric"
               autocomplete="off"
               class="w-full"
-              size="medium"
             />
 
             <div class="border-t border-border my-3" />

app/components/Header/SearchBox.vue

@@ -62,7 +62,7 @@ defineExpose({ focus })
             class="w-full min-w-25 ps-7 pe-8"
             @focus="isSearchFocused = true"
             @blur="isSearchFocused = false"
-            size="small"
+            size="sm"
             ariaKeyshortcuts="/"
           />
           <button

app/components/Input/Base.stories.ts

@@ -8,7 +8,7 @@ const meta = {
     disabled: { control: 'boolean' },
     size: {
       control: 'select',
-      options: ['small', 'medium', 'large'],
+      options: ['sm', 'md', 'lg'],
     },
     noCorrect: {
       control: 'boolean',
@@ -29,10 +29,10 @@ export const Snapshot: Story = {
   render: () => ({
     template: `
       <div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
-          <Component size="small" model-value="Small input" />
-          <Component size="medium" model-value="Medium input" />
-          <Component size="large" model-value="Large input" />
-          <Component size="large" model-value="disabled" disabled />
+          <Component size="sm" model-value="Small input" />
+          <Component size="md" model-value="Medium input" />
+          <Component size="lg" model-value="Large input" />
+          <Component size="lg" model-value="disabled" disabled />
       </div>
     `,
     components: { Component },

app/components/Input/Base.vue

@@ -6,8 +6,8 @@ const model = defineModel<string>({ default: '' })
 const props = withDefaults(
   defineProps<{
     disabled?: boolean
-    /** @default 'medium' */
-    size?: 'small' | 'medium' | 'large'
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg'
     /**
      * Prevents the browser from automatically modifying user input
      * (e.g. autocorrect, autocomplete, autocapitalize, and spellcheck).
@@ -18,7 +18,7 @@ const props = withDefaults(
     ariaKeyshortcuts?: string
   }>(),
   {
-    size: 'medium',
+    size: 'md',
     noCorrect: true,
   },
 )
@@ -47,9 +47,9 @@ defineExpose({
     @blur="emit('blur', $event)"
     class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"
     :class="{
-      'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'small',
-      'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'medium',
-      'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'large',
+      'text-xs leading-[1.2] px-2 py-2 rounded-md': size === 'sm',
+      'text-sm leading-none px-3 py-2.5 rounded-lg': size === 'md',
+      'text-base leading-[1.4] px-6 py-4 rounded-xl': size === 'lg',
     }"
     :disabled="
       /** Catching Vue render-bug of invalid `disabled=false` attribute in the final HTML */

app/components/Org/MembersPanel.vue

@@ -339,7 +339,7 @@ watch(lastExecutionTime, () => {
           :placeholder="$t('org.members.filter_placeholder')"
           no-correct
           class="w-full min-w-25 ps-7"
-          size="small"
+          size="sm"
         />
       </div>
       <div
@@ -526,7 +526,7 @@ watch(lastExecutionTime, () => {
             :placeholder="$t('org.members.username_placeholder')"
             no-correct
             class="w-full min-w-25"
-            size="small"
+            size="sm"
           />
           <div class="flex items-center gap-2">
             <SelectField

app/components/Org/OperationsQueue.vue

@@ -325,7 +325,7 @@ watch(isExecuting, executing => {
             autocomplete="one-time-code"
             spellcheck="false"
             :class="['flex-1 min-w-25', otpError ? 'border-red-500 focus:outline-red-500' : '']"
-            size="small"
+            size="sm"
             @input="otpError = ''"
           />
           <button

app/components/Org/TeamsPanel.vue

@@ -295,7 +295,6 @@ watch(lastExecutionTime, () => {
           :placeholder="$t('org.teams.filter_placeholder')"
           no-correct
           class="w-full min-w-25 ps-7"
-          size="medium"
         />
       </div>
       <div
@@ -452,7 +451,6 @@ watch(lastExecutionTime, () => {
                 :placeholder="$t('org.teams.username_placeholder')"
                 no-correct
                 class="flex-1 min-w-25"
-                size="medium"
               />
               <button
                 type="submit"
@@ -509,7 +507,6 @@ watch(lastExecutionTime, () => {
               :placeholder="$t('org.teams.team_name_placeholder')"
               no-correct
               class="flex-1 min-w-25 rounded-is-none"
-              size="medium"
             />
           </div>
           <button