chore: align base components size prop values (#2069)

antoineneff · ghostdevv · web-flow · commit 5924009aa0a8 · 2026-03-22T03:50:48.000Z
Co-authored-by: Willow (GHOST) &lt;git@willow.sh&gt;
diff --git a/app/components/Button/Base.vue b/app/components/Button/Base.vue
@@ -15,8 +15,8 @@ const props = withDefaults(
     type?: 'button' | 'submit'
     /** @default "secondary" */
     variant?: 'primary' | 'secondary'
-    /** @default "medium" */
-    size?: 'small' | 'medium'
+    /** @default "md" */
+    size?: 'sm' | 'md'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
     /** Forces the button to occupy the entire width of its container. */
@@ -27,7 +27,7 @@ const props = withDefaults(
   {
     type: 'button',
     variant: 'secondary',
-    size: 'medium',
+    size: 'md',
   },
 )
 
@@ -48,8 +48,8 @@ defineExpose({
     :class="{
       'inline-flex': !block,
       'flex': block,
-      'text-sm px-4 py-2': size === 'medium',
-      'text-xs px-2 py-0.5': size === 'small',
+      'text-sm px-4 py-2': size === 'md',
+      'text-xs px-2 py-0.5': size === 'sm',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
diff --git a/app/components/Button/ButtonBase.stories.ts b/app/components/Button/ButtonBase.stories.ts
@@ -52,7 +52,7 @@ export const Secondary: Story = {
 
 export const Small: Story = {
   args: {
-    size: 'small',
+    size: 'sm',
   },
   render: args => ({
     components: { ButtonBase },
diff --git a/app/components/Compare/FacetSelector.vue b/app/components/Compare/FacetSelector.vue
@@ -40,7 +40,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :aria-pressed="isCategoryAllSelected(category)"
           :disabled="isCategoryAllSelected(category)"
           @click="selectCategory(category)"
-          size="small"
+          size="sm"
         >
           {{ $t('compare.facets.all') }}
         </ButtonBase>
@@ -52,7 +52,7 @@ function isCategoryNoneSelected(category: string): boolean {
           :aria-pressed="isCategoryNoneSelected(category)"
           :disabled="isCategoryNoneSelected(category)"
           @click="deselectCategory(category)"
-          size="small"
+          size="sm"
         >
           {{ $t('compare.facets.none') }}
         </ButtonBase>
@@ -64,7 +64,7 @@ function isCategoryNoneSelected(category: string): boolean {
         <ButtonBase
           v-for="facet in facetsByCategory[category]"
           :key="facet.id"
-          size="small"
+          size="sm"
           :title="facet.comingSoon ? $t('compare.facets.coming_soon') : facet.description"
           :disabled="facet.comingSoon"
           :aria-pressed="isFacetSelected(facet.id)"
diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
@@ -213,7 +213,7 @@ onClickOutside(containerRef, () => {
           {{ pkg }}
         </LinkBase>
         <ButtonBase
-          size="small"
+          size="sm"
           :aria-label="
             $t('compare.selector.remove_package', {
               package: pkg === NO_DEPENDENCY_ID ? $t('compare.no_dependency.label') : pkg,
@@ -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"
diff --git a/app/components/Compare/ReplacementSuggestion.vue b/app/components/Compare/ReplacementSuggestion.vue
@@ -65,15 +65,15 @@ const docUrl = computed(() => {
     <!-- No dependency action button -->
     <ButtonBase
       v-if="variant === 'nodep' && showAction !== false"
-      size="small"
+      size="sm"
       :aria-label="$t('compare.no_dependency.add_column')"
       @click="emit('addNoDep')"
     >
       {{ $t('package.replacement.consider_no_dep') }}
     </ButtonBase>
 
     <!-- Info link -->
-    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="small">
+    <LinkBase v-else-if="docUrl" :to="docUrl" variant="button-secondary" size="sm">
       {{ $t('package.replacement.learn_more') }}
     </LinkBase>
   </div>
diff --git a/app/components/Filter/Panel.vue b/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>
@@ -328,7 +327,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             <ButtonBase
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              size="small"
+              size="sm"
               :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
diff --git a/app/components/Header/AuthModal.client.vue b/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 }}
diff --git a/app/components/Header/ConnectorModal.vue b/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" />
diff --git a/app/components/Header/SearchBox.vue b/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
diff --git a/app/components/Input/Base.stories.ts b/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 },
diff --git a/app/components/Input/Base.vue b/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 */
diff --git a/app/components/Link/Base.vue b/app/components/Link/Base.vue
@@ -13,7 +13,7 @@ const props = withDefaults(
     /** Visual style of the link */
     variant?: 'button-primary' | 'button-secondary' | 'link'
     /** Size (only applicable for button variants) */
-    size?: 'small' | 'medium'
+    size?: 'sm' | 'md'
     /** Makes the link take full width */
     block?: boolean
 
@@ -48,7 +48,7 @@ const props = withDefaults(
      */
     noNewTabIcon?: boolean
   }>(),
-  { variant: 'link', size: 'medium' },
+  { variant: 'link', size: 'md' },
 )
 
 const isLinkExternal = computed(
@@ -64,8 +64,8 @@ const isLinkAnchor = computed(
 /** size is only applicable for button like links */
 const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
-const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
-const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
+const isButtonSmall = computed(() => props.size === 'sm' && !isLink.value)
+const isButtonMedium = computed(() => props.size === 'md' && !isLink.value)
 const keyboardShortcutsEnabled = useKeyboardShortcuts()
 </script>
 
diff --git a/app/components/Link/Link.stories.ts b/app/components/Link/Link.stories.ts
@@ -69,7 +69,7 @@ export const ButtonSecondary: Story = {
 export const SmallButton: Story = {
   args: {
     variant: 'button-primary',
-    size: 'small',
+    size: 'sm',
     default: 'Small Button',
   },
 }
@@ -128,16 +128,16 @@ export const Snapshot: Story = {
         <LinkBase to="/" classicon="i-lucide:check">Link with icon</LinkBase>
         <LinkBase to="/" no-underline>Link without underline</LinkBase>
         <LinkBase to="/" disabled>Disabled Link</LinkBase>
-        
+
         <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
           <LinkBase to="/" variant="button-primary">Primary</LinkBase>
           <LinkBase to="/" variant="button-secondary">Secondary</LinkBase>
           <LinkBase to="/" variant="button-primary" disabled>Disabled</LinkBase>
           <LinkBase to="/" variant="button-primary" classicon="i-lucide:copy">With Icon</LinkBase>
         </div>
-        
+
         <div style="display: flex; gap: 1rem;">
-          <LinkBase to="/" variant="button-primary" size="small">Small Button</LinkBase>
+          <LinkBase to="/" variant="button-primary" size="sm">Small Button</LinkBase>
         </div>
         <LinkBase to="/" variant="button-primary" block>Full Width Button</LinkBase>
       </div>
diff --git a/app/components/Org/MembersPanel.vue b/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
diff --git a/app/components/Org/OperationsQueue.vue b/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
diff --git a/app/components/Org/TeamsPanel.vue b/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
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
@@ -162,7 +162,7 @@ const numberFormatter = useNumberFormatter()
       <li v-for="keyword in result.package.keywords.slice(0, 5)" :key="keyword">
         <ButtonBase
           class="pointer-events-auto"
-          size="small"
+          size="sm"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
diff --git a/app/components/Package/Keywords.vue b/app/components/Package/Keywords.vue
@@ -11,7 +11,7 @@ const { model } = useGlobalSearch()
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
         <LinkBase
           variant="button-secondary"
-          size="small"
+          size="sm"
           :to="{ name: 'search', query: { q: `keyword:${keyword}` } }"
           @click="model = `keyword:${keyword}`"
         >
diff --git a/app/components/Package/Likes.vue b/app/components/Package/Likes.vue
@@ -130,7 +130,7 @@ const likeAction = async () => {
       >
       <ButtonBase
         @click="likeAction"
-        size="medium"
+        size="md"
         :aria-label="
           likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
         "
diff --git a/app/components/Package/ListControls.vue b/app/components/Package/ListControls.vue
@@ -68,7 +68,6 @@ const showFilteredCount = computed(() => {
         :placeholder="placeholder ?? $t('package.list.filter_placeholder')"
         no-correct
         class="w-full min-w-25 ps-10"
-        size="medium"
       />
     </div>
 
diff --git a/app/components/Package/Maintainers.vue b/app/components/Package/Maintainers.vue
@@ -265,7 +265,7 @@ watch(
             :placeholder="$t('package.maintainers.username_placeholder')"
             no-correct
             class="flex-1 min-w-25 m-1"
-            size="small"
+            size="sm"
           />
           <ButtonBase type="submit" :disabled="!newOwnerUsername.trim() || isAdding">
             {{ isAdding ? '…' : $t('package.maintainers.add_button') }}
diff --git a/app/components/Package/MetricsBadges.vue b/app/components/Package/MetricsBadges.vue
@@ -66,7 +66,7 @@ const typesHref = computed(() => {
         <LinkBase
           v-if="typesHref"
           variant="button-secondary"
-          size="small"
+          size="sm"
           :to="typesHref"
           classicon="i-lucide:check"
         >
diff --git a/app/components/Package/TableRow.vue b/app/components/Package/TableRow.vue
@@ -144,7 +144,7 @@ const compactNumberFormatter = useCompactNumberFormatter()
         <ButtonBase
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          size="small"
+          size="sm"
           :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
diff --git a/app/components/Package/TrendsChart.vue b/app/components/Package/TrendsChart.vue
@@ -1657,7 +1657,6 @@ watch(selectedMetric, value => {
                 type="date"
                 :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent"
-                size="medium"
               />
             </div>
           </div>
@@ -1673,7 +1672,6 @@ watch(selectedMetric, value => {
                 type="date"
                 :max="DATE_INPUT_MAX"
                 class="w-full min-w-0 bg-transparent"
-                size="medium"
               />
             </div>
           </div>
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
diff --git a/app/components/SearchProviderToggle.client.vue b/app/components/SearchProviderToggle.client.vue
diff --git a/app/components/Terminal/Install.vue b/app/components/Terminal/Install.vue
diff --git a/app/pages/compare.vue b/app/pages/compare.vue
diff --git a/app/pages/index.vue b/app/pages/index.vue
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
diff --git a/app/pages/translation-status.vue b/app/pages/translation-status.vue
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
