chore: update BaseButton size prop values

Author: antoineneff

app/components/Button/Base.stories.ts

@@ -24,7 +24,7 @@ export const Secondary: Story = {
 export const Small: Story = {
   args: {
     default: 'Small Button',
-    size: 'small',
+    size: 'sm',
     variant: 'secondary',
   },
 }

app/components/Button/Base.vue

@@ -8,8 +8,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. */
@@ -20,7 +20,7 @@ const props = withDefaults(
   {
     type: 'button',
     variant: 'secondary',
-    size: 'medium',
+    size: 'md',
   },
 )
 
@@ -41,8 +41,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))':

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)"

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,

app/components/Compare/ReplacementSuggestion.vue

@@ -65,7 +65,7 @@ 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')"
     >

app/components/Filter/Panel.vue

@@ -328,7 +328,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)"
             >

app/components/Package/Card.vue

@@ -169,7 +169,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)"

app/components/Package/Header.vue

@@ -295,7 +295,6 @@ const likeAction = async () => {
         >
           <ButtonBase
             @click="likeAction"
-            size="medium"
             :aria-label="
               likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')
             "

app/components/Package/TableRow.vue

@@ -133,7 +133,7 @@ const allMaintainersText = computed(() => {
         <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)"

app/components/SearchProviderToggle.client.vue

@@ -28,7 +28,7 @@ useEventListener('keydown', event => {
       :aria-label="$t('settings.data_source.label')"
       :aria-expanded="isOpen"
       aria-haspopup="true"
-      size="small"
+      size="sm"
       class="border-none w-8 h-8 !px-0 justify-center"
       classicon="i-lucide:settings"
       @click="isOpen = !isOpen"